/*=====================================
APP HERO
======================================*/

/*=====================================
APP HERO
======================================*/

.app-hero{

    position: relative;

    overflow: hidden;

    padding: 130px 0 90px;

    min-height: 90vh;

    display: flex;

    align-items: center;

    background:
        radial-gradient(circle at 15% 20%, rgba(0,212,255,.08), transparent 35%),
        radial-gradient(circle at 85% 75%, rgba(124,58,237,.08), transparent 40%);

}
.app-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:80px;

}
.app-content{

    position:relative;

    z-index:2;

}

.app-content p{

    max-width:650px;

    margin:30px 0;

}

.app-content .hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:50px;

}
.hero-stats{

    display:flex;

    gap:50px;

    margin-top:40px;

}

.hero-stats .stat h3{

    font-size:2.3rem;

    margin-bottom:6px;

    color:var(--primary);

}

.hero-stats .stat span{

    color:var(--gray);

    font-size:.92rem;

}

.app-showcase{
    position:relative;
    height:560px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.phone{

    position:absolute;

    width:300px;
height:620px;

    padding:14px;

    border-radius:42px;

    background:linear-gradient(145deg,#20242f,#090c12);

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

    box-shadow:
        0 40px 80px rgba(0,0,0,.45),
        0 0 80px rgba(0,212,255,.12);

    overflow:hidden;

}
.phone-one{

    left:70px;

    top:40px;

    transform:rotate(-12deg);

}

.phone-two{

    right:40px;

    top:90px;

    transform:rotate(10deg);

}
.phone-screen{

    width:100%;

    height:100%;

    border-radius:30px;

    overflow:hidden;

    background:

    linear-gradient(
        180deg,
        #11203d,
        #07101d
    );

    padding:22px;

}
.phone::before{

    content:"";

    position:absolute;

    width:120px;

    height:26px;

    background:#000;

    border-radius:0 0 18px 18px;

    left:50%;

    transform:translateX(-50%);

    top:0;

    z-index:5;

}
.screen-header{

    height:140px;

    border-radius:18px;

    margin-bottom:22px;

    background:

    linear-gradient(
        135deg,
        rgba(0,212,255,.25),
        rgba(124,58,237,.35)
    );

}
.screen-chart{

    height:90px;

    border-radius:18px;

    margin-bottom:20px;

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

}
.screen-card{

    height:58px;

    border-radius:14px;

    margin-bottom:14px;

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

}
.screen-avatar{

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--secondary);

    margin:15px auto 35px;

}

.screen-message{

    height:40px;

    border-radius:12px;

    margin-bottom:16px;

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

}
.phone::after{

    content:"";

    position:absolute;

    inset:-70px;

    background:

    radial-gradient(circle,
    rgba(0,212,255,.18),
    transparent 70%);

    z-index:-1;

}
.phone-one{

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

}

.phone-two{

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

}

@keyframes phoneFloatOne{

    0%,100%{

        transform:translateY(0) rotate(-10deg);

    }

    50%{

        transform:translateY(-18px) rotate(-8deg);

    }

}

@keyframes phoneFloatTwo{

    0%,100%{

        transform:translateY(0) rotate(8deg);

    }

    50%{

        transform:translateY(18px) rotate(10deg);

    }

}
.tech-chip{

    position:absolute;

    padding:10px 18px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    font-size:.85rem;

    font-weight:600;

    transition:.35s;

}

.tech-chip:hover{

    transform:translateY(-8px);

    border-color:var(--secondary);

}
.flutter{

    top:20px;

    left:20px;

}

.react{

    top:110px;

    right:0;

}

.firebase{

    left:10px;

    bottom:180px;

}

.maps{

    right:20px;

    bottom:90px;

}

.payment{

    left:50%;

    bottom:15px;

    transform:translateX(-50%);

}

.push{

    right:40px;

    top:320px;

}
.app-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:80px;

}
.app-category-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:70px;

}

.category-card{

    padding:40px 35px;

    text-align:center;

}

.category-icon{

    width:82px;

    height:82px;

    margin:0 auto 28px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

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

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

    transition:.35s;

}

.category-card:hover .category-icon{

    transform:translateY(-8px) rotate(-6deg);

}

.category-card h3{

    margin-bottom:16px;

}
.ecommerce{
    color:#00D4FF;
}

.delivery{
    color:#F59E0B;
}

.social{
    color:#8B5CF6;
}

.fintech{
    color:#22C55E;
}

.health{
    color:#EF4444;
}

.education{
    color:#3B82F6;
}
/*=====================================
APP PROCESS
======================================*/

.app-process{

    position:relative;

    max-width:1000px;

    margin:80px auto 0;

}

.process-line{

    position:absolute;

    left:50%;

    top:0;

    width:3px;

    height:100%;

    transform:translateX(-50%);

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

}

.process-step{

    display:grid;

    grid-template-columns:1fr 70px 1fr;

    align-items:center;

    margin-bottom:70px;

}

.process-step.left .step-card{

    grid-column:1;

}

.process-step.left .step-dot{

    grid-column:2;

}

.process-step.right .step-dot{

    grid-column:2;

}

.process-step.right .step-card{

    grid-column:3;

}

.step-card{

    padding:35px;

}

.step-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:50%;

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

    color:var(--secondary);

    font-weight:700;

    margin-bottom:18px;

}

.step-dot{

    width:22px;

    height:22px;

    margin:auto;

    border-radius:50%;

    background:var(--primary);

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

    z-index:2;

}

.step-card h3{

    margin-bottom:16px;

}
/*=====================================
APP CTA
======================================*/

.app-cta-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    padding:90px 70px;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        rgba(11,53,89,.96),
        rgba(18,26,43,.96)
    );

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

}

.app-cta-glow{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at top left,

    rgba(0,212,255,.18),

    transparent 45%),

    radial-gradient(circle at bottom right,

    rgba(139,92,246,.18),

    transparent 45%);

}

.app-cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

}

.app-cta-content h2{

    margin:24px 0;

}

.app-cta-content p{

    max-width:650px;

    margin:0 auto 45px;

}

.app-cta-features{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.app-cta-features .cta-feature{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:40px;

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

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

}

.app-cta-features i{

    color:var(--secondary);

}
.hero-buttons{
    justify-content: center;
}