/* =====================================================================
   ATHLYTIC — PREMIUM DESIGN SYSTEM
   Zentrales, site-weit vererbtes Stylesheet.
   Eingebunden in layout.html via <link ... athlytic.css>.

   Aufbau:
     1) Design-Tokens (CSS-Variablen)
     2) Reset & Basis
     3) Hintergrund / Ambient-Layer
     4) Typografie
     5) Layout-Container
     6) Navigation (.navbar)
     7) Buttons (.btn-ath)
     8) Karten / Glass / Surfaces
     9) Formulare (.field)
    10) Badges / Pills
    11) Flash / Toast
    12) Utilities
    13) Motion (Scroll-Reveal, Hover)
    14) Reduced-Motion
   ===================================================================== */

/* ============================ 1) TOKENS ============================ */
:root {
    /* --- Farbwelt: dunkles, edles Theme --- */
    --bg-0:        #070b16;   /* tiefster Hintergrund            */
    --bg-1:        #0b1120;   /* Basis-Hintergrund               */
    --bg-2:        #111a2e;   /* erhöhte Fläche                  */

    --surface:     rgba(20, 28, 48, 0.72);   /* Glass-Karte     */
    --surface-2:   rgba(28, 38, 64, 0.55);
    --surface-solid:#121a2e;
    --border:      rgba(148, 163, 197, 0.16);
    --border-str:  rgba(148, 163, 197, 0.28);

    --text:        #eef2fb;   /* primärer Text                   */
    --text-soft:   #c2cbe0;
    --muted:       #8a96b4;   /* sekundärer Text                 */
    --muted-2:     #62708f;

    /* --- Akzente / Markenfarbe --- */
    --accent:      #6366f1;   /* indigo                          */
    --accent-2:    #22d3ee;   /* cyan                            */
    --accent-3:    #a855f7;   /* violett                         */
    --accent-soft: rgba(99, 102, 241, 0.16);

    /* Status */
    --ok:     #34d399;
    --warn:   #fbbf24;
    --err:    #f87171;
    --info:   #38bdf8;

    /* --- Gradienten --- */
    --grad-brand:  linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #22d3ee 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(99,102,241,.18), rgba(168,85,247,.12) 55%, rgba(34,211,238,.14));
    --grad-text:   linear-gradient(120deg, #c7d2fe 0%, #ffffff 40%, #a5f3fc 100%);

    /* --- Radius-Skala --- */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;
    --r-pill: 999px;

    /* --- Spacing-Skala (8pt) --- */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

    /* --- Schatten-Skala --- */
    --sh-sm: 0 1px 2px rgba(0,0,0,.4);
    --sh-md: 0 8px 24px rgba(0,0,0,.35);
    --sh-lg: 0 24px 60px rgba(0,0,0,.45);
    --sh-glow: 0 0 0 1px rgba(99,102,241,.35), 0 14px 50px rgba(99,102,241,.28);

    /* --- Motion --- */
    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --t-fast: .16s;
    --t-med:  .28s;
    --t-slow: .5s;

    /* Typo */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Sora", "Inter", sans-serif;

    --maxw: 1200px;
}

/* ============================ 2) RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--bg-1);
    color: var(--text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
body > main { flex: 1 0 auto; }

button, input, select, textarea { font-family: inherit; }

button,
input[type="button"],
input[type="submit"],
.action-btn,
.sidebar-button { touch-action: manipulation; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: #67e8f9; }

::selection { background: rgba(99,102,241,.35); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(148,163,197,.22);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,197,.4); background-clip: padding-box; }

/* ====================== 3) AMBIENT-HINTERGRUND ====================== */
/* Dezente, fixierte Farb-„Auroras" hinter allem.
   Reines Deko-Layer (pointer-events:none) — bricht nie Interaktion. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60vw 60vw at 12% -8%, rgba(99,102,241,.20), transparent 60%),
        radial-gradient(55vw 55vw at 100% 0%, rgba(34,211,238,.14), transparent 55%),
        radial-gradient(60vw 50vw at 80% 110%, rgba(168,85,247,.16), transparent 60%),
        var(--bg-1);
    pointer-events: none;
}
/* Feines Raster für „Tech"-Anmutung */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(148,163,197,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,197,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
    pointer-events: none;
}

/* ============================ 4) TYPO ============================ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--text); letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.25rem; }
p  { color: var(--text-soft); }

.text-muted  { color: var(--muted) !important; }
.text-gradient {
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-sans); font-weight: 600; font-size: .8rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2);
}

/* ========================= 5) CONTAINER ========================= */
.container-standard { max-width: var(--maxw); margin: 0 auto; padding: var(--s-6) var(--s-5); }
.container-full-width { width: 100%; margin: 0; padding: 0; }
.section-pad { padding: clamp(48px, 8vw, 110px) var(--s-5); }

/* ========================== 6) NAVBAR ========================== */
.navbar {
    position: sticky; top: 0; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    padding: 14px clamp(16px, 4vw, 44px);
    background: rgba(9, 14, 26, 0.62);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border);
}
.navbar .logo {
    font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
    color: var(--text); text-decoration: none; letter-spacing: -.02em;
    display: inline-flex; align-items: center; gap: 10px;
}
.navbar .logo::before {
    content: ""; width: 26px; height: 26px; border-radius: 8px;
    background: var(--grad-brand);
    box-shadow: 0 6px 18px rgba(99,102,241,.5);
}
.navbar .nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navbar .nav-links a {
    color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem;
    padding: 9px 15px; border-radius: var(--r-xs);
    transition: color var(--t-fast), background var(--t-fast);
}
.navbar .nav-links a:hover { color: var(--text); background: rgba(148,163,197,.08); }
.navbar .nav-links a.nav-cta {
    color: #fff; font-weight: 600;
    background: var(--grad-brand);
    box-shadow: 0 8px 22px rgba(99,102,241,.35);
}
.navbar .nav-links a.nav-cta:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.navbar .nav-links a.admin-link {
    font-weight: 600; color: var(--err); border: 1px solid rgba(248,113,113,.5);
}
.navbar .nav-links a.admin-link:hover { background: rgba(248,113,113,.14); color: #fecaca; }
.navbar .nav-toggle {
    display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text);
}
@media (max-width: 880px) {
    .navbar .nav-toggle { display: inline-block; }
    .navbar .nav-links {
        display: none; width: 100%; flex-direction: column; align-items: stretch;
        gap: 2px; margin-top: 12px;
    }
    .navbar .nav-links.open { display: flex; }
    .navbar .nav-links a { padding: 13px 12px; border-radius: var(--r-sm); }
}

