/* Компактный блок «Кибер-сканер здоровья» на главной 5lb.pro.
   Палитра — как у блока записи (sb-*): тёмный уголь + оранжевый акцент.
   Цвета заголовков и ссылок Aspro перебиваем явно: тема красит h2 в серый.
   Вся карточка кликабельна: ::after у кнопки растянут на карточку
   (у .sp-body и .sp-btn нет position, иначе растяжка сломается). */
.sp-wrap{
    --acc:#ff6b00;
    --acc2:#ff9500;
    --ph:300px;
    --font:var(--theme-font-family,"Golos Text"),system-ui,sans-serif;
    font:16px/1.5 var(--font);
    color:#fff;
}
.sp-wrap *{box-sizing:border-box}

.sp-card{
    position:relative;
    isolation:isolate;
    display:grid;
    grid-template-columns:minmax(0,680px) minmax(260px,1fr);
    align-items:center;
    gap:24px;
    overflow:hidden;
    margin:0; /* отступы даёт сетка Aspro: обёртка .index-block--padding-top-80 */
    padding:30px 0 30px 40px;
    border-radius:28px;
    background:
        radial-gradient(45% 130% at 72% 50%,rgba(255,107,0,.30),transparent 62%),
        linear-gradient(180deg,#24160f 0%,#120e0c 100%);
    box-shadow:0 1px 0 0 rgba(255,255,255,.1) inset,0 0 0 1px rgba(255,255,255,.04) inset;
    transition:box-shadow .3s ease;
}
.sp-card:hover{box-shadow:0 1px 0 0 rgba(255,255,255,.1) inset,0 0 0 1px rgba(255,107,0,.4) inset}

/* Сетка «экрана прибора» — медленно плывёт вниз, видна только у телефона */
.sp-hud{
    position:absolute;
    inset:0;
    z-index:-1;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:28px 28px;
    -webkit-mask-image:radial-gradient(40% 110% at 72% 50%,#000 20%,transparent 75%);
    mask-image:radial-gradient(40% 110% at 72% 50%,#000 20%,transparent 75%);
    animation:sp-grid 14s linear infinite;
}


.sp-wrap .sp-title,
.SCANNER_PROMO h2.sp-title{
    margin:0;
    color:#fff !important;
    font-family:var(--font);
    font-size:32px !important;
    font-weight:700 !important;
    line-height:1.12 !important;
    letter-spacing:-.03em;
}
.sp-title em{
    font-style:normal;
    background:linear-gradient(90deg,var(--acc),var(--acc2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.sp-wrap .sp-text{
    margin:10px 0 0;
    max-width:56ch;
    color:rgba(255,255,255,.72) !important;
    font-size:16px;
    line-height:1.5;
}

.sp-feats{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 0;padding:0;list-style:none}
.sp-feat{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding:0;
    color:rgba(255,255,255,.9);
    font-size:14px;
    font-weight:500;
    line-height:1.3;
    list-style:none;
}
.sp-feat::marker{content:none}
.sp-feat::before{display:none}
.sp-feat__ic{
    display:flex;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:10px;
    background:rgba(255,107,0,.14);
    color:var(--acc2);
}
.sp-feat__ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.sp-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
    padding:8px 8px 8px 22px;
    border-radius:999px;
    background:
        linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%) no-repeat,
        linear-gradient(90deg,var(--acc),var(--acc2));
    background-size:250% 100%,100% 100%;
    background-position:180% 0,0 0;
    color:#1a0f08 !important;
    font-size:15px;
    font-weight:700;
    text-decoration:none !important;
    animation:sp-shine 5s ease-in-out 1.5s infinite;
}
.sp-btn::after{content:"";position:absolute;inset:0;z-index:3;border-radius:28px}
.sp-btn:focus-visible{outline:none}
.sp-btn:focus-visible::after{outline:2px solid #fff;outline-offset:-4px}
.sp-btn__ic{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(26,15,8,.16);
    transition:transform .25s ease;
}
.sp-btn__ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sp-card:hover .sp-btn__ic{transform:translate(2px,-2px)}

/* Телефон со сканером: свечение с радарными кругами, лёгкое парение, линия скана */
.sp-media{position:relative;align-self:stretch;min-height:230px}
.sp-glow{
    position:absolute;
    top:50%;
    left:50%;
    width:240px;
    height:240px;
    margin:-120px 0 0 -120px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,107,0,.5),transparent 65%);
    animation:sp-pulse 3.2s ease-in-out infinite;
}
.sp-glow::before,
.sp-glow::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(255,149,0,.55);
    border-radius:50%;
    animation:sp-ring 3.2s ease-out infinite;
}
.sp-glow::after{animation-delay:1.6s}
.sp-phone{
    position:absolute;
    left:50%;
    bottom:-30px;
    width:var(--ph);
    margin-left:calc(var(--ph) / -2);
}
.sp-phone img{
    display:block;
    width:100%;
    height:auto;
    /* рука на картинке обрезана справа — растворяем срез в фоне */
    -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 97%);
    mask-image:linear-gradient(90deg,#000 72%,transparent 97%);
}
.sp-scan{
    position:absolute;
    top:12%;
    left:27%;
    width:30%;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,transparent,#ffc27a,transparent);
    box-shadow:0 0 14px 3px rgba(255,140,0,.65);
    animation:sp-scan 2.6s ease-in-out infinite alternate;
}

@keyframes sp-grid{to{background-position:0 28px,0 28px}}
@keyframes sp-pulse{50%{opacity:.65;transform:scale(.94)}}
@keyframes sp-ring{
    0%{opacity:.9;transform:scale(.55)}
    100%{opacity:0;transform:scale(1.35)}
}
@keyframes sp-scan{to{transform:translateY(calc(var(--ph) * .6))}}
@keyframes sp-shine{
    0%,60%{background-position:180% 0,0 0}
    100%{background-position:-80% 0,0 0}
}

@media (max-width:991px){
    .sp-wrap{--ph:240px}
    .sp-card{grid-template-columns:minmax(0,1fr) 250px;padding-left:32px}
    .sp-feats{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:767px){
    /* Телефон — справа от пунктов: .sp-body растворяем, его дети встают в сетку карточки */
    .sp-wrap{--ph:150px}
    .sp-card{
        grid-template-columns:minmax(0,1fr) 110px;
        grid-template-areas:"title title" "text text" "feats media" "btn btn";
        gap:0 8px;
        padding:24px 20px;
    }
    .sp-body{display:contents}
    .sp-title{grid-area:title}
    .sp-text{grid-area:text}
    .sp-feats{grid-area:feats;align-self:center;position:relative;z-index:1}
    .sp-btn{grid-area:btn}
    .sp-hud{
        -webkit-mask-image:radial-gradient(55% 45% at 85% 65%,#000 10%,transparent 75%);
        mask-image:radial-gradient(55% 45% at 85% 65%,#000 10%,transparent 75%);
    }
    .sp-wrap .sp-title,
    .SCANNER_PROMO h2.sp-title{font-size:24px !important}
    .sp-wrap .sp-text{font-size:15px}
    .sp-feats{margin-top:14px}
    .sp-feat{gap:8px;font-size:13px;white-space:nowrap}
    .sp-feat__ic{width:26px;height:26px;border-radius:8px}
    .sp-feat__ic svg{width:15px;height:15px}
    .sp-btn{margin-top:18px}
    /* Рука выходит из-за кнопки: обрез картинки (правый нижний угол) уходит
       под кнопку. z-index:-1 внутри isolation карточки — под контентом,
       но над фоном; кнопка без position, иначе сломается растянутая ссылка. */
    .sp-media{grid-area:media;min-height:0;margin-top:10px;z-index:-1}
    .sp-phone{left:auto;right:12px;bottom:calc(var(--ph) * -.4);margin-left:0}
    .sp-phone img{-webkit-mask-image:none;mask-image:none}
    .sp-glow{
        top:auto;
        left:auto;
        right:calc(12px + var(--ph) / 2 - 75px);
        bottom:calc(var(--ph) * .1 - 75px);
        width:150px;
        height:150px;
        margin:0;
    }
    .sp-btn{display:flex;justify-content:space-between;width:100%}
}
@media (max-width:400px){
    /* Узкий телефон: картинку меньше, чтобы не наезжала на пункты */
    .sp-wrap{--ph:116px}
    .sp-phone{right:6px}
    .sp-feat{gap:6px;font-size:12px}
    .sp-glow{right:calc(6px + var(--ph) / 2 - 75px)}
}
@media (max-width:370px){
    .sp-wrap{--ph:104px}
}
@media (prefers-reduced-motion:reduce){
    .sp-wrap *,
    .sp-wrap *::before,
    .sp-wrap *::after{animation:none !important;transition:none !important}
}