/* CreaLabs Banner Module v0.1.2 */
.cl-db-banner {
    --cl-db-overlay-color: #050b1d;
    --cl-db-overlay-opacity: .62;
    --cl-db-min-height: 760px;
    --cl-db-robot-scale: 1;
    --cl-db-robot-x: 0px;
    --cl-db-robot-y: 0px;
    position: relative;
    width: 100%;
    isolation: isolate;
    color: #fff;
}

.cl-db-container {
    width: min(1760px, calc(100% - 96px));
    margin-inline: auto;
    position: relative;
    z-index: 4;
}

.cl-db-media,
.cl-db-overlay,
.cl-db-grid-pattern,
.cl-db-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cl-db-media {
    z-index: -5;
    overflow: hidden;
}

.cl-db-media picture,
.cl-db-media__image,
.cl-db-media__video {
    display: block;
    width: 100%;
    height: 100%;
}

.cl-db-media__image,
.cl-db-media__video {
    object-fit: cover;
}

.cl-db-overlay {
    z-index: -4;
    background: var(--cl-db-overlay-color);
    opacity: var(--cl-db-overlay-opacity);
}

.cl-db-grid-pattern {
    z-index: -3;
    opacity: .42;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(37, 173, 255, .42) 1px, transparent 1.2px),
        linear-gradient(rgba(40, 130, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 130, 255, .045) 1px, transparent 1px);
    background-size: 32px 32px, 96px 96px, 96px 96px;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .88) 70%, transparent 100%);
}

.cl-db-aurora {
    z-index: -2;
    filter: blur(24px);
    opacity: .78;
}

.cl-db-aurora--blue {
    background: radial-gradient(circle at 10% 22%, rgba(0, 147, 255, .30), transparent 42%);
}

.cl-db-aurora--purple {
    background: radial-gradient(circle at 91% 15%, rgba(171, 42, 255, .34), transparent 45%);
}

.cl-db-banner--hero {
    min-height: var(--cl-db-min-height);
    overflow: hidden;
    padding: 88px 0 56px;
    background:
        radial-gradient(circle at 18% 18%, rgba(0, 145, 255, .18), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(163, 40, 255, .26), transparent 38%),
        linear-gradient(118deg, #031326 0%, #07122d 45%, #140a31 100%);
    border-top: 1px solid rgba(65, 182, 255, .16);
    border-bottom: 1px solid rgba(65, 182, 255, .14);
}

.cl-db-hero-grid {
    min-height: calc(var(--cl-db-min-height) - 144px);
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(720px, 1.22fr);
    align-items: center;
    gap: 52px;
}

.cl-db-hero-content {
    position: relative;
    z-index: 6;
    max-width: 660px;
}

.cl-db-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(32, 184, 255, .72);
    border-radius: 8px;
    color: #c8ecff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    background: rgba(4, 40, 80, .45);
    box-shadow: inset 0 0 18px rgba(0, 153, 255, .09), 0 0 24px rgba(0, 153, 255, .08);
}

.cl-db-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #35c9ff;
    box-shadow: 0 0 14px #35c9ff;
}

.cl-db-title {
    margin: 26px 0 24px;
    font-size: clamp(54px, 4.45vw, 88px);
    line-height: .98;
    letter-spacing: -.058em;
    font-weight: 800;
}

.cl-db-title span {
    display: block;
}

.cl-db-title__highlight {
    width: max-content;
    max-width: 100%;
    color: transparent;
    background: linear-gradient(90deg, #11b6ff 0%, #3776ff 44%, #a334ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

.cl-db-title__suffix {
    margin-top: 4px;
}

.cl-db-description {
    max-width: 700px;
    margin: 0;
    color: #c7d8f2;
    font-size: clamp(16px, 1.1vw, 20px);
    line-height: 1.62;
}

.cl-db-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.cl-db-actions .cl-button,
.cl-db-cta-actions .cl-button {
    min-height: 52px;
}

.cl-db-bottom-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 36px;
}

.cl-db-bottom-metric {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
}

.cl-db-bottom-metric.is-visible {
    opacity: 1;
    transform: none;
}

.cl-db-bottom-metric__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #6d7cff;
    filter: drop-shadow(0 0 10px rgba(82, 103, 255, .75));
}

