/* =====================================================================
   StrikeCard — ОБЩИЙ design-system (CONTRACT.md §6/§7).
   Только то, что едино для ВСЕХ страниц: токены :root, reset, контейнеры,
   кнопки, шапка/нав/футер, типографика-база. Постраничные стили живут в
   /assets/pages/<page>.css и подключаются через $pageCss в layout.php.
   Редактировать этот файл могут только foundation (F-00) и consolidation (F-05).
   ===================================================================== */

:root {
    --bg:           #0f141e;
    --panel:        #111111;
    --panel-2:      #1b1b1b;
    --panel-3:      #171c26;
    --accent:       #7d32ff;
    --accent-2:     #7c3aed;
    --accent-light: #a855f7;
    --accent-grad:  linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    --text:         #ffffff;
    --text-muted:   #aaaaaa;
    --text-dim:     #d6d6d6;
    --border:       rgba(255, 255, 255, 0.08);
    --radius-btn:   12px;
    --radius-card:  20px;
    --radius-card-sm: 16px;
    --accent-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
    --maxw:         1200px;
    --header-h:     84px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-light); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
section { scroll-margin-top: var(--header-h); }

/* ---------- Layout containers ---------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 20px;
}
.container--narrow { max-width: 620px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: var(--radius-btn);
    padding: 16px 28px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--accent {
    background: var(--accent-grad);
    box-shadow: var(--accent-shadow);
}
.btn--accent:hover { transform: translateY(-1px); }
.btn--lg { padding: 22px 40px; font-size: 19px; }
.btn--sm { padding: 12px 22px; font-size: 15px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---------- Header (общая шапка) ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    background: rgba(15, 20, 30, 1);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(6px);
}
.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.brand__name {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}
.main-nav__link {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    opacity: .9;
}
.main-nav__link:hover { color: var(--accent); opacity: 1; text-decoration: none; }
.header__cta { margin-left: 8px; }

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 30px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    justify-content: center;
}
.burger span {
    display: block;
    height: 3px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Footer (T457-faithful: doc-links + copyright) ---------- */
.site-footer {
    background: var(--bg);
    padding: 45px 0;
}
.footer-docs-wrap { text-align: center; }
.footer-docs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 0;
}
.footer-docs__item a {
    color: #55575b;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
}
.footer-docs__item a:hover { color: #6b6d70; text-decoration: none; }
.footer-copyright {
    color: #6b6d70;
    font-family: var(--font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    padding-top: 20px;
}

/* =====================================================================
   Responsive — ТОЛЬКО общая оболочка (шапка/нав/бургер/футер).
   Постраничная адаптивка — в /assets/pages/<page>.css.
   ===================================================================== */
@media (max-width: 980px) {
    :root { --header-h: 64px; }
    .burger { display: flex; }
    .main-nav {
        position: fixed;
        top: var(--header-h);
        right: 0;
        width: min(320px, 80vw);
        height: calc(100vh - var(--header-h));
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        background: var(--panel);
        border-left: 1px solid var(--border);
        padding: 28px 24px;
        transform: translateX(100%);
        transition: transform .25s ease;
    }
    .main-nav.is-open { transform: none; }
    .header__cta { margin-left: 0; width: 100%; }
}

@media (max-width: 767px) {
    .footer-docs { gap: 14px; }
    .footer-docs__item a { font-size: 15px; }
}