/* ========================== 7) BUTTONS ========================== */
.btn-ath {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 1px solid transparent; border-radius: var(--r-sm);
    padding: 13px 24px; cursor: pointer;
    font-family: var(--font-sans); font-weight: 600; font-size: .98rem; line-height: 1;
    text-decoration: none; white-space: nowrap;
    background: var(--grad-brand); color: #fff;
    box-shadow: 0 10px 26px rgba(99,102,241,.32);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn-ath:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 16px 38px rgba(99,102,241,.42); }
.btn-ath:active { transform: translateY(0); }
.btn-ath.ghost {
    background: rgba(148,163,197,.06); color: var(--text);
    border-color: var(--border-str); box-shadow: none;
    backdrop-filter: blur(6px);
}
.btn-ath.ghost:hover { background: rgba(148,163,197,.13); color: var(--text); box-shadow: none; }
.btn-ath.subtle { background: var(--accent-soft); color: #c7d2fe; box-shadow: none; }
.btn-ath.subtle:hover { background: rgba(99,102,241,.26); color: #e0e7ff; }
.btn-ath.danger { background: linear-gradient(135deg,#ef4444,#b91c1c); box-shadow: 0 10px 26px rgba(239,68,68,.3); }
.btn-ath.success { background: linear-gradient(135deg,#10b981,#059669); box-shadow: 0 10px 26px rgba(16,185,129,.3); }
.btn-ath.warn { background: linear-gradient(135deg,#f59e0b,#d97706); box-shadow: 0 10px 26px rgba(245,158,11,.3); color:#1a1206; }
.btn-ath.sm { padding: 9px 16px; font-size: .88rem; border-radius: var(--r-xs); }
.btn-ath.lg { padding: 16px 32px; font-size: 1.05rem; }
.btn-ath.block { width: 100%; }
.btn-ath:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }

/* =========================== 8) CARDS =========================== */
.card-ath {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    padding: var(--s-6);
}
/* feiner Lichtrand oben */
.card-ath::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%);
    mix-blend-mode: screen;
}
.card-ath.hover-lift { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med), border-color var(--t-med); }
.card-ath.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--border-str); }

.panel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-5);
}

