/*==========================================
MOBILE HERO
==========================================*/

.mobile-hero{

    padding:90px 0;

    background:linear-gradient(135deg,#eef2ff,#f8fbff);

    overflow:hidden;

}

.mobile-hero .service-title{

    font-size:54px;

    font-weight:700;

    color:#0f172a;

}

.mobile-hero .service-title span{

    color:#4f46e5;

}

.mobile-hero .service-description{

    margin-top:25px;

    color:#64748b;

    line-height:1.9;

    font-size:18px;

}

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

.mobile-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}

.mobile-tags span{

    background:#fff;

    padding:10px 18px;

    border-radius:30px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    font-weight:600;

    transition:.3s;

}

.mobile-tags span:hover{

    background:#4f46e5;

    color:#fff;

    transform:translateY(-4px);

}

.mobile-tags i{

    margin-right:8px;

}

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

.phone-wrapper{

    display:flex;

    justify-content:center;

}

.phone{

    width:320px;

    background:#111827;

    border-radius:40px;

    padding:15px;

    box-shadow:0 25px 70px rgba(0,0,0,.25);

}

.phone-notch{

    width:130px;

    height:24px;

    background:#111827;

    margin:auto;

    border-radius:20px;

    margin-bottom:10px;

}

.phone-screen{

    background:#fff;

    border-radius:30px;

    padding:18px;

    min-height:620px;

}

.status-bar{

    display:flex;

    justify-content:space-between;

    font-size:13px;

    margin-bottom:20px;

}

.dashboard-header{

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

}

.dashboard-header small{

    display:block;

    color:#64748b;

    font-size:14px;

    margin-top:6px;

}

.stats{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}

.stat-card{

    flex:1;

    background:#eef2ff;

    padding:18px;

    border-radius:16px;

    text-align:center;

    opacity:0;

    transform:translateY(30px);

    animation:slideUp .8s ease forwards;

}

.stat-card:nth-child(2){

    animation-delay:.25s;

}

.stat-card i{

    color:#4f46e5;

    font-size:26px;

    margin-bottom:10px;

}

.quick-actions{

    display:grid;

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

    gap:15px;

}

.action{

    background:#f8fafc;

    padding:22px;

    border-radius:16px;

    text-align:center;

    transition:.35s;

    opacity:0;

    transform:translateY(25px);

    animation:actionAppear .8s ease forwards;

}

.action:nth-child(1){

    animation-delay:.5s;

}

.action:nth-child(2){

    animation-delay:.65s;

}

.action:nth-child(3){

    animation-delay:.8s;

}

.action:nth-child(4){

    animation-delay:.95s;

}
.action:hover{

    background:#4f46e5;

    color:#fff;

}

.action i{

    font-size:26px;

    margin-bottom:10px;

}

.bottom-nav{

    margin-top:35px;

    display:flex;

    justify-content:space-around;

    font-size:22px;

    color:#94a3b8;

}

.bottom-nav .active{

    color:#4f46e5;

}

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

@media(max-width:991px){

.mobile-hero{

padding:70px 0;

}

.phone{

margin-top:50px;

width:290px;

}

.mobile-hero .service-title{

font-size:40px;

}

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes actionAppear{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================
Floating Phone Animation
==========================================*/

.phone{

    animation:phoneFloat 5s ease-in-out infinite;

}

@keyframes phoneFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

.dashboard-header{

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

    animation:fadeInLeft .8s ease;

}

@keyframes fadeInLeft{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.action:nth-child(4) i{

    animation:notificationPulse 2s infinite;

}

@keyframes notificationPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.2);

    }

    100%{

        transform:scale(1);

    }

}

.bottom-nav .active{

    color:#4f46e5;

    animation:navGlow 2s infinite;

}

@keyframes navGlow{

    0%{

        text-shadow:0 0 0 rgba(79,70,229,0);

    }

    50%{

        text-shadow:0 0 15px rgba(79,70,229,.6);

    }

    100%{

        text-shadow:0 0 0 rgba(79,70,229,0);

    }

}


/*==========================================
Business Value
==========================================*/

.mobile-value-section{

    background:#ffffff;

}

