/* Start:/standard-solutions/styles.css?179239928711978*/
:root {
    --brand: #9B1C7C;
    --brand-2: #C2187E;
    --brand-dark: #45104B;
    --accent: #E6399B;
    --pink: #FF3D9A;
    --ink: #241326;
    --muted: #6E5B74;
    --line: #EBDFEF;
    --bg: #F8F3FA;
    --card: #fff;
    --brand-soft: #F7E6F2;
    --brand-tint: #FBF3F8;
    --grad: linear-gradient(120deg, #45104B 0%, #9B1C7C 55%, #E6399B 100%);
    --radius: 14px;
    --shadow: 0 10px 30px rgba(69, 16, 75, .10);
}
/* ============ ВАРИАНТ 5 · КАТАЛОГ С ФИЛЬТРОМ ============ */
.fchips{display:flex;gap:8px;padding:18px 40px 0;flex-wrap:wrap}
.fch{border:1.5px solid var(--line);background:#fff;color:var(--muted);font-weight:700;font-size:13px;padding:8px 14px;border-radius:99px;cursor:pointer;transition:.22s}
.fch:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.fch.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(194,24,126,.3)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;padding:18px 40px 34px}
.gcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;transition:opacity .28s ease,transform .28s ease,box-shadow .3s}
.gcard.off{opacity:0;transform:scale(.9)}
.gcard:hover{box-shadow:0 14px 34px rgba(69,16,75,.18)}
.gph{position:relative;height:150px;overflow:hidden}
.gph svg{width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
div.browser .gcard:hover .gph svg{transform:scale(1.1)}
.gph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(46,10,44,.55))}
.gtag{position:absolute;top:10px;left:10px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.4px;color:#fff;background:rgba(36,10,38,.55);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(3px);padding:3px 9px;border-radius:99px}
.gr{position:absolute;top:8px;right:10px;z-index:2;font-size:12.5px;font-weight:800;color:#fff;background:linear-gradient(120deg,var(--brand-2),var(--pink));padding:4px 10px;border-radius:99px;box-shadow:0 4px 12px rgba(194,24,126,.4)}
.gbd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.gbd h4{font-size:15px}
.gsub{font-size:12px;color:var(--muted)}
.gpar{font-size:12.5px}
.gchips{display:flex;gap:5px;flex-wrap:wrap}
.gbd .btn{margin-top:auto;align-self:flex-start}
@media(max-width:640px){
  .fchips{padding:14px 14px 0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fchips::-webkit-scrollbar{display:none}
  .fch{flex:none}
  .ggrid{padding:14px 14px 26px;grid-template-columns:1fr}
}
/* каркас варианта */
.vhead{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.vnum{background:var(--grad);color:#fff;font-weight:800;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none;transform:translateY(4px)}
.vtitle{font-size:22px}
.vsub{color:var(--muted);font-size:14px}
.note{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 18px}
@media(max-width:880px){.note{grid-template-columns:1fr}}
.note-item{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:12px 14px;transition:.25s}
.note-item:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(69,16,75,.12);border-left-color:var(--pink)}
.note-item h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--brand);margin-bottom:4px}
.note-item p{font-size:13.5px}
.browser{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.btop{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#F3ECF6;border-bottom:1px solid var(--line)}
.dot{width:10px;height:10px;border-radius:50%}
.url{margin-left:10px;background:#fff;border:1px solid var(--line);border-radius:99px;font-size:12px;color:var(--muted);padding:4px 16px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;border:0;border-radius:9px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;font-family:inherit;
 background:linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 45%,var(--pink) 100%);background-size:200% 200%;background-position:0% 50%;
 transition:background-position .4s ease,box-shadow .3s,transform .15s}
.btn:hover{background-position:100% 50%;box-shadow:0 8px 24px rgba(194,24,126,.35);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.btn--ghost:hover{background:var(--brand-soft);box-shadow:0 6px 18px rgba(155,28,124,.18)}
.btn--accent{background:linear-gradient(120deg,var(--pink),var(--brand-2));color:#fff}
.btn--sm{padding:8px 13px;font-size:13px}
.ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 60%);transform:scale(0);animation:rip .65s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ============ ВАРИАНТ 1 · ФОТО-МОЗАИКА ============ */
.hero1 {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    min-height: 440px;
    display: flex;
    flex-direction: column
}

.hero1 .bg {
    position: absolute;
    inset: -34px;
    z-index: 0;
    transition: transform .18s ease-out;
    will-change: transform
}

div.browser  .hero1 .bg svg {
    width: 100%;
    height: 100%
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    z-index: 0;
    pointer-events: none;
    animation: blob 9s ease-in-out infinite alternate
}

.b1 {
    width: 320px;
    height: 320px;
    background: #FF3D9A;
    top: -90px;
    right: 6%
}

.b2 {
    width: 260px;
    height: 260px;
    background: #C2187E;
    bottom: -70px;
    left: 2%;
    animation-delay: -4s
}

@keyframes blob {
    to {
        transform: translate(44px, 26px) scale(1.18)
    }
}

.veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(40, 9, 42, .30), rgba(40, 9, 42, .82));
    -webkit-mask-image: radial-gradient(500px 300px at 75% 20%, transparent 20%, #000 75%);
    mask-image: radial-gradient(500px 300px at 75% 20%, transparent 20%, #000 75%)
}

.spot {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(340px 210px at var(--mx, 70%) var(--my, 30%), rgba(255, 158, 208, .30), transparent 70%)
}

.hc {
    position: relative;
    z-index: 2;
    padding: 56px 44px 10px
}

.hero-h {
    font-size: clamp(27px, 4vw, 40px);
    line-height: 1.18;
    max-width: 720px
}

.hero-h span {
    display: block;
    color: white;
}

.hl-pink {
    background: linear-gradient(90deg, #FF9DCE, #FF3D9A);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.chips-lg {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px
}

.clg {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .32);
    backdrop-filter: blur(4px);
    padding: 7px 14px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600
}

.clg b {
    color: #FF9DCE
}

.hero-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 45px
}

.std-strip {
    margin-top: 22px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.mq {
    display: flex;
    gap: 34px;
    width: max-content;
    animation: mq 28s linear infinite
}

.std-strip:hover .mq {
    animation-play-state: paused
}

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

.mq-g {
    display: flex;
    gap: 34px
}

.std-pill {
    font-size: 12px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 5px 12px;
    border-radius: 99px;
    white-space: nowrap;
    transition: .2s
}

.std-pill:hover {
    background: rgba(255, 255, 255, .24)
}

.hint {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 50px 0 14px;
    opacity: .75;
    animation: hint 1.6s infinite;
    font-size: 18px
}

@keyframes hint {
    50% {
        transform: translateY(7px)
    }
}

.seg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 26px 40px 36px
}

@media(max-width:920px) {
    .seg-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:800px) {
    .seg-grid {
        grid-template-columns: 1fr
    }
}

.seg {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
    transition: transform .2s ease-out, box-shadow .3s;
    will-change: transform;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.seg:hover {
    box-shadow: 0 18px 40px rgba(69, 16, 75, .22)
}

.seg-ph {
    position: relative;
    height: 170px;
    overflow: hidden
}

div.browser  .seg-ph svg, div.browser > img {
    width: 100%;
    height: 100%;
    transition: transform .8s cubic-bezier(.2, .7, .3, 1)
}
div.browser  .seg-ph img {
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .8s cubic-bezier(.2, .7, .3, 1)
}

div.browser  .seg:hover .seg-ph svg {
    transform: scale(1.12)
}

.seg-ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(46, 10, 44, .78))
}

div.browser .shine {
    position: absolute;
    inset: -40%;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .35) 50%, transparent 58%);
    transform: translateX(-80%);
    transition: transform .9s ease;
    pointer-events: none;
    z-index: 2
}

.seg:hover .shine {
    transform: translateX(80%)
}

/* инфа прямо на фото */
.seg-tags {
    position: absolute;
    left: 10px;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    z-index: 3
}

.stag {
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: rgba(36, 10, 38, .55);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(3px);
    padding: 3px 9px;
    border-radius: 99px
}

.seg-bd {
    position: relative;
    padding: 13px 16px 15px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px

}

.seg-bd h3 {
    font-size: 15.5px
}

.seg-bd .btn {
    flex: none
}

.wrapper__buttons{
    margin-left: auto;
    display: flex;
    gap: 10px;
}
.col_coral{
    background:#FF5F57
}
.col_amber{
    background:#FEBC2E
}
.col_grass-green{
    background:#28C840
}
.pos_absolute{
    position:absolute
}
.chips-lg_d{
    --d:.55s
}
.hero-cta_d{
    --d:.62s
}
.std-strip_d{
    --d:.7s
}
.btn-def{
    background: linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 45%,var(--pink) 100%) !important;
    border: 0 !important;
    color: white;
}
@media (max-width:500px) {
    .seg-bd{
        flex-direction: column;
    }
}
/* End */
/* /standard-solutions/styles.css?179239928711978 */