/* ============================================================
   SOLITON — страница «Сайты»: общий каркас как на остальном сайте.

   Содержимое страницы остаётся в своей типографике (Onest / Golos),
   а шапка, подвал, логотип и правовой блок приводятся к тому же виду,
   что на главной, «Дизайне», «Разработке», «Маркетинге» и «Кейсах»:
   тот же шрифт Manrope, те же размеры, отступы и регистр.
   ============================================================ */

:root, body.pg-sites {
    /* Палитра объявлена на :root: legal.css строит от неё --sl-accent,
       а на body она оказывалась ниже по дереву и не подхватывалась. */
    --bg:         #0A0A0A;
    --bg2:        #101010;
    --bg3:        #161616;
    --primary:    #BDFF00;
    --secondary:  #8FBF00;
    --muted:      #8A8A8A;
    --text-muted: #8A8A8A;
    --border:     rgba(189, 255, 0, .15);
    --ease:       cubic-bezier(.23, 1, .32, 1);
    --sl-ease:    cubic-bezier(.23, 1, .32, 1);
    --sl-tap:     44px;
}

/* ---------- Шапка ---------- */

body.pg-sites header[role="banner"] .nav-links a,
body.pg-sites header[role="banner"] .nav-cta,
body.pg-sites .lang-switcher a,
body.pg-sites .mmenu-nav a,
body.pg-sites .mmenu-cta {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}