.mobile-flow{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.flow-box{

    width:240px;

    padding:30px;

    border-radius:22px;

    background:#fff;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.flow-box:hover{

    transform:translateY(-8px);

}

.flow-box i{

    font-size:40px;

    color:#4f46e5;

    margin-bottom:15px;

}

.flow-arrow{

    margin:18px 0;

    font-size:28px;

    color:#4f46e5;

}

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

.value-grid{

    display:grid;

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

    gap:22px;

}

.value-card{

    background:#fff;

    padding:28px;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.35s;

    border-top:4px solid transparent;

}

.value-card:hover{

    transform:translateY(-8px);

    border-top-color:#4f46e5;

}

.value-card i{

    font-size:34px;

    color:#4f46e5;

    margin-bottom:18px;

}

.value-card h5{

    font-weight:700;

    margin-bottom:15px;

}

.value-card p{

    color:#64748b;

    line-height:1.8;

}

@media(max-width:992px){

.value-grid{

grid-template-columns:1fr;

margin-top:40px;

}

}

.app-showcase{

background:#f8fbff;

}


.app-icon:hover{

background:#4f46e5;

color:#fff;

transform:translateY(-8px);

}

.app-icon i{

font-size:32px;

margin-bottom:12px;

color:#4f46e5;

display:block;

}

.app-icon:hover i{

color:#fff;

}

.app-icon span{

font-size:13px;

font-weight:600;

display:block;

}

/*======================================
Mobile Journey
======================================*/

.mobile-journey{

    background:#ffffff;

}

.journey-phone{

    width:320px;

    margin:auto;

    background:#111827;

    border-radius:40px;

    padding:14px;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.journey-screen{

    background:#fff;

    border-radius:28px;

    padding:25px;

}

.journey-stage{

    text-align:center;

}

.stage-icon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    background:#eef2ff;

    display:flex;

    justify-content:center;

    align-items:center;

}

.stage-icon i{

    color:#4f46e5;

    font-size:28px;

}

.journey-stage h5{

    margin-top:12px;

    font-weight:700;

}

.journey-stage small{

    color:#64748b;

}

.stage-line{

    width:4px;

    height:35px;

    background:#c7d2fe;

    margin:10px auto;

}

.journey-content{

    padding-left:25px;

}

.journey-item{

    display:flex;

    gap:20px;

    margin-bottom:35px;

}

.step-no{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#4f46e5;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:20px;

    flex-shrink:0;

}

.journey-item h4{

    font-weight:700;

    margin-bottom:10px;

}

.journey-item p{

    color:#64748b;

    line-height:1.8;

}

@media(max-width:992px){

.journey-phone{

margin-bottom:50px;

}

.journey-content{

padding-left:0;

}

}

/*==========================================
MOBILE FEATURES
==========================================*/

.mobile-features{

    background:#f8fbff;

}

.feature-orbit{

    width:700px;

    height:700px;

    margin:auto;

    position:relative;

}

.orbit-phone{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:200px;

    height:200px;

    border-radius:35px;

    background:linear-gradient(135deg,#4f46e5,#2563eb);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:0 20px 50px rgba(79,70,229,.35);

    z-index:5;

}

.orbit-phone i{

    font-size:60px;

    margin-bottom:18px;

}

.orbit-item{

    position:absolute;

    width:130px;

    height:130px;

    border-radius:50%;

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

    z-index:5;

}

.orbit-item:hover{

    transform:scale(1.08);

    background:#4f46e5;

    color:#fff;

}

.orbit-item i{

    font-size:30px;

    color:#4f46e5;

    margin-bottom:10px;

}

.orbit-item:hover i{

    color:#fff;

}

.orbit-item span{

    font-size:13px;

    font-weight:600;

}

/* Positions */

.top{

left:285px;
top:20px;

}

.top-right{

right:75px;
top:110px;

}

.right{

right:20px;
top:285px;

}

.bottom-right{

right:75px;
bottom:110px;

}

.bottom{

left:285px;
bottom:20px;

}

.bottom-left{

left:75px;
bottom:110px;

}

.left{

left:20px;
top:285px;

}

.top-left{

left:75px;
top:110px;

}

/* SVG */

.orbit-ring{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.orbit-circle{

    fill:none;

    stroke:url(#mobileGradient);

    stroke-width:3;

    stroke-dasharray:12 10;

}

.orbit-dot{

    fill:#4f46e5;

    filter:drop-shadow(0 0 8px rgba(79,70,229,.7));

}

/* Responsive */

@media(max-width:992px){

.feature-orbit{

width:100%;

height:auto;

display:grid;

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

gap:20px;

}

.orbit-phone{

position:relative;

left:auto;

top:auto;

transform:none;

grid-column:1/3;

margin:auto;

}

.orbit-item{

position:relative;

left:auto;

top:auto;

right:auto;

bottom:auto;

margin:auto;

}

.orbit-ring{

display:none;

}

}

/*=========================================
Business Use Cases
=========================================*/

.mobile-usecases{

background:#fff;

}

.usecase-wrapper{

position:relative;

width:1000px;

height:650px;

margin:auto;

}

.phone-center{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:220px;

height:220px;

border-radius:35px;

background:linear-gradient(135deg,#4f46e5,#2563eb);

color:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

box-shadow:0 25px 60px rgba(79,70,229,.35);

z-index:5;

}

.phone-center i{

font-size:70px;

margin-bottom:15px;

}

.usecase-card{

position:absolute;

width:220px;

background:white;

padding:22px;

border-radius:18px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

z-index:5;

}

.usecase-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(79,70,229,.18);

}

.usecase-card i{

font-size:30px;

color:#4f46e5;

margin-bottom:15px;

}

.usecase-card h5{

font-weight:700;

margin-bottom:10px;

}

.usecase-card p{

color:#64748b;

font-size:14px;

line-height:1.7;

}

/* Positions */

.retail{

left:40px;

top:40px;

}

.healthcare{

right:40px;

top:40px;

}

.logistics{

left:10px;

bottom:60px;

}

.education{

right:10px;

bottom:60px;

}

.hospitality{

left:40px;

top:240px;

}

.field{

right:40px;

top:240px;

}

/* SVG */

.usecase-svg{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

z-index:1;

}

.usecase-svg line{

stroke:#c7d2fe;

stroke-width:2;

stroke-dasharray:8 6;

animation:flowLine 8s linear infinite;

}

@keyframes flowLine{

to{

stroke-dashoffset:100;

}

}

@media(max-width:992px){

.usecase-wrapper{

width:100%;

height:auto;

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.phone-center{

position:relative;

left:auto;

top:auto;

transform:none;

margin:auto;

margin-bottom:30px;

}

.usecase-card{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

width:100%;

}

.usecase-svg{

display:none;

}

}


/*==========================================
Mobile Quality
==========================================*/

.mobile-quality{

    background:#f8fbff;

}

.quality-dashboard{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.quality-header{

    background:linear-gradient(90deg,#4f46e5,#2563eb);

    color:#fff;

    padding:18px 25px;

    font-size:20px;

    font-weight:600;

}

.quality-header i{

    margin-right:10px;

}

.quality-body{

    padding:30px;

}

.quality-item{

    margin-bottom:24px;

}

.quality-item span{

    display:block;

    margin-bottom:10px;

    font-weight:600;

}

.progress{

    height:10px;

    border-radius:20px;

    background:#e2e8f0;

    overflow:hidden;

}

.progress-bar{

    height:100%;

    border-radius:20px;

    background:linear-gradient(90deg,#4f46e5,#06b6d4);

    animation:growBar 1.5s ease forwards;

    width:0;

}

.p1{--w:98%;}
.p2{--w:95%;}
.p3{--w:100%;}
.p4{--w:90%;}
.p5{--w:96%;}
.p6{--w:97%;}

@keyframes growBar{

    from{

        width:0;

    }

    to{

        width:var(--w);

    }

}

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

.quality-points .point{

    display:flex;

    gap:20px;

    margin-bottom:35px;

}

.point i{

    width:65px;

    height:65px;

    border-radius:18px;

    background:#eef2ff;

    color:#4f46e5;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    flex-shrink:0;

}

.point h5{

    font-weight:700;

    margin-bottom:10px;

}

.point p{

    color:#64748b;

    line-height:1.8;

}

/*=========================================
APP HEALTH DASHBOARD
=========================================*/

.app-health-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.health-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 28px;

    background:linear-gradient(135deg,#4f46e5,#2563eb);

    color:#fff;

}

.health-header h4{

    margin:0;

    font-weight:700;

}

.health-header small{

    opacity:.9;

}

.health-status{

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

    padding:8px 16px;

    border-radius:30px;

    font-size:14px;

}

.health-status i{

    color:#22c55e;

    margin-right:8px;

    animation:pulseGreen 1.8s infinite;

}

.health-body{

    padding:28px;

}

.health-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid #eef2f7;

}

.health-row:last-child{

    border-bottom:none;

}

.health-row span:first-child{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:#334155;

}

.health-row i{

    width:38px;

    height:38px;

    border-radius:10px;

    background:#eef2ff;

    color:#4f46e5;

    display:flex;

    justify-content:center;

    align-items:center;

}

.status{

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.status.success{

    background:#dcfce7;

    color:#15803d;

}

@keyframes pulseGreen{

    0%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.4;

        transform:scale(1.3);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

/*=========================================
Mobile FAQ
=========================================*/

.mobile-faq-section{

    background:#ffffff;

}

.launch-card{

    background:#fff;

    padding:35px;

    border-radius:24px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    position:sticky;

    top:110px;

}

.launch-phone{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:24px;

    background:linear-gradient(135deg,#4f46e5,#2563eb);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.launch-phone i{

    color:#fff;

    font-size:42px;

}

.launch-card h3{

    text-align:center;

    font-weight:700;

}

.launch-card p{

    text-align:center;

    color:#64748b;

    margin:20px 0 35px;

    line-height:1.8;

}

.launch-step{

    display:flex;

    gap:18px;

    margin-bottom:25px;

    align-items:center;

}

.launch-step i{

    width:50px;

    height:50px;

    border-radius:14px;

    background:#eef2ff;

    color:#4f46e5;

    display:flex;

    justify-content:center;

    align-items:center;

}

.launch-step h6{

    margin:0;

    font-weight:600;

}

.launch-step small{

    color:#64748b;

}

.mobile-faq .accordion-item{

    margin-bottom:18px;

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.mobile-faq .accordion-button{

    padding:22px;

    font-weight:600;

}

.mobile-faq .accordion-button:not(.collapsed){

    background:linear-gradient(90deg,#4f46e5,#2563eb);

    color:#fff;

}

.mobile-faq .accordion-button:focus{

    box-shadow:none;

}

.mobile-faq .accordion-body{

    padding:25px;

    line-height:1.8;

    color:#64748b;

}

@media(max-width:991px){

.launch-card{

position:relative;

top:auto;

margin-bottom:30px;

}

}


.app-icon{

    animation:floatApp 5s ease-in-out infinite;

}

.app-icon:nth-child(even){

    animation-delay:1.2s;

}

@keyframes floatApp{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


/*=====================================
APP SHOWCASE
=====================================*/

.app-showcase{

    background:#f8fbff;

}

.phone-frame{

    background:#111827;

    border-radius:45px;

    padding:18px;

    max-width:420px;

    margin:auto;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.phone-notch{

    width:120px;

    height:26px;

    background:#000;

    border-radius:20px;

    margin:0 auto 18px;

}

.phone-screen{

    background:#ffffff;

    border-radius:32px;

    padding:28px;

}

.app-grid{

    display:grid;

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

    gap:18px;

}

.app-card{

    background:#f5f9ff;

    border:1px solid #dbeafe;

    border-radius:20px;

    padding:18px 10px;

    text-align:center;

    transition:.35s;

}

.app-card:hover{

    background:#2563eb;

    transform:translateY(-6px);

}

.app-card i{

    font-size:28px;

    color:#2563eb;

    margin-bottom:12px;

    transition:.35s;

}

.app-card:hover i{

    color:#fff;

}

.app-card span{

    display:block;

    font-size:14px;

    font-weight:600;

    color:#334155;

    transition:.35s;

}

.app-card:hover span{

    color:#fff;

}

/* Tablet */

@media(max-width:992px){

.phone-frame{

    max-width:380px;

}

}

/* Mobile */

@media(max-width:576px){

.phone-frame{

    border-radius:32px;

    padding:12px;

}

.phone-screen{

    padding:18px;

}

.app-grid{

    gap:12px;

}

.app-card{

    padding:14px 8px;

}

.app-card i{

    font-size:22px;

}

.app-card span{

    font-size:12px;

}

}

/*==================================================
APP SHOWCASE
==================================================*/

.app-showcase-section{

    background:#f8fbff;

}

.mobile-preview{

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    border-radius:40px;

    color:#fff;

    padding:35px;

    text-align:center;

    box-shadow:0 20px 50px rgba(37,99,235,.25);

}

.mobile-header{

    margin-bottom:30px;

}

.mobile-notch{

    width:110px;

    height:18px;

    border-radius:30px;

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

    margin:auto;

}

.mobile-content i{

    font-size:70px;

    margin-bottom:25px;

}

.mobile-content h3{

    font-size:32px;

    font-weight:700;

    margin-bottom:15px;

}

.mobile-content p{

    opacity:.9;

}

.mobile-stats{

    display:flex;

    justify-content:space-between;

    margin-top:40px;

}

.mobile-stats div{

    flex:1;

}

.mobile-stats h4{

    font-size:28px;

    font-weight:700;

}

.mobile-stats span{

    font-size:14px;

}

/* Cards */

.app-service-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    height:100%;

    text-align:center;

    border:1px solid #e5e7eb;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.app-service-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

    box-shadow:0 20px 45px rgba(37,99,235,.15);

}

.app-service-card i{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 20px;

    font-size:30px;

    color:#2563eb;

    background:#eff6ff;

}

.app-service-card h5{

    font-size:22px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:15px;

}

.app-service-card p{

    color:#64748b;

    line-height:1.7;

    margin:0;

}

/* Tablet */

@media(max-width:991px){

.mobile-preview{

    margin-bottom:20px;

}

.mobile-stats{

    flex-wrap:wrap;

    gap:20px;

}

}

/* Mobile */

@media(max-width:767px){

.app-showcase-section{

    padding:60px 0;

}

.mobile-preview{

    padding:30px 20px;

    border-radius:30px;

}

.mobile-content h3{

    font-size:26px;

}

.mobile-content i{

    font-size:55px;

}

.mobile-stats{

    flex-direction:column;

    gap:18px;

}

.app-service-card{

    padding:24px;

}

.app-service-card h5{

    font-size:20px;

}

}