.hero {
    min-height: 870px;
    padding: 9.5rem 0 6rem;
    position: relative;
    background: radial-gradient(circle at 72% 25%,#d9efff 0,transparent 30%),radial-gradient(circle at 12% 70%,#edf8ff 0,transparent 25%),linear-gradient(180deg,#fff 0%,#f4faff 68%,#fff 100%);
    overflow: hidden
}

.grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#dceefd80 1px,transparent 1px),linear-gradient(90deg,#dceefd80 1px,transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom,black,transparent 75%);
    opacity: .55
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(3px)
}

    .blob.a {
        width: 520px;
        height: 520px;
        background: #dff1ff;
        right: -180px;
        top: 80px
    }

    .blob.b {
        width: 420px;
        height: 420px;
        background: #eaf7ff;
        left: -170px;
        bottom: 20px
    }

.badge-x {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    background: #fff;
    border: 1px solid #cce5fb;
    border-radius: 99px;
    color: var(--blue);
    font-size: .84rem;
    font-weight: 800;
    box-shadow: 0 8px 25px #3277aa0c
}

.hero h1 {
    font-size: clamp(2.7rem,5vw,5rem);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -2.5px;
    text-shadow: 0 12px 35px rgba(30,100,160,.07)
}

.grad {
    background: linear-gradient(90deg,#1464c8,#42a9fa);
    -webkit-background-clip: text;
    color: transparent
}

.hero-p {
    font-size: 1.1rem;
    line-height: 2.15;
    color: var(--muted);
    max-width: 620px
}

.trust {
    color: #6a7e91;
    font-size: .86rem;
    font-weight: 600
}

    .trust i {
        color: #2997f5
    }

.hero-art {
    height: 560px;
    position: relative
}

.orb {
    position: absolute;
    inset: 35px 0 0;
    background: radial-gradient(circle,#fff 0 23%,#e6f5ff 24% 25%,transparent 26%);
    border-radius: 50%;
    opacity: .9
}

.cloud {
    position: absolute;
    top: 130px;
    animation: float 5s ease-in-out infinite;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 120px;
    border-radius: 70px;
    background: linear-gradient(145deg,#fff,#dcefff);
    border: 2px solid #a7d1f6;
    box-shadow: 0 30px 65px #2779bd25;
    z-index: 3
}

    .cloud:before, .cloud:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: inherit;
        border: inherit
    }

    .cloud:before {
        width: 130px;
        height: 130px;
        right: 40px;
        top: -63px
    }

    .cloud:after {
        width: 100px;
        height: 100px;
        left: 30px;
        top: -35px
    }

    .cloud i {
        position: absolute;
        z-index: 4;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 3.3rem;
        color: #2078d7
    }

@keyframes float {
    0%,100% {
        margin-top: 0
    }

    50% {
        margin-top: -12px
    }
}

.node {
    position: absolute;
    width: 122px;
    height: 122px;
    border-radius: 27px;
    background: rgba(255,255,255,.93);
    border: 1px solid #d2e8fa;
    box-shadow: 0 20px 45px #1c65991a;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    z-index: 4;
    transition: .3s
}

    .node:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 55px #1c65992b
    }

    .node i {
        font-size: 2.35rem;
        color: #2589e5
    }

    .node span {
        font-size: .76rem;
        font-weight: 800;
        color: #42607b
    }

.n1 {
    right: 1%;
    top: 250px
}

.n2 {
    left: 1%;
    top: 250px
}

.n3 {
    right: 18%;
    bottom: 10px
}

.n4 {
    left: 18%;
    bottom: 10px
}

.n5 {
    right: 25%;
    top: 95px
}

.n6 {
    left: 25%;
    top: 95px
}

.ring {
    position: absolute;
    left: 50%;
    top: 245px;
    width: 420px;
    height: 250px;
    transform: translateX(-50%);
    border: 1px dashed #8fc2ef;
    border-radius: 50%;
    z-index: 1
}

.dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3ba5f6;
    box-shadow: 0 0 0 8px #3ba5f61c
}

.d1 {
    right: 22%;
    top: 250px
}

.d2 {
    left: 22%;
    top: 250px
}

.d3 {
    right: 35%;
    bottom: 100px
}

.d4 {
    left: 35%;
    bottom: 100px
}

.stats {
    margin-top: -45px;
    position: relative;
    z-index: 5
}