/* =========================== 9) FORMS =========================== */
.field { margin-bottom: var(--s-4); }
.field label, .form-label {
    display: block; margin-bottom: 7px; font-weight: 600; font-size: .9rem; color: var(--text-soft);
}
.field input, .field select, .field textarea,
input.ath, select.ath, textarea.ath {
    width: 100%; padding: 13px 15px;
    background: rgba(9,14,26,.55);
    border: 1px solid var(--border-str);
    border-radius: var(--r-sm);
    color: var(--text); font-size: 1rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field input::placeholder, input.ath::placeholder { color: var(--muted-2); }
.field-hint { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted-2); font-weight: 400; }
.consent-row {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 4px; font-size: .88rem; line-height: 1.5; color: var(--text-soft); cursor: pointer;
}
.consent-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.consent-row a { color: var(--accent-2); }
.field input:focus, .field select:focus, .field textarea:focus,
input.ath:focus, select.ath:focus, textarea.ath:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    background: rgba(9,14,26,.8);
}
.field input[type="file"] { padding: 11px 13px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
    margin-right: 14px; padding: 8px 14px; border: none; border-radius: var(--r-xs);
    background: var(--accent-soft); color: #c7d2fe; font-weight: 600; cursor: pointer;
}

/* Globale Lesbarkeit ALLER Formularfelder (Dark Theme) – verhindert Weiß-auf-Weiß
   auch bei Feldern ohne .field/.ath-Klasse (Suche, alte Formulare, Editor). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select, textarea {
    background: rgba(9,14,26,.55);
    color: var(--text);
    border: 1px solid var(--border-str);
    border-radius: var(--r-sm);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
select option { background: #0b1120; color: var(--text); }

/* ===== Bootstrap-Komponenten ins Dark Theme ziehen (Admin-Review, Modals,
   Formulare, Tabellen, Karten) – verhindert weisse Boxen mit hellem Text. ===== */
.card, .modal-content, .list-group-item, .dropdown-menu, .accordion-item {
    background-color: var(--surface-solid) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.card-header, .card-footer, .modal-header, .modal-footer {
    background-color: rgba(28,38,64,.45) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.form-control, .form-select, .input-group-text {
    background-color: rgba(9,14,26,.55) !important;
    color: var(--text) !important;
    border-color: var(--border-str) !important;
}
.form-control::placeholder { color: var(--muted-2) !important; }
.form-control:focus, .form-select:focus {
    background-color: rgba(9,14,26,.8) !important;
    color: var(--text) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--accent-soft) !important;
}
.table { color: var(--text); }
.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.bg-white, .bg-light { background-color: var(--surface-solid) !important; color: var(--text) !important; }
.text-dark, .text-black, .text-body { color: var(--text) !important; }
.text-muted, .text-secondary { color: var(--muted) !important; }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--accent-soft); color: var(--text); }
.modal-title, .card-title, .card-text, label { color: var(--text); }

/* ===== Legacy-Analyse-Seiten (prepare_video, interactive_analysis, calibrate,
   technique-editor) haben eigene helle Container (.main-container { background:white })
   + dunkle Überschriften. Global ins Dark Theme ziehen (mit !important, da die
   Seiten ein eigenes Inline-<style> mitbringen). ===== */
.main-container, .config-section, .container-standard, .content-box, .panel, .review-card,
.video-panel, .data-panel, .list-container, .column, .video-section, .controls-section,
.phase-block, .comparison-selector-wrapper, .sync-controls-wrapper, .marker-frame-card,
.technique-points-list, .analysis-placeholder, .step-box, .status-card,
.sidebar, .sidebar-section, .beschreibung-box, .controls, .ergebnis-item, .modal-content {
    background-color: var(--surface-solid) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
}
.config-section, .data-section-header, .comparison-selector-wrapper, .sync-controls-wrapper { background-color: rgba(28,38,64,.45) !important; }
/* Überschriften/Text in diesen Legacy-Containern hell (sie setzen oft color:#1c1e21) */
.video-panel h1, .video-panel h2, .video-panel h3, .data-panel h1, .data-panel h2, .data-panel h3,
.video-section h1, .video-section h2, .video-section h3, .controls-section h1, .controls-section h2, .controls-section h3,
.list-container h1, .list-container h2, .list-container h3, .column h1, .column h2, .column h3,
.video-panel p, .data-panel p, .video-section p, .controls-section p, .column p, .list-container p,
.video-panel label, .data-panel label, .video-section label, .controls-section label, .column label, .list-container label {
    color: var(--text) !important;
}
.main-container h1, .main-container h2, .main-container h3, .main-container h4,
.main-container p, .main-container label, .main-container li, .main-container td, .main-container th,
.container-standard h1, .container-standard h2, .container-standard h3, .container-standard p, .container-standard label {
    color: var(--text) !important;
}
.main-container .explanation-text, .main-container small, .main-container .text-muted { color: var(--muted) !important; }