body.pg-sites header[role="banner"] .nav-links a {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
body.pg-sites header[role="banner"] .nav-cta {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* логотип — та же высота и то же свечение, что на остальных страницах */
body.pg-sites .sl-logo-img { height: clamp(21px, 2.1vw, 28px); }
body.pg-sites footer[role="contentinfo"] .sl-logo-img {
    height: clamp(24px, 2.4vw, 30px);
    filter: drop-shadow(0 0 14px rgba(189, 255, 0, .28));
}

/* ---------- Мобильное меню ---------- */

body.pg-sites .mmenu-nav a {
    text-transform: none;
    letter-spacing: -.02em;
    font-weight: 700;
}

/* ---------- Подвал ---------- */

body.pg-sites footer[role="contentinfo"] {
    padding: 80px 0 40px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
body.pg-sites footer[role="contentinfo"] .foot-top {
    gap: 50px;
    margin-bottom: 0;
    align-items: flex-start;
}
body.pg-sites footer[role="contentinfo"] .foot-brand p,
body.pg-sites footer[role="contentinfo"] .foot-links a,
body.pg-sites footer[role="contentinfo"] ul a,
body.pg-sites footer[role="contentinfo"] h4,
body.pg-sites .sl-legal,
body.pg-sites .sl-legal a {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}

body.pg-sites footer[role="contentinfo"] h4 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: #fff;
    margin-bottom: 25px;
}
body.pg-sites footer[role="contentinfo"] ul {
    display: block;
    line-height: 2.2;
}
body.pg-sites footer[role="contentinfo"] ul a {
    font-size: 1rem;
    text-transform: none;
    color: var(--muted);
}
body.pg-sites footer[role="contentinfo"] ul a:hover,
body.pg-sites footer[role="contentinfo"] ul a.active { color: var(--primary); }

body.pg-sites footer[role="contentinfo"] .foot-brand p,
body.pg-sites footer[role="contentinfo"] .foot-links a {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
}
body.pg-sites footer[role="contentinfo"] .foot-links { gap: 6px; margin-top: 20px; }

/* правовой блок — те же размеры, что на остальных страницах */
body.pg-sites .sl-legal { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--border); }
body.pg-sites .sl-legal-links a { font-size: .84rem; }
body.pg-sites .sl-legal-req { font-size: .84rem; line-height: 1.75; }
body.pg-sites .sl-legal-note { font-size: .78rem; opacity: .8; }
body.pg-sites .sl-legal-copy { font-size: .84rem; }

/* ---------- Кнопка контактов в углу ---------- */

body.pg-sites .sfab { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
body.pg-sites .sfab-list { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .3s; }
body.pg-sites .sfab.open .sfab-list { opacity: 1; transform: none; pointer-events: auto; }
body.pg-sites .sfab-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; width: min(300px, calc(100vw - 44px));
    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    transition: border-color .3s, transform .3s;
}
body.pg-sites .sfab-item:hover { border-color: var(--primary); transform: translateY(-2px); }
body.pg-sites .sfab-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary); }
body.pg-sites .sfab-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
body.pg-sites .sfab-tx b { font-size: .9rem; font-weight: 700; color: #fff; }
body.pg-sites .sfab-tx span { font-size: .74rem; color: var(--muted); }
body.pg-sites .sfab-btn {
    width: 58px; height: 58px; border-radius: 50%; border: none; cursor: none;
    display: grid; place-items: center; color: #0A0A0A;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 10px 30px rgba(189, 255, 0, .28);
    transition: transform .3s;
}
body.pg-sites .sfab-btn:hover { transform: scale(1.06); }
body.pg-sites .sfab-btn svg { width: 26px; height: 26px; }
body.pg-sites .sfab-btn .x { display: none; }
body.pg-sites .sfab.open .sfab-btn .x { display: block; }
body.pg-sites .sfab.open .sfab-btn .c { display: none; }
@media (max-width: 600px) {
    body.pg-sites .sfab { right: 14px; bottom: 14px; }
    body.pg-sites .sfab-btn { width: 52px; height: 52px; }
}

/* ---------- Всплывающая форма: закрывающий крестик ---------- */

body.pg-sites .sl-modal-close {
    position: absolute; top: 18px; right: 18px; z-index: 2;
    width: 44px; height: 44px; display: grid; place-items: center;
    background: none; border: 0; color: #F5F5F5; cursor: none;
    transition: color .25s;
}
body.pg-sites .sl-modal-close:hover { color: var(--primary); }
body.pg-sites .sl-modal-close svg { width: 22px; height: 22px; }

/* ---------- Мелочи вёрстки ---------- */

/* нижняя панель на мобильных ведёт в типовую форму */
body.pg-sites #sticky { z-index: 65; }


/* ============================================================
   Курсор и мелкие правки по замечаниям
   ============================================================ */

/* Свой курсор должен быть выше всего: шапки, баннера про куки,
   всплывающей формы и холста с шаром. Иначе он «пропадает». */
#cur, #curDot { z-index: 100000 !important; }
#curLbl { z-index: 100001 !important; }

/* Во время перетаскивания шара курсор не должен прятаться */
#scene, #scene canvas, #scene canvas.grabbing,
body.dragging, body.dragging * { cursor: none !important; }
body.dragging #cur, body.dragging #curDot { opacity: 1 !important; }

/* Согласие на обработку данных — в цвете страницы */
body.pg-sites .sl-consent { display: flex; align-items: flex-start; gap: 11px; cursor: none; }
body.pg-sites .sl-consent input[type="checkbox"] {
    flex: none; width: 18px; height: 18px; margin-top: 2px;
    accent-color: #BDFF00; cursor: none;
}
body.pg-sites .sl-consent-text { font-size: .8rem; line-height: 1.55; color: #8A8A8A; }
body.pg-sites .sl-consent-text a { color: #BDFF00; text-decoration: underline; text-underline-offset: 2px; }

/* Поля формы калькулятора */
body.pg-sites .field label {
    display: block; margin-bottom: 7px; font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase; color: #8A8A8A;
}
body.pg-sites .field input {
    width: 100%; padding: 14px 16px; background: #0A0A0A;
    border: 1px solid #242424; border-radius: 12px; color: #F5F5F5;
    font-size: 15px; outline: none; transition: border-color .25s;
}
body.pg-sites .field input:focus { border-color: #BDFF00; }
body.pg-sites .field .msg { display: none; margin-top: 7px; font-size: .78rem; color: #ff7a63; }
body.pg-sites .field.err input { border-color: #ff5f45; }
body.pg-sites .field.err .msg { display: block; }

/* ---------- Всплывающая форма: страница не подключает ui.css ---------- */

body.pg-sites .sl-modal { position: fixed; inset: 0; z-index: 99996; display: none; overflow-y: auto; overscroll-behavior: contain; }
body.pg-sites .sl-modal.sl-open { display: block; }
body.pg-sites .sl-modal-backdrop { position: fixed; inset: 0; background: rgba(3, 3, 4, .82); opacity: 0; transition: opacity .35s; }
body.pg-sites .sl-modal.sl-in .sl-modal-backdrop { opacity: 1; }
body.pg-sites .sl-modal-box {
    position: relative; z-index: 1; width: 100%; max-width: 1060px; margin: 0 auto;
    padding: clamp(64px, 9vh, 104px) clamp(12px, 3vw, 28px) clamp(28px, 7vh, 72px);
    opacity: 0; transform: translateY(26px) scale(.985);
    transition: opacity .4s, transform .45s cubic-bezier(.23, 1, .32, 1);
}
body.pg-sites .sl-modal.sl-in .sl-modal-box { opacity: 1; transform: none; }
body.pg-sites .sl-modal-close { opacity: 0; transition: opacity .35s, color .25s; }
body.pg-sites .sl-modal.sl-in .sl-modal-close { opacity: 1; }
body.pg-sites.sl-modal-open { overflow: hidden; }
body.pg-sites .sl-modal, body.pg-sites .sl-modal * { cursor: none; }


/* ---------- Прелоадер: как на «Разработке», полоса в цвете страницы ---------- */

body.pg-sites #loader {
    position: fixed; inset: 0; z-index: 99998; background: #0A0A0A;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 20px;
    transition: opacity .7s cubic-bezier(.23, 1, .32, 1), visibility .7s;
}
body.pg-sites #loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
body.pg-sites .ld-bar {
    width: 120px; height: 2px; background: rgba(255, 255, 255, .08);
    border-radius: 2px; overflow: hidden;
}
body.pg-sites .ld-fill {
    height: 100%; width: 0;
    background: #BDFF00; box-shadow: 0 0 12px #BDFF00;
    animation: ldfill 1s .1s cubic-bezier(.23, 1, .32, 1) forwards;
}
@keyframes ldfill { to { width: 100%; } }
body.pg-sites .sl-ld-wave { width: min(420px, 78vw); aspect-ratio: 6467 / 1624; display: block; }
body.pg-sites .sl-ld-wave .sl-wavelogo { width: 100%; height: 100%; display: block; overflow: visible; }


/* ---------- Полоса прокрутки: как на «Разработке», цвет страницы ---------- */

html { scrollbar-width: thin; scrollbar-color: rgba(189, 255, 0, .35) #0A0A0A; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: rgba(189, 255, 0, .3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #BDFF00; }

/* ---------- Баннер про куки и чекбоксы — в цвете страницы ---------- */

.sl-cookie { --sl-accent: #BDFF00; }
.sl-cookie-text a { color: #BDFF00; }
.sl-cookie .btn-glow,
.sl-cookie .sl-btn-primary { background: #BDFF00; color: #0A0A0A; }

.sl-consent input[type="checkbox"] { accent-color: #BDFF00; }
.sl-consent input[type="checkbox"]:checked { background: #BDFF00; border-color: #BDFF00; }
.sl-consent input[type="checkbox"]:focus-visible,
body.pg-sites input:focus-visible,
body.pg-sites button:focus-visible,
body.pg-sites a:focus-visible { outline: 2px solid #BDFF00 !important; outline-offset: 2px; }

/* ---------- Всплывающая форма выше мобильного меню ---------- */

body.pg-sites .sl-modal { z-index: 99998; }
body.pg-sites #mmenu { z-index: 80; }


/* ---------- Окно не рисует собственную карточку ----------
   В стилях страницы у .sl-modal-box заданы фон, рамка и скругление,
   из-за чего под формой проступал второй прямоугольник. */

body.pg-sites .sl-modal-box {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.pg-sites .sl-modal-slot { background: none; border: 0; padding: 0; }


/* ---------- Анимация логотипа в прелоадере ----------
   Правила лежат в ui.css, который эта страница не подключает,
   поэтому волна стояла неподвижно. */

@keyframes sl-wv-in   { from { opacity: 0; transform: translateX(-9%) scaleY(.72); } to { opacity: 1; transform: none; } }
@keyframes sl-wv-drift { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-2.2%) scaleY(1.045); } }
@keyframes sl-lt-in   { from { opacity: 0; transform: translateY(7%); } to { opacity: 1; transform: none; } }

body.pg-sites .sl-ld-wave .sl-wv {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: sl-wv-in .85s cubic-bezier(.23, 1, .32, 1) forwards,
               sl-wv-drift 4.2s ease-in-out .85s infinite;
}
body.pg-sites .sl-ld-wave .sl-wv0 { animation-delay: 0s, .85s; }
body.pg-sites .sl-ld-wave .sl-wv1 { animation-delay: .12s, .97s; }
body.pg-sites .sl-ld-wave .sl-wv2 { animation-delay: .24s, 1.09s; }
body.pg-sites .sl-ld-wave .sl-lt {
    opacity: 0;
    animation: sl-lt-in .6s cubic-bezier(.23, 1, .32, 1) .34s forwards;
}
@media (prefers-reduced-motion: reduce) {
    body.pg-sites .sl-ld-wave .sl-wv,
    body.pg-sites .sl-ld-wave .sl-lt { opacity: 1; animation: none; transform: none; }
}