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

HERO

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

.hero{

position:relative;

overflow:hidden;

padding-top:140px;

padding-bottom:80px;

min-height:100vh;

display:flex;

align-items:center;

}

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

BACKGROUND

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

.hero-bg{

position:absolute;

inset:0;

overflow:hidden;

z-index:-1;

}

.blob{

position:absolute;

border-radius:50%;

filter:blur(90px);

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

}

.blob1{

width:350px;

height:350px;

background:#5ad7ff;

top:-80px;

left:-120px;

opacity:.45;

}

.blob2{

width:420px;

height:420px;

background:#008cff;

right:-120px;

bottom:-120px;

opacity:.35;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

}

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

LAYOUT

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

.hero-container{

width:min(1200px,92%);

margin:auto;

display:grid;

gap:60px;

align-items:center;

}

.hero-content{

display:flex;

flex-direction:column;

gap:25px;

}

.hero-image{

display:flex;

justify-content:center;

}

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

BADGE

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

.badge{

display:inline-flex;

align-items:center;

gap:10px;

width:max-content;

padding:10px 18px;

border-radius:999px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(15px);

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

color:white;

font-size:.9rem;

}

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

TITLE

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

.hero h1{

font-size:clamp(2.5rem,8vw,5rem);

line-height:1.05;

font-weight:800;

color:white;

}

.animated-word{

display:inline-block;

color:#cff300;

min-width:220px;

transition:.5s;

}

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

TEXT

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

.hero p{

font-size:1.1rem;

line-height:1.8;

color:rgba(255,255,255,.82);

max-width:600px;

}

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

BUTTONS

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

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.btn-primary{

padding:16px 28px;

border-radius:18px;

text-decoration:none;

font-weight:700;

background:linear-gradient(135deg,#34d7ff,#007bff);

color:white;

box-shadow:

0 10px 35px rgba(0,153,255,.35);

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

padding:16px 28px;

border-radius:18px;

text-decoration:none;

color:white;

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

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

}

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

IMAGE

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

.glass-card{

background:rgba(255,255,255,.12);

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

border-radius:28px;

padding:20px;

backdrop-filter:blur(18px);

box-shadow:

0 20px 60px rgba(0,0,0,.25);

width:100%;

max-width:420px;

}

.glass-card img{

width:100%;

border-radius:20px;

display:block;

}

.glass-info{

margin-top:20px;

display:flex;

justify-content:space-between;

align-items:center;

color:white;

}

.glass-info span{

color:#2303b5;

}

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

DESKTOP

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

@media(min-width:900px){

.hero-container{

grid-template-columns:1.1fr .9fr;

}

}




.logo{

    display:flex;
    align-items:center;
    gap:14px;

    text-decoration:none;

}

.logo-img{

    width:58px;
    height:58px;

    object-fit:contain;

    border-radius:18px;

}