.cl-db-bottom-metric__icon svg {
    width: 24px;
    height: 24px;
}

.cl-db-bottom-metric strong,
.cl-db-bottom-metric small {
    display: block;
}

.cl-db-bottom-metric strong {
    font-size: 17px;
    line-height: 1;
    color: #fff;
}

.cl-db-bottom-metric small {
    margin-top: 6px;
    color: #a9bfdf;
    font-size: 11px;
    white-space: nowrap;
}

.cl-db-hero-visual {
    position: relative;
    min-height: 650px;
}

.cl-db-robot-stage {
    position: absolute;
    left: 50%;
    top: 51%;
    width: 610px;
    height: 610px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}

.cl-db-orbit,
.cl-db-stage-ring,
.cl-db-stage-glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.cl-db-orbit {
    inset: 7%;
    border: 1px solid rgba(52, 129, 255, .30);
    animation: clDbOrbit 22s linear infinite;
}

.cl-db-orbit--two {
    inset: 18%;
    border-color: rgba(160, 68, 255, .28);
    animation-direction: reverse;
    animation-duration: 17s;
}

.cl-db-stage-ring {
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%) rotateX(67deg);
    border: 2px solid rgba(45, 154, 255, .58);
    box-shadow:
        0 0 26px rgba(39, 149, 255, .72),
        inset 0 0 28px rgba(140, 45, 255, .35);
}

.cl-db-stage-ring--outer {
    width: 78%;
    height: 30%;
}

.cl-db-stage-ring--middle {
    width: 61%;
    height: 23%;
    border-color: rgba(144, 58, 255, .72);
}

.cl-db-stage-ring--inner {
    width: 43%;
    height: 16%;
    border-color: rgba(31, 211, 255, .78);
}

.cl-db-stage-glow {
    left: 50%;
    bottom: 8%;
    width: 56%;
    height: 18%;
    transform: translateX(-50%);
    background: rgba(38, 149, 255, .34);
    filter: blur(24px);
}

.cl-db-hero-robot {
    position: relative;
    z-index: 5;
    width: 330px;
    height: auto;
    object-fit: contain;
    transform:
        translate(var(--cl-db-robot-x), var(--cl-db-robot-y))
        scale(var(--cl-db-robot-scale));
    transform-origin: center bottom;
    filter:
        drop-shadow(0 24px 30px rgba(0, 0, 0, .34))
        drop-shadow(0 0 26px rgba(36, 188, 255, .22));
    animation: clDbRobotFloat 5.2s ease-in-out infinite;
}

.cl-db-right-media {
    position: absolute;
    inset: 7% 10%;
    overflow: hidden;
    border-radius: 34px;
    opacity: .42;
    mask-image: radial-gradient(circle at center, #000 34%, transparent 77%);
}

.cl-db-right-media .cl-db-media__image,
.cl-db-right-media .cl-db-media__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cl-db-media-mode--right > .cl-db-media {
    display: none;
}

.cl-db-floating-card {
    position: absolute;
    z-index: 8;
    width: 218px;
    min-height: 122px;
    padding: 16px 17px;
    border: 1px solid rgba(41, 152, 255, .62);
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(8, 28, 73, .94), rgba(11, 19, 57, .92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 18px 44px rgba(2, 7, 25, .34),
        0 0 26px rgba(34, 130, 255, .08);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(18px) scale(.97);
    transition:
        opacity .62s ease,
        transform .62s cubic-bezier(.2, .75, .2, 1),
        box-shadow .25s ease;
}

.cl-db-floating-card.is-visible {
    opacity: 1;
    transform: none;
}

.cl-db-floating-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 20px 50px rgba(2, 7, 25, .45),
        0 0 34px rgba(39, 143, 255, .19);
}

.cl-db-floating-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #bdcbea;
    font-size: 10px;
    font-weight: 700;
}

