/* IT Friends — общая дизайн-система основного сайта: спокойный профессиональный стиль, светлая и тёмная темы */

:root {
  --yellow: #FDE018; --yellow-soft: #FEF6C3; --yellow-strong: #F5D90A;
  --ink: #0F172A; --ink-2: #334155; --muted: #64748B;
  --paper: #FFFFFF; --paper-2: #F6F7F9; --line: #E2E8F0;
  --dark: #0F172A; --dark-2: #1E293B;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 28px -12px rgba(15,23,42,.14);
  --shadow-lg: 0 2px 4px rgba(15,23,42,.06), 0 18px 40px -14px rgba(15,23,42,.22);
  --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}
:root[data-theme="dark"] {
  --ink: #E8EDF5; --ink-2: #C3CCDA; --muted: #8C98AD;
  --paper: #131C2E; --paper-2: #0B1220; --line: #25314A;
  --yellow-soft: rgba(253,224,24,.10);
  --dark: #070C17; --dark-2: #111A2C;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -14px rgba(0,0,0,.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8EDF5; --ink-2: #C3CCDA; --muted: #8C98AD;
    --paper: #131C2E; --paper-2: #0B1220; --line: #25314A;
    --yellow-soft: rgba(253,224,24,.10);
    --dark: #070C17; --dark-2: #111A2C;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -14px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important; background: var(--paper-2) !important; color: var(--ink); font-size: 16px; line-height: 1.65; letter-spacing: -0.003em; }
body > div[style*="width:100%"] { background: var(--paper-2) !important; }
.disp, h1, h2, h3 { font-family: 'Inter', system-ui, sans-serif !important; letter-spacing: -0.02em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid #3B82F6; outline-offset: 2px; border-radius: 6px; }
.dots { display: none !important; }
.section-pad { padding: 88px 0; }
.lead { font-size: 18px !important; color: var(--ink-2); }

/* ---------- Шапка ---------- */
body > div > header { background: color-mix(in srgb, var(--paper) 86%, transparent) !important; backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line) !important; }
body > div > header .wrap { height: 68px !important; }
header .disp { font-size: 17px !important; font-weight: 700 !important; }
header nav { gap: 4px !important; }
header nav a { font-weight: 500 !important; font-size: 14.5px !important; color: var(--ink-2); padding: 8px 13px; border-radius: 8px; }
header nav a:hover { background: var(--paper-2); color: var(--ink); }
.theme-toggle { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: inline-grid; place-items: center; color: var(--ink-2); font-size: 17px; line-height: 1; padding: 0; transition: background .15s; flex: none; }
.theme-toggle:hover { background: var(--paper-2); }
.theme-toggle::before { content: "☾"; }
:root[data-theme="dark"] .theme-toggle::before { content: "☀"; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle::before { content: "☀"; } }

/* ---------- Кнопки ---------- */
.pill { border: 1px solid transparent !important; border-radius: 10px !important; padding: 12px 22px !important; font-family: 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; font-size: 14.5px !important; box-shadow: 0 1px 2px rgba(15,23,42,.12) !important; transition: background .15s, box-shadow .15s, transform .1s, border-color .15s !important; }
.pill::after { display: none !important; }
.pill:hover { transform: none !important; }
.pill:active { transform: translateY(1px) !important; box-shadow: none !important; }
.pill-solid { background: var(--yellow) !important; color: #131210 !important; }
.pill-solid:hover { background: var(--yellow-strong) !important; color: #131210 !important; box-shadow: 0 6px 16px -6px rgba(245,217,10,.7) !important; }
.pill-ghost { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line) !important; box-shadow: none !important; }
.pill-ghost:hover { background: var(--paper-2) !important; border-color: color-mix(in srgb, var(--ink) 25%, var(--line)) !important; box-shadow: none !important; }
.pill-dark { background: var(--dark) !important; color: #fff !important; border-color: transparent !important; }
.pill-dark:hover { background: var(--dark-2) !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(15,23,42,.6) !important; }

/* ---------- Мелкие элементы ---------- */
.ribbon { clip-path: none !important; background: transparent !important; color: var(--muted) !important; padding: 0 !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: .08em !important; text-transform: uppercase; display: inline-flex !important; align-items: center; gap: 8px; }
.ribbon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(253,224,24,.28); }
.chip { border: 1px solid var(--line) !important; border-radius: 999px !important; padding: 6px 14px !important; background: var(--paper) !important; font-weight: 500 !important; font-size: 13.5px !important; box-shadow: none !important; color: var(--ink-2); }
.hardcard { border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; background: var(--paper) !important; border-radius: 16px !important; }
.tilt-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.tilt-card:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-lg) !important; border-color: color-mix(in srgb, var(--ink) 18%, var(--line)) !important; }

