/* Start:/site/assets/site-pages.css?178429069828386*/
/* ===========================================================
   Стили для подраздела «Создание сайтов» (/site/...)
   Дополняют основной шаблон mirdev. Блоки, которых нет в style.css:
   оглавление-якоря, нумерованная сетка «что входит»,
   тарифные карточки, FAQ-аккордеон, лид-секция, иконки-преимущества.
   =========================================================== */

:root {
    --sp-dark: #222429;
    --sp-accent: #ffaa17;
    --sp-muted: #565872;
    --sp-bg-soft: #f7f7fb;
}

.service-text {
    margin-top: 10px;
}

/* ---------- Якорное оглавление ---------- */
.sp-toc {
    background: var(--sp-bg-soft);
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    padding: 18px 0;
}
.sp-toc__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.sp-toc__label { font-weight: 600; color: var(--sp-dark); margin-right: 6px; }
.sp-toc a {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 30px;
    border: 1px solid #e3e3ec;
    background: #fff;
    color: var(--sp-dark);
    font-size: 14px;
    font-weight: 500;
    transition: all .2s ease;
}
.sp-toc a:hover { background: var(--sp-accent); border-color: var(--sp-accent); color: #fff; text-decoration: none; }

/* ---------- Общие секции ---------- */
.sp-section { padding: 90px 0; }
.sp-section--soft { background: var(--sp-bg-soft); }
.sp-lead { font-size: 19px; line-height: 1.7; color: #3a3d45; }
.sp-lead p { margin-bottom: 18px; }
.sp-lead p:last-child { margin-bottom: 0; }
.sp-lead strong { color: var(--sp-dark); }

/* ---------- Блок «для чего нужен» (текст + картинка) ---------- */
.sp-intro__img {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(34, 36, 41, .12);
}
.sp-intro__img img { width: 100%; height: auto; display: block; }
.sp-intro__badge {
    position: absolute;
    left: -18px;
    bottom: 28px;
    background: var(--sp-accent);
    color: #fff;
    padding: 18px 24px;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(255, 170, 23, .35);
}
.sp-intro__badge b { display: block; font-size: 30px; line-height: 1; }
.sp-intro__badge span { font-size: 13px; }

/* ---------- Сетка нумерованных пунктов «что входит» ---------- */
.sp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sp-feature {
    position: relative;
    background: #fff;
    border: 1px solid #ececf2;
    border-radius: 10px;
    padding: 26px 22px 22px 22px;
    transition: all .25s ease;
    counter-increment: spfeature;
}
.sp-feature::before {
    content: counter(spfeature, decimal-leading-zero);
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    color: var(--sp-accent);
    opacity: .28;
    margin-bottom: 8px;
}
.sp-feature h5 { font-size: 17px; font-weight: 600; color: var(--sp-dark); margin-bottom: 6px; }
.sp-feature p { font-size: 14px; line-height: 1.55; color: var(--sp-muted); margin: 0; }
.sp-feature:hover { border-color: var(--sp-accent); box-shadow: 0 16px 38px rgba(34, 36, 41, .10); transform: translateY(-4px); }
.sp-features-wrap { counter-reset: spfeature; }

/* ---------- Тарифные карточки ---------- */
.sp-pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sp-price-card {
    background: #fff;
    border: 1px solid #ececf2;
    border-radius: 12px;
    padding: 34px 26px;
    text-align: center;
    position: relative;
    transition: all .25s ease;
}
.sp-price-card--accent {
    border-color: var(--sp-accent);
    box-shadow: 0 18px 40px rgba(255, 170, 23, .18);
    padding-top: 46px;
}
.sp-price-card__tag {
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    background: var(--sp-accent); color: #fff; font-size: 12px; font-weight: 600;
    padding: 5px 16px; border-radius: 20px; letter-spacing: .4px; white-space: nowrap;
}
.sp-price-card h4 { font-size: 20px; font-weight: 600; color: var(--sp-dark); margin-bottom: 14px; }
.sp-price-card__value { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 34px; color: var(--sp-dark); line-height: 1; margin-bottom: 4px; }
.sp-price-card__note { font-size: 13px; color: var(--sp-muted); margin-bottom: 20px; }
.sp-price-card ul { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; }
.sp-price-card li { font-size: 14px; color: #4a4d57; padding: 7px 0 7px 26px; position: relative; border-bottom: 1px dashed #ececf2; }
.sp-price-card li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: 7px; color: var(--sp-accent); font-size: 13px;
}
.sp-price-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(34, 36, 41, .14); }

/* ---------- FAQ-аккордеон (без JS, на details/summary) ---------- */
.sp-faq { max-width: 860px; margin: 0 auto; }
.sp-faq details {
    background: #fff;
    border: 1px solid #ececf2;
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.sp-faq details[open] { border-color: var(--sp-accent); box-shadow: 0 12px 30px rgba(34, 36, 41, .08); }
.sp-faq summary {
    list-style: none; cursor: pointer;
    padding: 20px 56px 20px 24px;
    font-weight: 600; font-size: 16px; color: var(--sp-dark);
    position: relative;
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after {
    content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    color: var(--sp-accent); font-size: 14px; transition: transform .25s ease;
}
.sp-faq details[open] summary::after { content: "\f068"; }
.sp-faq__answer { padding: 0 24px 22px; color: var(--sp-muted); font-size: 15px; line-height: 1.7; }

/* ---------- Полоса преимуществ-иконок под hero ---------- */
.sp-perks { background: var(--sp-dark); color: #fff; padding: 40px 0; }
.sp-perks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sp-perk { display: flex; gap: 16px; align-items: flex-start; }
.sp-perk .icon {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255, 170, 23, .15); color: var(--sp-accent);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.sp-perk h5 { color: #fff; font-size: 16px; margin-bottom: 4px; }
.sp-perk p { color: #b9bbc6; font-size: 14px; margin: 0; line-height: 1.5; }

/* ---------- CTA-полоса ---------- */
.sp-cta {
    background: linear-gradient(135deg, #222429 0%, #2b2e3a 100%);
    color: #fff; padding: 60px 0;
}
.sp-cta h2 { color: #fff; margin-bottom: 12px; }
.sp-cta p { color: #cfd0d8; margin-bottom: 0; font-size: 17px; }

/* ---------- Навигационные карточки разделов на /site/ ---------- */
.sp-nav { padding: 80px 0 70px; }
.sp-nav__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sp-nav__card {
    display: block;
    background: #fff;
    border: 1px solid #ececf2;
    border-radius: 12px;
    padding: 32px 26px;
    color: var(--sp-dark);
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}
.sp-nav__card::after {
    content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; right: 24px; bottom: 24px; color: var(--sp-accent); font-size: 16px;
    transition: transform .25s ease;
}
.sp-nav__card .sp-nav__icon {
    width: 58px; height: 58px; border-radius: 12px;
    background: rgba(255, 170, 23, .12); color: var(--sp-accent);
    display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px;
}
.sp-nav__card h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.sp-nav__card p { font-size: 14px; line-height: 1.55; color: var(--sp-muted); margin: 0; padding-right: 26px; }
.sp-nav__card:hover { border-color: var(--sp-accent); box-shadow: 0 18px 44px rgba(34, 36, 41, .12); transform: translateY(-5px); text-decoration: none; }
.sp-nav__card:hover::after { transform: translateX(6px); }
.sp-nav__group { margin-bottom: 48px; }
.sp-nav__group:last-child { margin-bottom: 0; }
.sp-nav__group-head { margin-bottom: 24px; }
.sp-nav__group-head .span { display: block; }
.sp-nav__group-head h3 { font-size: 28px; margin-bottom: 8px; color: var(--sp-dark); }
.sp-nav__group-head p { margin: 0; color: var(--sp-muted); max-width: 740px; }
.sp-nav__meta {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
    color: var(--sp-accent); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}

/* ---------- Клиентский блок без дублей карточек на /site/ ---------- */
.sp-client-guide { padding: 80px 0; }
.sp-client-guide__intro h2 { margin-bottom: 16px; }
.sp-client-guide__intro p {
    color: var(--sp-muted);
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 16px;
}
.sp-client-guide__intro p:last-child { margin-bottom: 0; }
.sp-client-guide__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.sp-client-guide__step {
    background: #fff;
    border: 1px solid #ececf2;
    border-radius: 12px;
    padding: 26px 24px;
    min-height: 210px;
    box-shadow: 0 14px 35px rgba(34, 36, 41, .06);
}
.sp-client-guide__step span {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--sp-accent);
    margin-bottom: 12px;
}
.sp-client-guide__step h3 {
    color: var(--sp-dark);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}
.sp-client-guide__step p {
    color: var(--sp-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.sp-client-result {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 34px;
    align-items: center;
    margin-top: 46px;
    background: var(--sp-dark);
    border-radius: 14px;
    padding: 38px 42px;
    color: #fff;
    overflow: hidden;
}
.sp-client-result h3 { color: #fff; font-size: 28px; margin-bottom: 10px; }
.sp-client-result p { color: #cfd0d8; line-height: 1.7; margin: 0; }
.sp-client-result__list { display: grid; gap: 14px; }
.sp-client-result__list div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #f2f3f7;
    line-height: 1.5;
}
.sp-client-result__list i {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 170, 23, .16);
    color: var(--sp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 1px;
}

/* ===========================================================
   Уникальные блоки страницы-каталога услуг /site/
   =========================================================== */

/* ---------- Hero хаба ---------- */
.sp-hero {
    position: relative;
    background: radial-gradient(circle at 80% 20%, #2c2f3d 0%, #222429 55%, #1a1c20 100%);
    color: #fff;
    padding: 110px 0 120px;
    overflow: hidden;
}
.sp-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 80% 30%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 80% 30%, #000 0%, transparent 70%);
}
.sp-hero .container { position: relative; z-index: 1; }
.sp-hero__eyebrow {
    display: inline-block; color: var(--sp-accent); font-weight: 600; letter-spacing: .6px;
    text-transform: uppercase; font-size: 13px; margin-bottom: 16px;
}
.sp-hero h1 { color: #fff; font-size: 46px; line-height: 1.12; font-weight: 700; margin-bottom: 18px; }
.sp-hero h1 b { color: var(--sp-accent); }
.sp-hero__lead { font-size: 19px; line-height: 1.65; color: #c9cbd6; max-width: 660px; margin-bottom: 30px; }
.sp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.sp-hero__actions .main-btn { padding: 13px 30px; }
.sp-hero__actions .main-btn--ghost {
    background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff;
}
.sp-hero__actions .main-btn--ghost:hover { border-color: var(--sp-accent); }
.sp-hero__pills { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.sp-hero__pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 30px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    font-size: 14px; color: #e7e8ee;
}
.sp-hero__pill i { color: var(--sp-accent); }

/* ---------- Заголовок группы каталога ---------- */
.sp-group-head { margin-bottom: 34px; }
.sp-group-head .span { display:block; }
.sp-group-head h2 { margin-bottom: 8px; }
.sp-group-head p { color: var(--sp-muted); margin: 0; max-width: 720px; }

/* ---------- Карточка услуги каталога ---------- */
.sp-catalog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sp-srv {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #ececf2; border-radius: 14px;
    padding: 32px 28px; transition: all .25s ease; height: 100%;
}
.sp-srv__icon {
    width: 60px; height: 60px; border-radius: 14px; margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(255,170,23,.16), rgba(255,170,23,.06));
    color: var(--sp-accent); display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.sp-srv h3 { font-size: 20px; font-weight: 600; color: var(--sp-dark); margin-bottom: 10px; }
.sp-srv > p { font-size: 15px; line-height: 1.6; color: var(--sp-muted); margin-bottom: 18px; }
.sp-srv__list { list-style: none; padding: 0; margin: 0 0 22px; }
.sp-srv__list li {
    font-size: 14px; color: #44464f; padding: 6px 0 6px 24px; position: relative;
}
.sp-srv__list li::before {
    content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 4px; top: 6px; color: var(--sp-accent);
}
.sp-srv__link {
    margin-top: auto; font-weight: 600; color: var(--sp-dark);
    display: inline-flex; align-items: center; gap: 8px; transition: gap .2s ease, color .2s ease;
}
.sp-srv__link i { color: var(--sp-accent); transition: transform .2s ease; }
.sp-srv:hover { border-color: var(--sp-accent); box-shadow: 0 22px 50px rgba(34,36,41,.13); transform: translateY(-5px); }
.sp-srv:hover .sp-srv__link { color: var(--sp-accent); }
.sp-srv:hover .sp-srv__link i { transform: translateX(5px); }
.sp-srv--more { background: var(--sp-bg-soft); border-style: dashed; }
.sp-srv--more .sp-srv__icon { background: rgba(86,88,114,.12); color: var(--sp-muted); }

/* ---------- Принципы / подход ---------- */
.sp-principles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sp-principle { position: relative; padding-top: 14px; }
.sp-principle__num {
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 40px; color: var(--sp-accent);
    line-height: 1; opacity: .35; margin-bottom: 6px;
}
.sp-principle h4 { font-size: 17px; font-weight: 600; color: var(--sp-dark); margin-bottom: 8px; }
.sp-principle p { font-size: 14px; line-height: 1.6; color: var(--sp-muted); margin: 0; }

/* ---------- Технологический стек ---------- */
.sp-tech-showcase {
    position: relative;
    background: radial-gradient(circle at top right, rgba(255,170,23,.12), transparent 34%), linear-gradient(135deg, #232833 0%, #20242e 100%);
    border-radius: 24px;
    padding: 46px;
    color: #fff;
    overflow: hidden;
}
.sp-tech-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .45;
    pointer-events: none;
}
.sp-tech-showcase > * { position: relative; z-index: 1; }
.sp-tech-showcase .section-title h2,
.sp-tech-showcase .section-title p,
.sp-tech-showcase .section-title .span { color: #fff; }
.sp-tech-showcase .section-title .span {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 170, 23, .28);
    color: var(--sp-accent);
    background: rgba(255, 170, 23, .10);
}
.sp-tech-showcase .section-title p { color: #c7ccd7; max-width: 640px; }
.sp-tech-showcase__tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-tech-tab {
    appearance: none;
    cursor: pointer;
    min-width: 160px;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(6px);
    text-align: left;
    transition: all .25s ease;
}
.sp-tech-tab b,
.sp-tech-tab small { display: block; }
.sp-tech-tab b { font-size: 16px; color: #fff; margin-bottom: 4px; }
.sp-tech-tab small { font-size: 12px; color: #9aa3b4; }
.sp-tech-tab--active {
    border-color: rgba(255, 170, 23, .38);
    background: linear-gradient(135deg, rgba(255,170,23,.28), rgba(255,170,23,.10));
    box-shadow: 0 14px 34px rgba(255, 170, 23, .14);
}
.sp-tech-tab--active small { color: #ffe0a1; }
.sp-tech-tab:hover { transform: translateY(-2px); border-color: rgba(255, 170, 23, .24); }
.sp-tech-showcase__intro {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-end;
}
.sp-tech-showcase__intro p {
    margin: 0;
    color: #b8c0cf;
    line-height: 1.6;
    max-width: 260px;
}
.sp-tech-showcase__badge {
    min-width: 150px;
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
}
.sp-tech-showcase__badge strong {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 42px;
    line-height: 1;
    color: var(--sp-accent);
}
.sp-tech-showcase__badge span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: #c7ccd7;
}
.sp-tech-panes { margin-top: 34px; }
.sp-tech-pane--active { display: block; }
.sp-tech-showcase__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
}
.sp-tech-panel {
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.sp-tech-panel--visual { padding: 28px; min-height: 540px; }
.sp-tech-panel--stats { padding: 28px; }
.sp-tech-panel__head h3 { color: #fff; font-size: 34px; margin-bottom: 8px; }
.sp-tech-panel__head p { color: #b7bfce; margin: 0 0 28px; line-height: 1.6; }
.sp-tech-score {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    margin-bottom: 26px;
}
.sp-tech-score strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 48px;
    line-height: 1;
    color: var(--sp-accent);
}
.sp-tech-score span {
    color: #c7ccd7;
    font-size: 13px;
    line-height: 1.45;
}
.sp-tech-radar {
    position: relative;
    min-height: 480px;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(255,170,23,.14) 0%, rgba(255,170,23,.08) 18%, transparent 19%),
        radial-gradient(circle at center, transparent 0 28%, rgba(255,170,23,.12) 28.4%, transparent 29%),
        radial-gradient(circle at center, transparent 0 48%, rgba(255,170,23,.10) 48.4%, transparent 49%),
        radial-gradient(circle at center, transparent 0 68%, rgba(255,170,23,.08) 68.4%, transparent 69%),
        linear-gradient(rgba(255,170,23,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,170,23,.06) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, 100% 50%, 50% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.sp-tech-radar::before,
.sp-tech-radar::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,170,23,.22), transparent);
    transform-origin: center;
}
.sp-tech-radar::before { transform: translate(-50%, -50%) rotate(38deg); }
.sp-tech-radar::after { transform: translate(-50%, -50%) rotate(-38deg); }
.sp-tech-radar__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,191,73,.30), rgba(255,170,23,.18) 55%, rgba(255,170,23,.08) 100%);
    border: 1px solid rgba(255,170,23,.24);
    box-shadow: 0 0 0 18px rgba(255,170,23,.04), 0 0 40px rgba(255,170,23,.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.sp-tech-radar__core span,
.sp-tech-radar__core strong,
.sp-tech-radar__core small { display: block; }
.sp-tech-radar__core span,
.sp-tech-radar__core strong { color: #fff; }
.sp-tech-radar__core span,
.sp-tech-radar__core strong {
    font-family: 'Rajdhani', sans-serif;
    line-height: .95;
}
.sp-tech-radar__core span { font-size: 28px; font-weight: 700; }
.sp-tech-radar__core strong { font-size: 48px; font-weight: 700; }
.sp-tech-radar__core small { color: #fde3b6; font-size: 13px; margin-top: 8px; }
.sp-tech-radar__card {
    position: absolute;
    width: 180px;
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: #0f1722;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 16px 28px rgba(3, 8, 15, .28);
}
.sp-tech-radar__card span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #7d8ba3;
    margin-bottom: 10px;
}
.sp-tech-radar__card p {
    margin: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 600;
}
.sp-tech-radar__card--tl { left: 22px; top: 26px; }
.sp-tech-radar__card--tr { right: 22px; top: 26px; }
.sp-tech-radar__card--bl { left: 22px; bottom: 26px; }
.sp-tech-radar__card--br { right: 22px; bottom: 26px; }
.sp-tech-metrics {
    display: grid;
    gap: 18px;
    margin-bottom: 28px;
}
.sp-tech-metric__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}
.sp-tech-metric__meta span { color: #fff; font-weight: 600; }
.sp-tech-metric__meta b { color: var(--sp-accent); font-family: 'Rajdhani', sans-serif; font-size: 28px; line-height: 1; }
.sp-tech-metric__bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    overflow: hidden;
}
.sp-tech-metric__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d88b00 0%, #ffaa17 55%, #ffc04d 100%);
    box-shadow: 0 0 18px rgba(255, 170, 23, .18);
}
.sp-stack__grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.sp-tech {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09); font-weight: 600; color: #edf1f7; font-size: 15px;
    transition: all .2s ease;
}
.sp-tech i { color: var(--sp-accent); font-size: 18px; }
.sp-tech:hover {
    border-color: rgba(255,170,23,.35);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(14, 34, 47, .22);
}

/* ---------- Этапы сотрудничества (3 шага) ---------- */
.sp-engage__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.sp-step {
    background: #fff; border: 1px solid #ececf2; border-radius: 14px;
    padding: 34px 28px; position: relative; text-align: left;
}
.sp-step__num {
    width: 52px; height: 52px; border-radius: 50%; margin-bottom: 18px;
    background: var(--sp-dark); color: var(--sp-accent);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px;
}
.sp-step h4 { font-size: 18px; font-weight: 600; color: var(--sp-dark); margin-bottom: 8px; }
.sp-step p { font-size: 14px; line-height: 1.6; color: var(--sp-muted); margin: 0; }

/* ---------- Полоса статистики ---------- */
.sp-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sp-stat { text-align: center; }
.sp-stat__num { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 46px; color: var(--sp-accent); line-height: 1; }
.sp-stat__label { font-size: 15px; color: var(--sp-muted); margin-top: 8px; }

/* ---------- CTA-полоса хаба ---------- */
.sp-cta-block {
    background: linear-gradient(135deg, #222429 0%, #2b2e3a 100%); color: #fff;
    border-radius: 16px; padding: 50px 48px; display: flex; align-items: center;
    justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.sp-cta-block h2 { color: #fff; font-size: 28px; margin-bottom: 8px; }
.sp-cta-block p { color: #cfd0d8; margin: 0; }

/* ---------- Адаптив ---------- */
@media (max-width: 991px) {
    .sp-tech-showcase { padding: 30px 24px; }
    .sp-tech-showcase__intro {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        margin-top: 24px;
    }
    .sp-tech-showcase__grid { grid-template-columns: 1fr; }
    .sp-tech-panel--visual { min-height: 500px; }
    .sp-features { grid-template-columns: repeat(2, 1fr); }
    .sp-pricing { grid-template-columns: repeat(2, 1fr); }
    .sp-perks__grid { grid-template-columns: 1fr; gap: 18px; }
    .sp-nav__grid { grid-template-columns: repeat(2, 1fr); }
    .sp-client-guide__intro { margin-bottom: 30px; }
    .sp-client-result { grid-template-columns: 1fr; padding: 34px 30px; }
    .sp-catalog__grid { grid-template-columns: repeat(2, 1fr); }
    .sp-principles__grid { grid-template-columns: repeat(2, 1fr); }
    .sp-engage__steps { grid-template-columns: 1fr; }
    .sp-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .sp-hero h1 { font-size: 36px; }
}
@media (max-width: 575px) {
    .sp-tech-showcase { padding: 24px 18px; border-radius: 18px; }
    .sp-tech-tab { min-width: unset; width: 100%; }
    .sp-tech-score,
    .sp-tech-showcase__badge { width: 100%; }
    .sp-tech-panel--visual,
    .sp-tech-panel--stats { padding: 18px; }
    .sp-tech-radar { min-height: 520px; }
    .sp-tech-radar__core {
        width: 130px;
        height: 130px;
    }
    .sp-tech-radar__core span { font-size: 20px; }
    .sp-tech-radar__core strong { font-size: 34px; }
    .sp-tech-radar__card {
        width: 140px;
        padding: 14px;
        border-radius: 18px;
    }
    .sp-tech-radar__card p { font-size: 13px; }
    .sp-tech-panel__head h3 { font-size: 28px; }
    .sp-section { padding: 60px 0; }
    .sp-features { grid-template-columns: 1fr; }
    .sp-pricing { grid-template-columns: 1fr; }
    .sp-intro__badge { left: 0; }
    .sp-nav__grid { grid-template-columns: 1fr; }
    .sp-client-guide { padding: 60px 0; }
    .sp-client-guide__steps { grid-template-columns: 1fr; }
    .sp-client-guide__step { min-height: auto; padding: 24px 20px; }
    .sp-client-result { margin-top: 34px; padding: 30px 22px; border-radius: 12px; }
    .sp-client-result h3 { font-size: 24px; }
    .sp-catalog__grid { grid-template-columns: 1fr; }
    .sp-principles__grid { grid-template-columns: 1fr; }
    .sp-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .sp-hero { padding: 70px 0 80px; }
    .sp-hero h1 { font-size: 30px; }
    .sp-cta-block { padding: 36px 24px; }
}

/* End */
/* /site/assets/site-pages.css?178429069828386 */