/* ===========================================
Hero
=========================================== */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding-top:120px;

}

/* =========================================== */

.background-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:70px 70px;

    mask-image:radial-gradient(circle at center,black,transparent 90%);

}

/* =========================================== */

.gradient-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.45;

}

.orb1{

    width:420px;

    height:420px;

    background:#2563EB;

    top:-120px;

    left:-100px;

}

.orb2{

    width:350px;

    height:350px;

    background:#38BDF8;

    right:-100px;

    top:150px;

}

.orb3{

    width:260px;

    height:260px;

    background:#0EA5E9;

    bottom:-80px;

    left:45%;

}

/* =========================================== */

.hero-wrapper{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:80px;

    align-items:center;

}

/* =========================================== */

.hero-left h1{

    margin-bottom:28px;

}

.hero-left span{

    color:#60A5FA;

}

.hero-left p{

    max-width:620px;

    margin-bottom:40px;

}

/* =========================================== */

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:55px;

}

/* =========================================== */

.hero-stats{

    display:flex;

    gap:45px;

}

.hero-stats h2{

    color:#60A5FA;

}

.hero-stats span{

    color:#94A3B8;

    font-size:15px;

}

/* =========================================== */

.dashboard-card{

    position:relative;

    background:rgba(15,23,42,.78);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border-radius:24px;

    padding:28px;

    box-shadow:

        0 40px 80px rgba(0,0,0,.45);

}

/* =========================================== */

.dashboard-header{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

    font-weight:700;

}

/* =========================================== */

.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22C55E;

    animation:pulse 1.6s infinite;

}

/* =========================================== */

.buyer-title{

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}

.buyer-item{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

    color:#CBD5E1;

}

.assign-btn{

    width:100%;

    margin-top:24px;

    padding:15px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:white;

    font-weight:700;

    background:linear-gradient(
        135deg,
        #2563EB,
        #38BDF8
    );

}

/* =========================================== */

.floating-card{

    position:absolute;

    background:rgba(15,23,42,.92);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    padding:14px 20px;

    border-radius:14px;

    font-weight:600;

    animation:float 6s ease-in-out infinite;

}

.one{

    top:30px;

    left:-40px;

}

.two{

    bottom:70px;

    right:-50px;

    animation-delay:2s;

}

.three{

    top:55%;

    left:-70px;

    animation-delay:4s;

}

/* =========================================== */

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-16px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.4);

}

100%{

transform:scale(1);

}

}

/* =========================================== */

@media(max-width:980px){

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.dashboard-card{

margin-top:40px;

}

.floating-card{

display:none;

}

}

@media(max-width:768px){

.hero{

padding-top:150px;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-direction:column;

gap:25px;

}

}