.cl-db-floating-card header em {
    color: #35f4bc;
    font-size: 9px;
    font-style: normal;
}

.cl-db-floating-card > strong {
    display: block;
    margin-top: 11px;
    font-size: 19px;
    line-height: 1;
}

.cl-db-slot--left-top { left: 0; top: 7%; }
.cl-db-slot--left-middle { left: -2%; top: 39%; }
.cl-db-slot--left-bottom { left: 1%; bottom: 8%; }
.cl-db-slot--right-top { right: 0; top: 7%; }
.cl-db-slot--right-middle { right: -2%; top: 39%; }
.cl-db-slot--right-bottom { right: 1%; bottom: 8%; }

.cl-db-line-chart {
    width: 100%;
    height: 52px;
    margin-top: 10px;
    overflow: visible;
}

.cl-db-line-chart__area {
    fill: rgba(25, 181, 255, .12);
}

.cl-db-line-chart__line {
    fill: none;
    stroke: #1cc2ff;
    stroke-width: 2;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    transition: stroke-dashoffset 1.4s ease .2s;
}

.cl-db-floating-card.is-visible .cl-db-line-chart__line {
    stroke-dashoffset: 0;
}

.cl-db-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 54px;
    margin-top: 10px;
}

.cl-db-bars i {
    flex: 1;
    height: 0;
    border-radius: 4px 4px 1px 1px;
    background: linear-gradient(180deg, #2acfff, #5b3bff);
    box-shadow: 0 0 12px rgba(30, 196, 255, .3);
    transition: height .9s cubic-bezier(.2, .75, .2, 1);
}

.cl-db-floating-card.is-visible .cl-db-bars i {
    height: var(--h);
}

.cl-db-ring-row,
.cl-db-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}

.cl-db-ring-row strong,
.cl-db-ring-row small,
.cl-db-status-row strong,
.cl-db-status-row small {
    display: block;
}

.cl-db-ring-row strong {
    font-size: 26px;
}

.cl-db-ring-row small,
.cl-db-status-row small {
    margin-top: 6px;
    color: #8094ba;
    font-size: 9px;
}

