:root {
  --cb-bg: #f6f6f7;
  --cb-text: #101114;
  --cb-muted: #5d6370;
  --cb-border: #dbdde2;
  --cb-panel: #ffffff;
  --cb-black: #050505;
  --cb-accent1: #e500ff;
  --cb-accent2: #7a00ff;
  --cb-accent3: #7ecbff;
}

html { scroll-behavior: smooth; }
body {
  background: var(--cb-bg);
  color: var(--cb-text);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.page-header,
.hero-section,
.feature-card,
.benefit-card,
.video-consent-card,
.video-frame,
.video-frame-blocked,
.content-narrow,
.legal-content {
  position: relative;
}

.brand-logo {
  width: 56px;
  height: auto;
}
.brand-name {
  font-weight: 700;
  line-height: 1.1;
  color: #4d4d4d;
}
.brand-subtitle {
  color: var(--cb-muted);
  font-size: 0.9rem;
}

.navbar {
    border-bottom: 12px solid;
    border-image: linear-gradient( 45deg, #3a3a3a 0%, #7c45ff 30%, #d25cff 55%, #9fe4ff 100% ) 1;
}

.hero-section {
  min-height: 78vh;
  background: var(--cb-black);
}
.hero-video-wrap,
.hero-video-wrap iframe,
.hero-overlay,
.video-blocked {
  position: absolute;
  inset: 0;
}
.hero-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.hero-overlay {
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 38%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}
.video-consent-placeholder,
.video-blocked {
  position: relative;
  z-index: 2;
  min-height: 78vh;
}
.video-consent-card {
  max-width: 760px;
  background: rgba(255,255,255,.94);
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 2rem 4rem rgba(0,0,0,.2);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--cb-accent2);
}
/*.section-block {
    position: relative;
}

    .section-block::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 14px;
        background: linear-gradient( 45deg, #303030 0%, #6a00ff 30%, #ff00d4 55%, #a8e7ff 100% );
    }*/
.section-block {
    border-top: 14px solid;
    border-image: linear-gradient( 45deg, #3a3a3a 0%, #6550b8 35%, #9b6fc9 55%, #9fd0e8 100% ) 1;
}
.feature-card,
.benefit-card,
.video-frame,
.video-frame-blocked {
  background: var(--cb-panel);
  border: 1px solid var(--cb-border);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2rem rgba(10,10,10,.04);
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.content-narrow {
  max-width: 860px;
}
.content-paragraph,
.legal-content p {
  font-size: 1.06rem;
  line-height: 1.85;
  color: #20242c;
}
.site-footer {
  border-top: 16px solid var(--cb-black);
}
.footer-link {
  color: rgba(255,255,255,.9);
  text-decoration: none;
}
.footer-link:hover {
  color: white;
  text-decoration: underline;
}
.consent-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 1055;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--cb-border);
  border-radius: 1rem;
}

@media (max-width: 991.98px) {
  .navbar {
    border-bottom-width: 8px;
  }
  .section-block {
    border-top-width: 8px;
  }
  .site-footer {
    border-top-width: 10px;
  }
  .video-consent-placeholder,
  .video-blocked,
  .hero-section {
    min-height: auto;
  }
  .hero-section {
    padding: 4rem 0;
  }
}
.site-header {
    z-index: 1030;
    background: #fff;
}

.bg-black {
    background: radial-gradient( ellipse at top right, rgba(124,69,255,.35), transparent 35% ), radial-gradient( ellipse at bottom left, rgba(159,228,255,.25), transparent 40% ), linear-gradient( 135deg, #18191d 0%, #211f2b 50%, #1b1d23 100% ) !important;
}

/*.feature-card {
    background: white;
    border: 1px solid #e6e8ee;
    border-radius: 24px;
    padding: 2rem;
    transition: all .25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
}*/

/*    .feature-card:hover {
        transform: translateY(-3px);
        border-color: #9b6fc9;
        box-shadow: 0 16px 32px rgba(0,0,0,.08), 0 0 30px rgba(101,80,184,.10);
    }

    .feature-card h3 {
        font-weight: 600;
        margin-bottom: 1rem;
    }*/

/*.feature-card {
    border-radius: 28px;
}*/

.cloudconnect-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 5% 100%, rgba(124,69,255,.10), transparent 35%), radial-gradient(circle at 95% 90%, rgba(159,228,255,.16), transparent 35%), linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
}

    .cloudconnect-section::before {
        content: "";
        position: absolute;
        left: -10%;
        bottom: -80px;
        width: 65%;
        height: 260px;
        background: repeating-radial-gradient( ellipse at center, rgba(124,69,255,.14) 0, rgba(124,69,255,.14) 1px, transparent 2px, transparent 22px );
        opacity: .35;
        transform: rotate(-8deg);
        pointer-events: none;
    }

    .cloudconnect-section .container {
        position: relative;
        z-index: 1;
    }

