.hero { padding: 2rem 0 4rem; }
    .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
    .badge-new { background: rgba(92,107,192,0.2); border-radius: 40px; padding: 0.3rem 1rem; font-size: 0.8rem; }
    h1 { font-size: 3.5rem; font-weight: 800; margin: 1rem 0; }
    .stats { display: flex; gap: 2rem; margin-top: 2rem; }
    .floating-card { background: rgba(255,255,255,0.03); backdrop-filter: blur(12px); border-radius: 32px; padding: 2rem; border: 1px solid rgba(255,255,255,0.1);overflow: hidden;height: fit-content; }
    .glass-panel { background: rgba(18,22,28,0.6); backdrop-filter: blur(12px); border-radius: 48px; padding: 2.5rem; border: 1px solid var(--glass-border); }
    .feature-grid { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; }
    .feature-grid div { flex: 1; background: rgba(0,0,0,0.3); padding: 1.5rem; border-radius: 24px; }
    .split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
    .check-list { list-style: none; padding: 0; }
    .check-list li { margin: 1rem 0; }
    .check-list i { color: var(--primary-glow); margin-right: 0.8rem; }
    .code-card { background: #0a0c10; border-radius: 24px; overflow: auto; padding: 1rem; border: 1px solid #2a2f3a; }
    .use-cases { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
    .use-cases div { background: rgba(92,107,192,0.15); padding: 0.8rem 1.8rem; border-radius: 60px; font-weight: 500; }
    @media (max-width: 800px) {
        .hero-grid, .split-layout { grid-template-columns: 1fr; }
        h1 { font-size: 2.5rem; }
    }
     /* floating document blobs */
    .floating-doc-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    }

    /*  .floating-doc-bg .doc {
    position: absolute;
        overflow: hidden;
   Add your background image here 
    background-image: url('/api/resource/img/VdocFloating2.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    animation: floatDoc 5s infinite ease-in-out;
    }*/
.floating-doc-bg .doc {
            position: absolute;
            background: rgba(92, 107, 192, 0.08);
            backdrop-filter: blur(8px);
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.1);
            animation: floatDoc 12s infinite ease-in-out;
        }

    .floating-doc-bg .doc:nth-child(1) {
    width: 250px;
    height: 250px;
  /*  background-image: url('/api/resource/img/VdocFloating2.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backdrop-filter: blur(8px);*/
    border-radius: 20px;
    top: 15%;
    left: -60px;
    transform: rotate(35deg);
    animation-duration: 18s;
    }

    .floating-doc-bg .doc:nth-child(2) {
    width: 260px;
    height: 340px;
    bottom: 10%;
    right: -80px;
    transform: rotate(-8deg);
    animation-duration: 22s;
    }

    .floating-doc-bg .doc:nth-child(3) {
    width: 120px;
    height: 160px;
    top: 40%;
    right: 15%;
    animation-duration: 14s;
    }
    @keyframes floatDoc {
    0% {
    transform: translateY(0px) rotate(0deg);
    }

    50% {
    transform: translateY(-100px) rotate(90deg);
    }

    100% {
    transform: translateY(0px) rotate(0deg);
    }
    }
    .floating-card{
        overflow: hidden;
    }
.floating-card pre{
    float: left;
    width: 50%;
}
.floating-card .image-box{
    float: right;
    width: 50%;
}
.floating-card .image-box img{
    
    width:12vw ;
    height: 12vw;
}