.cl-db-progress-ring {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #dce7ff;
    font-size: 10px;
    font-weight: 800;
    background:
        radial-gradient(circle, #0d1a42 58%, transparent 60%),
        conic-gradient(#23d5ff 0 66%, #923dff 66% 87%, rgba(255,255,255,.08) 87%);
    transform: rotate(-110deg);
    opacity: .2;
    transition: transform 1s ease, opacity 1s ease;
}

.cl-db-floating-card.is-visible .cl-db-progress-ring {
    transform: rotate(0);
    opacity: 1;
}

.cl-db-integration-tags {
    display: flex;
    gap: 9px;
    margin-top: 22px;
}

.cl-db-integration-tags span {
    min-width: 42px;
    min-height: 32px;
    padding: 7px 9px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(53, 129, 255, .34);
    border-radius: 8px;
    color: #35efb2;
    background: rgba(7, 26, 67, .72);
    font-size: 10px;
    font-weight: 800;
}

.cl-db-status-check {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(44, 245, 192, .45);
    border-radius: 999px;
    color: #2cf5c0;
    box-shadow: 0 0 18px rgba(44, 245, 192, .12);
}

.cl-db-status-check svg {
    width: 20px;
    height: 20px;
}

.cl-db-stat-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    margin-top: 14px;
}

.cl-db-stat-card__icon {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #38c7ff;
    border: 1px solid rgba(57, 168, 255, .32);
    border-radius: 9px;
}

.cl-db-stat-card__icon svg {
    width: 20px;
    height: 20px;
}

.cl-db-stat-card strong {
    font-size: 21px;
}

.cl-db-stat-card small {
    color: #8094ba;
    font-size: 9px;
}

.cl-db-banner--cta {
    overflow: visible;
    padding: 86px 0 100px;
    background: #040b1c;
}

.cl-db-cta-card {
    position: relative;
    min-height: var(--cl-db-min-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px 280px;
    align-items: center;
    gap: 26px;
    overflow: visible;
    padding: 54px 56px;
    border: 1px solid rgba(77, 133, 255, .56);
    border-radius: 22px;
    background:
        linear-gradient(110deg, rgba(5, 69, 154, .96), rgba(27, 34, 100, .96) 48%, rgba(120, 25, 173, .95));
    box-shadow:
        0 30px 70px rgba(2, 6, 20, .38),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

.cl-db-cta-card > .cl-db-media,
.cl-db-cta-card > .cl-db-overlay,
.cl-db-cta-card > .cl-db-grid-pattern,
.cl-db-cta-card > .cl-db-aurora {
    border-radius: inherit;
    overflow: hidden;
}

.cl-db-cta-content {
    position: relative;
    z-index: 5;
    max-width: 760px;
}

.cl-db-cta-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: #5fd0ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cl-db-cta-content h2 {
    margin: 0;
    font-size: clamp(34px, 3vw, 58px);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.cl-db-cta-content h2 span {
    color: transparent;
    background: linear-gradient(90deg, #5ad8ff, #c04cff);
    background-clip: text;
    -webkit-background-clip: text;
}

.cl-db-cta-content p {
    max-width: 720px;
    margin: 16px 0 0;
    color: #d3e0f7;
    font-size: 15px;
    line-height: 1.65;
}

.cl-db-cta-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 26px;
}

.cl-db-cta-metrics > div {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s ease, transform .55s ease;
}

.cl-db-cta-metrics > div.is-visible {
    opacity: 1;
    transform: none;
}

.cl-db-cta-metrics strong,
.cl-db-cta-metrics small {
    display: block;
}

.cl-db-cta-metrics strong {
    font-size: 22px;
}

.cl-db-cta-metrics small {
    margin-top: 4px;
    color: #9ec0e7;
    font-size: 10px;
}

.cl-db-cta-robot {
    position: absolute;
    z-index: 7;
    left: 67%;
    bottom: -46px;
    width: 330px;
    max-width: none;
    transform:
        translateX(-50%)
        translate(var(--cl-db-robot-x), var(--cl-db-robot-y))
        scale(var(--cl-db-robot-scale));
    transform-origin: center bottom;
    filter:
        drop-shadow(0 28px 28px rgba(0, 0, 0, .42))
        drop-shadow(0 0 28px rgba(36, 195, 255, .28));
    animation: clDbCtaRobot 5s ease-in-out infinite;
}

.cl-db-cta-actions {
    position: relative;
    z-index: 8;
    display: grid;
    gap: 14px;
}

.cl-db-cta-actions .cl-button {
    width: 100%;
    justify-content: center;
}

[data-banner-metric][data-animation="pulse"].is-visible {
    animation: clDbPulse 2.2s ease-in-out infinite;
}

@keyframes clDbOrbit {
    to { transform: rotate(360deg); }
}

@keyframes clDbRobotFloat {
    0%, 100% {
        transform:
            translate(var(--cl-db-robot-x), var(--cl-db-robot-y))
            scale(var(--cl-db-robot-scale))
            translateY(0);
    }
    50% {
        transform:
            translate(var(--cl-db-robot-x), var(--cl-db-robot-y))
            scale(var(--cl-db-robot-scale))
            translateY(-10px);
    }
}

@keyframes clDbCtaRobot {
    0%, 100% {
        transform:
            translateX(-50%)
            translate(var(--cl-db-robot-x), var(--cl-db-robot-y))
            scale(var(--cl-db-robot-scale))
            translateY(0);
    }
    50% {
        transform:
            translateX(-50%)
            translate(var(--cl-db-robot-x), var(--cl-db-robot-y))
            scale(var(--cl-db-robot-scale))
            translateY(-8px);
    }
}

@keyframes clDbPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(39, 168, 255, 0); }
    50% { box-shadow: 0 0 30px rgba(39, 168, 255, .18); }
}

@media (max-width: 1500px) {
    .cl-db-container {
        width: min(1460px, calc(100% - 64px));
    }

    .cl-db-hero-grid {
        grid-template-columns: minmax(0, .85fr) minmax(650px, 1.15fr);
    }

    .cl-db-title {
        font-size: clamp(50px, 4.15vw, 72px);
    }

    .cl-db-floating-card {
        width: 196px;
    }
}

@media (max-width: 1240px) {
    .cl-db-banner--hero {
        padding-top: 110px;
    }

    .cl-db-hero-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cl-db-hero-content {
        max-width: 860px;
    }

    .cl-db-hero-visual {
        min-height: 640px;
    }

    .cl-db-cta-card {
        grid-template-columns: 1fr 250px;
        padding-right: 42px;
    }

    .cl-db-cta-robot {
        left: 72%;
        width: 270px;
    }

    .cl-db-cta-actions {
        grid-column: 2;
    }
}

@media (max-width: 900px) {
    .cl-db-container {
        width: min(100% - 36px, 760px);
    }

    .cl-db-title {
        font-size: clamp(46px, 11vw, 68px);
    }

    .cl-db-description {
        font-size: 17px;
    }

    .cl-db-bottom-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cl-db-hero-visual {
        min-height: 720px;
    }

    .cl-db-floating-card {
        width: 190px;
    }

    .cl-db-slot--left-top { left: 0; top: 4%; }
    .cl-db-slot--left-middle { left: 0; top: 31%; }
    .cl-db-slot--left-bottom { left: 0; bottom: 4%; }
    .cl-db-slot--right-top { right: 0; top: 4%; }
    .cl-db-slot--right-middle { right: 0; top: 31%; }
    .cl-db-slot--right-bottom { right: 0; bottom: 4%; }

    .cl-db-cta-card {
        min-height: 430px;
        grid-template-columns: 1fr;
        padding: 42px 30px 170px;
    }

    .cl-db-cta-robot {
        left: 50%;
        bottom: -38px;
        width: 245px;
    }

    .cl-db-cta-actions {
        grid-column: auto;
        width: min(100%, 360px);
    }
}

@media (max-width: 640px) {
    .cl-db-banner--hero {
        padding: 92px 0 34px;
    }

    .cl-db-container {
        width: calc(100% - 28px);
    }

    .cl-db-kicker {
        font-size: 12px;
        padding: 8px 12px;
    }

    .cl-db-title {
        margin-top: 20px;
        font-size: clamp(42px, 13.6vw, 58px);
    }

    .cl-db-title__highlight {
        width: auto;
    }

    .cl-db-description {
        font-size: 15px;
    }

    .cl-db-actions {
        display: grid;
    }

    .cl-db-actions .cl-button {
        width: 100%;
        justify-content: center;
    }

    .cl-db-bottom-metrics {
        gap: 18px 12px;
    }

    .cl-db-bottom-metric {
        gap: 9px;
    }

    .cl-db-bottom-metric small {
        white-space: normal;
    }

    .cl-db-hero-visual {
        min-height: 760px;
        margin-inline: -8px;
    }

    .cl-db-robot-stage {
        top: 48%;
        width: 460px;
        height: 460px;
    }

    .cl-db-hero-robot {
        width: 255px;
    }

    .cl-db-floating-card {
        width: 158px;
        min-height: 104px;
        padding: 12px;
    }

    .cl-db-floating-card header {
        font-size: 8px;
    }

    .cl-db-floating-card > strong {
        font-size: 15px;
    }

    .cl-db-slot--left-top { top: 2%; }
    .cl-db-slot--right-top { top: 2%; }
    .cl-db-slot--left-middle { top: 33%; }
    .cl-db-slot--right-middle { top: 33%; }
    .cl-db-slot--left-bottom { bottom: 1%; }
    .cl-db-slot--right-bottom { bottom: 1%; }

    .cl-db-banner--cta {
        padding: 70px 0 84px;
    }

    .cl-db-cta-card {
        padding: 34px 22px 160px;
        border-radius: 18px;
    }

    .cl-db-cta-content h2 {
        font-size: 36px;
    }

    .cl-db-cta-robot {
        width: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cl-db-orbit,
    .cl-db-hero-robot,
    .cl-db-cta-robot,
    [data-banner-metric][data-animation="pulse"].is-visible {
        animation: none !important;
    }

    .cl-db-floating-card,
    .cl-db-bottom-metric,
    .cl-db-cta-metrics > div {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   CreaLabs banner slider + scheduled campaign controls (v0.1.2.3)
   -------------------------------------------------------------------------- */
.cl-db-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #030919;
    isolation: isolate;
}

.cl-db-slider__track {
    display: grid;
}

.cl-db-slider__slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
    transition:
        opacity var(--cl-db-slider-duration, 700ms) ease,
        transform var(--cl-db-slider-duration, 700ms) cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear var(--cl-db-slider-duration, 700ms);
}

.cl-db-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
    transition-delay: 0s;
}

.cl-db-slider[data-slider-effect="slide-left"] .cl-db-slider__slide {
    transform: translateX(6%);
}

.cl-db-slider[data-slider-effect="slide-left"] .cl-db-slider__slide.is-active {
    transform: translateX(0);
}

.cl-db-slider[data-slider-effect="zoom"] .cl-db-slider__slide {
    transform: scale(1.025);
}

.cl-db-slider[data-slider-effect="zoom"] .cl-db-slider__slide.is-active {
    transform: scale(1);
}

.cl-db-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(80, 170, 255, .46);
    border-radius: 999px;
    color: #fff;
    background: rgba(6, 16, 46, .66);
    box-shadow: 0 0 28px rgba(44, 130, 255, .14);
    backdrop-filter: blur(15px);
    transform: translateY(-50%);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.cl-db-slider__arrow:hover {
    border-color: rgba(125, 85, 255, .88);
    background: rgba(22, 20, 74, .88);
    transform: translateY(-50%) scale(1.06);
}

.cl-db-slider__arrow span {
    display: block;
    margin-top: -4px;
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
}

.cl-db-slider__arrow--prev {
    left: clamp(14px, 2.2vw, 42px);
}

.cl-db-slider__arrow--next {
    right: clamp(14px, 2.2vw, 42px);
}

.cl-db-slider__pagination {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 21;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid rgba(83, 151, 255, .18);
    border-radius: 999px;
    background: rgba(3, 10, 31, .52);
    backdrop-filter: blur(12px);
    transform: translateX(-50%);
}

.cl-db-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(181, 204, 255, .38);
    cursor: pointer;
    transition: width .25s ease, background .25s ease, box-shadow .25s ease;
}

