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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding:130px 20px 60px;

    background:
    radial-gradient(circle at top,#17324f 0%,#09131d 45%,#05080d 100%);

}

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

.hero-bg{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(0,162,255,.12),
    transparent 35%),

    radial-gradient(circle at 80% 80%,
    rgba(255,196,0,.08),
    transparent 30%);

}

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

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

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

}

.glow-1{

    width:300px;

    height:300px;

    background:#00aaff33;

    left:-80px;

    top:10%;

}

.glow-2{

    width:260px;

    height:260px;

    background:#ffc40022;

    right:-80px;

    bottom:10%;

    animation-delay:3s;

}

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

.hero-card{

    position:relative;

    z-index:10;

    width:100%;

    max-width:900px;

    padding:40px 30px;

    text-align:center;

    border-radius:30px;

    backdrop-filter:blur(25px);

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

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

    box-shadow:

    0 25px 60px rgba(0,0,0,.35),

    inset 0 1px 1px rgba(255,255,255,.15);

    animation:appear 1.2s ease;

}

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

.badge{

    display:inline-flex;

    padding:10px 18px;

    border-radius:50px;

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

    color:#ffd54a;

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

    margin-bottom:25px;

    font-size:.9rem;

}

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

.hero h1{

    color:white;

    font-size:clamp(2.2rem,8vw,4.5rem);

    line-height:1.15;

    margin-bottom:25px;

}

.hero h1 span{

    display:block;

    color:#ffd54a;

    min-height:70px;

    transition:.6s;

}

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

.hero p{

    color:#d5d5d5;

    max-width:650px;

    margin:auto;

    font-size:1.08rem;

    line-height:1.8;

}

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

.hero-buttons{

    margin-top:40px;

    display:flex;

    gap:18px;

    justify-content:center;

    flex-wrap:wrap;

}

.btn-primary{

    background:linear-gradient(135deg,#FFD54A,#FFA000);

    color:#111;

    padding:16px 28px;

    border-radius:60px;

    text-decoration:none;

    font-weight:bold;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(255,193,7,.35);

}

.btn-secondary{

    color:white;

    text-decoration:none;

    padding:16px 28px;

    border-radius:60px;

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

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

    transition:.35s;

}

.btn-secondary:hover{

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

}

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

.fade{

    opacity:0;

    transform:translateY(12px);

}

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

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

}

@keyframes appear{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@media(min-width:768px){

.hero{

padding-top:160px;

}

}