/* Auth-Karte (Login/Register/Reset) */
.auth-shell { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card h2 { margin-top: 0; }
.auth-foot { margin-top: 18px; text-align: center; color: var(--muted); font-size: .92rem; }

/* ======================= 10) BADGES / PILLS ======================= */
.badge-ath {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--r-pill);
    font-size: .76rem; font-weight: 700; letter-spacing: .02em;
    border: 1px solid var(--border-str); color: var(--text-soft);
    background: rgba(148,163,197,.08);
}
.badge-ath.ok   { color: #6ee7b7; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.12); }
.badge-ath.warn { color: #fcd34d; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.12); }
.badge-ath.err  { color: #fca5a5; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.12); }
.badge-ath.info { color: #7dd3fc; border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.12); }
.badge-ath.brand{ color: #c7d2fe; border-color: rgba(99,102,241,.45); background: var(--accent-soft); }

/* ======================= 11) FLASH / TOAST ======================= */
.flash-message {
    padding: 14px 18px; margin-bottom: 14px; border-radius: var(--r-sm);
    border: 1px solid var(--border-str);
    background: var(--surface); color: var(--text);
    backdrop-filter: blur(10px);
    display: flex; align-items: center; gap: 10px;
}
.flash-message::before { content: ""; width: 6px; align-self: stretch; border-radius: 999px; }
.flash-message.success { border-color: rgba(52,211,153,.45); }
.flash-message.success::before { background: var(--ok); }
.flash-message.error   { border-color: rgba(248,113,113,.45); }
.flash-message.error::before { background: var(--err); }
.flash-message.warning { border-color: rgba(251,191,36,.45); }
.flash-message.warning::before { background: var(--warn); }
.flash-message.info    { border-color: rgba(56,189,248,.45); }
.flash-message.info::before { background: var(--info); }

#toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 2000;
    display: flex; flex-direction: column; gap: 10px; width: 90%; max-width: 360px;
}
.toast-notification {
    padding: 15px 20px; border-radius: var(--r-sm); color: var(--text);
    font-size: 1rem; border: 1px solid var(--border-str);
    background: var(--surface-solid); box-shadow: var(--sh-lg);
    opacity: 0; transform: translateX(110%);
    transition: all .45s var(--ease);
}
.toast-notification.show { opacity: 1; transform: translateX(0); }
.toast-notification.success { border-left: 4px solid var(--ok); }
.toast-notification.error   { border-left: 4px solid var(--err); }
.toast-notification.warning { border-left: 4px solid var(--warn); }
.toast-notification.info    { border-left: 4px solid var(--info); }

/* ===== Bootstrap-Modal an Dark-Theme angleichen (results/dashboard nutzen es) ===== */
.modal-content {
    background: var(--surface-solid); color: var(--text);
    border: 1px solid var(--border-str); border-radius: var(--r-md);
}
.modal-header, .modal-footer { border-color: var(--border); }
.modal .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.modal .form-control {
    background: rgba(9,14,26,.6); border: 1px solid var(--border-str); color: var(--text);
}

/* ========================= 12) UTILITIES ========================= */
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--s-6) 0; }

.glass-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--border);
    backdrop-filter: blur(10px); color: var(--text-soft); font-size: .85rem; font-weight: 600;
}

/* ===================== 13) MOTION / REVEAL ===================== */
[data-reveal] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }

@keyframes ath-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-10px); }
}
.float-slow { animation: ath-float 7s ease-in-out infinite; }

/* ===================== 14) REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ========================= 15) FOOTER ========================= */
.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: rgba(7, 11, 22, 0.6);
    padding: 22px var(--s-5);
}
.site-footer__inner {
    max-width: 1120px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
}
.site-footer__brand { font-weight: 700; color: var(--text-soft); letter-spacing: .02em; }
.site-footer__links { display: flex; gap: 18px; }
.site-footer__links a { color: var(--muted); font-size: .9rem; text-decoration: none; }
.site-footer__links a:hover { color: var(--text); }
.site-footer__copy { margin-left: auto; color: var(--muted-2); font-size: .85rem; }
@media (max-width: 560px) {
    .site-footer__copy { margin-left: 0; width: 100%; }
}