/* ===========================================================
   HOME CSS
   PART 1
   Hero Visual Effects + Trusted Section
=========================================================== */


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

.hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    top:-180px;
    right:-160px;
    border-radius:50%;
    background:rgba(108,99,255,.08);
    filter:blur(90px);
    z-index:-1;
}

.hero::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    left:-120px;
    bottom:-100px;
    border-radius:50%;
    background:rgba(6,182,212,.08);
    filter:blur(70px);
    z-index:-1;
}


/* ===========================
   HERO TITLE
=========================== */

.hero-left h1{

    position:relative;

    text-wrap:balance;

}

.hero-left h1 span{

    display:inline-block;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}


/* ===========================
   HERO BADGE EFFECT
=========================== */

.hero-badge{

    position:relative;

    overflow:hidden;

}

.hero-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );

    transform:skewX(-20deg);

    animation:badgeShine 4s linear infinite;

}

@keyframes badgeShine{

    100%{

        left:170%;

    }

}


/* ===========================
   HERO BUTTON EFFECTS
=========================== */

.hero-buttons .btn-gradient{

    position:relative;

    overflow:hidden;

}

.hero-buttons .btn-gradient::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        transparent
    );

    opacity:0;

    transition:.35s;

}

.hero-buttons .btn-gradient:hover::after{

    opacity:1;

}


/* ===========================
   HERO STATS
=========================== */

.hero-stats div{

    transition:.35s ease;

}

.hero-stats div:hover{

    transform:translateY(-6px);

}

.hero-stats h3{

    transition:.35s;

}

.hero-stats div:hover h3{

    color:var(--accent);

}


/* ===========================
   FLOATING SHAPES
=========================== */

.hero-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    z-index:-1;

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

}

.hero-shape.one{

    width:70px;

    height:70px;

    top:15%;

    left:8%;

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

}

.hero-shape.two{

    width:42px;

    height:42px;

    bottom:18%;

    right:10%;

    background:rgba(6,182,212,.16);

    animation-delay:2s;

}

.hero-shape.three{

    width:28px;

    height:28px;

    top:32%;

    right:22%;

    background:rgba(236,72,153,.15);

    animation-delay:4s;

}

@keyframes floatShape{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}


/* ===========================
   TRUSTED SECTION
=========================== */

.trusted{

    padding:50px 0 90px;

}

.section-subtitle{

    text-align:center;

    color:var(--text-muted);

    margin-bottom:35px;

    font-weight:600;

}


/* ===========================
   COMPANY SLIDER
=========================== */

.company-slider{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

}

.company-slider span{

    background:#fff;

    border:1px solid var(--border);

    border-radius:999px;

    padding:14px 26px;

    font-size:15px;

    font-weight:700;

    color:var(--text-light);

    transition:.35s ease;

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

}

.company-slider span:hover{

    transform:translateY(-5px);

    color:var(--primary);

    border-color:rgba(108,99,255,.25);

    box-shadow:var(--shadow);

}


/* ===========================
   HERO SECTION FADE
=========================== */

.hero,
.trusted{

    animation:fade .8s ease both;

}

/* ===========================================================
   HOME CSS
   PART 2
   Features • Templates • Landing Page Effects
=========================================================== */


/* ===========================
   FEATURES BACKGROUND
=========================== */

.features{
    overflow:hidden;
}

.features::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    left:-180px;
    border-radius:50%;
    background:rgba(108,99,255,.05);
    filter:blur(90px);
    z-index:-1;
}

.features::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    bottom:-120px;
    right:-120px;
    border-radius:50%;
    background:rgba(6,182,212,.06);
    filter:blur(70px);
    z-index:-1;
}


/* ===========================
   FEATURE CARD EFFECT
=========================== */

.feature-card{
    overflow:hidden;
}

.feature-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-120px;

    right:-120px;

    border-radius:50%;

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

    transition:.4s;

}

.feature-card:hover::after{

    transform:scale(1.25);

}


/* ===========================
   FEATURE ICON ANIMATION
=========================== */

.feature-icon{

    transition:.35s ease;

}

.feature-card:hover .feature-icon{

    transform:rotate(10deg) scale(1.08);

}


/* ===========================
   FEATURE LINK
=========================== */

.feature-card a{

    position:relative;

}

.feature-card a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.feature-card:hover a::after{

    width:100%;

}


/* ===========================
   TEMPLATE SECTION
=========================== */

.templates{

    overflow:hidden;

}