.cl-db-slider__dot.is-active {
    width: 30px;
    background: linear-gradient(90deg, #16b9ff, #9742ff);
    box-shadow: 0 0 16px rgba(74, 112, 255, .75);
}

.cl-db-slider__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 22;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
}

.cl-db-slider__progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #16b9ff 0%, #3978ff 48%, #a43cff 100%);
    transform: scaleX(0);
    transform-origin: left center;
}

.cl-db-slider.is-running .cl-db-slider__progress span {
    animation: clDbSliderProgress var(--cl-db-slider-interval, 7000ms) linear forwards;
}

@keyframes clDbSliderProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (max-width: 900px) {
    .cl-db-slider__arrow {
        width: 40px;
        height: 40px;
        top: auto;
        bottom: 15px;
        transform: none;
    }

    .cl-db-slider__arrow:hover {
        transform: scale(1.04);
    }

    .cl-db-slider__arrow--prev {
        left: 16px;
    }

    .cl-db-slider__arrow--next {
        right: 16px;
    }

    .cl-db-slider__pagination {
        bottom: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cl-db-slider__slide,
    .cl-db-slider__arrow,
    .cl-db-slider__dot {
        transition: none !important;
    }

    .cl-db-slider__progress {
        display: none;
    }
}

/* CREALABS HERO PREMIUM METRICS v2.0.4 */
.cl-db-hero-visual{isolation:isolate}
.cl-db-metric-rail{
    position:absolute;z-index:2;top:4%;bottom:4%;width:246px;pointer-events:none;
    border:1px solid rgba(74,134,255,.20);border-radius:24px;overflow:hidden;
    background:
        linear-gradient(180deg,rgba(11,31,73,.24),rgba(7,18,48,.12)),
        repeating-linear-gradient(0deg,rgba(80,145,255,.035) 0 1px,transparent 1px 34px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 30px 70px rgba(1,6,22,.12);
    opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)
}
.cl-db-banner.is-visible .cl-db-metric-rail{opacity:1;transform:none}
.cl-db-metric-rail--left{left:-10px}
.cl-db-metric-rail--right{right:-10px}
.cl-db-metric-rail::before{
    content:"";position:absolute;top:24px;bottom:24px;width:1px;
    background:linear-gradient(180deg,transparent,rgba(39,195,255,.60) 18%,rgba(104,80,255,.55) 52%,rgba(39,195,255,.35) 82%,transparent);
    box-shadow:0 0 16px rgba(61,158,255,.26)
}
.cl-db-metric-rail--left::before{left:16px}.cl-db-metric-rail--right::before{right:16px}
.cl-db-metric-rail span{
    position:absolute;inset:0;background:radial-gradient(circle at 50% 10%,rgba(48,188,255,.10),transparent 32%),radial-gradient(circle at 50% 88%,rgba(124,58,237,.10),transparent 35%)
}

.cl-db-floating-card{
    z-index:9;width:222px;min-height:128px;padding:16px 17px 15px;border-radius:16px;
    border-color:rgba(73,158,255,.42);
    background:linear-gradient(145deg,rgba(10,31,72,.90),rgba(7,18,49,.84));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 44px rgba(0,5,22,.28),0 0 0 1px rgba(53,129,255,.025);
    backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);
    overflow:hidden
}
.cl-db-floating-card::before{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,transparent,#22d3ee 22%,#4f7cff 58%,#8b5cf6 82%,transparent);opacity:.78
}
.cl-db-floating-card::after{
    content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-55px;top:-58px;
    background:rgba(44,181,255,.10);filter:blur(4px);pointer-events:none
}
.cl-db-floating-card:hover{
    translate:0 -4px;border-color:rgba(71,196,255,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 56px rgba(0,5,22,.40),0 0 28px rgba(34,171,255,.13)
}
.cl-db-floating-card header{position:relative;z-index:1;font-size:10.5px;letter-spacing:.01em;color:#c9d7ef}
.cl-db-floating-card header>span{display:inline-flex;align-items:center;gap:7px}
.cl-db-floating-card header>span::before{content:"";width:6px;height:6px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 10px rgba(45,212,191,.55)}
.cl-db-floating-card header em{padding:4px 7px;border:1px solid rgba(45,212,191,.22);border-radius:999px;background:rgba(16,185,129,.07);font-size:9px}
.cl-db-floating-card>strong{position:relative;z-index:1;margin-top:12px;font-size:21px;letter-spacing:-.025em}
.cl-db-card-note{position:relative;z-index:1;display:block;margin-top:5px;color:#8da2c4;font-size:9px;line-height:1.25}
.cl-db-line-chart{position:relative;z-index:1;height:46px;margin-top:8px;border-radius:8px;background:repeating-linear-gradient(0deg,rgba(129,160,214,.055) 0 1px,transparent 1px 15px)}
.cl-db-line-chart__area{fill:rgba(25,181,255,.10)}
.cl-db-bars{position:relative;z-index:1;height:48px;margin-top:8px;padding-top:4px;background:repeating-linear-gradient(0deg,rgba(129,160,214,.05) 0 1px,transparent 1px 15px)}
.cl-db-bars i{border-radius:5px 5px 2px 2px;box-shadow:0 0 15px rgba(30,196,255,.24)}
.cl-db-progress-ring{width:58px;height:58px;box-shadow:0 0 20px rgba(35,213,255,.10)}
.cl-db-integration-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}
.cl-db-integration-tags span{min-width:0;min-height:28px;padding:6px 8px;border-radius:999px;color:#7ef4d2;background:rgba(9,34,68,.76);font-size:9px}
.cl-db-status-check{position:relative;z-index:1;width:44px;height:44px;background:rgba(16,185,129,.055)}
.cl-db-stat-card{position:relative;z-index:1}
.cl-db-stat-card__icon{background:rgba(24,144,255,.055);box-shadow:inset 0 0 18px rgba(39,169,255,.045)}
.cl-db-slot--left-top{left:10px;top:9%}.cl-db-slot--left-middle{left:10px;top:39%}.cl-db-slot--left-bottom{left:10px;bottom:9%}
.cl-db-slot--right-top{right:10px;top:9%}.cl-db-slot--right-middle{right:10px;top:39%}.cl-db-slot--right-bottom{right:10px;bottom:9%}

.cl-db-bottom-metrics{
    position:relative;max-width:650px;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:34px;padding:8px;
    border:1px solid rgba(78,139,255,.24);border-radius:17px;overflow:hidden;
    background:linear-gradient(135deg,rgba(8,25,63,.68),rgba(10,20,49,.50));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 42px rgba(1,6,22,.18);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.cl-db-bottom-metrics::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,#2dd4ff,#745cff,transparent);opacity:.72}
.cl-db-bottom-metric{position:relative;gap:10px;min-height:54px;padding:8px 12px;border-radius:11px;transition:opacity .65s ease,transform .65s ease,background .2s ease}
.cl-db-bottom-metric:not(:last-child)::after{content:"";position:absolute;right:0;top:10px;bottom:10px;width:1px;background:linear-gradient(180deg,transparent,rgba(118,154,214,.19),transparent)}
.cl-db-bottom-metric:hover{background:rgba(43,115,255,.055)}
.cl-db-bottom-metric__icon{width:30px;height:30px;padding:5px;border:1px solid rgba(76,133,255,.16);border-radius:9px;background:rgba(52,91,192,.06)}
.cl-db-bottom-metric__icon svg{width:19px;height:19px}
.cl-db-bottom-metric strong{font-size:18px;letter-spacing:-.02em}
.cl-db-bottom-metric small{margin-top:5px;color:#9db2d2;font-size:10px;line-height:1.15}

@media (max-width:1500px){
    .cl-db-metric-rail{width:224px}.cl-db-floating-card{width:202px}.cl-db-slot--left-top,.cl-db-slot--left-middle,.cl-db-slot--left-bottom{left:10px}.cl-db-slot--right-top,.cl-db-slot--right-middle,.cl-db-slot--right-bottom{right:10px}
}
@media (max-width:1240px){
    .cl-db-metric-rail{width:232px;top:3%;bottom:3%}.cl-db-metric-rail--left{left:0}.cl-db-metric-rail--right{right:0}.cl-db-floating-card{width:210px}
}
@media (max-width:900px){
    .cl-db-metric-rail{display:none}.cl-db-floating-card{width:190px;border-radius:14px;translate:none!important}.cl-db-slot--left-top{left:0;top:4%}.cl-db-slot--left-middle{left:0;top:31%}.cl-db-slot--left-bottom{left:0;bottom:4%}.cl-db-slot--right-top{right:0;top:4%}.cl-db-slot--right-middle{right:0;top:31%}.cl-db-slot--right-bottom{right:0;bottom:4%}
    .cl-db-bottom-metrics{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.cl-db-bottom-metric:nth-child(2)::after{display:none}
}
@media (max-width:640px){
    .cl-db-floating-card{width:158px;min-height:108px;padding:12px}.cl-db-floating-card>strong{font-size:16px}.cl-db-card-note{font-size:8px}.cl-db-line-chart,.cl-db-bars{height:38px}.cl-db-progress-ring{width:48px;height:48px}
    .cl-db-bottom-metrics{padding:6px;border-radius:14px;gap:3px}.cl-db-bottom-metric{min-height:50px;padding:7px 8px}.cl-db-bottom-metric__icon{width:27px;height:27px}.cl-db-bottom-metric strong{font-size:16px}.cl-db-bottom-metric small{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.cl-db-metric-rail{opacity:1!important;transform:none!important;transition:none!important}.cl-db-floating-card:hover{translate:none!important}}