/* ==========================================================================
   Массажист.ру — стили лендингов (общий файл).
   Светлая + ночная тема. Ночная включается через [data-sp-night="1"]
   или через классы/атрибуты темы сайта.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* ---------- Прогресс-бар ---------- */
.sp-progress { position:fixed; left:0; top:0; right:0; height:3px; z-index:9999; pointer-events:none; }
.sp-progress i { display:block; height:100%; background:linear-gradient(90deg,#2f7d6d,#d9a521); transform-origin:left; transform:scaleX(0); }

/* ---------- Hero ---------- */
.static-page .sp-hero {
    position:relative; overflow:hidden;
    background-image:linear-gradient(120deg,#eef8f5,#fff8e6,#e4f3ef,#eef8f5);
    background-size:300% 300%;
    animation:sp-bg 16s ease infinite;
}
@keyframes sp-bg {
    0%   { background-position:0% 50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}
.sp-hero > .container { position:relative; z-index:1; }

/* ---------- Пятна в hero ---------- */
.sp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .38;
    pointer-events: none;
    animation: sp-float 14s ease-in-out infinite;
}
.sp-blob.b1 {
    width: 340px; height: 340px;
    background: #8fd3c0;
    top: -90px; left: -70px;
}
.sp-blob.b2 {
    width: 300px; height: 300px;
    background: #f2d9a0;
    bottom: -100px; right: -60px;
    animation-delay: -6s;
}
@keyframes sp-float {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(30px,24px) scale(1.08); }
}

/* ---------- Плавающие эмодзи ---------- */
.sp-emoji {
    position:absolute; z-index:0; font-size:2.2rem; opacity:.55;
    pointer-events:none;
    animation:sp-bob 6s ease-in-out infinite;
}
@keyframes sp-bob {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-18px) rotate(8deg); }
}