.templates::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-220px;

    right:-180px;

    border-radius:50%;

    background:rgba(6,182,212,.05);

    filter:blur(90px);

    z-index:-1;

}


/* ===========================
   TEMPLATE PREVIEW
=========================== */

.template-preview{

    position:relative;

    overflow:hidden;

}

.template-preview::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.35),
        transparent
    );

}

.template-card:hover .template-preview{

    background:linear-gradient(
        135deg,
        #E8ECFF,
        #F7FAFF
    );

}


/* ===========================
   POPULAR BADGE
=========================== */

.popular{

    box-shadow:
        0 12px 30px rgba(108,99,255,.28);

}


/* ===========================
   TEMPLATE BUTTON
=========================== */

.template-card .btn-gradient{

    width:calc(100% - 56px);

    justify-content:center;

}


/* ===========================
   STAGGER ANIMATION
=========================== */

.feature-card:nth-child(1),
.template-card:nth-child(1){

    animation-delay:.1s;

}

.feature-card:nth-child(2),
.template-card:nth-child(2){

    animation-delay:.25s;

}

.feature-card:nth-child(3),
.template-card:nth-child(3){

    animation-delay:.4s;

}


/* ===========================
   FLOATING DECORATIVE DOTS
=========================== */

.template-card::before{

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:rgba(108,99,255,.25);

    top:22px;

    left:22px;

}


/* ===========================
   SECTION FADE
=========================== */

.features,
.templates{

    animation:fade .8s ease both;

}

/* ===========================================================
   HOME CSS
   PART 3
   Dashboard • Why Us • Stats • CTA • Animations
=========================================================== */


/* ===========================
   DASHBOARD SHOWCASE
=========================== */

.dashboard-showcase{
    position:relative;
    overflow:hidden;
}

.dashboard-showcase::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-220px;
    top:-220px;
    border-radius:50%;
    background:rgba(108,99,255,.05);
    filter:blur(90px);
    z-index:-1;
}

.dashboard-showcase::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    bottom:-180px;
    border-radius:50%;
    background:rgba(6,182,212,.05);
    filter:blur(80px);
    z-index:-1;
}


/* Dashboard Hover */

.dashboard-preview{

    transition:.45s ease;

}

.dashboard-preview:hover{

    transform:translateY(-8px);

}


/* Analytics */

.analytics-card{

    position:relative;

    overflow:hidden;

}

.analytics-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    right:-60px;

    top:-60px;

    border-radius:50%;

    background:rgba(108,99,255,.04);

}


/* ===========================
   WHY US
=========================== */

.why-card{

    position:relative;

    overflow:hidden;

}

.why-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(108,99,255,.03),
        transparent
    );

    opacity:0;

    transition:.35s;

}

.why-card:hover::before{

    opacity:1;

}

.why-card:hover .why-icon{

    transform:rotate(8deg) scale(1.08);

}

.why-icon{

    transition:.35s ease;

}


/* ===========================
   STATS
=========================== */

.stat-box{

    position:relative;

    overflow:hidden;

}

.stat-box::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(108,99,255,.04);

    top:-90px;

    right:-90px;

}

.stat-box:hover h2{

    transform:scale(1.08);

}

.stat-box h2{

    transition:.35s ease;

}


/* ===========================
   CTA
=========================== */

.cta-banner{

    overflow:hidden;

}

.cta-content{

    position:relative;

}

.cta-content::before{

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

}

.cta-content::after{

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

}

@keyframes floatBlob{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(30px,-25px);

    }

}

@keyframes floatBlobReverse{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-25px,30px);

    }

}

.cta-buttons{

    position:relative;

    z-index:2;

}

.cta-buttons a{

    transition:.35s ease;

}

.cta-buttons a:hover{

    transform:translateY(-6px) scale(1.02);

}


/* ===========================
   SCROLL REVEAL HELPERS
=========================== */

.reveal{

    opacity:0;

    transform:translateY(45px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

.reveal-left{

    opacity:0;

    transform:translateX(-60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal-left.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-right{

    opacity:0;

    transform:translateX(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal-right.active{

    opacity:1;

    transform:translateX(0);

}


/* ===========================
   SECTION SPACING
=========================== */

.features,
.templates,
.dashboard-showcase,
.why-us,
.stats,
.pricing,
.testimonials,
.faq{

    position:relative;

}


/* ===========================
   PAGE POLISH
=========================== */

.hero,
.features,
.templates,
.dashboard-showcase,
.why-us,
.stats,
.cta-banner,
.pricing,
.testimonials,
.faq{

    animation:fade .8s ease both;

}