/* ---------- Заголовки секций ---------- */
section h2.disp { font-size: clamp(28px, 3.2vw, 40px) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.15 !important; }
section h3.disp { font-weight: 650 !important; font-size: 18px !important; }
.hero-title { font-size: clamp(36px, 5vw, 56px) !important; font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.07 !important; }
.hero-title span, .hero-title mark { background: none; box-shadow: inset 0 -0.16em 0 rgba(253,224,24,.95); color: inherit; }

/* ---------- Главный блок ---------- */
section.hero-m { background: radial-gradient(1100px 380px at 88% -10%, rgba(253,224,24,.26), transparent 62%), linear-gradient(180deg, var(--paper), var(--paper-2)) !important; border-bottom: 1px solid var(--line) !important; }
section.hero-m .wrap { padding-top: 84px !important; padding-bottom: 84px !important; }
section.hero-m .chip { background: var(--paper) !important; }
section.hero-m img { border-radius: 0; }
section.hero-m div[style*="overflow:hidden; background:#fff"] { border: 1px solid var(--line) !important; box-shadow: var(--shadow-lg) !important; border-radius: 18px !important; background: var(--paper) !important; }
.strip-m { display: none !important; }

/* ---------- Секции ---------- */
#directions, section.who-m { background: linear-gradient(180deg, #0F172A, #0B1220) !important; }
#directions .chip { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.14) !important; color: #E2E8F0 !important; font-weight: 500 !important; justify-content: center; padding: 12px 16px !important; }
#directions h2, section.who-m h2 { color: #fff !important; }
#directions .ribbon, section.who-m .ribbon { color: #94A3B8 !important; background: transparent !important; }
section.who-m div[style*="border:1px solid rgba(255,255,255"] { background: rgba(255,255,255,.04); }
section.who-m .disp { color: var(--yellow) !important; font-weight: 600 !important; }
div[style*="width:48px; height:48px"], div[style*="width:52px; height:52px"] { background: var(--paper-2) !important; border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: 12px !important; }
div[style*="width:48px; height:48px"] svg [stroke] { stroke: var(--ink) !important; }
div[style*="width:48px; height:48px"] svg [fill]:not([fill="none"]) { fill: var(--ink) !important; }
div[style*="width:52px; height:52px"] span { color: var(--ink) !important; font-family: var(--mono) !important; font-weight: 500 !important; font-size: 17px !important; }
:root[data-theme="dark"] .hardcard svg [stroke="#131210"], :root[data-theme="dark"] .social-btn svg [stroke="#131210"] { stroke: #E8EDF5; }
:root[data-theme="dark"] .hardcard svg [fill="#131210"], :root[data-theme="dark"] .social-btn svg [fill="#131210"] { fill: #E8EDF5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hardcard svg [stroke="#131210"] { stroke: #E8EDF5; }
  :root:not([data-theme="light"]) .hardcard svg [fill="#131210"] { fill: #E8EDF5; }
}
#showcase { background: var(--paper-2) !important; border-color: var(--line) !important; }

/* ---------- FAQ ---------- */
.faq-item { border-radius: 12px !important; transition: border-color .15s, background .15s; }
.faq-item:hover { background: var(--paper) !important; transform: none !important; box-shadow: var(--shadow) !important; border-color: color-mix(in srgb, var(--ink) 20%, var(--line)) !important; }
.faq-item.open { background: var(--paper) !important; border-color: color-mix(in srgb, var(--yellow-strong) 70%, var(--line)) !important; }
.faq-question { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 16px !important; }
.faq-arrow path { stroke: var(--ink) !important; }

/* ---------- Финальный блок ---------- */
#join { background: radial-gradient(900px 300px at 50% 0%, rgba(253,224,24,.14), transparent 65%), linear-gradient(180deg, #0F172A, #0B1220) !important; border-top: 1px solid var(--line) !important; }
#join h2 { color: #fff !important; font-size: clamp(30px, 4vw, 44px) !important; }
#join .ribbon { color: #94A3B8 !important; }
#join .pill-dark { background: var(--yellow) !important; color: #131210 !important; }
#join .pill-dark:hover { background: var(--yellow-strong) !important; color: #131210 !important; }
.social-btn { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: none !important; }
.social-btn:hover { background: rgba(255,255,255,.14) !important; transform: none !important; box-shadow: none !important; }
.social-btn svg [stroke="#131210"] { stroke: #E2E8F0 !important; }
.social-btn svg [fill="#131210"] { fill: #E2E8F0 !important; }
.social-btn:hover svg [stroke="#131210"] { stroke: var(--yellow) !important; }
.social-btn:hover svg [fill="#131210"] { fill: var(--yellow) !important; }

/* ---------- Подвал, окна ---------- */
footer { background: var(--dark) !important; border-top: 1px solid rgba(255,255,255,.08); }
footer .disp { font-weight: 700 !important; }
footer a { color: #94A3B8 !important; font-weight: 500 !important; }
footer a:hover { color: #fff !important; }
#submit-panel { border: 1px solid var(--line) !important; box-shadow: var(--shadow-lg) !important; border-radius: 16px !important; background: var(--paper) !important; color: var(--ink); }
#submit-panel input, #submit-panel textarea { border: 1px solid color-mix(in srgb, var(--ink) 18%, var(--line)) !important; border-radius: 10px !important; background: var(--paper); color: var(--ink); font-family: 'Inter', sans-serif !important; }
#submit-panel h3 { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; }

/* ---------- Страница проекта ---------- */
.content h2, .content h3 { font-family: 'Inter', sans-serif !important; font-weight: 700; }
.content pre { background: #0F172A !important; color: #E6EDF3 !important; border: 1px solid #1E293B; font-family: var(--mono); font-size: 13.5px; }
.content code { font-family: var(--mono) !important; }
.content blockquote { border-left: 4px solid var(--yellow-strong) !important; background: var(--paper-2) !important; }
.content img { border: 1px solid var(--line) !important; border-radius: 14px !important; }

/* =====================================================================
   GLASS — стекломорфизм: матовые панели поверх живого градиентного фона
   ===================================================================== */
:root {
  --bg-base: #E9ECFF;
  --paper: rgba(255,255,255,.55); --paper-2: rgba(255,255,255,.34);
  --line: rgba(255,255,255,.78); --edge: rgba(49,46,129,.10);
  --ink: #0F1330; --ink-2: #353A5E; --muted: #5C6388;
  --shadow: 0 8px 32px -10px rgba(49,46,129,.22), inset 0 1px 0 rgba(255,255,255,.75);
  --shadow-lg: 0 22px 60px -16px rgba(49,46,129,.34), inset 0 1px 0 rgba(255,255,255,.85);
  --blur: blur(22px) saturate(180%);
  --grad-a: #0F1330; --grad-b: #5B5BD6;
  --blob-1: rgba(253,224,24,.60); --blob-2: rgba(139,125,255,.50); --blob-3: rgba(56,189,248,.40); --blob-4: rgba(244,114,182,.34);
}
:root[data-theme="dark"] {
  --bg-base: #060913;
  --paper: rgba(255,255,255,.06); --paper-2: rgba(255,255,255,.035);
  --line: rgba(255,255,255,.13); --edge: rgba(255,255,255,.08);
  --ink: #EEF1FF; --ink-2: #C5CBE6; --muted: #8E96B8;
  --shadow: 0 8px 32px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
  --shadow-lg: 0 22px 60px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
  --grad-a: #FFFFFF; --grad-b: #A5B4FC;
  --blob-1: rgba(253,224,24,.26); --blob-2: rgba(99,102,241,.66); --blob-3: rgba(34,211,238,.34); --blob-4: rgba(217,70,239,.38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #060913;
    --paper: rgba(255,255,255,.06); --paper-2: rgba(255,255,255,.035);
    --line: rgba(255,255,255,.13); --edge: rgba(255,255,255,.08);
    --ink: #EEF1FF; --ink-2: #C5CBE6; --muted: #8E96B8;
    --shadow: 0 8px 32px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
    --shadow-lg: 0 22px 60px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
    --grad-a: #FFFFFF; --grad-b: #A5B4FC;
    --blob-1: rgba(253,224,24,.26); --blob-2: rgba(99,102,241,.66); --blob-3: rgba(34,211,238,.34); --blob-4: rgba(217,70,239,.38);
  }
}

/* живой фон */
html { background: var(--bg-base); }
body { background: transparent !important; }
body > div[style*="width:100%"] { background: transparent !important; }
body::before {
  content: ""; position: fixed; inset: -18%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 8% 6%, var(--blob-1), transparent 70%),
    radial-gradient(42% 40% at 92% 12%, var(--blob-2), transparent 70%),
    radial-gradient(40% 38% at 72% 92%, var(--blob-3), transparent 70%),
    radial-gradient(36% 34% at 10% 84%, var(--blob-4), transparent 70%);
  animation: glass-drift 32s ease-in-out infinite alternate;
}
@keyframes glass-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-3%, 2.5%, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* стеклянные поверхности */
.hardcard, .chip, .faq-item, .theme-toggle, #submit-panel, .social-btn, .pill-ghost,
div[style*="width:48px; height:48px"], div[style*="width:52px; height:52px"],
section.who-m div[style*="border:1px solid rgba(255,255,255"] {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.hardcard, .faq-item, #submit-panel { background: var(--paper) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; border-radius: 22px !important; }
.hardcard svg [stroke="#131210"] { stroke: var(--ink); } .hardcard svg [fill="#131210"] { fill: var(--ink); }
.tilt-card:hover { transform: translateY(-5px) !important; box-shadow: var(--shadow-lg) !important; border-color: rgba(253,224,24,.75) !important; }
.chip { background: var(--paper) !important; border: 1px solid var(--line) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4) !important; color: var(--ink-2); }

/* шапка */
body > div > header { background: var(--paper) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line) !important; box-shadow: 0 8px 30px -14px rgba(49,46,129,.25); }
header nav a { color: var(--ink-2); }
header nav a:hover { background: rgba(253,224,24,.30); color: var(--ink); }
.theme-toggle { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.theme-toggle:hover { background: rgba(253,224,24,.30); }

/* кнопки */
.pill-solid { background: linear-gradient(180deg, #FFEB55, #FDE018) !important; box-shadow: 0 10px 26px -10px rgba(253,224,24,.9), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.pill-solid:hover { background: linear-gradient(180deg, #FFF07A, #FDE018) !important; box-shadow: 0 14px 34px -10px rgba(253,224,24,1), inset 0 1px 0 rgba(255,255,255,.8) !important; transform: translateY(-1px) !important; }
.pill-ghost { background: var(--paper) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; color: var(--ink) !important; }
.pill-ghost:hover { background: var(--paper-2) !important; transform: translateY(-1px) !important; box-shadow: var(--shadow-lg) !important; }
.pill-dark { background: rgba(15,19,48,.88) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #fff !important; box-shadow: 0 12px 30px -12px rgba(15,19,48,.7), inset 0 1px 0 rgba(255,255,255,.18) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.pill-dark:hover { background: rgba(15,19,48,1) !important; transform: translateY(-1px) !important; }
:root[data-theme="dark"] .pill-dark { background: rgba(255,255,255,.10) !important; }
:root[data-theme="dark"] .pill-dark:hover { background: rgba(255,255,255,.18) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill-dark { background: rgba(255,255,255,.10) !important; } }

/* надписи */
.ribbon { color: var(--muted) !important; }
.ribbon::before { box-shadow: 0 0 0 4px rgba(253,224,24,.35), 0 0 14px 2px rgba(253,224,24,.7); }
.hero-title { background: linear-gradient(120deg, var(--grad-a) 35%, var(--grad-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
section h2.disp { color: var(--ink); }

/* секции */
section.hero-m { background: transparent !important; border-bottom: 0 !important; }
section.hero-m .wrap { padding-top: 96px !important; padding-bottom: 96px !important; }
section.hero-m div[style*="overflow:hidden; background:#fff"] { padding: 10px; background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 28px !important; box-shadow: var(--shadow-lg) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
section.hero-m div[style*="overflow:hidden; background:#fff"] img { border-radius: 20px; }
section.hero-m .chip { background: var(--paper) !important; }
#directions, section.who-m, #showcase { background: var(--paper-2) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
#directions h2, section.who-m h2, #join h2 { color: var(--ink) !important; }
#directions p { color: var(--ink-2) !important; }
#directions .ribbon, section.who-m .ribbon, #join .ribbon { color: var(--muted) !important; }
#directions .chip { background: var(--paper) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; font-weight: 600 !important; border-radius: 16px !important; transition: transform .18s, background .18s, border-color .18s; }
#directions .chip:hover { transform: translateY(-3px); background: rgba(253,224,24,.30) !important; border-color: rgba(253,224,24,.8) !important; }
section.who-m div[style*="border:1px solid rgba(255,255,255"] { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 20px !important; box-shadow: var(--shadow); }
section.who-m div[style*="border:1px solid rgba(255,255,255"] p { color: var(--ink-2) !important; }
section.who-m .disp { color: var(--ink) !important; font-weight: 700 !important; }
section.who-m .disp::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); margin-right: 9px; box-shadow: 0 0 12px 2px rgba(253,224,24,.8); vertical-align: 1px; }
div[style*="width:48px; height:48px"], div[style*="width:52px; height:52px"] { background: linear-gradient(135deg, rgba(253,224,24,.55), rgba(253,224,24,.12)) !important; border: 1px solid var(--line) !important; box-shadow: 0 8px 22px -10px rgba(253,224,24,.9), inset 0 1px 0 rgba(255,255,255,.7) !important; border-radius: 14px !important; }
div[style*="width:48px; height:48px"] svg [stroke] { stroke: #131210 !important; }
div[style*="width:48px; height:48px"] svg [fill]:not([fill="none"]) { fill: #131210 !important; }
div[style*="width:52px; height:52px"] span { color: #131210 !important; }
p[style*="color:var(--ink-2)"], .lead { color: var(--ink-2); }

/* FAQ */
.faq-item:hover { background: var(--paper-2) !important; border-color: rgba(253,224,24,.7) !important; box-shadow: var(--shadow-lg) !important; }
.faq-item.open { background: var(--paper) !important; border-color: rgba(253,224,24,.8) !important; }

/* финальный блок — одна большая стеклянная панель */
#join { background: transparent !important; border-top: 0 !important; padding-top: 40px !important; }
#join > .wrap { background: var(--paper); border: 1px solid var(--line); border-radius: 36px; box-shadow: var(--shadow-lg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: 72px 32px 44px !important; max-width: 980px; position: relative; overflow: hidden; }
#join > .wrap::before { content: ""; position: absolute; width: 520px; height: 320px; left: 50%; top: -160px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(253,224,24,.55), transparent); filter: blur(10px); pointer-events: none; z-index: -1; }
#join .pill-dark { background: linear-gradient(180deg, #FFEB55, #FDE018) !important; color: #131210 !important; border: 1px solid transparent !important; box-shadow: 0 12px 30px -10px rgba(253,224,24,.95), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.social-btn { background: var(--paper) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }
.social-btn:hover { background: rgba(253,224,24,.35) !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-lg) !important; }
.social-btn svg [stroke="#131210"] { stroke: var(--ink) !important; } .social-btn svg [fill="#131210"] { fill: var(--ink) !important; }
.social-btn:hover svg [stroke="#131210"] { stroke: #131210 !important; } .social-btn:hover svg [fill="#131210"] { fill: #131210 !important; }

/* подвал */
footer { background: var(--paper) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--line); margin-top: 40px; }
footer span.disp, footer .disp { color: var(--ink) !important; }
footer a { color: var(--ink-2) !important; } footer a:hover { color: var(--ink) !important; text-decoration: underline; }
footer span[style*="color"] { color: var(--muted) !important; }
#submit-panel input, #submit-panel textarea { background: var(--paper-2); border: 1px solid var(--line) !important; color: var(--ink); }
#cookie-banner { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); background: rgba(15,19,48,.82) !important; }

/* страница проекта */
.content blockquote { background: var(--paper) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.content pre { background: rgba(8,12,30,.92) !important; border: 1px solid rgba(255,255,255,.12); }
.content img { border: 1px solid var(--line) !important; box-shadow: var(--shadow); }

/* светящиеся шары за главной иллюстрацией */
section.hero-m::before { content: ""; position: absolute; width: 480px; height: 480px; right: 4%; top: 50%; transform: translateY(-55%); border-radius: 50%;
  background: conic-gradient(from 200deg, #FDE018, #8B7DFF, #38BDF8, #F472B6, #FDE018); filter: blur(64px); opacity: .55; z-index: 0; pointer-events: none; animation: orb-spin 24s linear infinite; }
section.hero-m::after { content: ""; position: absolute; width: 220px; height: 220px; left: 38%; bottom: 6%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(139,125,255,.35) 60%, transparent 70%); filter: blur(2px); opacity: .55; z-index: 0; pointer-events: none; }
@keyframes orb-spin { to { transform: translateY(-55%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { section.hero-m::before { animation: none; } }
:root[data-theme="dark"] section.hero-m::after { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) section.hero-m::after { display: none; } }