.elementor-11287 .elementor-element.elementor-element-3009cce{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* GLOBAL PAGE STYLES */

a {
    text-decoration: inherit !important;
}

a:hover {
    color: #ffffff  !important;
    background-color: #0050ff !important;
    transform: scale(1.1) !important;
}

button:hover,
button:focus{
    background-color: inherit !important;
    color: inherit  !important;
    text-decoration: inherit  !important;
}

/* /.GLOBAL PAGE STYLES */

:root {
            --black:    #212126;
            --subtext:  #46516F;
            --blue:     #0050FF;
            --green:    #22C55E;
            --stroke:   #E2E4E9;
            --hover-bg: #F3F8FE;
            --white:    #ffffff;
            --bg:       #F5F6FA;
            --font:     'Manrope', sans-serif;
            --max-w:    1336px;
            --ease:     0.22s cubic-bezier(.4,0,.2,1);
        }
        
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

        body {
            font-family: var(--font);
            background: var(--white);
            color: var(--black);
        }
        
/* ─── HERO ────────────────────── */
        .hero {
            position: relative;
            overflow: hidden;
            min-height: 600px;
            display: flex;
            align-items: center;
            background: white;
        }

        /* SVG BACKGROUND inline */
        .hero__bg-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .hero__inner {
            position: relative;
            z-index: 2;
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 3.5rem 2rem 5rem;
            width: 100%;
            display: grid;
            grid-template-columns: 55fr 45fr;
            gap: 4rem;
            align-items: center;
        }

        /* ─── BREADCRUMB ──────────────── */
        .breadcrumb {
            font-size: 14px;
            color: var(--subtext);
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }
        .breadcrumb a { color:var(--subtext); text-decoration:none; transition:color var(--ease); }
        .breadcrumb a:hover { color:var(--blue); }
        .breadcrumb__current { color:var(--blue); font-weight:500; }

        /* ─── HERO LEFT ───────────────── */
        .hero__left { display:flex; flex-direction:column; }

        .hero__title {
            font-size: 48px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -1px;
            color: var(--black);
            margin-bottom: 1rem;
        }

        .hero__tagline {
            font-size: 17px;
            font-weight: 700;
            color: var(--subtext);
            margin-bottom: 1.25rem;
        }

        .hero__desc {
            font-size: 15px;
            color: var(--subtext);
            line-height: 1.8;
            margin-bottom: 2.25rem;
            max-width: 520px;
        }

        .btn--cta {
            display: inline-flex;
            align-items: center;
            background: var(--blue);
            color: #fff;
            font-family: var(--font);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            padding: 1rem 1.75rem;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            width: fit-content;
            box-shadow: 0 4px 20px rgba(0,80,255,.28);
            transition: all var(--ease);
        }
        .btn--cta:hover { background:#0040cc; transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,80,255,.38); }

        /* ─── HERO RIGHT ──────────────── */
        .hero__right {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 460px;
        }

        /* Glow behind card */
        .hero__right::before {
            content: '';
            position: absolute;
            width: 380px;
            height: 380px;
            background: radial-gradient(circle, rgba(180,190,255,0.45) 0%, rgba(200,210,255,0.2) 50%, transparent 70%);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
            filter: blur(20px);
        }

        /* BACKUP STATUS CARD — точно как на скрине */
        .backup-card {
            position: relative;
            z-index: 2;
            background: rgba(240, 242, 255, 0.75);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 4px solid rgba(255, 255, 255, 0.95);
            border-radius: 24px;
            padding: 2rem 2.5rem 2.5rem;
            width: 360px;
            box-shadow:
                0 2px 8px rgba(160,170,220,.08),
                0 8px 32px rgba(130,150,220,.10),
                inset 0 1px 0 rgba(255,255,255,0.6);
        }

        .backup-card__header {
            display: flex;
            align-items: center;
            gap: 0.875rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid rgba(200,205,230,0.5);
        }

        .backup-card__icon { color: var(--blue); display:flex; align-items:center; }

        .backup-card__title {
            font-size: 20px;
            font-weight: 700;
            color: var(--black);
        }

        .backup-card__row {
            margin-bottom: 0.875rem;
            font-size: 16px;
            color: var(--black);
            line-height: 1.5;
        }

        .backup-card__row:last-child { margin-bottom: 0; }
        .backup-card__row b { font-weight: 700; }

        .backup-card__status-value {
            color: #22C55E;
            font-weight: 700;
        }

        /* FLOATING APP ICONS */
        .app-icon {
            position: absolute;
            width: 54px;
            height: 54px;
            background: white;
            border-radius: 14px;
            box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(226,228,233,0.6);
            z-index: 3;
        }

        .app-icon--sf     { top: 20px;   right: -70px; animation: float1 3.5s ease-in-out infinite; }
        .app-icon--box    { top: 110px;  right: -70px; animation: float2 4.0s ease-in-out infinite 0.4s; }
        .app-icon--teams  { top: 200px;  right: -70px; animation: float3 3.8s ease-in-out infinite 0.8s; }
        .app-icon--cloud  { top: 290px;  right: -70px; animation: float1 4.2s ease-in-out infinite 0.2s; }
        .app-icon--notion { bottom: 80px; left: -15px;  animation: float2 3.6s ease-in-out infinite 0.6s; }
        .app-icon--slack  { bottom: 10px; right: -40px; animation: float3 4.0s ease-in-out infinite 0.1s; }

        @keyframes float1 {
            0%,100% { transform: translateY(0); }
            50%      { transform: translateY(-10px); }
        }
        @keyframes float2 {
            0%,100% { transform: translateY(0) translateX(0); }
            50%      { transform: translateY(-8px) translateX(4px); }
        }
        @keyframes float3 {
            0%,100% { transform: translateY(0); }
            50%      { transform: translateY(-12px); }
        }

        /* ─── BENEFITS ────────────────────────────────── */
        .benefits {
            background: var(--white);
            padding: 6rem 0;
        }

        .benefits__inner {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 2rem;
        }

        .benefits__header {
            text-align: center;
            margin-bottom: 3.5rem;
        }

        .benefits__title {
            font-size: 48px;
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -1px;
            color: var(--black);
            margin-bottom: 1.25rem;
        }

        .txt-blue { color: var(--blue); }

        .benefits__subtitle {
            font-size: 16px;
            color: var(--subtext);
            line-height: 1.75;
            max-width: 680px;
            margin: 0 auto;
        }

        .benefits__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .benefit-card {
            background: var(--white);
            border: none;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
            transition: all var(--ease);
        }

        .benefit-card:hover {
            background: var(--hover-bg);
            transform: translateY(-4px);
            box-shadow: 0 8px 32px rgba(0, 80, 255, 0.10);
        }

        .benefit-card__top {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .benefit-card__icon {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
        }

        .benefit-card__title {
            font-size: 17px;
            font-weight: 700;
            color: var(--black);
            line-height: 1.35;
            padding-top: 2px;
        }

        .benefit-card__desc {
            font-size: 14px;
            color: var(--subtext);
            line-height: 1.75;
        }

        /* ─── CTA ──────────────────────────────────────── */
        .cta {
            background: linear-gradient(135deg, #F7F9FF 0%, #F2F5FF 50%, #F5F3FF 100%);
            padding: 5rem 0;
        }

        .cta__inner {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .cta__title {
            font-size: 38px;
            font-weight: 800;
            color: var(--black);
            line-height: 1.15;
            letter-spacing: -0.75px;
            margin-bottom: 1.25rem;
        }

        .cta__desc {
            font-size: 15px;
            color: var(--subtext);
            line-height: 1.7;
            margin-bottom: 2rem;
        }

        .cta__btn {
            display: inline-flex;
            align-items: center;
            background: var(--blue);
            color: white;
            font-family: var(--font);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            padding: 1rem 1.75rem;
            border-radius: 12px;
            text-decoration: none;
            box-shadow: 0 4px 20px rgba(0,80,255,.28);
            transition: all var(--ease);
        }

        .cta__btn:hover {
            background: #0040cc;
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(0,80,255,.38);
        }

        .cta__right {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ─── USE CASES ────────────────────────────────── */
        .usecases {
            background: var(--white);
            padding: 6rem 0;
        }

        .usecases__inner {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 2rem;
        }

        .usecases__header {
            text-align: center;
            margin-bottom: 3.5rem;
        }

        .usecases__title {
            font-size: 48px;
            font-weight: 800;
            color: var(--black);
            letter-spacing: -1px;
            line-height: 1.15;
            margin-bottom: 1rem;
        }

        .usecases__title .txt-blue { color: var(--blue); }

        .usecases__subtitle {
            font-size: 16px;
            color: var(--subtext);
            line-height: 1.75;
        }

        .usecases__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .usecase-card {
            background: var(--white);
            border-radius: 16px;
            padding: 2rem;
            transition: all var(--ease);
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }

        .usecase-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px rgba(0,80,255,.09);
        }

        .usecase-card__top {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .usecase-card__icon {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
        }

        .usecase-card__icon svg {
            width: 48px;
            height: 48px;
        }

        .usecase-card__title {
            font-size: 17px;
            font-weight: 700;
            color: var(--black);
            line-height: 1.35;
            padding-top: 2px;
        }

        .usecase-card__desc {
            font-size: 14px;
            color: var(--subtext);
            line-height: 1.75;
        }

        /* ─── FAQ ──────────────────────────────────────── */
        .faq {
            background: var(--white);
            padding: 6rem 0;
        }

        .faq__inner {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .faq__header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .faq__title {
            font-size: 48px;
            font-weight: 800;
            color: var(--black);
            letter-spacing: -1px;
        }

        .faq__title .txt-blue { color: var(--blue); }

        .faq__list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .faq__item {
            background: var(--white);
            border: 1.5px solid #E3E4E9;
            border-radius: 14px;
            overflow: hidden;
            transition: border-color var(--ease);
        }

        .faq__item.active {
            border-color: var(--stroke);
        }

        .faq__question {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.75rem;
            background: none;
            border: none;
            cursor: pointer;
            font-family: var(--font);
            font-size: 15px;
            font-weight: 600;
            color: var(--black);
            text-align: left;
            transition: color var(--ease);
            gap: 1rem;
        }

        .faq__item.active .faq__question {
            color: var(--blue);
        }

        .faq__chevron {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            color: var(--subtext);
            transition: transform var(--ease), color var(--ease);
        }

        .faq__item.active .faq__chevron {
            transform: rotate(180deg);
            color: var(--blue);
        }

        .faq__answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(.4,0,.2,1), padding var(--ease);
            padding: 0 1.75rem;
        }

        .faq__item.active .faq__answer {
            max-height: 400px;
            padding: 0 1.75rem 1.5rem;
        }

        .faq__answer p {
            font-size: 14px;
            color: var(--subtext);
            line-height: 1.8;
        }
        
/* ─── RESPONSIVE: MOBILE 375px ─────────────────── */
        @media (max-width: 640px) {

           
            /* Hero */
            .hero { min-height: auto; }
            .hero__inner {
                grid-template-columns: 1fr;
                padding: 2rem 1rem 3rem;
                gap: 2rem;
            }
            .hero__title { font-size: 30px; letter-spacing: -0.5px; }
            .hero__tagline { font-size: 15px; }
            .hero__desc { font-size: 14px; }
            .btn--cta { font-size: 12px; padding: 0.875rem 1.5rem; width: 100%; justify-content: center; }

            .hero__right { min-height: 300px; }
            .backup-card { width: 260px; padding: 1.25rem 1.5rem 1.75rem; }
            .backup-card__title { font-size: 15px; }
            .backup-card__row { font-size: 14px; }

            .app-icon { width: 42px; height: 42px; border-radius: 11px; }
            .app-icon--sf     { top: 5px;   right: -10px; }
            .app-icon--box    { top: 75px;  right: -30px; }
            .app-icon--teams  { top: 148px; right: -38px; }
            .app-icon--cloud  { top: 220px; right: -28px; }
            .app-icon--notion { bottom: 30px; left: -5px; }
            .app-icon--slack  { bottom: -8px; right: 5px; }

            /* Breadcrumb */
            .breadcrumb { font-size: 12px; margin-bottom: 1.25rem; }

            /* Benefits */
            .benefits { padding: 4rem 0; }
            .benefits__inner { padding: 0 1rem; }
            .benefits__grid { grid-template-columns: 1fr; gap: 1rem; }
            .benefits__title { font-size: 28px; }
            .benefits__subtitle { font-size: 14px; }
            .benefit-card { padding: 1.5rem; }
            .benefit-card__title { font-size: 15px; }

            /* CTA */
            .cta { padding: 3rem 0; }
            .cta__inner { padding: 0 1rem; grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }
            .cta__title { font-size: 24px; }
            .cta__desc { font-size: 14px; }
            .cta__btn { font-size: 12px; padding: 0.875rem 1.5rem; width: 100%; justify-content: center; }
            .cta__right svg { width: 280px; height: auto; }

            /* Use Cases */
            .usecases { padding: 4rem 0; }
            .usecases__inner { padding: 0 1rem; }
            .usecases__grid { grid-template-columns: 1fr; gap: 1rem; }
            .usecases__title { font-size: 28px; }
            .usecase-card { padding: 1.5rem; }
            .usecase-card__title { font-size: 15px; }

            /* FAQ */
            .faq { padding: 4rem 0; }
            .faq__inner { padding: 0 1rem; max-width: 100%; }
            .faq__title { font-size: 28px; }
            .faq__question { font-size: 14px; padding: 1rem 1.25rem; }
            .faq__item.active .faq__answer { padding: 0 1.25rem 1.25rem; }

        }/* End custom CSS */