/* ---------- Бейдж ---------- */
.sp-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 16px; border-radius:999px;
    background:#e4f3ef; color:#1f5f52;
    font-weight:600; font-size:.95rem; margin-bottom:14px;
    border:1px solid transparent;
}
.sp-dot { width:9px; height:9px; border-radius:50%; background:#2f7d6d; animation:sp-pulse 1.8s ease-out infinite; }
@keyframes sp-pulse {
    0%   { box-shadow:0 0 0 0 rgba(47,125,109,.55); }
    100% { box-shadow:0 0 0 12px rgba(47,125,109,0); }
}

/* ---------- Ротор слов ---------- */
.sp-rotor-line { font-size:1.3rem; font-weight:600; margin:0 0 12px; }
.sp-rotor { display:inline-block; color:#2f7d6d; font-weight:700; transition:opacity .35s ease, transform .35s ease; }
.sp-rotor.out { opacity:0; transform:translateY(10px); }

/* ---------- Схема пути ---------- */
.sp-flow { display:flex; align-items:stretch; gap:0; margin:18px 0 6px; flex-wrap:nowrap; }
.sp-flow-item {
    flex:1 1 0; min-width:0; background:#fff; border:1px solid #dfe8e6;
    border-radius:14px; padding:14px 12px; text-align:center;
    font-size:.93rem; line-height:1.4; font-weight:600;
    transition:transform .25s, box-shadow .25s;
    animation:sp-glow 6s ease-in-out infinite;
    animation-delay:calc(var(--i,0) * .9s);
}
.sp-flow-item:hover { transform:translateY(-4px); box-shadow:0 10px 22px rgba(47,125,109,.14); }
.sp-flow-item.last { background:#2f7d6d; color:#fff; border-color:#2f7d6d; }
@keyframes sp-glow {
    0%, 70%, 100% { box-shadow:0 0 0 0 rgba(47,125,109,0); }
    10%           { box-shadow:0 0 0 6px rgba(47,125,109,.22); }
}
.sp-flow-arrow {
    flex:0 0 28px; align-self:center; height:3px; margin:0 2px; border-radius:2px;
    background:linear-gradient(90deg,#cfe6e0 0%,#2f7d6d 50%,#cfe6e0 100%);
    background-size:200% 100%;
    animation:sp-flow-move 2s linear infinite;
}
@keyframes sp-flow-move {
    from { background-position:200% 0; }
    to   { background-position:0 0; }
}

/* ---------- Навигация по странице ---------- */
.sp-nav { display:flex; gap:8px; overflow-x:auto; padding:4px 0 6px; scrollbar-width:thin; }
.sp-nav a {
    white-space:nowrap; padding:7px 14px; border-radius:999px;
    background:#f4f8f7; color:#1f5f52; text-decoration:none;
    font-weight:600; font-size:.92rem;
    transition:background .2s, color .2s, transform .2s;
}
.sp-nav a:hover, .sp-nav a.on { background:#2f7d6d; color:#fff; transform:translateY(-2px); }

/* ---------- Бегущая строка ---------- */
.sp-marquee {
    overflow:hidden; white-space:nowrap; margin:14px 0 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.sp-marquee-track { display:inline-flex; gap:12px; animation:sp-marquee 45s linear infinite; }
.sp-marquee:hover .sp-marquee-track { animation-play-state:paused; }
.sp-marquee span { padding:8px 18px; border-radius:999px; background:#e4f3ef; color:#1f5f52; font-weight:600; font-size:.95rem; }
@keyframes sp-marquee {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }
}

/* ---------- Статистика ---------- */
.sp-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; }
.sp-stat {
    position:relative; overflow:hidden;
    background:#f4f8f7; border-radius:12px; padding:18px 20px; text-align:center;
    transition:transform .25s, box-shadow .25s;
}
.sp-stat:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(47,125,109,.14); }
.sp-stat b { display:block; font-size:2rem; line-height:1.2; color:#2f7d6d; }
.sp-stat span { color:#55615f; font-size:.95rem; }

/* ---------- Текстовые блоки ---------- */
.sp-prose p, .sp-prose ul, .sp-prose ol { max-width:none!important; }
.sp-prose p { margin:0 0 14px; line-height:1.7; }
.sp-lead { font-size:1.1rem; }
.sp-anchor { scroll-margin-top:16px; }

.sp-two { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; }

.sp-card, .sp-box {
    position:relative; overflow:hidden;
    background:#fff; border:1px solid #dfe8e6;
    border-radius:14px; padding:18px 20px;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.sp-card:hover, .sp-box:hover { transform:translateY(-6px); box-shadow:0 14px 30px rgba(47,125,109,.16); border-color:#2f7d6d; }
.sp-card::before, .sp-box::before, .sp-stat::before {
    content:""; position:absolute; inset:0;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(47,125,109,.15), transparent 70%);
    opacity:0; transition:opacity .3s; pointer-events:none;
}
.sp-card:hover::before, .sp-box:hover::before, .sp-stat:hover::before { opacity:1; }
.sp-card > *, .sp-box > * { position:relative; }
.sp-card b { display:block; margin-bottom:6px; font-size:1.05rem; color:#1f5f52; }
.sp-card p { margin:0; line-height:1.6; }
.sp-box h3 { margin:0 0 8px; }
.sp-ico { display:inline-block; font-size:1.5rem; margin-right:8px; vertical-align:-3px; transition:transform .35s ease; }
.sp-card:hover .sp-ico { transform:scale(1.28) rotate(-8deg); }

.sp-check { list-style:none; margin:10px 0; padding:0; }
.sp-check li { position:relative; padding:4px 0 4px 26px; line-height:1.55; }
.sp-check li::before { content:"✓"; position:absolute; left:0; top:4px; color:#2f7d6d; font-weight:700; }

/* ---------- Вкладки ---------- */
.sp-tabs-nav { display:none; gap:8px; flex-wrap:wrap; margin:8px 0 14px; }
.sp-js .sp-tabs-nav { display:flex; }
.sp-tab-btn {
    border:1px solid #cfe0db; background:#fff; color:#1f5f52;
    border-radius:999px; padding:9px 18px;
    font-weight:600; cursor:pointer; font-family:inherit; font-size:.95rem;
    transition:background .2s, color .2s, transform .2s;
}
.sp-tab-btn:hover { transform:translateY(-2px); }
.sp-tab-btn.on { background:#2f7d6d; color:#fff; border-color:#2f7d6d; }
.sp-panel { margin-bottom:14px; }
.sp-panel[hidden] { display:none!important; }
.sp-panel.sp-anim { animation:sp-pop .45s ease; }
@keyframes sp-pop {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:none; }
}
.sp-panel h3 { margin:0 0 6px; }

/* ---------- Таймлайн ---------- */
.sp-tl { list-style:none; margin:10px 0; padding:0; counter-reset:s; }
.sp-tl li { position:relative; padding:0 0 22px 62px; counter-increment:s; }
.sp-tl li::before {
    content:counter(s);
    position:absolute; left:0; top:0;
    width:42px; height:42px; border-radius:50%;
    background:#2f7d6d; color:#fff; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 5px #e4f3ef;
}
.sp-tl li::after {
    content:""; position:absolute; left:20px; top:46px; bottom:4px;
    width:2px; background:linear-gradient(#2f7d6d,#cfe6e0);
}
.sp-tl li:last-child { padding-bottom:0; }
.sp-tl li:last-child::after { display:none; }
.sp-tl b { display:block; margin-bottom:4px; font-size:1.08rem; }
.sp-tl p { margin:0; line-height:1.6; }
.sp-js .sp-tl li { opacity:0; transform:translateX(-18px); }
.sp-js .sp-tl.sp-in li {
    opacity:1; transform:none;
    transition:opacity .5s ease, transform .5s ease;
    transition-delay:calc(var(--i,0) * 140ms);
}

/* ---------- Чек-лист + кольцо ---------- */
.sp-ready { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:22px; align-items:center; }
.sp-ready-list label {
    display:flex; gap:10px; align-items:flex-start;
    padding:8px 10px; border-radius:8px; cursor:pointer;
    transition:background .2s; line-height:1.45;
}
.sp-ready-list label:hover { background:#f4f8f7; }
.sp-ready-list input { margin-top:3px; accent-color:#2f7d6d; width:18px; height:18px; flex:0 0 auto; }
.sp-ring { text-align:center; }
.sp-ring svg { width:130px; height:130px; transform:rotate(-90deg); }
.sp-ring circle { fill:none; stroke-width:9; }
.sp-ring .bg { stroke:#e4f3ef; }
.sp-ring .fg { stroke:#2f7d6d; stroke-linecap:round; stroke-dasharray:213.63; stroke-dashoffset:213.63; transition:stroke-dashoffset .5s ease; }
.sp-ring-num { margin-top:-84px; height:84px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; color:#2f7d6d; }
.sp-ring-msg { margin-top:6px; font-size:.92rem; color:#3d4f4b; min-height:2.6em; }

/* ---------- Чипсы ---------- */
.sp-chips { margin:10px 0 4px; }
.sp-chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:999px;
    background:#e9eeed; color:#7a8785;
    font-weight:600; margin:4px 6px 4px 0; font-size:.93rem;
    transition:background .25s, color .25s, transform .25s;
}
.sp-chip small { font-weight:500; opacity:.85; }
.sp-chip.ok { background:#2f7d6d; color:#fff; }
.sp-chip:hover { transform:translateY(-3px) rotate(-2deg); }
.sp-js .sp-chips .sp-chip { opacity:0; transform:scale(.7); }
.sp-js .sp-chips.sp-in .sp-chip {
    opacity:1; transform:none;
    transition:opacity .45s ease, transform .45s cubic-bezier(.2,1.4,.4,1);
    transition-delay:calc(var(--i,0) * 45ms);
}
.sp-js .sp-chips.sp-in .sp-chip:hover { transform:translateY(-3px) rotate(-2deg); transition-delay:0s; }

/* ---------- Таблицы ---------- */
.sp-table-wrap { overflow-x:auto; margin:14px 0; }
.sp-table { border-collapse:collapse; width:100%; min-width:520px; }
.sp-table th, .sp-table td { border:1px solid #d9e2e0; padding:10px 14px; text-align:left; vertical-align:top; line-height:1.55; }
.sp-table th { background:#f4f8f7; }
.sp-table tbody tr { transition:background .2s; }
.sp-table tbody tr:hover td { background:#f7fbfa; }

/* ---------- Заметки ---------- */
.sp-note {
    background:#fff8e6; border-left:3px solid #d9a521;
    border-radius:6px; padding:12px 16px;
    font-size:.97rem; color:#5b4a14;
    margin-top:12px; line-height:1.6;
}
.sp-note a { color:#7a5b00; }
.sp-subtitle { margin:22px 0 8px; font-size:1.25rem; }

/* ---------- FAQ ---------- */
.sp-faq-tools { display:none; margin:0 0 10px; text-align:right; }
.sp-js .sp-faq-tools { display:block; }
.sp-link-btn { background:none; border:0; color:#2f7d6d; font-weight:600; cursor:pointer; padding:4px 0; font-family:inherit; font-size:.95rem; text-decoration:underline; }
.sp-faq details {
    background:#fff; border:1px solid #dfe8e6; border-radius:10px;
    margin-bottom:10px; padding:2px 16px;
    transition:box-shadow .2s, border-color .2s;
}
.sp-faq details:hover { border-color:#9ccfc3; }
.sp-faq details[open] { box-shadow:0 8px 20px rgba(47,125,109,.12); border-color:#2f7d6d; }
.sp-faq summary { cursor:pointer; font-weight:600; padding:12px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.sp-faq summary::-webkit-details-marker { display:none; }
.sp-faq summary::after { content:"+"; font-size:1.4rem; line-height:1; color:#2f7d6d; transition:transform .25s; }
.sp-faq details[open] summary::after { transform:rotate(45deg); }
.sp-faq p { margin:0 0 14px; line-height:1.65; max-width:none; }

/* ---------- Кнопка с бликом ---------- */
.sp-cta-btn { position:relative; overflow:hidden; animation:sp-btn-pulse 2.4s ease-in-out infinite; }
.sp-cta-btn::after {
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg); animation:sp-shine 3.2s ease-in-out infinite;
}
@keyframes sp-btn-pulse {
    0%, 100% { box-shadow:0 0 0 0 rgba(47,125,109,.45); }
    50%      { box-shadow:0 0 0 14px rgba(47,125,109,0); }
}
@keyframes sp-shine {
    0%, 60% { left:-60%; }
    100%    { left:130%; }
}

/* ---------- Заголовки с линией ---------- */
.static-page .section-title { position:relative; padding-bottom:10px; }
.static-page .section-title::after {
    content:""; position:absolute; left:0; bottom:0;
    height:3px; width:0; border-radius:2px;
    background:linear-gradient(90deg,#2f7d6d,#d9a521);
    transition:width .8s ease .2s;
}
.static-page .section-title.sp-in::after { width:72px; }
html:not(.sp-js) .static-page .section-title::after { width:72px; }

/* ---------- Компактные отступы ---------- */
.static-page .lp-hero { padding-top:28px!important; padding-bottom:20px!important; margin:0!important; }
.static-page .section { padding-top:28px!important; padding-bottom:28px!important; margin:0!important; }
.static-page .section-cta { padding-top:36px!important; padding-bottom:36px!important; }
.static-page .section-title { margin:0 0 14px!important; max-width:none!important; }
.static-page h1, .static-page h2, .static-page h3 { max-width:none!important; }

/* ---------- Reveal ---------- */
.sp-js .sp-reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0s); }
.sp-js .sp-reveal.sp-in { opacity:1; transform:none; }

/* ---------- Адаптив ---------- */
@media (max-width:800px){
    .sp-flow { flex-direction:column; }
    .sp-flow-arrow {
        flex:0 0 22px; width:3px; height:22px; margin:2px 0;
        background:linear-gradient(180deg,#cfe6e0 0%,#2f7d6d 50%,#cfe6e0 100%);
        background-size:100% 200%; animation:sp-flow-move-v 2s linear infinite;
    }
    @keyframes sp-flow-move-v {
        from { background-position:0 200%; }
        to   { background-position:0 0; }
    }
    .sp-emoji { display:none; }
}
@media (max-width:700px){
    .static-page .section { padding-top:20px!important; padding-bottom:20px!important; }
    .sp-ready { grid-template-columns:1fr; }
    .sp-ring { order:-1; }
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .static-page .sp-hero,.sp-blob,.sp-emoji,.sp-dot,.sp-cta-btn,.sp-cta-btn::after,.sp-flow-item,.sp-flow-arrow,.sp-marquee-track,.sp-panel.sp-anim{animation:none}
    .sp-js .sp-reveal,.sp-js .sp-tl li,.sp-js .sp-chips .sp-chip{opacity:1;transform:none;transition:none}
    .sp-card,.sp-box,.sp-stat,.sp-nav a,.sp-tab-btn,.sp-chip,.sp-flow-item,.sp-ring .fg{transition:none}
}

/* ==========================================================================
   НОЧНАЯ ТЕМА — через [data-sp-night="1"], который ставит main.js.
   ========================================================================== */

.static-page[data-sp-night="1"] {
    color-scheme: dark;
    background: #141b1a !important;
    color: #e1ebe8 !important;
}

.static-page[data-sp-night="1"] .sp-badge { background: #1b2523 !important; color: #e1ebe8 !important; border-color: #2f403c !important; }
.static-page[data-sp-night="1"] .sp-nav a { background: #1b2523 !important; color: #e1ebe8 !important; border-color: #2f403c !important; }
.static-page[data-sp-night="1"] .sp-stat { background: #1b2523 !important; }
.static-page[data-sp-night="1"] .sp-card,
.static-page[data-sp-night="1"] .sp-box { background: #1b2523 !important; border-color: #2f403c !important; }
.static-page[data-sp-night="1"] .sp-faq details { background: #1b2523 !important; border-color: #2f403c !important; }
.static-page[data-sp-night="1"] .sp-flow-item { background: #1b2523 !important; border-color: #2f403c !important; color: #e1ebe8 !important; }
.static-page[data-sp-night="1"] .sp-tab-btn { background: #1b2523 !important; color: #e1ebe8 !important; border-color: #2f403c !important; }
.static-page[data-sp-night="1"] .sp-chip { background: #1b2523 !important; color: #a9b8b5 !important; border-color: #2f403c !important; }
.static-page[data-sp-night="1"] .sp-marquee span { background: #1b2523 !important; color: #e1ebe8 !important; }

.static-page[data-sp-night="1"] .sp-nav a:hover,
.static-page[data-sp-night="1"] .sp-nav a.on,
.static-page[data-sp-night="1"] .sp-tab-btn.on,
.static-page[data-sp-night="1"] .sp-flow-item.last,
.static-page[data-sp-night="1"] .sp-chip.ok { background: #2f7d6d !important; border-color: #2f7d6d !important; color: #fff !important; }

.static-page[data-sp-night="1"] .sp-hero { background-image: linear-gradient(120deg, #16312c, #2b2615, #1b3a33, #16312c) !important; }

.static-page[data-sp-night="1"] .sp-blob {
    opacity: .18 !important;
    filter: blur(60px) !important;
    border-radius: 50% !important;
}
.static-page[data-sp-night="1"] .sp-blob.b1 { background: #4a8a78 !important; }
.static-page[data-sp-night="1"] .sp-blob.b2 { background: #8a7440 !important; }
.static-page[data-sp-night="1"] .sp-emoji { opacity: .25 !important; }

.static-page[data-sp-night="1"] h1,
.static-page[data-sp-night="1"] h2,
.static-page[data-sp-night="1"] h3,
.static-page[data-sp-night="1"] .section-title,
.static-page[data-sp-night="1"] .sp-card b { color: #f1f7f5 !important; }
.static-page[data-sp-night="1"] .sp-stat b { color: #5cc4ad !important; }
.static-page[data-sp-night="1"] .sp-rotor,
.static-page[data-sp-night="1"] .sp-check li::before,
.static-page[data-sp-night="1"] .sp-faq summary::after,
.static-page[data-sp-night="1"] .sp-ring-num,
.static-page[data-sp-night="1"] .sp-link-btn { color: #5cc4ad !important; }

.static-page[data-sp-night="1"] p,
.static-page[data-sp-night="1"] li,
.static-page[data-sp-night="1"] td,
.static-page[data-sp-night="1"] th,
.static-page[data-sp-night="1"] summary,
.static-page[data-sp-night="1"] label,
.static-page[data-sp-night="1"] .sp-stat span,
.static-page[data-sp-night="1"] .sp-card p,
.static-page[data-sp-night="1"] .sp-box p,
.static-page[data-sp-night="1"] .sp-tl p,
.static-page[data-sp-night="1"] .sp-faq p,
.static-page[data-sp-night="1"] .sp-ring-msg { color: #c3d2ce !important; }

.static-page[data-sp-night="1"] a { color: #7fd6c2 !important; }

.static-page[data-sp-night="1"] .sp-ring .bg { stroke: #22322e !important; }
.static-page[data-sp-night="1"] .sp-ring .fg { stroke: #5cc4ad !important; }

.static-page[data-sp-night="1"] .sp-tl li::before { background: #2f7d6d !important; box-shadow: 0 0 0 5px #16312c !important; }
.static-page[data-sp-night="1"] .sp-tl li::after { background: linear-gradient(#2f7d6d, #1f2b29) !important; }

.static-page[data-sp-night="1"] .sp-table th { background: #222e2b !important; color: #f1f7f5 !important; }
.static-page[data-sp-night="1"] .sp-table th,
.static-page[data-sp-night="1"] .sp-table td { border-color: #2f403c !important; }
.static-page[data-sp-night="1"] .sp-table tbody tr:hover td { background: #1f2b29 !important; }

.static-page[data-sp-night="1"] .sp-note { background: #3a3220 !important; color: #f0dc9a !important; border-left-color: #d9a521 !important; }
.static-page[data-sp-night="1"] .sp-note a { color: #ffd36b !important; }

.static-page[data-sp-night="1"] .section-alt { background: #17201e !important; }

.static-page[data-sp-night="1"] .sp-ready-list label:hover { background: #1f2b29 !important; }

.static-page[data-sp-night="1"] .section-title::after { background: linear-gradient(90deg, #5cc4ad, #d9a521) !important; }

/* ---- Запасной вариант: классы/атрибуты темы сайта ---- */
html[data-theme="dark"] .static-page,
html.dark .static-page,
body.dark .static-page,
html.dark-mode .static-page,
body.dark-mode .static-page,
html.theme-night .static-page,
body.theme-night .static-page {
    color-scheme: dark;
    background: #141b1a !important;
    color: #e1ebe8 !important;
}
html[data-theme="dark"] .static-page .sp-badge,
html.dark .static-page .sp-badge,
body.dark .static-page .sp-badge,
body.theme-night .static-page .sp-badge { background:#1b2523!important; color:#e1ebe8!important; border-color:#2f403c!important; }

html[data-theme="dark"] .static-page .sp-nav a,
html.dark .static-page .sp-nav a,
body.dark .static-page .sp-nav a,
body.theme-night .static-page .sp-nav a { background:#1b2523!important; color:#e1ebe8!important; border-color:#2f403c!important; }

html[data-theme="dark"] .static-page .sp-stat,
html.dark .static-page .sp-stat,
body.dark .static-page .sp-stat,
body.theme-night .static-page .sp-stat { background:#1b2523!important; }

html[data-theme="dark"] .static-page .sp-card,
html.dark .static-page .sp-card,
body.dark .static-page .sp-card,
body.theme-night .static-page .sp-card,
html[data-theme="dark"] .static-page .sp-box,
html.dark .static-page .sp-box,
body.dark .static-page .sp-box,
body.theme-night .static-page .sp-box { background:#1b2523!important; border-color:#2f403c!important; }

html[data-theme="dark"] .static-page .sp-flow-item,
html.dark .static-page .sp-flow-item,
body.dark .static-page .sp-flow-item,
body.theme-night .static-page .sp-flow-item { background:#1b2523!important; border-color:#2f403c!important; color:#e1ebe8!important; }

html[data-theme="dark"] .static-page .sp-tab-btn,
html.dark .static-page .sp-tab-btn,
body.dark .static-page .sp-tab-btn,
body.theme-night .static-page .sp-tab-btn { background:#1b2523!important; color:#e1ebe8!important; border-color:#2f403c!important; }

html[data-theme="dark"] .static-page .sp-chip,
html.dark .static-page .sp-chip,
body.dark .static-page .sp-chip,
body.theme-night .static-page .sp-chip { background:#1b2523!important; color:#a9b8b5!important; border-color:#2f403c!important; }

html[data-theme="dark"] .static-page .sp-faq details,
html.dark .static-page .sp-faq details,
body.dark .static-page .sp-faq details,
body.theme-night .static-page .sp-faq details { background:#1b2523!important; border-color:#2f403c!important; }

html[data-theme="dark"] .static-page .sp-hero,
html.dark .static-page .sp-hero,
body.dark .static-page .sp-hero,
body.theme-night .static-page .sp-hero { background-image:linear-gradient(120deg,#16312c,#2b2615,#1b3a33,#16312c)!important; }

html[data-theme="dark"] .static-page .sp-blob,
html.dark .static-page .sp-blob,
body.dark .static-page .sp-blob,
body.theme-night .static-page .sp-blob { opacity:.18!important; filter:blur(60px)!important; border-radius:50%!important; }
html[data-theme="dark"] .static-page .sp-blob.b1,
html.dark .static-page .sp-blob.b1,
body.dark .static-page .sp-blob.b1,
body.theme-night .static-page .sp-blob.b1 { background:#4a8a78!important; }
html[data-theme="dark"] .static-page .sp-blob.b2,
html.dark .static-page .sp-blob.b2,
body.dark .static-page .sp-blob.b2,
body.theme-night .static-page .sp-blob.b2 { background:#8a7440!important; }

html[data-theme="dark"] .static-page h1,
html[data-theme="dark"] .static-page h2,
html[data-theme="dark"] .static-page h3,
html[data-theme="dark"] .static-page .section-title,
html.dark .static-page h1,
html.dark .static-page h2,
html.dark .static-page h3,
html.dark .static-page .section-title,
body.dark .static-page h1,
body.dark .static-page h2,
body.dark .static-page h3,
body.dark .static-page .section-title,
body.theme-night .static-page h1,
body.theme-night .static-page h2,
body.theme-night .static-page h3,
body.theme-night .static-page .section-title { color:#f1f7f5!important; }

html[data-theme="dark"] .static-page p,
html[data-theme="dark"] .static-page li,
html[data-theme="dark"] .static-page td,
html[data-theme="dark"] .static-page th,
html[data-theme="dark"] .static-page summary,
html.dark .static-page p,
html.dark .static-page li,
html.dark .static-page td,
html.dark .static-page th,
html.dark .static-page summary,
body.dark .static-page p,
body.dark .static-page li,
body.dark .static-page td,
body.dark .static-page th,
body.dark .static-page summary,
body.theme-night .static-page p,
body.theme-night .static-page li,
body.theme-night .static-page td,
body.theme-night .static-page th,
body.theme-night .static-page summary { color:#c3d2ce!important; }

html[data-theme="dark"] .static-page a,
html.dark .static-page a,
body.dark .static-page a,
body.theme-night .static-page a { color:#7fd6c2!important; }

html[data-theme="dark"] .static-page .sp-table th,
html.dark .static-page .sp-table th,
body.dark .static-page .sp-table th,
body.theme-night .static-page .sp-table th { background:#222e2b!important; }

html[data-theme="dark"] .static-page .sp-table th,
html[data-theme="dark"] .static-page .sp-table td,
html.dark .static-page .sp-table th,
html.dark .static-page .sp-table td,
body.dark .static-page .sp-table th,
body.dark .static-page .sp-table td,
body.theme-night .static-page .sp-table th,
body.theme-night .static-page .sp-table td { border-color:#2f403c!important; }

html[data-theme="dark"] .static-page .sp-note,
html.dark .static-page .sp-note,
body.dark .static-page .sp-note,
body.theme-night .static-page .sp-note { background:#3a3220!important; color:#f0dc9a!important; border-left-color:#d9a521!important; }

html[data-theme="dark"] .static-page .section-alt,
html.dark .static-page .section-alt,
body.dark .static-page .section-alt,
body.theme-night .static-page .section-alt { background:#17201e!important; }
/* ---------- Соцсети: заголовок и кнопка «Открыть» ---------- */
.sp-social-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}
.sp-social-head .section-title { margin: 0 !important; }
.sp-social-go {
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    opacity: .75;
    white-space: nowrap;
    border-bottom: 1px dashed rgba(128,128,128,.5);
    padding-bottom: 1px;
}
.sp-social-go:hover { opacity: 1; }
.sp-social-go::after { content: " ↗"; font-size: .85em; opacity: .8; }

/* ---------- Сетка карточек со скриншотами ---------- */
.sp-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
    margin: 14px 0 4px;
}
.sp-shot {
    background: rgba(128,128,128,.06);
    border: 1px dashed rgba(128,128,128,.45);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}
.sp-shot-img {
    background: rgba(128,128,128,.10);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}
.sp-shot-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    border-radius: 6px;
}
.sp-shot-title { font-weight: 600; font-size: .98rem; }
.sp-shot-hint { font-size: .86rem; opacity: .75; line-height: 1.45; }

@media (max-width: 600px) {
    .sp-shot-img img { max-height: none; }
}

/* ---------- Ссылка-заголовок в футере ---------- */
.footer-social__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed rgba(128,128,128,.5);
    padding-bottom: 2px;
    transition: border-color .2s, opacity .2s;
}
.footer-social__title:hover {
    border-bottom-color: currentColor;
    opacity: 1;
}
.footer-social__title span { transition: transform .2s; }
.footer-social__title:hover span { transform: translateX(3px); }