/* hero.css
   Placeholder full hero stylesheet.
   This file is intentionally structured and ready to extend.
*/



.hero{

    position:relative;

    overflow:hidden;

    padding:180px 0 120px;
    
    background:
radial-gradient(circle at top right,#EEF8DD 0%,transparent 35%),
radial-gradient(circle at bottom left,#F5F7FA 0%,transparent 40%);

min-height:100vh;

display:flex;

align-items:center;

}

.hero__background{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    isolation:isolate;

}

.hero__grid{
    position:absolute;
    inset:0;
    opacity:.35;
    background-image:
      linear-gradient(rgba(46,63,143,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(46,63,143,.04) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(circle,#000 20%,transparent 85%);
}

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

.hero__blur--one{
    width:420px;height:420px;
    background:rgba(152,201,60,.20);
    top:-120px;left:-120px;
}

.hero__blur--two{
    width:520px;height:520px;
    background:rgba(46,63,143,.12);
    bottom:-180px;right:-180px;
    right:0;

    transform:translateX(45%);
}

.hero__shape{
    position:absolute;
    border-radius:45%;
    opacity:.08;
}

.hero__shape--one{
    width:650px;height:650px;
    background:linear-gradient(135deg,#98C93C,#7EB92F);
    right:0;

    transform:

        translateX(55%)

        rotate(30deg);
}

.hero__shape--two{
    width:500px;height:500px;
    background:linear-gradient(135deg,#2E3F8F,#4A5FC1);
    right:0;

    transform:

        translateX(55%)

        rotate(30deg);
}

.hero .container{position:relative;z-index:2;}

.hero__wrapper{
     position:relative;

    z-index:2;

    display:grid;
     grid-template-columns:1fr 1fr;
      gap:70px;
    align-items:center;
     min-height:calc(100vh - 120px);
}

.hero__badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid #E4E7EC;
    border-radius:999px;
    padding:10px 18px;
    box-shadow:var(--shadow-sm);
    color:var(--secondary);
    font-weight:700;
        animation:fadeUp .6s ease;

}

.hero__title{

    font-size:72px;

    line-height:1.05;

    font-weight:900;

    color:var(--primary);
    
     animation:fadeUp .9s ease;

}

.hero__title small{

    display:block;

    margin-top:18px;

    font-size:52px;

    font-weight:700;

    color:var(--secondary);

}

.hero__title span{
    display:block;
    color:var(--secondary);
}

.hero__description{
    max-width:620px;
    font-size:20px;
    line-height:2;
        animation:fadeUp 1.2s ease;

}

.hero__actions{
    display:flex;
    gap:18px;
    margin-top:36px;
    animation:fadeUp 1.5s ease;
}

.hero__visual{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    
    animation:fadeRight 1.3s ease;
}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:none;

}

}

.hero__glow{

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(152,201,60,.28),

        rgba(46,63,143,.10),

        transparent

    );

    filter:blur(55px);

    z-index:1;
    
    animation:glowMove 8s ease-in-out infinite;

}

@keyframes glowMove{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

.hero__content{

    padding-left:30px;
    
    position:relative;

z-index:2;

}



.hero__image{

    width:820px;

    max-width:100%;

    position:relative;

    z-index:10;

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

display:flex;

justify-content:center;

align-items:center;

}

.hero__floating{
    position:absolute;
    background:#fff;
    border-radius:18px;
    padding:16px;
    display:flex;
    gap:14px;
    align-items:center;
    box-shadow:var(--shadow-md);
}

.hero__floating--left{left:-20px;top:120px;}
.hero__floating--right{right:-20px;bottom:90px;}

.hero__floating-icon{
    width:48px;height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#EEF8DD;
    color:var(--secondary);
}

.hero__stats{
    margin-top:70px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.hero__stat{
    background:#fff;
    border-radius:24px;
    padding:30px;
    text-align:center;
    box-shadow:var(--shadow-md);
}

.hero__stat h3{
    color:var(--secondary);
    font-size:42px;
}

.hero__stat p{
    margin-top:8px;
}

/*=========================================
DECORATIONS
=========================================*/

.shape-dot{

    position:absolute;

    border-radius:8px;

    animation:floatDots 7s ease-in-out infinite;

}

.dot-1{

    width:16px;
    height:16px;

    background:var(--secondary);

    top:18%;

    left:9%;

}

.dot-2{

    width:24px;
    height:24px;

    background:var(--primary);

    top:62%;

    left:54%;

}

.dot-3{

    width:14px;
    height:14px;

    background:var(--accent);

    top:82%;

    left:46%;

}

.dot-4{

    width:12px;
    height:12px;

    background:var(--secondary);

    top:30%;

    left:66%;

}

.circle{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(152,201,60,.18);

}

.circle-1{

    width:320px;
    height:320px;

    left:80px;

    bottom:30px;

}

.circle-2{

    width:520px;
    height:520px;

    right:0;

    transform:translateX(45%);

    top:-100px;

}

.wave{

    position:absolute;

    border-radius:50%;

    border:2px solid rgba(46,63,143,.08);

}

.wave-1{

    width:620px;
    height:620px;

    left:120px;

    bottom:-420px;

}

.wave-2{

    width:460px;
    height:460px;

    right:0;

    transform:translateX(40%);

    top:180px;

}

/*=========================================
TRUST BAR
=========================================*/

.hero__trust{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:35px;

}

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    background:#fff;

    border:1px solid rgba(46,63,143,.08);

    padding:12px 18px;

    border-radius:999px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.trust-item:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.trust-item i{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EEF8DD;

    color:var(--secondary);

}

.trust-item span{

    font-size:15px;

    font-weight:700;

    color:var(--primary);

}

@keyframes floatDots{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    width:0;

    height:100%;

    top:0;

    right:0;

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

    transition:.4s;

}

.btn:hover::before{

    width:100%;

}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

@media (max-width:992px){
 .hero__wrapper{grid-template-columns:1fr}
 .hero__content{text-align:center}
 .hero__description{margin:auto}
 .hero__actions{justify-content:center}
 .hero__stats{grid-template-columns:repeat(2,1fr)}
 .hero__floating{display:none}
}

@media (max-width:576px){
 .hero{padding:140px 0 80px}
 .hero__title{font-size:42px}
 .hero__stats{grid-template-columns:1fr}
 .hero__actions{flex-direction:column}
 .btn{width:100%}
}

.hero__image img{

    width:100%;

    max-width:560px;

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

}

@keyframes heroFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

}

.hero::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(141,198,63,.08);

    top:-180px;

    left:-180px;

    z-index:0;

}

.hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(41,91,135,.05);

    bottom:-180px;

    right:-180px;

    z-index:0;

}