/* HeroUI: общая палитра всех страниц. Меняйте цвета здесь. */
@font-face {
    font-family: "Manrope";
    src: url("/static/fonts/manrope.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
    --accent: #004eba;
    --accent-foreground: #ffffff;
    --surface: #ffffff;
    --background: #ffffff;
    --border: #e1e7f0;
    --foreground: #004eba;
    --muted: #4d6b94;
    --surface-foreground: var(--foreground);
    --surface-secondary: #f6f8fc;
    --overlay: var(--surface);
    --overlay-foreground: var(--foreground);
    --default: var(--surface-secondary);
    --default-foreground: var(--foreground);
    --accent-soft: #e6f0ff;
    --accent-soft-foreground: var(--accent);
    --field-background: var(--surface-secondary);
    --field-foreground: var(--foreground);
    --field-placeholder: var(--muted);
    --field-border: var(--border);
    --field-shadow: none;
    --focus: var(--accent);
    --link: var(--accent);
    --separator: var(--border);
    --backdrop: color-mix(in srgb, var(--accent) 22%, transparent);
    --surface-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 5%, transparent);
    --overlay-shadow: 0 24px 64px color-mix(in srgb, var(--accent) 15%, transparent);
    --radius: 0.75rem;
    --field-radius: 0.875rem;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; background: var(--surface); border-radius: 12px; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
a { text-decoration: none; }
a:not(.button):focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.page { max-width: 1224px; margin: auto; padding: 0 40px; }
.site-header, .site-header nav, .brand, .site-footer { display: flex; align-items: center; }
.site-header { min-height: 112px; justify-content: space-between; border-bottom: 1px solid var(--border); }
.brand { gap: 10px; font-size: 32px; font-weight: 700; letter-spacing: -1.5px; }
.site-header nav { gap: 32px; font-size: 14px; }
.site-header .button--secondary { --button-bg: var(--surface-secondary); --button-bg-hover: var(--accent-soft); }
.about-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.button { font-weight: 500; }
.button span { margin-left: 15px; font-size: 20px; }
.site-footer { justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 24px 0; border-top: 1px solid var(--border); }
.site-footer .brand { font-size: 24px; }
.site-footer p { margin: 0; color: var(--muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 800px) { .page { padding: 0 24px; } }
@media (max-width: 640px) {
    .page { padding: 0 20px; }
    .site-header { min-height: 84px; }
    .brand { font-size: 28px; }
    .brand img { width: 30px; height: 30px; }
    .site-header nav { gap: 12px; }
    .about-link { display: none; }
    .site-footer p { flex-basis: 100%; text-align: left; line-height: 1.5; }
}