/* Финалка — общий каркас статического сайта (шапка, подвал, страницы) */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, figure, ul, ol, blockquote { margin: 0; }
img, svg { display: block; }
a { color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); background-clip: padding-box; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

.wrap { max-width: var(--container); margin: 0 auto; padding-left: clamp(16px, 4vw, 24px); padding-right: clamp(16px, 4vw, 24px); box-sizing: border-box; }

/* ---------- Шапка ---------- */
.s-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.1) blur(0px); border-bottom: 1px solid var(--border); }
.s-header__in { display: flex; align-items: center; gap: 12px 24px; min-height: 64px; padding: 10px clamp(16px, 4vw, 24px); max-width: var(--container); margin: 0 auto; box-sizing: border-box; }
.s-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.s-logo svg { width: 28px; height: 28px; border-radius: 7px; }
.s-logo-img { height: 26px; width: auto; display: block; }
.s-footer .s-logo-img { height: 24px; }
.s-word { font: 800 17px/1 var(--font-logo); letter-spacing: .02em; color: var(--text); }
.s-nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; flex-wrap: wrap; }
.s-nav a { padding: 10px 12px; border-radius: var(--r-full); font: 500 15px/1 var(--font-sans); color: var(--text-secondary); text-decoration: none; }
.s-nav a:hover { background: var(--surface-2); color: var(--text); }
.s-nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.s-header__cta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.s-login { padding: 10px 14px; font: 500 15px/1 var(--font-sans); color: var(--text); text-decoration: none; border-radius: var(--r-full); }
.s-login:hover { background: var(--surface-2); }
.s-burger, .s-burger-cb { display: none; }

@media (max-width: 920px) {
  .s-nav { order: 4; width: 100%; margin: 0; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; display: none; }
  .s-nav a { padding: 12px; font-size: 16px; }
  .s-burger { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text); cursor: pointer; }
  .s-burger-cb:checked ~ .s-header__in .s-nav { display: flex; }
  .s-header__in { flex-wrap: wrap; }
  .s-login { display: none; }
}

/* ---------- Hero страниц ---------- */
.page-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 56px); }
.eyebrow { display: block; margin: 0 0 14px; font: 500 13px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--text-secondary); }
.page-hero h1 { font: 700 clamp(34px, 5.4vw, 56px)/1.08 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; max-width: 16ch; }
.page-hero .lead { margin-top: 20px; font: 400 clamp(17px, 2.2vw, 20px)/1.6 var(--font-sans); color: var(--text-secondary); max-width: 62ch; text-wrap: pretty; }

.section { padding: clamp(48px, 6vw, 80px) 0; }
.section--sand { background: var(--sand); }
.section--night { background: var(--night); color: var(--paper-bright); }
.section--forest { background: var(--forest); color: #F5F3EF; }
.sec-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head h2 { font: 600 clamp(26px, 3.6vw, 36px)/1.15 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.sec-head p { margin-top: 14px; font: 400 17px/1.6 var(--font-sans); color: var(--text-secondary); text-wrap: pretty; }
.section--night .sec-head p, .section--forest .sec-head p { color: rgba(245,243,239,.8); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--card-padding); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card.lift:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 14px 34px rgba(28,25,23,.1); }
.card h3 { font: 500 22px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.card p { margin-top: 10px; font: 400 15px/1.6 var(--font-sans); color: var(--text-secondary); }
.card .mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text); margin-bottom: 18px; }
.card .mark svg { width: 22px; height: 22px; }
.card a.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font: 500 15px/1 var(--font-sans); color: var(--text); text-decoration: none; }
.card a.more svg { width: 16px; height: 16px; transition: transform .15s; }
.card a.more:hover svg { transform: translateX(3px); }

.kicker { font: 500 13px/1 var(--font-mono); letter-spacing: .02em; color: var(--text-secondary); margin-bottom: 14px; }

/* ---------- Подвал ---------- */
.s-footer { background: var(--night); color: var(--paper-bright); }
.s-footer__in { max-width: var(--container); margin: 0 auto; padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 24px) 32px; box-sizing: border-box; }
.s-footer__top { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.s-footer__brand { flex: 2 1 280px; max-width: 360px; margin-right: auto; display: flex; flex-direction: column; gap: 14px; }
.s-footer .s-word { color: var(--paper-bright); }
.s-footer__tag { font: 400 15px/1.6 var(--font-sans); color: var(--control-muted); }
.s-footer nav ul { padding: 0; list-style: none; display: flex; flex-direction: column; }
.s-footer nav a, .s-footer__legal a { display: inline-flex; align-items: center; min-height: 40px; font: 500 14px/1.4 var(--font-sans); color: var(--control-muted); text-decoration: none; }
.s-footer nav a:hover, .s-footer__legal a:hover { color: var(--paper-bright); }
.s-footer__col-h { font: 500 13px/1 var(--font-mono); letter-spacing: .02em; color: rgba(247,247,245,.5); margin-bottom: 8px; }
.s-footer__legal { display: flex; flex-direction: column; }
.s-footer__support { margin-top: 12px; font: 400 14px/1.5 var(--font-sans); color: var(--control-muted); }
.s-footer__support a { color: var(--paper-bright); }
.s-footer__bar { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.s-footer__bar p { font: 400 14px/1.5 var(--font-sans); color: var(--control-muted); }

/* ---------- Утилиты ---------- */
.stat { font: 700 clamp(40px,5vw,64px)/1 var(--font-display); letter-spacing: -0.03em; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); font: 500 13px/1 var(--font-mono); color: var(--text-secondary); }
.rail { position: relative; padding-left: 20px; }
.rail::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--rail, var(--participant-teal)); }
.td-task { border-left: 4px solid var(--warn-raw); }