.eyebrow {
    color: #7c45ff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.accent-line {
    width: 110px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c45ff, #d25cff, #9fe4ff);
}

.cloudconnect-copy h2 {
    color: #081126;
    line-height: 1.15;
}

.benefit-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border: 1px solid rgba(8,17,38,.10);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(124,69,255,.045), transparent 38%), #fff;
    box-shadow: 0 18px 45px rgba(8,17,38,.07), inset 0 1px 0 rgba(255,255,255,.8);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .benefit-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, #7c45ff, #d25cff, #9fe4ff);
        opacity: .9;
    }

    .benefit-card:hover {
        transform: translateY(-4px);
        border-color: rgba(124,69,255,.28);
        box-shadow: 0 26px 60px rgba(8,17,38,.11), 0 0 35px rgba(124,69,255,.10);
    }

.benefit-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    background: radial-gradient(circle at 30% 20%, rgba(159,228,255,.35), transparent 45%), linear-gradient(135deg, rgba(124,69,255,.16), rgba(210,92,255,.10));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.benefit-card h3 {
    color: #081126;
    font-weight: 700;
    line-height: 1.25;
}


.cloudconnect-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 5% 100%, rgba(124,69,255,.12), transparent 35%), radial-gradient(circle at 95% 90%, rgba(159,228,255,.18), transparent 36%), linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
}

    .cloudconnect-section::before {
        content: "";
        position: absolute;
        left: -12%;
        bottom: -90px;
        width: 70%;
        height: 280px;
        background: repeating-radial-gradient(ellipse at center, rgba(124,69,255,.16) 0, rgba(124,69,255,.16) 1px, transparent 2px, transparent 22px);
        opacity: .32;
        transform: rotate(-8deg);
        pointer-events: none;
    }

    .cloudconnect-section .container {
        position: relative;
        z-index: 1;
    }

.accent-line {
    width: 110px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c45ff, #d25cff, #9fe4ff);
}

.benefit-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(8,17,38,.10);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(124,69,255,.05), transparent 38%), #fff;
    box-shadow: 0 18px 45px rgba(8,17,38,.07), inset 0 1px 0 rgba(255,255,255,.8);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .benefit-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, #7c45ff, #d25cff, #9fe4ff);
        opacity: .9;
    }

    .benefit-card:hover {
        transform: translateY(-4px);
        border-color: rgba(124,69,255,.28);
        box-shadow: 0 26px 60px rgba(8,17,38,.11), 0 0 35px rgba(124,69,255,.10);
    }


.benefit-card h3,
.cloudconnect-copy h2 {
    color: #081126;
}

.benefit-card h3 {
    font-weight: 700;
    line-height: 1.25;
}

.benefit-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #6f4cff;
    background: radial-gradient(circle at 30% 20%, rgba(159,228,255,.45), transparent 45%), linear-gradient(135deg, rgba(124,69,255,.20), rgba(210,92,255,.14));
}

    .benefit-icon i {
        font-size: 1.65rem;
        line-height: 1;
    }

.feature-card {
    position: relative;
    overflow: hidden;
}

    .feature-card h2,
    .feature-card p {
        position: relative;
        z-index: 2;
    }



.feature-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(8,17,38,.10);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(124,69,255,.05), transparent 38%), #fff;
    box-shadow: 0 18px 45px rgba(8,17,38,.07), inset 0 1px 0 rgba(255,255,255,.8);
    transition: all .25s ease;
}

    .feature-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 24px;
        bottom: 24px;
        width: 4px;
        border-radius: 999px;
        background: linear-gradient( 180deg, #7c45ff, #d25cff, #9fe4ff );
    }









    .feature-flow i {
        position: absolute;
        font-size: 1.8rem;
        color: #6f4cff;
        animation: featureFlow 10s linear infinite;
    }

        .feature-flow i:nth-child(1) {
            top: 20px;
            animation-delay: 0s;
        }

        .feature-flow i:nth-child(2) {
            top: 60px;
            animation-delay: -2.5s;
        }

        .feature-flow i:nth-child(3) {
            top: 100px;
            animation-delay: -5s;
        }

        .feature-flow i:nth-child(4) {
            top: 140px;
            animation-delay: -7.5s;
        }

@keyframes featureFlow {
    from {
        left: -40px;
    }

    to {
        left: calc(100% + 40px);
    }
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124,69,255,.28);
    box-shadow: 0 26px 60px rgba(8,17,38,.11), 0 0 35px rgba(124,69,255,.10);
}

    .feature-card:hover::before {
        width: 6px;
    }

/*.feature-card::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 24px;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient( 90deg, #7c45ff, #d25cff, #9fe4ff );
}*/

