:root{
    --green: #1db954; /* ярко-зелёный */
    --green-600: #17a34a;
    --green-100: #daf2e5;
    --footer: #fff;
    --bg: #ffffff;
    --text: #1f2d2b;
    --muted: #6b7d76;
    --border: #e2eee7;
    --focus: #0ea5e9;

    --radius: 12px;
    --container: 1200px;
}

*{ box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}

.container{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
}

.visually-hidden{
    position:absolute !important;
    height:1px; width:1px;
    overflow:hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}

.skip-link{
    position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{ left:16px; top:16px; background:#fff; padding:8px 12px; border-radius:8px; outline:2px solid var(--focus); }

/* Header */
.site-header{
    position: sticky; top:0; z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.header__inner{
    display:flex; align-items:center; gap:16px;
    min-height:64px;
}
.brand{
    display:flex; align-items:center; gap:10px;
    color: var(--text); text-decoration:none; font-weight:700;
}
.brand__logo{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; background: #fff; border-radius:50%; }
.brand__logo__small{ display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; background: #fff; border-radius:50%; }
.brand__text{ letter-spacing: 0.5px; }

/* Nav */
.nav-toggle{
    margin-left:auto;
    background:transparent; border:0; cursor:pointer;
    width:40px; height:36px; display:none; /* скрыт по умолчанию (десктоп) */
    flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.nav-toggle__bar{
    width:24px; height:2px; background:var(--text); display:block;
}

.nav{
    position: relative;
    margin-left:auto;
}
.nav__list{ list-style:none; padding:0; margin:0; display:flex; gap:14px; }
.nav__item{ position:relative; }
.nav__link{
    display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
    text-decoration:none; color:var(--text);
    white-space: nowrap;
}
.nav__item.is-active > .nav__link{ background:var(--green-100); color:#0b3d2e; }

/* Подменю: изначально скрыты */
.nav__list--level-2, .nav__list--level-3{
    display:none;
    position:absolute; top:100%; left:0; z-index: 20;
    background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px; min-width:220px;
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
}

/* Hover/focus на десктопе: без зазора */
@media (hover:hover) and (min-width: 901px){
    .nav__item:hover > .nav__list--level-2,
    .nav__item:focus-within > .nav__list--level-2 { display:block; }

    .nav__list--level-2 .nav__item:hover > .nav__list--level-3,
    .nav__list--level-2 .nav__item:focus-within > .nav__list--level-3 {
        display:block; top:0; left:100%;
    }

    /* кнопка раскрытия подменю скрыта на десктопе */
    .nav__submenu-toggle{ display:none; }
}

/* Кнопка раскрытия подменю (для мобильных) */
.nav__submenu-toggle{
    border:0; background:transparent; width:22px; height:22px; padding:0; margin-left:4px; cursor:pointer;
    position:relative;
}
.nav__submenu-toggle::before{
    content:"";
    border: solid var(--muted); border-width: 0 2px 2px 0; display: inline-block; padding:3px;
    transform: rotate(45deg); position:absolute; top:7px; left:8px;
}

/* Mobile menu */
@media (max-width: 900px){
    .nav-toggle{ display:inline-flex; } /* показываем бургер */
    .nav{
        position: absolute; left:0; right:0; top:64px; background:#fff;
        border-bottom:1px solid var(--border);
        display:none;
    }
    .nav.is-open{ display:block; }
    .nav__list{ flex-direction:column; gap:0; padding:8px; }
    .nav__link{ width:100%; padding:12px 10px; }
    .nav__list--level-2, .nav__list--level-3{
        position: static; box-shadow:none; border:0; display:none; padding-left:12px; margin:4px 0 8px;
    }
    .nav__item.expanded > .nav__list--level-2,
    .nav__item.expanded > .nav__list--level-3{ display:block; }
}

/* Page */
.page-header{ padding:24px 0 8px; }
.page-title{ margin:0 0 6px; font-size: clamp(22px, 2vw + 16px, 34px); }
.page-subtitle{ margin:0; color:var(--muted); }
.page-content{ padding: 12px 0 40px; }

/* Footer */
.site-footer{
    background: var(--footer);
    border-top:1px solid var(--border);
    margin-top:40px;
    height: 600px;
}
.footer__inner{
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap:24px; padding:24px 0;
}
.footer__copy{ color:var(--muted); }
.footer__title{ margin:0 0 10px; font-size:16px; }
.contacts{ list-style:none; padding:0; margin:0; }
.contacts a{ color: var(--text); text-decoration:none; }
.footer__nav ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
@media (max-width: 800px){
    .footer__inner{ grid-template-columns: 1fr; }
}

td{
    border: solid 1px silver;
    text-align:center;
}