.stat-card {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border: 1px solid #dcecfb;
    border-radius: 20px;
    padding: 1.35rem;
    box-shadow: 0 18px 45px #1a5c8d12;
    height: 100%
}

    .stat-card strong {
        font-size: 1.65rem;
        color: var(--blue)
    }

    .stat-card small {
        color: #718397
    }

.section {
    padding: 7rem 0
}

.title {
    font-size: 2.3rem;
    font-weight: 900;
    letter-spacing: -1.5px
}

.sub {
    color: var(--muted);
    line-height: 2;
    max-width: 720px;
    margin: auto
}

.feature {
    height: 100%;
    padding: 2rem;
    border-radius: 25px;
    border: 1px solid #e0eefb;
    background: #fff;
    box-shadow: 0 12px 35px #245f8d08;
    transition: .3s;
    position: relative;
    overflow: hidden
}

    .feature:after {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #edf8ff;
        left: -45px;
        bottom: -45px
    }

    .feature:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 55px #245f8d16;
        border-color: #b9dbf7
    }

.icon {
    width: 62px;
    height: 62px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    color: #1974d5;
    background: linear-gradient(135deg,#eaf6ff,#d8efff);
    font-size: 1.7rem
}

.feature h3 {
    font-size: 1.12rem;
    font-weight: 900;
    margin: 1.3rem 0 .7rem
}

.feature p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.95;
    margin: 0
}

.platform {
    background: linear-gradient(135deg,#0e4d97,#1978d4 58%,#39a8f7);
    border-radius: 35px;
    padding: 4rem;
    position: relative;
    overflow: hidden;
    color: #fff
}

    .platform:before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border: 70px solid #ffffff12;
        border-radius: 50%;
        left: -250px;
        bottom: -330px
    }

.mini {
    height: 100%;
    padding: 1.25rem;
    border-radius: 18px;
    background: #ffffff12;
    border: 1px solid #ffffff24
}

    .mini i {
        font-size: 1.8rem
    }

    .mini b {
        display: block;
        margin-top: .5rem
    }

    .mini small {
        opacity: .7
    }

.industries {
    background: linear-gradient(180deg,#f7fcff,#eaf6ff)
}

.industry {
    height: 100%;
    padding: 1.7rem 1rem;
    text-align: center;
    border: 1px solid #d9eafa;
    background: #fff;
    border-radius: 23px;
    transition: .3s
}

    .industry:hover {
        transform: translateY(-7px);
        box-shadow: 0 22px 45px #24618c14
    }

    .industry i {
        font-size: 2.45rem;
        color: #2589e5
    }

    .industry h4 {
        font-size: .95rem;
        font-weight: 900;
        margin-top: 1rem
    }

.product {
    border: 1px solid #dcecfb;
    border-radius: 30px;
    padding: 2.4rem;
    background: #fff;
    box-shadow: 0 20px 50px #245f8d0d
}

.product-visual {
    min-height: 280px;
    border-radius: 24px;
    background: linear-gradient(145deg,#eaf6ff,#fafdff);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden
}

.sun-core {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 20px 45px #2678b326;
    color: #1f83df;
    font-size: 4rem
}

.product-visual:before {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    border: 1px dashed #92c5ee;
    border-radius: 50%
}

.cta {
    background: radial-gradient(circle at 80% 20%,#fff 0,transparent 28%),linear-gradient(135deg,#eaf7ff,#cceaff 55%,#e8f7ff);
    position: relative;
    overflow: hidden
}

    .cta:after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        border: 60px solid #fff8;
        border-radius: 50%;
        left: -200px;
        bottom: -300px
    }

@media(max-width:991px) {
    .hero {
        padding-top: 8rem;
        min-height: auto
    }

    .hero-art {
        margin-top: 2rem
    }

    .stats {
        margin-top: 0
    }

    .n5, .n6 {
        display: none
    }

    .hero-art {
        height: 480px
    }

    .cloud {
        transform: translateX(-50%) scale(.85)
    }

    .node {
        width: 95px;
        height: 95px
    }

    .platform {
        padding: 2.5rem
    }
}

@media(max-width:575px) {
    .hero h1 {
        letter-spacing: -1px
    }

    .hero-art {
        transform: scale(.83);
        transform-origin: top center;
        width: 120%;
        margin-right: -10%;
        margin-bottom: -80px
    }

    .section {
        padding: 5rem 0
    }

    .title {
        font-size: 1.85rem
    }
}