.feature-flow {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .12;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.feature-card:hover .feature-flow {
    opacity: 0;
    transform: scale(1.05);
}

.feature-card h2,
.feature-card p {
    position: relative;
    z-index: 2;
    transition: transform .25s ease;
}

.feature-card:hover h2,
.feature-card:hover p {
    transform: translateX(4px);
}

.feature-card .h5 {
    font-weight: 700 !important;
    
}
.section-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.section-header-logo {
    width: 256px;
    height: 256px;
    object-fit: contain;
    flex-shrink: 0;
}

.min-vh-75 {
    min-height: 75vh;
}

.hero-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #eef2f7 100%);
}

.hero-visual img {
    width: 100%;
    object-fit: cover;
}

.workflow-card {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.workflow-step {
    flex: 1;
    min-width: 120px;
    text-align: center;
}

    .workflow-step i {
        display: block;
        font-size: 2.2rem;
        margin-bottom: .75rem;
    }

    .workflow-step span {
        font-weight: 600;
    }

.workflow-line {
    width: 40px;
    height: 2px;
    background: #dee2e6;
}

@media (max-width: 768px) {
    .workflow-card {
        flex-direction: column;
    }

    .workflow-line {
        width: 2px;
        height: 30px;
    }
}
.card,
.feature-card,
.benefit-card,
.video-consent-card,
.workflow-card {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

    .card *,
    .feature-card *,
    .benefit-card *,
    .video-consent-card *,
    .workflow-card * {
        min-width: 0;
        max-width: 100%;
    }

    .card p,
    .card h1,
    .card h2,
    .card h3,
    .card h4,
    .card h5,
    .card h6,
    .feature-card p,
    .feature-card h1,
    .feature-card h2,
    .feature-card h3,
    .feature-card h4,
    .feature-card h5,
    .feature-card h6,
    .benefit-card p,
    .benefit-card h1,
    .benefit-card h2,
    .benefit-card h3,
    .benefit-card h4,
    .benefit-card h5,
    .benefit-card h6,
    .video-consent-card p,
    .video-consent-card h1,
    .video-consent-card h2,
    .video-consent-card h3,
    .workflow-card p,
    .workflow-card h1,
    .workflow-card h2,
    .workflow-card h3 {
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;
    }



.hero-section {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(2px);
}

.hero-card {
    position: relative;
    z-index: 10;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.hero-overlay {
    display: none;
}

.hero-card {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(5px);
}
:root {
    --cb-purple: #8A00FF;
    --cb-magenta: #F000FF;
    --cb-blue: #73D7FF;
    --cb-blue-dark: #5AAEF5;
}
.btn-company {
    color: white;
    border: none;
    background: linear-gradient( 135deg, var(--cb-purple) 0%, var(--cb-magenta) 40%, var(--cb-blue) 100% );
    box-shadow: 0 10px 30px rgba(138,0,255,.25);
}

    .btn-company:hover {
        color: white;
        transform: translateY(-1px);
        background: linear-gradient( 135deg, #7b00e6 0%, #d600e6 40%, #5cc9ff 100% );
    }
.btn-company-outline {
    background: rgba(255,255,255,.9);
    border: 2px solid var(--cb-purple);
    color: var(--cb-purple);
}

    .btn-company-outline:hover {
        background: var(--cb-purple);
        color: white;
    }
.eyebrow {
    color: var(--cb-purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}


.video-selector-list {
    display: grid;
    gap: 0.75rem;
}

.video-choice {
    width: 100%;
    position: relative;
    background: #ffffff;
    border: 1px solid #dbe3ea;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: all .2s ease;
}

    .video-choice:hover {
        border-color: #84dbff;
        box-shadow: 0 10px 25px rgba(92, 201, 255, .12);
        transform: translateY(-1px);
    }

    .video-choice.active {
        color: #183247;
        border-color: #84dbff;
        background: linear-gradient( 135deg, #ecfbff 0%, #dff8ff 25%, #c9f3ff 55%, #a7e8ff 100% );
        box-shadow: 0 12px 30px rgba(92, 201, 255, .18), 0 0 0 1px rgba(92, 201, 255, .15);
    }

        .video-choice.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient( 180deg, #b100ff 0%, #5cc9ff 100% );
        }

.video-choice-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a8c99;
    margin-bottom: 0.25rem;
}

.video-choice-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #183247;
}

.video-choice.active .video-choice-kicker {
    color: #2f6d8f;
}

.video-choice.active .video-choice-title {
    color: #16405c;
}


.feature-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.feature-card-image {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

    .feature-card-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

.feature-card-body {
    position: relative;
    z-index: 2;
}


html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.container,
.row,
[class^="col-"],
[class*=" col-"] {
    min-width: 0;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 991.98px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-header-logo {
        width: 100%;
        max-width: 260px;
        height: auto;
    }

    .feature-card {
        display: block;
        width: 100%;
    }

    .feature-card-image img {
        width: 100%;
        height: auto;
        display: block;
    }
}

.language-selector {
    min-width: 120px;
    white-space: nowrap;
}

.btn-flag {
    background: #6550B8;
    border-color: #6550B8;
    color: #fff;
}

.btn-flag:hover {
    background: #5745A3;
    border-color: #5745A3;
}