.ecc-hero {
    padding-top: 4rem;
    background: radial-gradient(circle at 82% 25%, rgba(99, 102, 241, .14), transparent 32%), radial-gradient(circle at 12% 72%, rgba(14, 165, 233, .10), transparent 34%);
}

.ecc-hero-row {
    min-height: 78vh;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.ecc-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.ecc-glow-one {
    width: 340px;
    height: 340px;
    top: 15%;
    right: 3%;
    background: rgba(99, 102, 241, .18);
}

.ecc-glow-two {
    width: 260px;
    height: 260px;
    bottom: 2%;
    left: 3%;
    background: rgba(14, 165, 233, .13);
}

.ecc-eyebrow,
.ecc-section-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--si-primary);
}

.ecc-gradient-text {
    background: linear-gradient(90deg, #6366f1, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ecc-hero-panel,
.ecc-cloud-card {
    padding: 2rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(128, 128, 128, .18);
    background: rgba(255, 255, 255, .90);
    backdrop-filter: blur(18px);
    box-shadow: 0 25px 60px rgba(30, 41, 59, .10);
}

.ecc-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, .12);
}

.ecc-solution-stack {
    display: grid;
    gap: .8rem;
}

    .ecc-solution-stack > div {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .9rem 1rem;
        border-radius: .85rem;
        background: rgba(99, 102, 241, .06);
    }

    .ecc-solution-stack i {
        font-size: 1.35rem;
        color: var(--si-primary);
    }

.ecc-ai-preview {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(128, 128, 128, .16);
}

.ecc-ai-symbol {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #0ea5e9);
}

.ecc-trust-item {
    padding: .6rem 0;
}

    .ecc-trust-item strong,
    .ecc-trust-item span {
        display: block;
    }

    .ecc-trust-item span {
        color: var(--si-gray-600);
        font-size: .875rem;
    }

.ecc-section-heading {
    max-width: 760px;
}

.ecc-solution-card,
.ecc-value-card,
.ecc-process-card,
.ecc-testimonial {
    border: 1px solid rgba(128, 128, 128, .16);
    border-radius: 1rem;
    background: var(--si-body-bg);
}

.ecc-solution-card {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .ecc-solution-card:hover {
        transform: translateY(-5px);
        border-color: rgba(99, 102, 241, .30);
        box-shadow: 0 20px 40px rgba(30, 41, 59, .08);
    }

.ecc-solution-cta {
    background: linear-gradient( 145deg, rgba(99, 102, 241, .10), rgba(14, 165, 233, .05) );
}

.ecc-icon-box {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    font-size: 1.55rem;
    color: var(--si-primary);
    background: rgba(99, 102, 241, .10);
}

.ecc-value-card {
    padding: 1.5rem;
}

    .ecc-value-card i {
        display: block;
        margin-bottom: .8rem;
        font-size: 1.65rem;
        color: var(--si-primary);
    }

    .ecc-value-card strong,
    .ecc-value-card span {
        display: block;
    }

    .ecc-value-card span {
        margin-top: .35rem;
        color: var(--si-gray-600);
    }

.ecc-process-card {
    padding: 1.6rem;
}

    .ecc-process-card > span {
        display: inline-block;
        margin-bottom: 1.1rem;
        color: var(--si-primary);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .1em;
    }

.ecc-dark-section {
    background: radial-gradient(circle at 75% 25%, rgba(99, 102, 241, .20), transparent 30%), #0d1324;
}

.ecc-tech-pill {
    padding: .55rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .78);
    font-size: .875rem;
}

.ecc-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .9rem;
}

    .ecc-tech-grid > div {
        min-height: 92px;
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, .10);
        background: rgba(255, 255, 255, .06);
    }

    .ecc-tech-grid img {
        max-width: 72px;
        max-height: 42px;
    }

.ecc-testimonial {
    padding: 1.6rem;
}

    .ecc-testimonial i {
        display: block;
        margin-bottom: .8rem;
        color: var(--si-primary);
        font-size: 1.6rem;
    }

    .ecc-testimonial strong,
    .ecc-testimonial span {
        display: block;
    }

    .ecc-testimonial span {
        color: var(--si-gray-600);
        font-size: .9rem;
    }

.ecc-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 0;
}

    .ecc-check i {
        color: var(--si-primary);
        font-size: 1.25rem;
    }

.ecc-final-cta {
    padding: 2.75rem;
    border-radius: 1.25rem;
    background: radial-gradient(circle at 90% 20%, rgba(14, 165, 233, .25), transparent 28%), linear-gradient(135deg, #111827, #1f2a44);
}

.ecc-ai-launcher {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    border: 0;
    border-radius: 999px;
    padding: .85rem 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: linear-gradient(135deg, #6366f1, #0ea5e9);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 14px 35px rgba(30, 64, 175, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .ecc-ai-launcher:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 42px rgba(30, 64, 175, .34);
    }


/* Dark-mode compatibility */

[data-bs-theme="dark"] .ecc-hero-panel,
[data-bs-theme="dark"] .ecc-cloud-card {
    background: rgba(20, 20, 35, .90);
}


/* Responsive */

@media (max-width: 991.98px) {

    .ecc-hero-row {
        min-height: auto;
    }

    .ecc-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {

    .ecc-final-cta {
        padding: 1.75rem;
    }

    .ecc-ai-launcher {
        right: .8rem;
        bottom: .8rem;
    }
}