:root{
    --q-orange:#ff6518;
    --q-orange-soft:#fff4ee;
    --q-navy:#111827;
    --q-text:#344054;
    --q-muted:#667085;
    --q-line:#e5e9f0;
    --q-bg:#f7f9fc;
}

html{
    scroll-behavior:smooth;
}

body.service-page{
    margin:0;
    background:#fff;
    color:var(--q-text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.service-shell{
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}

.service-topbar{
    background:var(--q-navy);
    color:#fff;
    font-size:12px;
    font-weight:700;
}

.service-topbar .service-shell{
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.service-topbar strong{
    color:#ff8b51;
}

.service-nav{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--q-line);
    backdrop-filter:blur(14px);
}

.service-nav-inner{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.service-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--q-navy);
    text-decoration:none;
    font-size:22px;
    font-weight:900;
}

.service-brand-mark{
    width:39px;
    height:39px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:var(--q-orange);
    color:#fff;
    font-weight:900;
}

.service-nav-links{
    display:flex;
    align-items:center;
    gap:25px;
}

.service-nav-links a{
    color:var(--q-navy);
    text-decoration:none;
    font-size:13px;
    font-weight:750;
}

.service-nav-cta{
    padding:13px 18px;
    border-radius:10px;
    background:var(--q-navy);
    color:#fff !important;
}

.service-hero{
    padding:92px 0 78px;
    background:
        radial-gradient(circle at 85% 15%,rgba(255,101,24,.10),transparent 28%),
        linear-gradient(180deg,#fff,#fbfcfe);
}

.service-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    gap:70px;
    align-items:center;
}

.service-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border:1px solid #ffd0b8;
    border-radius:999px;
    background:#fff8f4;
    color:#b83d00;
    font-size:11px;
    font-weight:850;
}

.service-eyebrow:before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--q-orange);
}

.service-hero h1{
    margin:22px 0 19px;
    max-width:820px;
    color:var(--q-navy);
    font-size:clamp(44px,5.8vw,76px);
    line-height:.98;
    letter-spacing:-3.7px;
}

.service-hero h1 em{
    color:var(--q-orange);
    font-style:normal;
}

.service-hero-copy{
    max-width:700px;
    color:var(--q-muted);
    font-size:18px;
    line-height:1.72;
}

.service-actions{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin-top:30px;
}

.service-primary,
.service-secondary{
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 21px;
    border-radius:11px;
    text-decoration:none;
    font-size:13px;
    font-weight:850;
}

.service-primary{
    background:var(--q-orange);
    color:#fff;
}

.service-secondary{
    border:1px solid #d8dee8;
    background:#fff;
    color:var(--q-navy);
}

.service-proof{
    margin-top:25px;
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    color:#637083;
    font-size:11px;
    font-weight:700;
}

.service-proof span:before{
    content:"✓";
    margin-right:6px;
    color:var(--q-orange);
    font-weight:900;
}

.service-visual{
    padding:12px;
    border:1px solid #dfe5ed;
    border-radius:25px;
    background:#fff;
    box-shadow:0 30px 80px rgba(15,23,42,.12);
}

.service-browser-bar{
    height:46px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 15px;
    background:#f8fafc;
    border-radius:15px 15px 0 0;
    border-bottom:1px solid #e8ecf2;
}

.service-browser-bar i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#cdd5e1;
}

.service-browser-url{
    margin-left:8px;
    flex:1;
    padding:7px 12px;
    border:1px solid #e2e7ee;
    border-radius:8px;
    background:#fff;
    color:#98a2b3;
    font-size:10px;
}

.service-dashboard{
    padding:22px;
}

.service-dashboard-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.service-dashboard-title{
    color:var(--q-navy);
    font-size:16px;
    font-weight:900;
}

.service-dashboard-badge{
    padding:7px 10px;
    border-radius:999px;
    background:var(--q-orange-soft);
    color:#c44709;
    font-size:9px;
    font-weight:850;
}

.service-metric-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:11px;
}

.service-metric{
    padding:16px;
    border-radius:13px;
    background:#f5f7fa;
}

.service-metric span{
    display:block;
    color:#8a95a5;
    font-size:9px;
}

.service-metric strong{
    display:block;
    margin-top:5px;
    color:var(--q-navy);
    font-size:20px;
}

.service-dashboard-main{
    display:grid;
    grid-template-columns:1.45fr .75fr;
    gap:11px;
    margin-top:11px;
}

.service-chart,
.service-list{
    min-height:170px;
    padding:17px;
    border:1px solid #edf0f4;
    border-radius:14px;
}

.service-chart-bars{
    height:105px;
    display:flex;
    align-items:flex-end;
    gap:7px;
    margin-top:14px;
}

.service-chart-bars span{
    flex:1;
    border-radius:5px 5px 2px 2px;
    background:#d9dee7;
}

.service-chart-bars span:nth-child(2),
.service-chart-bars span:nth-child(5),
.service-chart-bars span:nth-child(7){
    background:var(--q-orange);
}

.service-list div{
    padding:10px 0;
    border-bottom:1px solid #edf0f4;
    color:#667085;
    font-size:10px;
}

.service-list div:last-child{
    border-bottom:0;
}

.service-section{
    padding:85px 0;
}

.service-section.gray{
    background:var(--q-bg);
}

.service-section-head{
    max-width:760px;
    margin-bottom:38px;
}

.service-section-head span{
    color:var(--q-orange);
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.service-section-head h2{
    margin:8px 0 13px;
    color:var(--q-navy);
    font-size:clamp(34px,4vw,52px);
    line-height:1.05;
    letter-spacing:-2px;
}

.service-section-head p{
    margin:0;
    color:var(--q-muted);
    font-size:16px;
    line-height:1.75;
}

.service-card-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.service-card{
    padding:26px;
    border:1px solid var(--q-line);
    border-radius:18px;
    background:#fff;
}

.service-card-number{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    margin-bottom:20px;
    border-radius:10px;
    background:var(--q-orange-soft);
    color:var(--q-orange);
    font-size:11px;
    font-weight:900;
}

.service-card h3{
    margin:0 0 9px;
    color:var(--q-navy);
    font-size:18px;
}

.service-card p{
    margin:0;
    color:var(--q-muted);
    font-size:13px;
    line-height:1.7;
}

.service-two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}

.service-copy h2{
    margin:0 0 17px;
    color:var(--q-navy);
    font-size:42px;
    line-height:1.07;
    letter-spacing:-1.8px;
}

.service-copy p{
    color:var(--q-muted);
    line-height:1.8;
}

.service-checks{
    display:grid;
    gap:11px;
    margin-top:25px;
}

.service-check{
    padding:14px 16px;
    border:1px solid var(--q-line);
    border-radius:12px;
    background:#fff;
    color:#475467;
    font-size:13px;
    font-weight:700;
}

.service-check:before{
    content:"✓";
    margin-right:10px;
    color:var(--q-orange);
}

.service-callout{
    padding:34px;
    border-radius:22px;
    background:var(--q-navy);
    color:#fff;
}

.service-callout span{
    color:#ff9b69;
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.service-callout h3{
    margin:10px 0 12px;
    font-size:31px;
    line-height:1.08;
}

.service-callout p{
    color:#cbd5e1;
    line-height:1.7;
}

.service-related{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.service-related a{
    display:block;
    padding:20px;
    border:1px solid var(--q-line);
    border-radius:14px;
    text-decoration:none;
    background:#fff;
}

.service-related strong{
    display:block;
    color:var(--q-navy);
    font-size:15px;
}

.service-related span{
    display:block;
    margin-top:5px;
    color:#7d8999;
    font-size:11px;
}

.service-cta{
    padding:80px 0;
}

.service-cta-box{
    padding:48px;
    border-radius:25px;
    background:
        radial-gradient(circle at 90% 10%,rgba(255,101,24,.30),transparent 30%),
        var(--q-navy);
    color:#fff;
}

.service-cta-box h2{
    max-width:720px;
    margin:0;
    font-size:45px;
    line-height:1.05;
    letter-spacing:-2px;
}

.service-cta-box p{
    max-width:700px;
    color:#cbd5e1;
    line-height:1.75;
}

.service-footer{
    padding:35px 0;
    border-top:1px solid var(--q-line);
    background:#fff;
}

.service-footer-inner{
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:center;
}

.service-footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.service-footer a{
    color:#667085;
    text-decoration:none;
    font-size:11px;
}

.home-service-links{
    padding:70px 0;
    background:#f7f9fc;
}

.home-service-links-inner{
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}

.home-service-links h2{
    margin:0 0 10px;
    color:#111827;
    font-size:38px;
    letter-spacing:-1.5px;
}

.home-service-links > div > p{
    max-width:700px;
    color:#667085;
}

.home-service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
    margin-top:25px;
}

.home-service-grid a{
    display:block;
    padding:20px;
    border:1px solid #e5e9f0;
    border-radius:15px;
    background:#fff;
    color:#111827;
    text-decoration:none;
    font-weight:850;
}

.home-service-grid span{
    display:block;
    margin-top:5px;
    color:#7d8999;
    font-size:11px;
    font-weight:500;
}

@media(max-width:900px){

    .service-nav-links{
        display:none;
    }

    .service-hero{
        padding-top:60px;
    }

    .service-hero-grid,
    .service-two-col{
        grid-template-columns:1fr;
        gap:40px;
    }

    .service-card-grid,
    .service-related,
    .home-service-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:620px){

    .service-shell{
        width:min(100% - 26px,1180px);
    }

    .service-topbar .service-shell{
        justify-content:center;
        text-align:center;
    }

    .service-topbar a{
        display:none;
    }

    .service-hero h1{
        font-size:45px;
        letter-spacing:-2.5px;
    }

    .service-card-grid,
    .service-related,
    .home-service-grid,
    .service-metric-grid,
    .service-dashboard-main{
        grid-template-columns:1fr;
    }

    .service-cta-box{
        padding:30px 23px;
    }

    .service-cta-box h2{
        font-size:34px;
    }

    .service-footer-inner{
        display:block;
    }

    .service-footer-links{
        margin-top:15px;
    }

}

/* =========================================================
   QAMZU — PREMIUM VISUAL SERVICE PAGES
   ========================================================= */

.premium-service-hero{
    padding:82px 0 88px;
    overflow:hidden;
    background:
        radial-gradient(circle at 88% 12%,rgba(255,101,24,.12),transparent 25%),
        linear-gradient(180deg,#fff 0%,#fafbfe 100%);
}

.premium-service-grid{
    display:grid;
    grid-template-columns:minmax(0,.94fr) minmax(480px,1.06fr);
    gap:65px;
    align-items:center;
}

.premium-service-copy h1{
    margin:20px 0 20px;
    color:#111827;
    font-size:clamp(48px,5.4vw,75px);
    line-height:.98;
    letter-spacing:-3.8px;
}

.premium-service-copy h1 em{
    color:#ff6518;
    font-style:normal;
}

.premium-service-copy > p{
    max-width:690px;
    margin:0;
    color:#667085;
    font-size:17px;
    line-height:1.72;
}

.premium-visual{
    position:relative;
    min-height:520px;
}

.premium-photo-card{
    position:absolute;
    inset:0 0 42px 45px;
    overflow:hidden;
    border:1px solid #dfe5ee;
    border-radius:28px;
    background:#111827;
    box-shadow:
        0 35px 90px rgba(15,23,42,.18);
}

.premium-photo-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.05),
            rgba(17,24,39,.42)
        );
}

.premium-photo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.premium-browser{
    position:absolute;
    z-index:4;
    left:0;
    right:90px;
    bottom:0;
    padding:13px;
    border:1px solid #e3e8ef;
    border-radius:21px;
    background:rgba(255,255,255,.98);
    box-shadow:
        0 25px 70px rgba(15,23,42,.17);
}

.premium-browser-top{
    display:flex;
    align-items:center;
    gap:6px;
    height:35px;
    padding:0 7px;
}

.premium-browser-top i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#cfd6e1;
}

.premium-browser-address{
    flex:1;
    margin-left:7px;
    padding:7px 10px;
    border:1px solid #edf0f4;
    border-radius:8px;
    background:#f8fafc;
    color:#98a2b3;
    font-size:9px;
}

.premium-ui{
    display:grid;
    grid-template-columns:140px 1fr;
    min-height:220px;
    overflow:hidden;
    border:1px solid #edf0f4;
    border-radius:14px;
}

.premium-ui-sidebar{
    padding:17px 13px;
    background:#111827;
    color:#fff;
}

.premium-ui-logo{
    margin-bottom:22px;
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.premium-ui-nav{
    display:grid;
    gap:9px;
}

.premium-ui-nav span{
    padding:8px 9px;
    border-radius:7px;
    color:#aab3c1;
    font-size:9px;
}

.premium-ui-nav span.active{
    background:#ff6518;
    color:#fff;
}

.premium-ui-content{
    padding:17px;
    background:#fff;
}

.premium-ui-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.premium-ui-heading strong{
    color:#111827;
    font-size:12px;
}

.premium-ui-heading span{
    padding:5px 8px;
    border-radius:999px;
    background:#fff2eb;
    color:#d64c08;
    font-size:8px;
    font-weight:850;
}

.premium-ui-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.premium-ui-stat{
    padding:11px;
    border-radius:9px;
    background:#f6f8fb;
}

.premium-ui-stat small{
    display:block;
    color:#98a2b3;
    font-size:7px;
}

.premium-ui-stat strong{
    display:block;
    margin-top:4px;
    color:#111827;
    font-size:14px;
}

.premium-ui-lines{
    display:grid;
    gap:7px;
    margin-top:13px;
}

.premium-ui-lines span{
    display:block;
    height:8px;
    border-radius:999px;
    background:#edf1f5;
}

.premium-ui-lines span:nth-child(2){
    width:76%;
}

.premium-ui-lines span:nth-child(3){
    width:56%;
    background:#ffccb3;
}

.premium-float-badge{
    position:absolute;
    z-index:6;
    right:0;
    top:55px;
    width:155px;
    padding:15px;
    border:1px solid #e7ebf0;
    border-radius:15px;
    background:#fff;
    box-shadow:
        0 16px 45px rgba(15,23,42,.14);
}

.premium-float-badge span{
    display:block;
    color:#ff6518;
    font-size:9px;
    font-weight:900;
}

.premium-float-badge strong{
    display:block;
    margin-top:4px;
    color:#111827;
    font-size:13px;
}

.service-image-feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.service-image-feature.reverse .service-feature-photo{
    order:2;
}

.service-feature-photo{
    position:relative;
    min-height:430px;
    overflow:hidden;
    border-radius:25px;
    box-shadow:
        0 25px 65px rgba(15,23,42,.13);
}

.service-feature-photo img{
    width:100%;
    height:100%;
    min-height:430px;
    display:block;
    object-fit:cover;
}

.service-feature-photo:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(15,23,42,.40)
        );
}

.service-feature-badge{
    position:absolute;
    z-index:2;
    left:22px;
    bottom:22px;
    right:22px;
    padding:19px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:15px;
    background:rgba(17,24,39,.83);
    backdrop-filter:blur(10px);
    color:#fff;
}

.service-feature-badge strong{
    display:block;
    font-size:15px;
}

.service-feature-badge span{
    display:block;
    margin-top:5px;
    color:#d5dbe5;
    font-size:10px;
}

.service-feature-copy .mini-label{
    color:#ff6518;
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.service-feature-copy h2{
    margin:9px 0 16px;
    color:#111827;
    font-size:44px;
    line-height:1.05;
    letter-spacing:-1.8px;
}

.service-feature-copy p{
    color:#667085;
    font-size:15px;
    line-height:1.8;
}

.service-feature-list{
    display:grid;
    gap:10px;
    margin-top:24px;
}

.service-feature-list div{
    padding:14px 15px;
    border:1px solid #e6eaf0;
    border-radius:11px;
    background:#fff;
    color:#475467;
    font-size:12px;
    font-weight:700;
}

.service-feature-list div:before{
    content:"✓";
    margin-right:9px;
    color:#ff6518;
    font-weight:900;
}

.service-visual-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:16px;
    margin-top:35px;
}

.service-visual-large,
.service-visual-small{
    overflow:hidden;
    border-radius:20px;
    position:relative;
}

.service-visual-large{
    min-height:390px;
}

.service-visual-small{
    min-height:187px;
}

.service-visual-large img,
.service-visual-small img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.service-visual-stack{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:16px;
}

.service-visual-caption{
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    padding:13px 14px;
    border-radius:12px;
    background:rgba(17,24,39,.84);
    backdrop-filter:blur(8px);
    color:#fff;
}

.service-visual-caption strong{
    display:block;
    font-size:12px;
}

.service-visual-caption span{
    display:block;
    margin-top:3px;
    color:#cbd5e1;
    font-size:9px;
}

@media(max-width:950px){

    .premium-service-grid,
    .service-image-feature{
        grid-template-columns:1fr;
    }

    .premium-visual{
        min-height:500px;
    }

    .service-image-feature.reverse .service-feature-photo{
        order:initial;
    }

}

@media(max-width:650px){

    .premium-service-hero{
        padding-top:55px;
    }

    .premium-service-copy h1{
        font-size:45px;
        letter-spacing:-2.4px;
    }

    .premium-visual{
        min-height:410px;
    }

    .premium-photo-card{
        inset:0 0 36px 0;
    }

    .premium-browser{
        right:20px;
    }

    .premium-float-badge{
        display:none;
    }

    .premium-ui{
        grid-template-columns:95px 1fr;
    }

    .service-image-feature{
        gap:32px;
    }

    .service-feature-copy h2{
        font-size:35px;
    }

    .service-visual-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   QAMZU — PREMIUM VISUAL SERVICE PAGES
   ========================================================= */

.premium-service-hero{
    padding:82px 0 88px;
    overflow:hidden;
    background:
        radial-gradient(circle at 88% 12%,rgba(255,101,24,.12),transparent 25%),
        linear-gradient(180deg,#fff 0%,#fafbfe 100%);
}

.premium-service-grid{
    display:grid;
    grid-template-columns:minmax(0,.94fr) minmax(480px,1.06fr);
    gap:65px;
    align-items:center;
}

.premium-service-copy h1{
    margin:20px 0 20px;
    color:#111827;
    font-size:clamp(48px,5.4vw,75px);
    line-height:.98;
    letter-spacing:-3.8px;
}

.premium-service-copy h1 em{
    color:#ff6518;
    font-style:normal;
}

.premium-service-copy > p{
    max-width:690px;
    margin:0;
    color:#667085;
    font-size:17px;
    line-height:1.72;
}

.premium-visual{
    position:relative;
    min-height:520px;
}

.premium-photo-card{
    position:absolute;
    inset:0 0 42px 45px;
    overflow:hidden;
    border:1px solid #dfe5ee;
    border-radius:28px;
    background:#111827;
    box-shadow:
        0 35px 90px rgba(15,23,42,.18);
}

.premium-photo-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.05),
            rgba(17,24,39,.42)
        );
}

.premium-photo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.premium-browser{
    position:absolute;
    z-index:4;
    left:0;
    right:90px;
    bottom:0;
    padding:13px;
    border:1px solid #e3e8ef;
    border-radius:21px;
    background:rgba(255,255,255,.98);
    box-shadow:
        0 25px 70px rgba(15,23,42,.17);
}

.premium-browser-top{
    display:flex;
    align-items:center;
    gap:6px;
    height:35px;
    padding:0 7px;
}

.premium-browser-top i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#cfd6e1;
}

.premium-browser-address{
    flex:1;
    margin-left:7px;
    padding:7px 10px;
    border:1px solid #edf0f4;
    border-radius:8px;
    background:#f8fafc;
    color:#98a2b3;
    font-size:9px;
}

.premium-ui{
    display:grid;
    grid-template-columns:140px 1fr;
    min-height:220px;
    overflow:hidden;
    border:1px solid #edf0f4;
    border-radius:14px;
}

.premium-ui-sidebar{
    padding:17px 13px;
    background:#111827;
    color:#fff;
}

.premium-ui-logo{
    margin-bottom:22px;
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.premium-ui-nav{
    display:grid;
    gap:9px;
}

.premium-ui-nav span{
    padding:8px 9px;
    border-radius:7px;
    color:#aab3c1;
    font-size:9px;
}

.premium-ui-nav span.active{
    background:#ff6518;
    color:#fff;
}

.premium-ui-content{
    padding:17px;
    background:#fff;
}

.premium-ui-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.premium-ui-heading strong{
    color:#111827;
    font-size:12px;
}

.premium-ui-heading span{
    padding:5px 8px;
    border-radius:999px;
    background:#fff2eb;
    color:#d64c08;
    font-size:8px;
    font-weight:850;
}

.premium-ui-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.premium-ui-stat{
    padding:11px;
    border-radius:9px;
    background:#f6f8fb;
}

.premium-ui-stat small{
    display:block;
    color:#98a2b3;
    font-size:7px;
}

.premium-ui-stat strong{
    display:block;
    margin-top:4px;
    color:#111827;
    font-size:14px;
}

.premium-ui-lines{
    display:grid;
    gap:7px;
    margin-top:13px;
}

.premium-ui-lines span{
    display:block;
    height:8px;
    border-radius:999px;
    background:#edf1f5;
}

.premium-ui-lines span:nth-child(2){
    width:76%;
}

.premium-ui-lines span:nth-child(3){
    width:56%;
    background:#ffccb3;
}

.premium-float-badge{
    position:absolute;
    z-index:6;
    right:0;
    top:55px;
    width:155px;
    padding:15px;
    border:1px solid #e7ebf0;
    border-radius:15px;
    background:#fff;
    box-shadow:
        0 16px 45px rgba(15,23,42,.14);
}

.premium-float-badge span{
    display:block;
    color:#ff6518;
    font-size:9px;
    font-weight:900;
}

.premium-float-badge strong{
    display:block;
    margin-top:4px;
    color:#111827;
    font-size:13px;
}

.service-image-feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.service-image-feature.reverse .service-feature-photo{
    order:2;
}

.service-feature-photo{
    position:relative;
    min-height:430px;
    overflow:hidden;
    border-radius:25px;
    box-shadow:
        0 25px 65px rgba(15,23,42,.13);
}

.service-feature-photo img{
    width:100%;
    height:100%;
    min-height:430px;
    display:block;
    object-fit:cover;
}

.service-feature-photo:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(15,23,42,.40)
        );
}

.service-feature-badge{
    position:absolute;
    z-index:2;
    left:22px;
    bottom:22px;
    right:22px;
    padding:19px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:15px;
    background:rgba(17,24,39,.83);
    backdrop-filter:blur(10px);
    color:#fff;
}

.service-feature-badge strong{
    display:block;
    font-size:15px;
}

.service-feature-badge span{
    display:block;
    margin-top:5px;
    color:#d5dbe5;
    font-size:10px;
}

.service-feature-copy .mini-label{
    color:#ff6518;
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.service-feature-copy h2{
    margin:9px 0 16px;
    color:#111827;
    font-size:44px;
    line-height:1.05;
    letter-spacing:-1.8px;
}

.service-feature-copy p{
    color:#667085;
    font-size:15px;
    line-height:1.8;
}

.service-feature-list{
    display:grid;
    gap:10px;
    margin-top:24px;
}

.service-feature-list div{
    padding:14px 15px;
    border:1px solid #e6eaf0;
    border-radius:11px;
    background:#fff;
    color:#475467;
    font-size:12px;
    font-weight:700;
}

.service-feature-list div:before{
    content:"✓";
    margin-right:9px;
    color:#ff6518;
    font-weight:900;
}

.service-visual-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:16px;
    margin-top:35px;
}

.service-visual-large,
.service-visual-small{
    overflow:hidden;
    border-radius:20px;
    position:relative;
}

.service-visual-large{
    min-height:390px;
}

.service-visual-small{
    min-height:187px;
}

.service-visual-large img,
.service-visual-small img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.service-visual-stack{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:16px;
}

.service-visual-caption{
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    padding:13px 14px;
    border-radius:12px;
    background:rgba(17,24,39,.84);
    backdrop-filter:blur(8px);
    color:#fff;
}

.service-visual-caption strong{
    display:block;
    font-size:12px;
}

.service-visual-caption span{
    display:block;
    margin-top:3px;
    color:#cbd5e1;
    font-size:9px;
}

@media(max-width:950px){

    .premium-service-grid,
    .service-image-feature{
        grid-template-columns:1fr;
    }

    .premium-visual{
        min-height:500px;
    }

    .service-image-feature.reverse .service-feature-photo{
        order:initial;
    }

}

@media(max-width:650px){

    .premium-service-hero{
        padding-top:55px;
    }

    .premium-service-copy h1{
        font-size:45px;
        letter-spacing:-2.4px;
    }

    .premium-visual{
        min-height:410px;
    }

    .premium-photo-card{
        inset:0 0 36px 0;
    }

    .premium-browser{
        right:20px;
    }

    .premium-float-badge{
        display:none;
    }

    .premium-ui{
        grid-template-columns:95px 1fr;
    }

    .service-image-feature{
        gap:32px;
    }

    .service-feature-copy h2{
        font-size:35px;
    }

    .service-visual-grid{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   QAMZU — UNIFIED SITE NAVIGATION
   ========================================================= */

.service-nav-inner{
    min-height:76px;
}

.service-nav-links{
    display:flex;
    align-items:center;
    gap:30px;
}

.service-nav-links > a,
.service-nav-links .nav-services-button{
    white-space:nowrap;
    color:#111827;
    font-size:13px;
    font-weight:800;
}

.service-nav-links .service-nav-cta{
    margin-left:6px;
    padding:15px 20px;
    border-radius:11px;
    background:#111827;
    color:#fff;
}

.service-nav-links .nav-services-menu{
    width:510px;
}


/* Override old service-page mobile hiding */
@media(max-width:900px){

    .service-nav-links{
        display:flex;
    }

}

@media(max-width:760px){

    .service-nav-inner{
        min-height:70px;
    }

    .service-nav-links{
        gap:14px;
    }

}


/* =========================================================
   QAMZU — MOBILE APP DEVELOPMENT PAGE
   ========================================================= */

.mobile-app-page{
    background:#fff;
}


/* HERO */

.mobile-hero{
    position:relative;
    overflow:hidden;

    padding:90px 0 110px;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(255,101,24,.12),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbfe 100%
        );
}

.mobile-hero-grid{
    display:grid;

    grid-template-columns:
        minmax(0,.88fr)
        minmax(520px,1.12fr);

    align-items:center;

    gap:70px;
}

.mobile-hero-copy h1{
    max-width:760px;

    margin:22px 0;

    color:#111827;

    font-size:clamp(52px,5.6vw,78px);

    line-height:.97;

    letter-spacing:-4px;
}

.mobile-hero-copy h1 em{
    display:block;

    color:#ff6518;

    font-style:normal;
}

.mobile-hero-copy > p{
    max-width:680px;

    margin:0;

    color:#667085;

    font-size:17px;

    line-height:1.75;
}

.mobile-hero-actions{
    display:flex;
    flex-wrap:wrap;

    gap:11px;

    margin-top:31px;
}

.mobile-proof-row{
    display:flex;
    flex-wrap:wrap;

    gap:17px;

    margin-top:25px;

    color:#647184;

    font-size:10px;

    font-weight:750;
}

.mobile-proof-row span:before{
    content:"✓";

    margin-right:6px;

    color:#ff6518;

    font-weight:900;
}


/* DEVICE STAGE */

.mobile-device-stage{
    position:relative;

    min-height:620px;
}

.mobile-stage-glow{
    position:absolute;

    width:470px;
    height:470px;

    left:80px;
    top:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,101,24,.20),
            rgba(255,101,24,0) 68%
        );
}

.app-phone{
    position:absolute;

    width:260px;

    padding:9px;

    border-radius:38px;

    background:#111827;

    box-shadow:
        0 35px 80px rgba(15,23,42,.28);
}

.app-phone-primary{
    z-index:4;

    left:80px;
    top:10px;

    transform:rotate(-4deg);
}

.app-phone-secondary{
    z-index:3;

    right:25px;
    top:80px;

    transform:rotate(5deg);
}

.app-phone-speaker{
    position:absolute;

    z-index:5;

    width:74px;
    height:19px;

    left:50%;
    top:8px;

    transform:translateX(-50%);

    border-radius:0 0 13px 13px;

    background:#111827;
}

.app-phone-screen{
    min-height:540px;

    overflow:hidden;

    border-radius:31px;

    background:#f7f8fb;
}

.app-statusbar{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 18px 10px;

    color:#111827;

    font-size:8px;
}

.app-mobile-header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 17px;
}

.app-mobile-header small,
.driver-app-top small{
    display:block;

    color:#ff6518;

    font-size:7px;

    font-weight:900;

    letter-spacing:.12em;
}

.app-mobile-header strong{
    display:block;

    margin-top:3px;

    color:#111827;

    font-size:15px;
}

.app-avatar{
    width:34px;
    height:34px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:#ff6518;

    color:#fff;

    font-size:11px;

    font-weight:900;
}

.app-balance-card{
    margin:5px 15px 15px;

    padding:17px;

    border-radius:18px;

    background:#111827;

    color:#fff;
}

.app-balance-card > span{
    display:block;

    color:#9da8b8;

    font-size:7px;
}

.app-balance-card > strong{
    display:block;

    margin-top:4px;

    font-size:22px;
}

.app-mini-chart{
    height:45px;

    display:flex;

    align-items:flex-end;

    gap:5px;

    margin-top:13px;
}

.app-mini-chart i{
    flex:1;

    border-radius:3px 3px 1px 1px;

    background:#ff6518;
}

.app-section-title{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 17px 10px;
}

.app-section-title strong{
    color:#111827;

    font-size:10px;
}

.app-section-title span{
    color:#ff6518;

    font-size:7px;

    font-weight:800;
}

.app-action-grid{
    display:grid;

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

    gap:7px;

    padding:0 15px 17px;
}

.app-action-grid div{
    padding:11px 5px;

    text-align:center;

    border-radius:11px;

    background:#fff;

    border:1px solid #e9edf2;
}

.app-action-grid b{
    width:27px;
    height:27px;

    display:grid;

    place-items:center;

    margin:auto;

    border-radius:8px;

    background:#fff0e8;

    color:#ff6518;

    font-size:11px;
}

.app-action-grid span{
    display:block;

    margin-top:6px;

    color:#667085;

    font-size:6px;
}

.app-list{
    padding:0 15px;
}

.app-list > div{
    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:7px;

    padding:10px;

    border-radius:11px;

    background:#fff;

    border:1px solid #e9edf2;
}

.app-list-icon{
    width:29px;
    height:29px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#fff0e8;

    color:#ff6518;

    font-size:9px;

    font-weight:900;
}

.app-list p{
    margin:0;
}

.app-list strong,
.app-list small{
    display:block;
}

.app-list strong{
    color:#111827;

    font-size:8px;
}

.app-list small{
    margin-top:3px;

    color:#98a2b3;

    font-size:6px;
}

.app-bottom-nav{
    display:grid;

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

    margin:15px;

    padding:11px 7px;

    border-radius:13px;

    background:#fff;

    border:1px solid #e8ecf2;

    text-align:center;
}

.app-bottom-nav span{
    color:#98a2b3;

    font-size:6px;
}

.app-bottom-nav .active{
    color:#ff6518;

    font-weight:900;
}


/* DRIVER APP */

.driver-app-top{
    padding:14px 17px 12px;
}

.driver-app-top h3{
    margin:4px 0 0;

    color:#111827;

    font-size:18px;
}

.driver-map{
    position:relative;

    height:205px;

    margin:0 15px;

    overflow:hidden;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #edf0f4,
            #e2e7ed
        );
}

.map-road{
    position:absolute;

    background:#fff;

    border-radius:999px;
}

.road-one{
    width:270px;
    height:19px;

    left:-15px;
    top:75px;

    transform:rotate(-18deg);
}

.road-two{
    width:230px;
    height:14px;

    left:45px;
    top:120px;

    transform:rotate(31deg);
}

.road-three{
    width:230px;
    height:12px;

    left:-50px;
    top:145px;

    transform:rotate(8deg);
}

.map-pin,
.map-current{
    position:absolute;

    z-index:3;

    width:28px;
    height:28px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#111827;

    color:#fff;

    font-size:8px;

    font-weight:900;

    box-shadow:
        0 5px 12px rgba(0,0,0,.18);
}

.pin-one{
    left:55px;
    top:60px;
}

.pin-two{
    right:45px;
    bottom:35px;
}

.map-current{
    width:22px;
    height:22px;

    left:112px;
    top:118px;

    background:#ff6518;
}

.driver-task{
    margin:13px 15px;

    padding:15px;

    border-radius:15px;

    background:#fff;

    border:1px solid #e8ecf2;
}

.driver-task-head{
    display:flex;

    justify-content:space-between;

    align-items:center;
}

.driver-task-head strong{
    color:#111827;

    font-size:8px;
}

.driver-task-head span{
    padding:4px 6px;

    border-radius:999px;

    background:#eaf8f0;

    color:#168354;

    font-size:6px;

    font-weight:900;
}

.driver-task h4{
    margin:8px 0 2px;

    color:#111827;

    font-size:13px;
}

.driver-task p{
    margin:0 0 11px;

    color:#98a2b3;

    font-size:7px;
}

.driver-task button{
    width:100%;

    padding:9px;

    border:0;

    border-radius:8px;

    background:#ff6518;

    color:#fff;

    font-size:8px;

    font-weight:900;
}

.driver-stats{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:8px;

    margin:0 15px;
}

.driver-stats div{
    padding:11px;

    border-radius:11px;

    background:#fff;

    border:1px solid #e8ecf2;
}

.driver-stats strong,
.driver-stats span{
    display:block;
}

.driver-stats strong{
    color:#111827;

    font-size:14px;
}

.driver-stats span{
    margin-top:2px;

    color:#98a2b3;

    font-size:6px;
}


/* FLOATING ELEMENTS */

.mobile-notification{
    position:absolute;

    z-index:8;

    right:5px;
    bottom:45px;

    width:215px;

    display:flex;

    align-items:center;

    gap:11px;

    padding:14px;

    border:1px solid #e6eaf0;

    border-radius:15px;

    background:#fff;

    box-shadow:
        0 20px 50px rgba(15,23,42,.16);
}

.mobile-notification-icon{
    width:35px;
    height:35px;

    display:grid;

    place-items:center;

    flex:0 0 35px;

    border-radius:10px;

    background:#fff0e8;

    color:#ff6518;

    font-weight:900;
}

.mobile-notification strong,
.mobile-notification span{
    display:block;
}

.mobile-notification strong{
    color:#111827;

    font-size:9px;
}

.mobile-notification span{
    margin-top:3px;

    color:#8a95a5;

    font-size:7px;
}

.mobile-api-badge{
    position:absolute;

    z-index:7;

    left:5px;
    bottom:8px;

    padding:14px 17px;

    border-radius:14px;

    background:#111827;

    color:#fff;

    box-shadow:
        0 18px 45px rgba(15,23,42,.20);
}

.mobile-api-badge span,
.mobile-api-badge strong{
    display:block;
}

.mobile-api-badge span{
    color:#ff9560;

    font-size:6px;

    font-weight:900;

    letter-spacing:.12em;
}

.mobile-api-badge strong{
    margin-top:4px;

    font-size:10px;
}


/* SHARED MOBILE SECTIONS */

.mobile-section{
    padding:95px 0;
}

.mobile-section-soft{
    background:#f7f9fc;
}

.mobile-section-heading{
    max-width:780px;

    margin-bottom:42px;
}

.mobile-section-heading > span,
.mobile-small-label{
    color:#ff6518;

    font-size:10px;

    font-weight:900;

    letter-spacing:.14em;
}

.mobile-section-heading h2{
    margin:9px 0 14px;

    color:#111827;

    font-size:clamp(38px,4.4vw,55px);

    line-height:1.04;

    letter-spacing:-2.2px;
}

.mobile-section-heading h2 em{
    color:#ff6518;

    font-style:normal;
}

.mobile-section-heading p{
    margin:0;

    color:#667085;

    font-size:15px;

    line-height:1.75;
}


/* APP TYPES */

.mobile-app-type-grid{
    display:grid;

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

    gap:17px;
}

.mobile-app-type-card{
    min-height:300px;

    padding:28px;

    border:1px solid #e4e9ef;

    border-radius:21px;

    background:#fff;

    box-shadow:
        0 12px 35px rgba(15,23,42,.04);
}

.mobile-type-icon{
    width:43px;
    height:43px;

    display:grid;

    place-items:center;

    margin-bottom:23px;

    border-radius:12px;

    background:#fff0e8;

    color:#ff6518;

    font-size:9px;

    font-weight:900;
}

.mobile-app-type-card h3{
    margin:0 0 9px;

    color:#111827;

    font-size:21px;
}

.mobile-app-type-card > p{
    max-width:510px;

    color:#667085;

    font-size:12px;

    line-height:1.7;
}

.mobile-mini-ui{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:8px;

    margin-top:21px;
}

.mobile-mini-ui div{
    padding:13px;

    border-radius:11px;

    background:#f7f8fb;
}

.mobile-mini-ui span,
.mobile-mini-ui strong{
    display:block;
}

.mobile-mini-ui span{
    color:#98a2b3;

    font-size:7px;
}

.mobile-mini-ui strong{
    margin-top:4px;

    color:#111827;

    font-size:11px;
}

.mobile-task-preview{
    display:flex;

    align-items:center;

    gap:11px;

    margin-top:8px;

    padding:11px;

    border-radius:11px;

    background:#f7f8fb;
}

.mobile-task-preview > span{
    width:29px;
    height:29px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#fff;

    color:#ff6518;

    font-size:9px;

    font-weight:900;
}

.mobile-task-preview .done{
    background:#e9f8ef;

    color:#168354;
}

.mobile-task-preview strong,
.mobile-task-preview small{
    display:block;
}

.mobile-task-preview strong{
    color:#111827;

    font-size:9px;
}

.mobile-task-preview small{
    margin-top:3px;

    color:#98a2b3;

    font-size:7px;
}

.mobile-route-preview{
    position:relative;

    height:80px;

    margin-top:24px;

    overflow:hidden;

    border-radius:13px;

    background:#eef1f5;
}

.mobile-route-preview:before{
    content:"";

    position:absolute;

    width:130%;

    height:11px;

    left:-15%;

    top:35px;

    transform:rotate(-8deg);

    border-radius:999px;

    background:#fff;
}

.mobile-route-preview i{
    position:absolute;

    z-index:2;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#111827;
}

.mobile-route-preview i:nth-child(1){
    left:35px;
    top:40px;
}

.mobile-route-preview i:nth-child(2){
    left:48%;
    top:26px;
}

.mobile-route-preview i:nth-child(3){
    right:38px;
    top:20px;

    background:#ff6518;
}

.mobile-route-preview strong{
    position:absolute;

    right:15px;
    bottom:9px;

    color:#667085;

    font-size:7px;
}

.mobile-market-preview{
    display:grid;

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

    gap:8px;

    margin-top:22px;
}

.mobile-market-preview div{
    height:70px;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #fff0e8,
            #f5f7fa
        );
}


/* CONNECTED PLATFORM */

.mobile-connected-grid{
    display:grid;

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

    gap:80px;

    align-items:center;
}

.mobile-connected-visual{
    position:relative;

    min-height:520px;

    border-radius:26px;

    background:
        radial-gradient(
            circle at center,
            rgba(255,101,24,.13),
            transparent 42%
        ),
        #f7f9fc;
}

.connected-node{
    position:absolute;

    z-index:2;

    padding:19px;

    border:1px solid #e3e8ef;

    border-radius:16px;

    background:#fff;

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

.connected-node small,
.connected-node strong{
    display:block;
}

.connected-node small{
    color:#98a2b3;

    font-size:7px;

    font-weight:850;

    letter-spacing:.09em;
}

.connected-node strong{
    margin-top:5px;

    color:#111827;

    font-size:14px;

    line-height:1.2;
}

.connected-mobile{
    width:150px;

    left:28px;
    top:70px;
}

.connected-api{
    width:155px;

    left:50%;
    top:205px;

    transform:translateX(-50%);

    text-align:center;

    background:#111827;
}

.connected-api span{
    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    margin:0 auto 8px;

    border-radius:11px;

    background:#ff6518;

    color:#fff;

    font-weight:900;
}

.connected-api strong{
    color:#fff;
}

.connected-api small{
    color:#9ba6b6;
}

.connected-db{
    width:150px;

    right:28px;
    top:70px;
}

.connected-portal{
    width:170px;

    left:50%;
    bottom:45px;

    transform:translateX(-50%);
}

.connected-line{
    position:absolute;

    height:2px;

    background:#d7dde5;

    transform-origin:left center;
}

.line-a{
    width:170px;

    left:155px;
    top:155px;

    transform:rotate(25deg);
}

.line-b{
    width:170px;

    left:315px;
    top:158px;

    transform:rotate(-25deg);
}

.line-c{
    width:130px;

    left:50%;
    top:340px;

    transform:
        translateX(-50%)
        rotate(90deg);
}

.mobile-connected-copy h2{
    margin:10px 0 17px;

    color:#111827;

    font-size:46px;

    line-height:1.05;

    letter-spacing:-2px;
}

.mobile-connected-copy > p{
    color:#667085;

    font-size:15px;

    line-height:1.8;
}

.mobile-connected-list{
    display:grid;

    gap:11px;

    margin-top:25px;
}

.mobile-connected-list > div{
    padding:16px;

    border:1px solid #e4e9ef;

    border-radius:13px;

    background:#fff;
}

.mobile-connected-list strong,
.mobile-connected-list span{
    display:block;
}

.mobile-connected-list strong{
    color:#111827;

    font-size:12px;
}

.mobile-connected-list span{
    margin-top:4px;

    color:#7c8797;

    font-size:10px;

    line-height:1.55;
}


/* DARK CAPABILITIES */

.mobile-section-dark{
    background:#111827;

    color:#fff;
}

.mobile-dark-heading{
    max-width:740px;

    margin-bottom:40px;
}

.mobile-dark-heading span{
    color:#ff8e56;

    font-size:10px;

    font-weight:900;

    letter-spacing:.14em;
}

.mobile-dark-heading h2{
    margin:9px 0 0;

    color:#fff;

    font-size:48px;

    line-height:1.05;

    letter-spacing:-2px;
}

.mobile-capability-grid{
    display:grid;

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

    gap:13px;
}

.mobile-capability-grid article{
    min-height:220px;

    padding:25px;

    border:1px solid #283347;

    border-radius:17px;

    background:#182235;
}

.capability-symbol{
    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    margin-bottom:22px;

    border-radius:11px;

    background:#263247;

    color:#ff8e56;

    font-size:16px;
}

.mobile-capability-grid h3{
    margin:0 0 9px;

    color:#fff;

    font-size:16px;
}

.mobile-capability-grid p{
    margin:0;

    color:#aeb8c8;

    font-size:11px;

    line-height:1.7;
}


/* PROCESS */

.mobile-process-grid{
    display:grid;

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

    gap:14px;
}

.mobile-process-grid article{
    min-height:230px;

    padding:25px;

    border:1px solid #e4e9ef;

    border-radius:18px;

    background:#fff;
}

.mobile-process-grid article > span{
    display:inline-grid;

    width:40px;
    height:40px;

    place-items:center;

    margin-bottom:25px;

    border-radius:11px;

    background:#fff0e8;

    color:#ff6518;

    font-size:9px;

    font-weight:900;
}

.mobile-process-grid h3{
    margin:0 0 9px;

    color:#111827;

    font-size:17px;
}

.mobile-process-grid p{
    margin:0;

    color:#667085;

    font-size:11px;

    line-height:1.7;
}


/* FINAL CTA */

.mobile-final-cta{
    padding:20px 0 90px;
}

.mobile-final-box{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    padding:50px;

    border-radius:25px;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(255,101,24,.28),
            transparent 28%
        ),
        #111827;
}

.mobile-final-box > div:first-child{
    max-width:720px;
}

.mobile-final-box > div:first-child > span{
    color:#ff8e56;

    font-size:10px;

    font-weight:900;

    letter-spacing:.14em;
}

.mobile-final-box h2{
    margin:10px 0 12px;

    color:#fff;

    font-size:46px;

    line-height:1.05;

    letter-spacing:-2px;
}

.mobile-final-box p{
    margin:0;

    color:#bdc6d4;

    font-size:14px;

    line-height:1.75;
}

.mobile-final-actions{
    display:flex;

    flex-direction:column;

    gap:9px;

    min-width:220px;
}

.mobile-dark-secondary{
    min-height:49px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 18px;

    border:1px solid #3a465b;

    border-radius:11px;

    color:#fff;

    text-decoration:none;

    font-size:11px;

    font-weight:850;
}


/* RESPONSIVE */

@media(max-width:1100px){

    .mobile-hero-grid{
        grid-template-columns:1fr;
    }

    .mobile-device-stage{
        width:min(650px,100%);

        margin:auto;
    }

    .mobile-connected-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:850px){

    .mobile-capability-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .mobile-process-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:650px){

    .mobile-hero{
        padding:
            60px 0 75px;
    }

    .mobile-hero-copy h1{
        font-size:46px;

        letter-spacing:-2.5px;
    }

    .mobile-device-stage{
        min-height:650px;
    }

    .app-phone{
        width:220px;
    }

    .app-phone-primary{
        left:5px;
    }

    .app-phone-secondary{
        right:0;
        top:145px;
    }

    .app-phone-screen{
        min-height:485px;
    }

    .mobile-notification{
        display:none;
    }

    .mobile-api-badge{
        left:20px;
    }

    .mobile-app-type-grid,
    .mobile-capability-grid,
    .mobile-process-grid{
        grid-template-columns:1fr;
    }

    .mobile-connected-visual{
        min-height:470px;
    }

    .connected-mobile{
        left:15px;
    }

    .connected-db{
        right:15px;
    }

    .mobile-connected-copy h2,
    .mobile-dark-heading h2,
    .mobile-final-box h2{
        font-size:36px;
    }

    .mobile-final-box{
        display:block;

        padding:31px 23px;
    }

    .mobile-final-actions{
        margin-top:25px;
    }

}


/* =========================================================
   QAMZU — MOBILE APP V2
   ========================================================= */

.mobile-app-v2{
    background:#fff;
}


/* HERO */

.mv2-hero{
    position:relative;

    overflow:hidden;

    padding:90px 0 110px;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #fbfcfe 100%
        );
}

.mv2-hero-grid{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(560px,1.1fr);

    gap:70px;

    align-items:center;
}

.mv2-hero-orb{
    position:absolute;

    border-radius:50%;

    filter:blur(4px);
}

.mv2-orb-one{
    width:540px;
    height:540px;

    right:-120px;
    top:-80px;

    background:
        radial-gradient(
            circle,
            rgba(255,101,24,.13),
            rgba(255,101,24,0) 68%
        );
}

.mv2-orb-two{
    width:350px;
    height:350px;

    right:340px;
    bottom:-160px;

    background:
        radial-gradient(
            circle,
            rgba(17,24,39,.05),
            transparent 68%
        );
}


.mv2-copy h1{
    max-width:780px;

    margin:22px 0;

    color:#111827;

    font-size:clamp(51px,5.5vw,78px);

    line-height:.97;

    letter-spacing:-4px;
}

.mv2-copy h1 em{
    display:block;

    color:#ff6518;

    font-style:normal;
}

.mv2-copy > p{
    max-width:700px;

    color:#667085;

    font-size:17px;

    line-height:1.75;
}

.mv2-actions{
    display:flex;
    flex-wrap:wrap;

    gap:11px;

    margin-top:31px;
}

.mv2-proof{
    display:flex;
    flex-wrap:wrap;

    gap:18px;

    margin-top:23px;

    color:#667085;

    font-size:10px;

    font-weight:750;
}

.mv2-proof span:before{
    content:"✓";

    margin-right:6px;

    color:#ff6518;

    font-weight:900;
}


.mv2-capability-strip{
    display:grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items:center;

    gap:8px;

    margin-top:30px;

    padding:14px;

    border:1px solid #e7ebf1;

    border-radius:15px;

    background:#fff;

    box-shadow:
        0 10px 35px rgba(15,23,42,.04);
}

.mv2-capability-strip div{
    min-width:0;
}

.mv2-capability-strip small,
.mv2-capability-strip strong{
    display:block;
}

.mv2-capability-strip small{
    color:#98a2b3;

    font-size:6px;

    letter-spacing:.09em;
}

.mv2-capability-strip strong{
    margin-top:3px;

    color:#111827;

    font-size:9px;
}

.mv2-capability-strip i{
    color:#ff6518;

    font-style:normal;

    font-weight:900;
}


/* HERO STAGE */

.mv2-stage{
    position:relative;

    min-height:660px;
}

.mv2-stage-grid{
    position:absolute;

    inset:50px 0 0 30px;

    border-radius:30px;

    opacity:.35;

    background-image:
        linear-gradient(
            rgba(17,24,39,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,24,39,.05) 1px,
            transparent 1px
        );

    background-size:
        35px 35px;
}


.mv2-phone{
    position:absolute;

    padding:8px;

    border-radius:40px;

    background:#101827;

    box-shadow:
        0 35px 90px rgba(15,23,42,.27);
}

.mv2-phone-customer{
    z-index:5;

    width:275px;

    left:60px;
    top:10px;

    transform:
        rotate(-4deg);
}

.mv2-phone-ops{
    z-index:3;

    width:245px;

    right:30px;
    top:105px;

    transform:
        rotate(5deg);
}

.mv2-phone-frame{
    position:relative;

    min-height:560px;

    overflow:hidden;

    border-radius:32px;

    background:#f7f8fb;
}

.mv2-phone-ops .mv2-phone-frame{
    min-height:520px;
}

.mv2-phone-notch{
    position:absolute;

    z-index:5;

    left:50%;
    top:0;

    width:78px;
    height:22px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 14px 14px;

    background:#101827;
}

.mv2-phone-status{
    display:flex;

    justify-content:space-between;

    padding:
        18px 18px 9px;

    color:#111827;

    font-size:7px;
}

.mv2-customer-header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:
        10px 17px 14px;
}

.mv2-customer-header small{
    display:block;

    color:#ff6518;

    font-size:6px;

    font-weight:900;

    letter-spacing:.12em;
}

.mv2-customer-header strong{
    display:block;

    margin-top:3px;

    color:#111827;

    font-size:17px;
}

.mv2-avatar{
    width:36px;
    height:36px;

    display:grid;

    place-items:center;

    border-radius:11px;

    background:#111827;

    color:#fff;

    font-size:10px;

    font-weight:900;
}


.mv2-main-card{
    margin:
        0 15px 16px;

    padding:18px;

    border-radius:19px;

    background:
        linear-gradient(
            135deg,
            #111827,
            #202d42
        );

    color:#fff;
}

.mv2-main-card small{
    color:#ff9b6a;

    font-size:6px;

    font-weight:900;
}

.mv2-main-card strong{
    display:block;

    margin-top:4px;

    font-size:19px;
}

.mv2-main-card > span{
    display:block;

    margin-top:4px;

    color:#aab5c5;

    font-size:7px;
}

.mv2-progress{
    display:grid;

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

    gap:5px;

    margin-top:16px;
}

.mv2-progress i{
    height:4px;

    border-radius:999px;

    background:#3c485b;
}

.mv2-progress .done,
.mv2-progress .active{
    background:#ff6518;
}


.mv2-title-row{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:
        0 17px 9px;
}

.mv2-title-row strong{
    color:#111827;

    font-size:9px;
}

.mv2-title-row span{
    color:#ff6518;

    font-size:6px;

    font-weight:850;
}


.mv2-actions-grid{
    display:grid;

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

    gap:7px;

    padding:
        0 15px 17px;
}

.mv2-actions-grid div{
    padding:
        11px 6px;

    border:1px solid #e8ecf2;

    border-radius:12px;

    background:#fff;

    text-align:center;
}

.mv2-actions-grid b{
    width:30px;
    height:30px;

    display:grid;

    place-items:center;

    margin:auto;

    border-radius:9px;

    background:#fff0e8;

    color:#ff6518;

    font-size:11px;
}

.mv2-actions-grid span{
    display:block;

    margin-top:6px;

    color:#667085;

    font-size:6px;
}


.mv2-feed{
    padding:
        0 15px;
}

.mv2-feed > div{
    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:7px;

    padding:10px;

    border:1px solid #e8ecf2;

    border-radius:11px;

    background:#fff;
}

.mv2-feed-icon{
    width:29px;
    height:29px;

    display:grid;

    place-items:center;

    flex:0 0 29px;

    border-radius:8px;

    background:#fff0e8;

    color:#ff6518;

    font-size:8px;

    font-weight:900;
}

.mv2-feed p{
    margin:0;
}

.mv2-feed strong,
.mv2-feed small{
    display:block;
}

.mv2-feed strong{
    color:#111827;

    font-size:8px;
}

.mv2-feed small{
    margin-top:3px;

    color:#98a2b3;

    font-size:6px;
}


.mv2-tabbar{
    display:grid;

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

    margin:14px;

    padding:10px 5px;

    border:1px solid #e8ecf2;

    border-radius:13px;

    background:#fff;

    text-align:center;
}

.mv2-tabbar span{
    color:#98a2b3;

    font-size:6px;
}

.mv2-tabbar .active{
    color:#ff6518;

    font-weight:900;
}


/* OPS PHONE */

.mv2-ops-head{
    padding:
        13px 16px 11px;
}

.mv2-ops-head small{
    color:#ff6518;

    font-size:6px;

    font-weight:900;

    letter-spacing:.12em;
}

.mv2-ops-head h3{
    margin:
        4px 0 0;

    color:#111827;

    font-size:18px;
}

.mv2-map{
    position:relative;

    height:198px;

    margin:
        0 14px;

    overflow:hidden;

    border-radius:17px;

    background:
        #e8edf2;
}

.mv2-road{
    position:absolute;

    border-radius:999px;

    background:#fff;
}

.road-a{
    width:280px;
    height:19px;

    left:-30px;
    top:65px;

    transform:
        rotate(-16deg);
}

.road-b{
    width:240px;
    height:13px;

    left:30px;
    top:125px;

    transform:
        rotate(34deg);
}

.road-c{
    width:210px;
    height:11px;

    left:-45px;
    top:150px;

    transform:
        rotate(8deg);
}

.mv2-pin,
.mv2-current{
    position:absolute;

    z-index:3;

    display:grid;

    place-items:center;

    border-radius:50%;

    box-shadow:
        0 5px 14px rgba(15,23,42,.18);
}

.mv2-pin{
    width:28px;
    height:28px;

    background:#111827;

    color:#fff;

    font-size:7px;

    font-weight:900;
}

.pin-a{
    left:48px;
    top:50px;
}

.pin-b{
    right:35px;
    bottom:32px;
}

.mv2-current{
    width:21px;
    height:21px;

    left:108px;
    top:112px;

    background:#ff6518;

    color:#fff;

    font-size:7px;
}


.mv2-next-job{
    margin:
        12px 14px;

    padding:14px;

    border:1px solid #e7ebf1;

    border-radius:14px;

    background:#fff;
}

.mv2-next-job-top{
    display:flex;

    justify-content:space-between;

    align-items:center;
}

.mv2-next-job-top strong{
    color:#111827;

    font-size:7px;
}

.mv2-next-job-top span{
    padding:
        4px 6px;

    border-radius:999px;

    background:#eaf8f0;

    color:#168354;

    font-size:5px;

    font-weight:900;
}

.mv2-next-job h4{
    margin:
        8px 0 2px;

    color:#111827;

    font-size:12px;
}

.mv2-next-job p{
    margin:
        0 0 9px;

    color:#98a2b3;

    font-size:6px;
}

.mv2-next-job button{
    width:100%;

    padding:8px;

    border:0;

    border-radius:8px;

    background:#ff6518;

    color:#fff;

    font-size:7px;

    font-weight:900;
}

.mv2-stat-row{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:7px;

    margin:
        0 14px;
}

.mv2-stat-row div{
    padding:10px;

    border:1px solid #e7ebf1;

    border-radius:10px;

    background:#fff;
}

.mv2-stat-row strong,
.mv2-stat-row span{
    display:block;
}

.mv2-stat-row strong{
    color:#111827;

    font-size:13px;
}

.mv2-stat-row span{
    color:#98a2b3;

    font-size:5px;
}


/* FLOATING CARDS */

.mv2-floating-card{
    position:absolute;

    z-index:8;

    border:1px solid #e6eaf0;

    border-radius:15px;

    background:#fff;

    box-shadow:
        0 20px 55px rgba(15,23,42,.16);
}

.mv2-notification{
    right:5px;
    bottom:40px;

    width:225px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px;
}

.mv2-float-icon{
    width:36px;
    height:36px;

    display:grid;

    place-items:center;

    flex:0 0 36px;

    border-radius:10px;

    background:#fff0e8;
}

.mv2-notification small,
.mv2-notification strong,
.mv2-notification span{
    display:block;
}

.mv2-notification small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;
}

.mv2-notification strong{
    margin-top:2px;

    color:#111827;

    font-size:8px;
}

.mv2-notification span{
    margin-top:3px;

    color:#98a2b3;

    font-size:6px;
}

.mv2-backend{
    left:5px;
    bottom:20px;

    padding:
        13px 15px;
}

.mv2-backend > small{
    color:#98a2b3;

    font-size:5px;

    font-weight:900;
}

.mv2-system-flow{
    display:flex;

    align-items:center;

    gap:6px;

    margin-top:7px;
}

.mv2-system-flow span{
    padding:
        6px 8px;

    border-radius:7px;

    background:#111827;

    color:#fff;

    font-size:6px;

    font-weight:900;
}

.mv2-system-flow i{
    color:#ff6518;

    font-style:normal;

    font-weight:900;
}


/* SHARED */

.mv2-section{
    padding:
        100px 0;
}

.mv2-soft{
    background:#f7f9fc;
}

.mv2-heading{
    max-width:820px;

    margin-bottom:42px;
}

.mv2-heading > span,
.mv2-label{
    color:#ff6518;

    font-size:10px;

    font-weight:900;

    letter-spacing:.14em;
}

.mv2-heading h2{
    margin:
        9px 0 14px;

    color:#111827;

    font-size:clamp(39px,4.5vw,57px);

    line-height:1.04;

    letter-spacing:-2.3px;
}

.mv2-heading h2 em{
    color:#ff6518;

    font-style:normal;
}

.mv2-heading p{
    margin:0;

    max-width:730px;

    color:#667085;

    font-size:15px;

    line-height:1.75;
}


/* APP GRID */

.mv2-app-grid{
    display:grid;

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

    gap:17px;
}

.mv2-app-card{
    min-height:430px;

    padding:29px;

    border:1px solid #e4e9ef;

    border-radius:22px;

    background:#fff;

    box-shadow:
        0 12px 35px rgba(15,23,42,.04);
}

.mv2-card-top{
    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:22px;
}

.mv2-card-top small{
    color:#98a2b3;

    font-size:8px;

    font-weight:900;

    letter-spacing:.1em;
}

.mv2-number{
    width:39px;
    height:39px;

    display:grid;

    place-items:center;

    border-radius:11px;

    background:#fff0e8;

    color:#ff6518;

    font-size:8px;

    font-weight:900;
}

.mv2-app-card h3{
    max-width:520px;

    margin:
        0 0 10px;

    color:#111827;

    font-size:23px;

    line-height:1.12;

    letter-spacing:-.7px;
}

.mv2-app-card > p{
    max-width:520px;

    color:#667085;

    font-size:12px;

    line-height:1.7;
}


/* CUSTOMER CARD UI */

.mv2-ui-card{
    margin-top:22px;

    padding:17px;

    border-radius:16px;

    background:#f7f9fc;
}

.mv2-ui-header{
    display:flex;

    justify-content:space-between;
}

.mv2-ui-header strong{
    color:#111827;

    font-size:11px;
}

.mv2-ui-header span{
    color:#ff6518;
}

.mv2-ui-feature{
    margin-top:13px;

    padding:14px;

    border-radius:12px;

    background:#111827;

    color:#fff;
}

.mv2-ui-feature small{
    color:#ff9b6a;

    font-size:6px;

    font-weight:900;
}

.mv2-ui-feature strong{
    display:block;

    margin-top:3px;

    font-size:13px;
}

.mv2-ui-progress{
    height:4px;

    margin-top:11px;

    overflow:hidden;

    border-radius:999px;

    background:#3c485a;
}

.mv2-ui-progress span{
    display:block;

    width:72%;
    height:100%;

    background:#ff6518;
}

.mv2-ui-row{
    display:flex;

    justify-content:space-between;

    padding:
        11px 3px;

    border-bottom:
        1px solid #e4e8ee;

    color:#667085;

    font-size:8px;
}

.mv2-ui-row strong{
    color:#111827;
}


/* EMPLOYEE TASKS */

.mv2-task-ui{
    display:grid;

    gap:8px;

    margin-top:23px;
}

.mv2-task-ui > div{
    display:flex;

    align-items:center;

    gap:11px;

    padding:12px;

    border-radius:11px;

    background:#f7f9fc;
}

.mv2-check,
.mv2-task-num{
    width:30px;
    height:30px;

    display:grid;

    place-items:center;

    flex:0 0 30px;

    border-radius:8px;

    font-size:8px;

    font-weight:900;
}

.mv2-check{
    background:#eaf8f0;

    color:#168354;
}

.mv2-task-num{
    background:#fff0e8;

    color:#ff6518;
}

.mv2-task-ui p{
    margin:0;
}

.mv2-task-ui strong,
.mv2-task-ui small{
    display:block;
}

.mv2-task-ui strong{
    color:#111827;

    font-size:9px;
}

.mv2-task-ui small{
    margin-top:3px;

    color:#98a2b3;

    font-size:7px;
}


/* MINI MAP */

.mv2-mini-map{
    position:relative;

    height:165px;

    margin-top:24px;

    overflow:hidden;

    border-radius:15px;

    background:#e9edf2;
}

.mv2-mini-road{
    position:absolute;

    background:#fff;

    border-radius:999px;
}

.mini-a{
    width:120%;
    height:13px;

    left:-10%;
    top:65px;

    transform:
        rotate(-10deg);
}

.mini-b{
    width:75%;
    height:10px;

    left:28%;
    top:95px;

    transform:
        rotate(28deg);
}

.mv2-mini-pin,
.mv2-mini-current{
    position:absolute;

    z-index:3;

    display:grid;

    place-items:center;

    border-radius:50%;
}

.mv2-mini-pin{
    width:27px;
    height:27px;

    background:#111827;

    color:#fff;

    font-size:7px;
}

.p1{
    left:50px;
    top:48px;
}

.p2{
    right:60px;
    bottom:32px;
}

.mv2-mini-current{
    width:20px;
    height:20px;

    left:50%;
    top:86px;

    background:#ff6518;

    color:#fff;

    font-size:6px;
}

.mv2-map-status{
    position:absolute;

    right:12px;
    top:12px;

    padding:10px;

    border-radius:10px;

    background:#fff;

    box-shadow:
        0 8px 22px rgba(15,23,42,.10);
}

.mv2-map-status small,
.mv2-map-status strong{
    display:block;
}

.mv2-map-status small{
    color:#98a2b3;

    font-size:5px;
}

.mv2-map-status strong{
    margin-top:3px;

    color:#111827;

    font-size:9px;
}


/* MARKETPLACE */

.mv2-market-ui{
    margin-top:23px;

    padding:14px;

    border-radius:15px;

    background:#f7f9fc;
}

.mv2-market-search{
    padding:10px;

    border:1px solid #e3e8ef;

    border-radius:9px;

    background:#fff;

    color:#98a2b3;

    font-size:7px;
}

.mv2-market-row{
    display:grid;

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

    gap:7px;

    margin-top:10px;
}

.mv2-market-row.second{
    grid-template-columns:
        1.2fr .8fr;
}

.mv2-market-row div{
    height:70px;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #fff0e8,
            #e9edf3
        );
}


/* WORKFLOW */

.mv2-workflow{
    display:grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items:stretch;

    gap:11px;
}

.mv2-workflow article{
    min-height:245px;

    padding:24px;

    border:1px solid #e4e9ef;

    border-radius:18px;

    background:#fff;
}

.mv2-step-no{
    color:#ff6518;

    font-size:8px;

    font-weight:900;
}

.mv2-step-icon{
    width:45px;
    height:45px;

    display:grid;

    place-items:center;

    margin:
        20px 0;

    border-radius:12px;

    background:#fff0e8;

    font-size:17px;
}

.mv2-workflow h3{
    margin:
        0 0 8px;

    color:#111827;

    font-size:16px;
}

.mv2-workflow p{
    margin:0;

    color:#667085;

    font-size:10px;

    line-height:1.65;
}

.mv2-arrow{
    align-self:center;

    color:#ff6518;

    font-size:23px;

    font-weight:900;
}


/* ARCHITECTURE */

.mv2-system-section{
    background:#f7f9fc;
}

.mv2-system-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:80px;

    align-items:center;
}

.mv2-architecture{
    position:relative;

    min-height:570px;

    border:1px solid #e3e8ef;

    border-radius:28px;

    background:
        radial-gradient(
            circle at center,
            rgba(255,101,24,.11),
            transparent 42%
        ),
        #fff;
}

.mv2-arch-node{
    position:absolute;

    z-index:3;

    padding:17px;

    border:1px solid #e3e8ef;

    border-radius:15px;

    background:#fff;

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

.mv2-arch-node span,
.mv2-arch-node strong,
.mv2-arch-node small{
    display:block;
}

.mv2-arch-node > span{
    color:#ff6518;

    font-size:6px;

    font-weight:900;

    letter-spacing:.1em;
}

.mv2-arch-node strong{
    margin-top:4px;

    color:#111827;

    font-size:12px;
}

.mv2-arch-node small{
    margin-top:3px;

    color:#98a2b3;

    font-size:6px;
}

.mv2-arch-mobile{
    width:155px;

    left:32px;
    top:55px;
}

.mv2-arch-db{
    width:155px;

    right:32px;
    top:55px;
}

.mv2-arch-api{
    width:175px;

    left:50%;
    top:205px;

    transform:
        translateX(-50%);

    text-align:center;

    background:#111827;
}

.mv2-api-logo{
    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    margin:
        0 auto 8px;

    border-radius:11px;

    background:#ff6518;

    color:#fff;

    font-weight:900;
}

.mv2-arch-api strong{
    color:#fff;
}

.mv2-arch-api small{
    color:#aab5c5;
}

.mv2-arch-admin{
    width:165px;

    left:55px;
    bottom:50px;
}

.mv2-arch-services{
    width:175px;

    right:45px;
    bottom:50px;
}

.mv2-arch-line{
    position:absolute;

    height:2px;

    background:#d7dde5;
}

.mv2-line-1{
    width:160px;

    left:160px;
    top:153px;

    transform:
        rotate(26deg);
}

.mv2-line-2{
    width:160px;

    right:160px;
    top:153px;

    transform:
        rotate(-26deg);
}

.mv2-line-3{
    width:170px;

    left:140px;
    bottom:165px;

    transform:
        rotate(-32deg);
}

.mv2-line-4{
    width:170px;

    right:145px;
    bottom:165px;

    transform:
        rotate(32deg);
}


.mv2-system-copy h2{
    margin:
        10px 0 17px;

    color:#111827;

    font-size:47px;

    line-height:1.05;

    letter-spacing:-2px;
}

.mv2-system-copy > p{
    color:#667085;

    font-size:15px;

    line-height:1.8;
}

.mv2-system-list{
    display:grid;

    gap:10px;

    margin-top:24px;
}

.mv2-system-list > div{
    display:flex;

    gap:12px;

    padding:14px;

    border:1px solid #e4e9ef;

    border-radius:12px;

    background:#fff;
}

.mv2-system-list > div > span{
    width:31px;
    height:31px;

    display:grid;

    place-items:center;

    flex:0 0 31px;

    border-radius:8px;

    background:#fff0e8;

    color:#ff6518;

    font-size:7px;

    font-weight:900;
}

.mv2-system-list p{
    margin:0;
}

.mv2-system-list strong,
.mv2-system-list small{
    display:block;
}

.mv2-system-list strong{
    color:#111827;

    font-size:10px;
}

.mv2-system-list small{
    margin-top:3px;

    color:#7d8999;

    font-size:8px;

    line-height:1.5;
}


/* FEATURE STACK */

.mv2-feature-stack{
    display:grid;

    gap:22px;
}

.mv2-feature{
    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:60px;

    align-items:center;

    min-height:420px;

    padding:45px;

    border:1px solid #e4e9ef;

    border-radius:24px;

    background:#fff;
}

.mv2-feature.reverse
.mv2-feature-copy{
    order:2;
}

.mv2-feature-copy > span{
    color:#ff6518;

    font-size:8px;

    font-weight:900;

    letter-spacing:.12em;
}

.mv2-feature-copy h3{
    max-width:580px;

    margin:
        9px 0 14px;

    color:#111827;

    font-size:37px;

    line-height:1.08;

    letter-spacing:-1.5px;
}

.mv2-feature-copy p{
    max-width:600px;

    color:#667085;

    font-size:13px;

    line-height:1.8;
}

.mv2-feature-demo{
    min-height:300px;

    display:grid;

    place-items:center;

    border-radius:20px;

    background:#f7f9fc;
}


/* NOTIFICATION DEMO */

.mv2-notification-demo{
    align-content:center;

    gap:11px;

    padding:25px;
}

.mv2-notif-card{
    width:min(420px,100%);

    display:grid;

    grid-template-columns:
        auto 1fr auto;

    gap:12px;

    align-items:center;

    padding:16px;

    border:1px solid #e4e9ef;

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 12px 30px rgba(15,23,42,.07);
}

.mv2-notif-card.faded{
    opacity:.65;

    transform:
        scale(.94);
}

.mv2-notif-logo{
    width:38px;
    height:38px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:#ff6518;

    color:#fff;

    font-weight:900;
}

.mv2-notif-card small,
.mv2-notif-card strong,
.mv2-notif-card p{
    display:block;
}

.mv2-notif-card small{
    color:#98a2b3;

    font-size:6px;
}

.mv2-notif-card strong{
    margin-top:2px;

    color:#111827;

    font-size:9px;
}

.mv2-notif-card p{
    margin:
        3px 0 0;

    color:#667085;

    font-size:7px;
}

.mv2-notif-card em{
    color:#98a2b3;

    font-size:6px;

    font-style:normal;
}


/* MAP DEMO */

.mv2-map-demo{
    padding:25px;
}

.mv2-demo-map{
    position:relative;

    width:100%;
    height:280px;

    overflow:hidden;

    border-radius:17px;

    background:#e9edf2;
}

.mv2-demo-road{
    position:absolute;

    border-radius:999px;

    background:#fff;
}

.r1{
    width:120%;
    height:18px;

    left:-10%;
    top:90px;

    transform:
        rotate(-12deg);
}

.r2{
    width:80%;
    height:13px;

    right:-10%;
    top:150px;

    transform:
        rotate(32deg);
}

.r3{
    width:70%;
    height:11px;

    left:-5%;
    bottom:55px;

    transform:
        rotate(10deg);
}

.mv2-demo-pin,
.mv2-demo-current{
    position:absolute;

    z-index:3;

    display:grid;

    place-items:center;

    border-radius:50%;
}

.mv2-demo-pin{
    width:31px;
    height:31px;

    background:#111827;

    color:#fff;

    font-size:8px;

    font-weight:900;
}

.dp1{
    left:60px;
    top:68px;
}

.dp2{
    right:70px;
    top:145px;
}

.mv2-demo-current{
    width:23px;
    height:23px;

    left:50%;
    top:124px;

    background:#ff6518;

    color:#fff;

    font-size:7px;
}

.mv2-map-bottom{
    position:absolute;

    left:15px;
    right:15px;
    bottom:15px;

    display:grid;

    grid-template-columns:
        1fr auto;

    align-items:center;

    padding:13px;

    border-radius:12px;

    background:#fff;

    box-shadow:
        0 12px 30px rgba(15,23,42,.10);
}

.mv2-map-bottom small,
.mv2-map-bottom strong{
    display:block;
}

.mv2-map-bottom small{
    color:#98a2b3;

    font-size:6px;
}

.mv2-map-bottom strong{
    margin-top:3px;

    color:#111827;

    font-size:10px;
}

.mv2-map-bottom button{
    grid-row:
        1 / span 2;

    grid-column:2;

    padding:
        8px 11px;

    border:0;

    border-radius:8px;

    background:#ff6518;

    color:#fff;

    font-size:7px;

    font-weight:900;
}


/* PAYMENT DEMO */

.mv2-payment-demo{
    padding:25px;
}

.mv2-payment-card{
    width:min(370px,100%);

    padding:24px;

    border:1px solid #e4e9ef;

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 18px 40px rgba(15,23,42,.08);
}

.mv2-payment-card > small{
    color:#98a2b3;

    font-size:6px;

    font-weight:900;
}

.mv2-payment-card > strong{
    display:block;

    margin-top:5px;

    color:#111827;

    font-size:28px;
}

.mv2-payment-line{
    display:flex;

    justify-content:space-between;

    margin-top:22px;

    padding-bottom:13px;

    border-bottom:
        1px solid #e8ecf2;

    color:#667085;

    font-size:8px;
}

.mv2-payment-line b{
    color:#111827;
}

.mv2-payment-method{
    display:flex;

    justify-content:space-between;

    margin-top:13px;

    padding:13px;

    border-radius:10px;

    background:#f7f9fc;

    color:#667085;

    font-size:8px;
}

.mv2-payment-method strong{
    color:#111827;
}

.mv2-payment-card button{
    width:100%;

    margin-top:15px;

    padding:11px;

    border:0;

    border-radius:9px;

    background:#111827;

    color:#fff;

    font-size:8px;

    font-weight:900;
}


/* DARK PROCESS */

.mv2-dark{
    background:#111827;
}

.mv2-dark-heading{
    max-width:820px;

    margin-bottom:42px;
}

.mv2-dark-heading span{
    color:#ff8e56;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;
}

.mv2-dark-heading h2{
    margin:
        9px 0 0;

    color:#fff;

    font-size:48px;

    line-height:1.05;

    letter-spacing:-2px;
}

.mv2-process{
    display:grid;

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

    gap:13px;
}

.mv2-process article{
    min-height:200px;

    padding:25px;

    border:1px solid #29364a;

    border-radius:17px;

    background:#182235;
}

.mv2-process article > span{
    color:#ff8e56;

    font-size:8px;

    font-weight:900;
}

.mv2-process h3{
    margin:
        24px 0 8px;

    color:#fff;

    font-size:17px;
}

.mv2-process p{
    margin:0;

    color:#aeb8c8;

    font-size:10px;

    line-height:1.7;
}


/* FINAL CTA */

.mv2-final{
    padding:
        90px 0;
}

.mv2-final-box{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:55px;

    padding:55px;

    border-radius:27px;

    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(255,101,24,.30),
            transparent 31%
        ),
        #111827;
}

.mv2-final-box > div:first-child{
    max-width:760px;
}

.mv2-final-box > div:first-child > span{
    color:#ff8e56;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;
}

.mv2-final-box h2{
    margin:
        10px 0 13px;

    color:#fff;

    font-size:48px;

    line-height:1.04;

    letter-spacing:-2px;
}

.mv2-final-box p{
    margin:0;

    color:#bdc6d4;

    font-size:14px;

    line-height:1.75;
}

.mv2-final-actions{
    display:grid;

    gap:9px;

    min-width:225px;
}

.mv2-outline-button{
    min-height:49px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        0 17px;

    border:1px solid #3d495c;

    border-radius:11px;

    color:#fff;

    text-decoration:none;

    font-size:10px;

    font-weight:850;
}


/* RESPONSIVE */

@media(max-width:1120px){

    .mv2-hero-grid{
        grid-template-columns:1fr;
    }

    .mv2-stage{
        width:min(680px,100%);

        margin:auto;
    }

    .mv2-system-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:900px){

    .mv2-workflow{
        grid-template-columns:
            1fr 1fr;
    }

    .mv2-arrow{
        display:none;
    }

    .mv2-feature{
        grid-template-columns:1fr;
    }

    .mv2-feature.reverse
    .mv2-feature-copy{
        order:initial;
    }

}


@media(max-width:760px){

    .mv2-app-grid{
        grid-template-columns:1fr;
    }

    .mv2-process{
        grid-template-columns:
            1fr 1fr;
    }

}


@media(max-width:650px){

    .mv2-hero{
        padding:
            60px 0 80px;
    }

    .mv2-copy h1{
        font-size:45px;

        letter-spacing:-2.4px;
    }

    .mv2-capability-strip{
        grid-template-columns:1fr;
    }

    .mv2-capability-strip i{
        transform:
            rotate(90deg);

        text-align:center;
    }

    .mv2-stage{
        min-height:670px;
    }

    .mv2-phone-customer{
        width:220px;

        left:0;
    }

    .mv2-phone-ops{
        width:200px;

        right:0;
        top:185px;
    }

    .mv2-phone-frame{
        min-height:480px;
    }

    .mv2-phone-ops
    .mv2-phone-frame{
        min-height:445px;
    }

    .mv2-notification{
        display:none;
    }

    .mv2-backend{
        bottom:5px;
        left:15px;
    }

    .mv2-workflow{
        grid-template-columns:1fr;
    }

    .mv2-architecture{
        min-height:620px;
    }

    .mv2-arch-mobile{
        left:15px;
    }

    .mv2-arch-db{
        right:15px;
    }

    .mv2-arch-admin{
        left:20px;
    }

    .mv2-arch-services{
        right:15px;
    }

    .mv2-system-copy h2,
    .mv2-dark-heading h2,
    .mv2-final-box h2{
        font-size:35px;
    }

    .mv2-feature{
        padding:27px 20px;
    }

    .mv2-feature-copy h3{
        font-size:31px;
    }

    .mv2-process{
        grid-template-columns:1fr;
    }

    .mv2-final-box{
        display:block;

        padding:
            33px 23px;
    }

    .mv2-final-actions{
        margin-top:25px;
    }

}


/* =========================================================
   QAMZU — MOBILE APP HYBRID IMAGE SHOWCASE
   ========================================================= */

.mv2-real-world{
    background:#fff;
}

.mv2-image-showcase{
    display:grid;

    grid-template-columns:
        1.2fr .8fr;

    grid-auto-rows:minmax(320px,auto);

    gap:18px;
}

.mv2-image-card{
    position:relative;

    min-height:360px;

    overflow:hidden;

    border-radius:24px;

    background:#111827;

    box-shadow:
        0 22px 55px rgba(15,23,42,.11);
}

.mv2-image-large{
    min-height:500px;

    grid-row:span 2;
}

.mv2-image-wide{
    min-height:390px;

    grid-column:1 / -1;
}

.mv2-image-card > img{
    width:100%;
    height:100%;

    position:absolute;
    inset:0;

    display:block;

    object-fit:cover;

    transition:
        transform .6s ease;
}

.mv2-image-card:hover > img{
    transform:scale(1.04);
}

.mv2-image-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.06) 10%,
            rgba(17,24,39,.35) 55%,
            rgba(17,24,39,.85) 100%
        );
}

.mv2-image-copy{
    position:absolute;

    z-index:3;

    left:28px;
    right:28px;
    bottom:27px;

    max-width:620px;
}

.mv2-image-copy > span{
    color:#ff9a67;

    font-size:9px;

    font-weight:900;

    letter-spacing:.13em;
}

.mv2-image-copy h3{
    margin:8px 0 8px;

    color:#fff;

    font-size:28px;

    line-height:1.08;

    letter-spacing:-1px;
}

.mv2-image-large
.mv2-image-copy h3,
.mv2-image-wide
.mv2-image-copy h3{
    font-size:35px;
}

.mv2-image-copy p{
    max-width:570px;

    margin:0;

    color:#d6dde7;

    font-size:11px;

    line-height:1.65;
}


/* CUSTOMER PHONE OVERLAY */

.mv2-image-phone-card{
    position:absolute;

    z-index:5;

    top:30px;
    right:30px;

    width:205px;

    padding:15px;

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

    border-radius:21px;

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

    box-shadow:
        0 20px 50px rgba(15,23,42,.22);

    backdrop-filter:
        blur(10px);
}

.mv2-mini-phone-head{
    display:flex;

    flex-direction:column;

    padding-bottom:11px;

    border-bottom:
        1px solid #e9edf2;
}

.mv2-mini-phone-head span{
    color:#98a2b3;

    font-size:6px;
}

.mv2-mini-phone-head strong{
    margin-top:4px;

    color:#111827;

    font-size:11px;
}

.mv2-mini-phone-block{
    margin-top:12px;

    padding:12px;

    border-radius:11px;

    background:#111827;
}

.mv2-mini-phone-block small,
.mv2-mini-phone-block strong,
.mv2-mini-phone-block span{
    display:block;
}

.mv2-mini-phone-block small{
    color:#ff9b6a;

    font-size:5px;

    font-weight:900;
}

.mv2-mini-phone-block strong{
    margin-top:4px;

    color:#fff;

    font-size:10px;
}

.mv2-mini-phone-block span{
    margin-top:4px;

    color:#93d6b1;

    font-size:6px;
}

.mv2-mini-phone-row{
    display:flex;

    justify-content:space-between;

    padding:
        10px 2px;

    border-bottom:
        1px solid #edf0f4;

    color:#667085;

    font-size:7px;
}

.mv2-mini-phone-row strong{
    color:#111827;
}


/* DRIVER STATUS */

.mv2-image-status-card{
    position:absolute;

    z-index:5;

    top:24px;
    right:24px;

    width:190px;

    padding:15px;

    border-radius:15px;

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

    box-shadow:
        0 18px 40px rgba(15,23,42,.19);
}

.mv2-image-status-card small,
.mv2-image-status-card strong{
    display:block;
}

.mv2-image-status-card small{
    color:#ff6518;

    font-size:6px;

    font-weight:900;
}

.mv2-image-status-card strong{
    margin-top:4px;

    color:#111827;

    font-size:10px;
}

.mv2-route-line{
    position:relative;

    height:8px;

    margin-top:13px;

    border-radius:999px;

    background:#e7ebf0;
}

.mv2-route-line:before{
    content:"";

    position:absolute;

    inset:0 auto 0 0;

    width:63%;

    border-radius:999px;

    background:#ff6518;
}

.mv2-route-line i{
    position:absolute;

    z-index:2;

    top:50%;

    width:12px;
    height:12px;

    transform:
        translateY(-50%);

    border:2px solid #fff;

    border-radius:50%;

    background:#111827;
}

.mv2-route-line i:nth-child(1){
    left:0;
}

.mv2-route-line i:nth-child(2){
    left:48%;
}

.mv2-route-line i:nth-child(3){
    right:0;

    background:#ff6518;
}


/* MARKETPLACE FLOAT */

.mv2-market-float{
    position:absolute;

    z-index:5;

    top:24px;
    right:24px;

    width:205px;

    padding:13px;

    border-radius:15px;

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

    box-shadow:
        0 18px 40px rgba(15,23,42,.20);
}

.mv2-market-float-search{
    padding:9px;

    border:1px solid #e7ebf0;

    border-radius:8px;

    color:#98a2b3;

    font-size:6px;
}

.mv2-market-float-row{
    display:grid;

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

    gap:6px;

    margin-top:9px;
}

.mv2-market-float-row span{
    height:45px;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            #fff0e8,
            #e9edf2
        );
}


/* EMPLOYEE FLOAT */

.mv2-employee-float{
    position:absolute;

    z-index:5;

    top:28px;
    right:30px;

    width:225px;

    padding:13px;

    border-radius:15px;

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

    box-shadow:
        0 18px 45px rgba(15,23,42,.20);
}

.mv2-employee-float > div{
    display:flex;

    align-items:center;

    gap:10px;

    padding:9px;

    border-radius:10px;
}

.mv2-employee-float > div + div{
    margin-top:6px;

    background:#f7f9fc;
}

.mv2-employee-float b{
    width:29px;
    height:29px;

    display:grid;

    place-items:center;

    flex:0 0 29px;

    border-radius:8px;

    background:#eaf8f0;

    color:#168354;

    font-size:8px;
}

.mv2-employee-float > div + div b{
    background:#fff0e8;

    color:#ff6518;
}

.mv2-employee-float p{
    margin:0;
}

.mv2-employee-float strong,
.mv2-employee-float small{
    display:block;
}

.mv2-employee-float strong{
    color:#111827;

    font-size:9px;
}

.mv2-employee-float small{
    margin-top:2px;

    color:#98a2b3;

    font-size:6px;
}


/* RESPONSIVE */

@media(max-width:900px){

    .mv2-image-showcase{
        grid-template-columns:1fr;
    }

    .mv2-image-large,
    .mv2-image-wide{
        grid-row:auto;
        grid-column:auto;
    }

    .mv2-image-card,
    .mv2-image-large,
    .mv2-image-wide{
        min-height:430px;
    }

}


@media(max-width:620px){

    .mv2-image-card,
    .mv2-image-large,
    .mv2-image-wide{
        min-height:460px;
    }

    .mv2-image-copy{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .mv2-image-copy h3,
    .mv2-image-large
    .mv2-image-copy h3,
    .mv2-image-wide
    .mv2-image-copy h3{
        font-size:27px;
    }

    .mv2-image-phone-card,
    .mv2-image-status-card,
    .mv2-market-float,
    .mv2-employee-float{
        top:18px;
        right:18px;

        width:185px;
    }

}


/* =========================================================
   QAMZU — MOBILE APP REAL IMAGE VISUAL FIX
   ========================================================= */


/* ---------------------------------------------------------
   DRIVER / FIELD APP CARD
   --------------------------------------------------------- */

.mv2-mini-map{
    position:relative;
    isolation:isolate;

    background:
        url("/assets/images/auto.webp")
        center center / cover no-repeat;
}

.mv2-mini-map:before{
    content:"";

    position:absolute;
    z-index:-1;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.12),
            rgba(17,24,39,.50)
        );
}

.mv2-mini-map:after{
    content:"";

    position:absolute;
    z-index:0;
    inset:0;

    background:
        radial-gradient(
            circle at 60% 40%,
            transparent,
            rgba(17,24,39,.15)
        );

    pointer-events:none;
}

.mv2-mini-road,
.mv2-mini-pin,
.mv2-mini-current,
.mv2-map-status{
    z-index:3;
}

.mv2-mini-road{
    background:
        rgba(255,255,255,.78);
}

.mv2-map-status{
    background:
        rgba(255,255,255,.96);

    backdrop-filter:
        blur(10px);
}



/* ---------------------------------------------------------
   MARKETPLACE APP CARD
   --------------------------------------------------------- */

.mv2-market-ui{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(247,249,252,.96)
        );
}

.mv2-market-search{
    position:relative;

    z-index:2;
}

.mv2-market-row{
    position:relative;

    z-index:2;
}

.mv2-market-row div{
    position:relative;

    overflow:hidden;

    min-height:82px;

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

    box-shadow:
        inset 0 0 0 1px rgba(17,24,39,.03);
}


/* Business image 1 */

.mv2-market-row:first-of-type div:nth-child(1){
    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(17,24,39,.52)
        ),
        url("/assets/images/restaurant.webp")
        center / cover no-repeat;
}


/* Business image 2 */

.mv2-market-row:first-of-type div:nth-child(2){
    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(17,24,39,.48)
        ),
        url("/assets/images/salon.webp")
        center / cover no-repeat;
}


/* Business image 3 */

.mv2-market-row:first-of-type div:nth-child(3){
    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(17,24,39,.48)
        ),
        url("/assets/images/auto.webp")
        center / cover no-repeat;
}


/* Lower marketplace cards */

.mv2-market-row.second div:nth-child(1){
    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(17,24,39,.55)
        ),
        url("/assets/images/contractor.webp")
        center / cover no-repeat;
}

.mv2-market-row.second div:nth-child(2){
    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(17,24,39,.52)
        ),
        url("/assets/images/real-estate.webp")
        center / cover no-repeat;
}


/* Add labels inside marketplace image cards */

.mv2-market-row:first-of-type div:nth-child(1):after{
    content:"Food & Dining";
}

.mv2-market-row:first-of-type div:nth-child(2):after{
    content:"Beauty";
}

.mv2-market-row:first-of-type div:nth-child(3):after{
    content:"Auto Service";
}

.mv2-market-row.second div:nth-child(1):after{
    content:"Contractors";
}

.mv2-market-row.second div:nth-child(2):after{
    content:"Real Estate";
}

.mv2-market-row div:after{
    position:absolute;

    left:10px;
    bottom:9px;

    color:#fff;

    font-size:7px;

    font-weight:850;

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);
}



/* ---------------------------------------------------------
   LOCATION & MAPS FEATURE
   --------------------------------------------------------- */

.mv2-demo-map{
    position:relative;
    isolation:isolate;

    background:
        url("/assets/images/auto.webp")
        center center / cover no-repeat;
}

.mv2-demo-map:before{
    content:"";

    position:absolute;
    z-index:-1;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.12),
            rgba(17,24,39,.46)
        );
}

.mv2-demo-road{
    z-index:2;

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

    box-shadow:
        0 2px 8px rgba(15,23,42,.12);
}

.mv2-demo-pin,
.mv2-demo-current,
.mv2-map-bottom{
    z-index:4;
}

.mv2-map-bottom{
    background:
        rgba(255,255,255,.97);

    backdrop-filter:
        blur(12px);
}



/* ---------------------------------------------------------
   DRIVER HERO MAP PHONE
   --------------------------------------------------------- */

.mv2-map{
    position:relative;
    isolation:isolate;

    background:
        url("/assets/images/auto.webp")
        center center / cover no-repeat;
}

.mv2-map:before{
    content:"";

    position:absolute;
    z-index:-1;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.08),
            rgba(17,24,39,.38)
        );
}

.mv2-road{
    z-index:2;

    background:
        rgba(255,255,255,.80);
}

.mv2-pin,
.mv2-current{
    z-index:4;
}



/* ---------------------------------------------------------
   MARKETPLACE HERO / CARD IMAGE DEPTH
   --------------------------------------------------------- */

.mv2-market-ui:before{
    content:"";

    position:absolute;

    right:-55px;
    bottom:-55px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,101,24,.10),
            transparent 68%
        );
}



/* ---------------------------------------------------------
   HOVER EFFECTS
   --------------------------------------------------------- */

.mv2-market-row div{
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.mv2-market-row div:hover{
    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px rgba(15,23,42,.14);
}



/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

    .mv2-market-row div{
        min-height:72px;
    }

}


/* =========================================================
   QAMZU — DRIVER / FIELD MAP POLISH
   ========================================================= */

.mv2-mini-map{
    min-height:205px;

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

    box-shadow:
        inset 0 0 0 1px rgba(17,24,39,.06);
}


/* stronger readable image treatment */

.mv2-mini-map:before{
    background:
        linear-gradient(
            90deg,
            rgba(15,23,42,.34) 0%,
            rgba(15,23,42,.12) 48%,
            rgba(15,23,42,.30) 100%
        );
}


/* thinner map roads */

.mv2-mini-road{
    height:7px !important;

    border-radius:999px;

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

    box-shadow:
        0 0 0 1px rgba(255,255,255,.12),
        0 2px 7px rgba(15,23,42,.15);
}


/* first route */

.mv2-mini-map .mini-a{
    width:118%;

    left:-8%;

    top:88px;

    transform:
        rotate(-8deg);
}


/* second route */

.mv2-mini-map .mini-b{
    width:77%;

    left:30%;

    top:113px;

    transform:
        rotate(24deg);
}


/* add a third subtle street */

.mv2-mini-map:after{
    content:"";

    position:absolute;

    z-index:2;

    width:68%;
    height:5px;

    left:-4%;
    bottom:42px;

    border-radius:999px;

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

    transform:
        rotate(7deg);

    box-shadow:
        0 1px 4px rgba(15,23,42,.10);
}


/* pins */

.mv2-mini-pin{
    width:31px;
    height:31px;

    border:
        3px solid rgba(255,255,255,.88);

    background:#111827;

    color:#fff;

    box-shadow:
        0 7px 18px rgba(0,0,0,.28);
}

.mv2-mini-map .p1{
    left:66px;
    top:62px;
}

.mv2-mini-map .p2{
    right:68px;
    bottom:43px;
}


/* current vehicle / position */

.mv2-mini-current{
    width:27px;
    height:27px;

    left:52%;
    top:104px;

    border:
        4px solid rgba(255,255,255,.95);

    background:#ff6518;

    box-shadow:
        0 6px 18px rgba(255,101,24,.32);
}


/* next stop card */

.mv2-map-status{
    top:15px;
    right:15px;

    min-width:112px;

    padding:12px 13px;

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

    border-radius:13px;

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

    box-shadow:
        0 14px 34px rgba(15,23,42,.18);

    backdrop-filter:
        blur(12px);
}

.mv2-map-status:before{
    content:"NEXT STOP";

    display:block;

    margin-bottom:4px;

    color:#98a2b3;

    font-size:5px;

    font-weight:900;

    letter-spacing:.11em;
}

.mv2-map-status small{
    display:none;
}

.mv2-map-status strong{
    font-size:10px;
}


/* make map feel more like UI */

.mv2-mini-map{
    overflow:hidden;
}

.mv2-mini-map .mv2-map-status{
    z-index:6;
}

.mv2-mini-map .mv2-mini-pin,
.mv2-mini-map .mv2-mini-current{
    z-index:5;
}


@media(max-width:650px){

    .mv2-mini-map{
        min-height:185px;
    }

    .mv2-map-status{
        min-width:98px;

        padding:10px;
    }

}


/* =========================================================
   QAMZU — DATABASE WEB APPLICATION PAGE
   ========================================================= */

.db-app-page{
    background:#fff;
}


/* HERO */

.db-hero{
    position:relative;

    overflow:hidden;

    padding:90px 0 105px;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #fafbfe 100%
        );
}

.db-hero-glow{
    position:absolute;

    width:600px;
    height:600px;

    right:-160px;
    top:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,101,24,.12),
            transparent 68%
        );
}

.db-hero-grid{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,.78fr)
        minmax(650px,1.22fr);

    gap:55px;

    align-items:center;
}

.db-hero-copy h1{
    margin:21px 0;

    color:#111827;

    font-size:clamp(50px,5.2vw,74px);

    line-height:.98;

    letter-spacing:-3.8px;
}

.db-hero-copy h1 em{
    display:block;

    color:#ff6518;

    font-style:normal;
}

.db-hero-copy > p{
    max-width:670px;

    margin:0;

    color:#667085;

    font-size:17px;

    line-height:1.75;
}

.db-hero-actions{
    display:flex;

    flex-wrap:wrap;

    gap:11px;

    margin-top:30px;
}

.db-proof-row{
    display:flex;

    flex-wrap:wrap;

    gap:17px;

    margin-top:24px;

    color:#667085;

    font-size:10px;

    font-weight:800;
}

.db-proof-row span:before{
    content:"✓";

    margin-right:6px;

    color:#ff6518;
}


/* HERO BROWSER */

.db-browser{
    position:relative;

    min-height:585px;

    overflow:visible;

    border:1px solid #dfe5ed;

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 35px 90px rgba(15,23,42,.15);
}

.db-browser-top{
    height:50px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:0 17px;

    border-bottom:1px solid #e8ecf1;

    background:#f8fafc;

    border-radius:24px 24px 0 0;
}

.db-window-dots{
    display:flex;

    gap:6px;
}

.db-window-dots i{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#cfd6df;
}

.db-browser-address{
    flex:1;

    max-width:360px;

    padding:8px 12px;

    border:1px solid #e6eaf0;

    border-radius:9px;

    background:#fff;

    color:#98a2b3;

    font-size:8px;
}


/* APPLICATION */

.db-app-shell{
    display:grid;

    grid-template-columns:
        150px 1fr;

    min-height:535px;
}

.db-sidebar{
    position:relative;

    padding:18px 12px;

    background:#111827;

    border-radius:0 0 0 24px;
}

.db-logo{
    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

    font-size:16px;

    font-weight:900;
}

.db-logo:before{
    content:"";

    width:30px;
    height:30px;

    border-radius:9px;

    background:#ff6518;
}

.db-logo span{
    color:#c0c8d4;

    font-size:7px;

    font-weight:700;
}

.db-side-nav{
    display:grid;

    gap:6px;

    margin-top:25px;
}

.db-side-nav span{
    padding:9px 10px;

    border-radius:8px;

    color:#9da8b7;

    font-size:7px;
}

.db-side-nav .active{
    background:#ff6518;

    color:#fff;

    font-weight:900;
}

.db-user{
    position:absolute;

    left:12px;
    right:12px;
    bottom:15px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:9px;

    border:1px solid #2a3547;

    border-radius:10px;
}

.db-user b{
    width:27px;
    height:27px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#263247;

    color:#fff;

    font-size:7px;
}

.db-user strong,
.db-user small{
    display:block;
}

.db-user strong{
    color:#fff;

    font-size:7px;
}

.db-user small{
    margin-top:2px;

    color:#778398;

    font-size:5px;
}


/* MAIN APP */

.db-main{
    padding:20px;

    background:#f8fafc;

    border-radius:0 0 24px 0;
}

.db-main-header{
    display:flex;

    justify-content:space-between;

    align-items:center;
}

.db-main-header small{
    color:#ff6518;

    font-size:6px;

    font-weight:900;

    letter-spacing:.1em;
}

.db-main-header h3{
    margin:4px 0 0;

    color:#111827;

    font-size:16px;
}

.db-main-header button{
    padding:9px 11px;

    border:0;

    border-radius:8px;

    background:#ff6518;

    color:#fff;

    font-size:7px;

    font-weight:900;
}

.db-stat-grid{
    display:grid;

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

    gap:8px;

    margin-top:16px;
}

.db-stat-grid > div{
    padding:13px;

    border:1px solid #e6eaf0;

    border-radius:11px;

    background:#fff;
}

.db-stat-grid span,
.db-stat-grid strong,
.db-stat-grid small{
    display:block;
}

.db-stat-grid span{
    color:#98a2b3;

    font-size:6px;
}

.db-stat-grid strong{
    margin-top:5px;

    color:#111827;

    font-size:15px;
}

.db-stat-grid small{
    margin-top:3px;

    color:#6f7b8c;

    font-size:5px;
}

.db-content-grid{
    display:grid;

    grid-template-columns:
        1.35fr .65fr;

    gap:9px;

    margin-top:10px;
}

.db-record-panel,
.db-report-panel{
    padding:13px;

    border:1px solid #e6eaf0;

    border-radius:12px;

    background:#fff;
}

.db-panel-head{
    display:flex;

    align-items:center;

    justify-content:space-between;
}

.db-panel-head strong,
.db-panel-head small{
    display:block;
}

.db-panel-head strong{
    color:#111827;

    font-size:8px;
}

.db-panel-head small{
    margin-top:2px;

    color:#98a2b3;

    font-size:5px;
}

.db-panel-head > span{
    color:#ff6518;

    font-size:6px;

    font-weight:800;
}


/* TABLE */

.db-table{
    margin-top:13px;
}

.db-table-head,
.db-table-row{
    display:grid;

    grid-template-columns:
        1.35fr .7fr .8fr .6fr;

    gap:6px;

    align-items:center;
}

.db-table-head{
    padding:8px;

    border-radius:8px;

    background:#f7f9fc;

    color:#98a2b3;

    font-size:5px;
}

.db-table-row{
    padding:10px 8px;

    border-bottom:1px solid #edf0f4;

    color:#475467;

    font-size:6px;
}

.db-table-row > span:first-child{
    color:#111827;

    font-weight:800;
}

.db-table-row b{
    padding:3px 5px;

    border-radius:999px;

    background:#edf1f5;

    color:#667085;

    font-size:5px;
}

.db-table-row .green{
    background:#e9f8ef;

    color:#168354;
}

.db-table-row .orange{
    background:#fff0e8;

    color:#d9510e;
}


/* REPORT CHART */

.db-chart{
    height:145px;

    display:flex;

    align-items:flex-end;

    gap:5px;

    margin-top:15px;

    padding:10px;

    border-radius:10px;

    background:#f7f9fc;
}

.db-chart i{
    flex:1;

    border-radius:4px 4px 1px 1px;

    background:
        linear-gradient(
            180deg,
            #ff8d54,
            #ff6518
        );
}

.db-chart-meta{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:10px;

    color:#98a2b3;

    font-size:6px;
}

.db-chart-meta strong{
    color:#111827;

    font-size:13px;
}


/* FLOATING HERO ELEMENTS */

.db-floating-search{
    position:absolute;

    left:190px;
    right:120px;
    bottom:-25px;

    display:grid;

    grid-template-columns:
        1fr auto;

    padding:13px 15px;

    border:1px solid #e3e8ef;

    border-radius:13px;

    background:#fff;

    box-shadow:
        0 16px 40px rgba(15,23,42,.14);
}

.db-floating-search small,
.db-floating-search strong{
    display:block;
}

.db-floating-search small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;
}

.db-floating-search strong{
    margin-top:3px;

    color:#111827;

    font-size:7px;
}

.db-floating-search kbd{
    grid-row:
        1 / span 2;

    grid-column:2;

    align-self:center;

    padding:5px 7px;

    border:1px solid #e4e8ee;

    border-radius:6px;

    background:#f7f9fc;

    color:#667085;

    font-size:6px;
}

.db-floating-status{
    position:absolute;

    top:80px;
    right:-25px;

    display:flex;

    align-items:center;

    gap:9px;

    padding:12px;

    border:1px solid #e2e7ee;

    border-radius:13px;

    background:#fff;

    box-shadow:
        0 17px 40px rgba(15,23,42,.14);
}

.db-floating-status > span{
    width:30px;
    height:30px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#e9f8ef;

    color:#168354;

    font-weight:900;
}

.db-floating-status strong,
.db-floating-status small{
    display:block;
}

.db-floating-status strong{
    color:#111827;

    font-size:7px;
}

.db-floating-status small{
    margin-top:2px;

    color:#98a2b3;

    font-size:5px;
}


/* SHARED */

.db-section{
    padding:100px 0;
}

.db-soft{
    background:#f7f9fc;
}

.db-label,
.db-heading > span{
    color:#ff6518;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;
}

.db-heading{
    max-width:830px;

    margin-bottom:42px;
}

.db-heading h2{
    margin:9px 0 14px;

    color:#111827;

    font-size:clamp(40px,4.4vw,57px);

    line-height:1.04;

    letter-spacing:-2.3px;
}

.db-heading h2 em{
    color:#ff6518;

    font-style:normal;
}

.db-heading p{
    max-width:730px;

    margin:0;

    color:#667085;

    font-size:15px;

    line-height:1.75;
}


/* PROBLEM + DATA RELATIONSHIP */

.db-problem-grid{
    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:80px;

    align-items:center;
}

.db-problem-copy h2{
    margin:10px 0 16px;

    color:#111827;

    font-size:48px;

    line-height:1.05;

    letter-spacing:-2px;
}

.db-problem-copy > p{
    color:#667085;

    font-size:15px;

    line-height:1.8;
}

.db-check-list{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;

    margin-top:25px;
}

.db-check-list > div{
    display:flex;

    align-items:center;

    gap:9px;

    padding:12px;

    border:1px solid #e4e9ef;

    border-radius:11px;

    background:#fff;
}

.db-check-list b{
    width:26px;
    height:26px;

    display:grid;

    place-items:center;

    flex:0 0 26px;

    border-radius:7px;

    background:#fff0e8;

    color:#ff6518;

    font-size:8px;
}

.db-check-list span{
    color:#475467;

    font-size:9px;

    font-weight:700;
}


/* RELATIONSHIP VISUAL */

.db-data-visual{
    position:relative;

    min-height:500px;

    border:1px solid #e4e9ef;

    border-radius:26px;

    background:
        radial-gradient(
            circle at center,
            rgba(255,101,24,.09),
            transparent 43%
        ),
        #fff;
}

.db-entity{
    position:absolute;

    z-index:3;

    padding:15px;

    border:1px solid #e3e8ef;

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 14px 35px rgba(15,23,42,.08);
}

.db-entity small,
.db-entity strong,
.db-entity span{
    display:block;
}

.db-entity small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;

    letter-spacing:.1em;
}

.db-entity strong{
    margin-top:4px;

    color:#111827;

    font-size:11px;
}

.db-entity span{
    margin-top:4px;

    color:#98a2b3;

    font-size:6px;
}

.db-entity-customer{
    width:160px;

    left:30px;
    top:45px;
}

.db-entity-project{
    width:165px;

    left:50%;
    top:185px;

    transform:translateX(-50%);

    background:#111827;
}

.db-entity-project strong{
    color:#fff;
}

.db-entity-project span{
    color:#aeb8c8;
}

.db-entity-order{
    width:145px;

    right:30px;
    top:45px;
}

.db-entity-document{
    width:155px;

    left:45px;
    bottom:45px;
}

.db-entity-report{
    width:160px;

    right:45px;
    bottom:45px;
}

.db-link{
    position:absolute;

    height:2px;

    background:#d8dee7;

    transform-origin:left center;
}

.db-link-a{
    width:165px;

    left:155px;
    top:142px;

    transform:rotate(28deg);
}

.db-link-b{
    width:165px;

    right:155px;
    top:142px;

    transform:rotate(-28deg);
}

.db-link-c{
    width:170px;

    left:145px;
    bottom:155px;

    transform:rotate(-32deg);
}

.db-link-d{
    width:170px;

    right:145px;
    bottom:155px;

    transform:rotate(32deg);
}


/* MODULES */

.db-module-grid{
    display:grid;

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

    gap:16px;
}

.db-module-grid article{
    min-height:330px;

    padding:27px;

    border:1px solid #e4e9ef;

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 10px 30px rgba(15,23,42,.04);
}

.db-module-icon{
    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    margin-bottom:23px;

    border-radius:11px;

    background:#fff0e8;

    color:#ff6518;

    font-size:8px;

    font-weight:900;
}

.db-module-grid h3{
    margin:0 0 9px;

    color:#111827;

    font-size:19px;
}

.db-module-grid article > p{
    color:#667085;

    font-size:11px;

    line-height:1.7;
}


/* MINI RECORD */

.db-mini-record{
    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:9px;

    margin-top:24px;

    padding:12px;

    border-radius:11px;

    background:#f7f9fc;
}

.db-mini-avatar{
    width:32px;
    height:32px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#111827;

    color:#fff;

    font-size:7px;

    font-weight:900;
}

.db-mini-record strong,
.db-mini-record small{
    display:block;
}

.db-mini-record strong{
    color:#111827;

    font-size:8px;
}

.db-mini-record small{
    margin-top:2px;

    color:#98a2b3;

    font-size:6px;
}

.db-mini-record > span{
    padding:4px 7px;

    border-radius:999px;

    background:#e9f8ef;

    color:#168354;

    font-size:5px;
}


/* PROGRESS */

.db-progress-demo{
    margin-top:22px;
}

.db-progress-demo > div:not(.db-progress-track){
    display:flex;

    justify-content:space-between;

    margin-top:12px;

    color:#667085;

    font-size:7px;
}

.db-progress-demo strong{
    color:#111827;
}

.db-progress-track{
    height:6px;

    margin-top:6px;

    border-radius:999px;

    background:#edf1f5;
}

.db-progress-track i{
    display:block;

    height:100%;

    border-radius:999px;

    background:#ff6518;
}


/* INVENTORY */

.db-inventory-demo{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:8px;

    margin-top:22px;
}

.db-inventory-demo > div{
    padding:12px;

    border-radius:11px;

    background:#f7f9fc;
}

.db-inventory-demo span,
.db-inventory-demo strong,
.db-inventory-demo small{
    display:block;
}

.db-inventory-demo span{
    color:#98a2b3;

    font-size:6px;
}

.db-inventory-demo strong{
    margin-top:5px;

    color:#111827;

    font-size:16px;
}

.db-inventory-demo small{
    margin-top:3px;

    color:#168354;

    font-size:6px;
}

.db-inventory-demo .warn{
    color:#d9510e;
}


/* ORDERS */

.db-order-demo{
    display:grid;

    gap:7px;

    margin-top:22px;
}

.db-order-demo > div{
    display:flex;

    justify-content:space-between;

    padding:11px;

    border-radius:9px;

    background:#f7f9fc;

    color:#667085;

    font-size:7px;
}

.db-order-demo b{
    color:#111827;
}


/* FILES */

.db-files-demo{
    display:grid;

    gap:7px;

    margin-top:22px;
}

.db-files-demo > div{
    display:flex;

    align-items:center;

    gap:9px;

    padding:10px;

    border-radius:9px;

    background:#f7f9fc;
}

.db-files-demo b{
    width:30px;
    height:30px;

    display:grid;

    place-items:center;

    border-radius:7px;

    background:#fff0e8;

    color:#ff6518;

    font-size:5px;
}

.db-files-demo span{
    color:#475467;

    font-size:7px;
}


/* REPORT DEMO */

.db-report-demo{
    margin-top:22px;

    padding:12px;

    border-radius:11px;

    background:#f7f9fc;
}

.db-report-bars{
    height:75px;

    display:flex;

    align-items:flex-end;

    gap:5px;
}

.db-report-bars i{
    flex:1;

    border-radius:3px 3px 0 0;

    background:#ff6518;
}

.db-report-demo > strong,
.db-report-demo > span{
    display:block;
}

.db-report-demo > strong{
    margin-top:10px;

    color:#111827;

    font-size:15px;
}

.db-report-demo > span{
    color:#98a2b3;

    font-size:6px;
}


/* IMAGE SECTION */

.db-image-section{
    background:#f7f9fc;
}

.db-image-grid{
    display:grid;

    grid-template-columns:
        1.15fr .85fr;

    gap:17px;
}

.db-industry-card{
    position:relative;

    min-height:300px;

    overflow:hidden;

    border-radius:22px;

    background:#111827;

    box-shadow:
        0 20px 50px rgba(15,23,42,.10);
}

.db-industry-large{
    grid-row:span 2;

    min-height:620px;
}

.db-industry-card > img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.db-industry-card:hover > img{
    transform:scale(1.035);
}

.db-industry-shade{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.06),
            rgba(17,24,39,.82)
        );
}

.db-industry-copy{
    position:absolute;

    z-index:3;

    left:25px;
    right:25px;
    bottom:25px;

    max-width:570px;
}

.db-industry-copy span{
    color:#ff9a68;

    font-size:8px;

    font-weight:900;

    letter-spacing:.12em;
}

.db-industry-copy h3{
    margin:8px 0 0;

    color:#fff;

    font-size:25px;

    line-height:1.1;
}

.db-industry-large
.db-industry-copy h3{
    font-size:36px;
}

.db-industry-ui{
    position:absolute;

    z-index:4;

    top:28px;
    right:28px;

    width:220px;

    padding:16px;

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

    border-radius:15px;

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

    box-shadow:
        0 17px 40px rgba(15,23,42,.20);

    backdrop-filter:blur(10px);
}

.db-industry-ui small,
.db-industry-ui > strong{
    display:block;
}

.db-industry-ui small{
    color:#ff6518;

    font-size:6px;

    font-weight:900;
}

.db-industry-ui > strong{
    margin-top:4px;

    color:#111827;

    font-size:11px;
}

.db-industry-ui > div{
    display:flex;

    justify-content:space-between;

    padding:10px 0;

    border-bottom:1px solid #e8ecf1;

    color:#667085;

    font-size:7px;
}

.db-industry-ui b{
    color:#111827;
}

.db-industry-small-ui{
    position:absolute;

    z-index:4;

    top:20px;
    right:20px;

    padding:12px;

    border-radius:12px;

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

    box-shadow:
        0 12px 30px rgba(15,23,42,.17);
}

.db-industry-small-ui strong,
.db-industry-small-ui span{
    display:block;
}

.db-industry-small-ui strong{
    color:#111827;

    font-size:9px;
}

.db-industry-small-ui span{
    margin-top:3px;

    color:#98a2b3;

    font-size:6px;
}


/* SEARCH */

.db-search-grid{
    display:grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:70px;

    align-items:center;
}

.db-search-copy h2{
    margin:10px 0 16px;

    color:#111827;

    font-size:46px;

    line-height:1.05;

    letter-spacing:-2px;
}

.db-search-copy > p{
    color:#667085;

    font-size:15px;

    line-height:1.8;
}

.db-search-benefits{
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:23px;
}

.db-search-benefits span{
    padding:8px 10px;

    border:1px solid #e4e9ef;

    border-radius:999px;

    background:#fff;

    color:#475467;

    font-size:8px;

    font-weight:800;
}

.db-search-demo{
    padding:22px;

    border:1px solid #e3e8ef;

    border-radius:22px;

    background:#f7f9fc;
}

.db-search-box{
    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:10px;

    padding:13px;

    border:1px solid #dfe5ec;

    border-radius:11px;

    background:#fff;
}

.db-search-box > span{
    color:#ff6518;

    font-size:15px;
}

.db-search-box strong{
    color:#98a2b3;

    font-size:8px;

    font-weight:500;
}

.db-search-box kbd{
    padding:5px 7px;

    border:1px solid #e4e9ef;

    border-radius:6px;

    background:#f8fafc;

    color:#667085;

    font-size:6px;
}

.db-filter-row{
    display:flex;

    gap:7px;

    margin-top:10px;
}

.db-filter-row button{
    padding:8px 10px;

    border:1px solid #e1e6ed;

    border-radius:8px;

    background:#fff;

    color:#475467;

    font-size:7px;
}

.db-filter-row button:last-child{
    color:#ff6518;

    font-weight:900;
}

.db-results{
    display:grid;

    gap:8px;

    margin-top:12px;
}

.db-results > div{
    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:10px;

    padding:11px;

    border:1px solid #e5e9ef;

    border-radius:11px;

    background:#fff;
}

.db-results > div > b{
    width:32px;
    height:32px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#fff0e8;

    color:#ff6518;

    font-size:6px;
}

.db-results p{
    margin:0;
}

.db-results strong,
.db-results small{
    display:block;
}

.db-results strong{
    color:#111827;

    font-size:8px;
}

.db-results small{
    margin-top:3px;

    color:#98a2b3;

    font-size:6px;
}

.db-results > div > span{
    padding:4px 6px;

    border-radius:999px;

    background:#eaf8f0;

    color:#168354;

    font-size:5px;
}


/* DARK PERMISSIONS */

.db-dark{
    background:#111827;
}

.db-permission-grid{
    display:grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:70px;

    align-items:center;
}

.db-dark-copy > span{
    color:#ff8e56;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;
}

.db-dark-copy h2{
    margin:10px 0 15px;

    color:#fff;

    font-size:46px;

    line-height:1.05;

    letter-spacing:-2px;
}

.db-dark-copy p{
    color:#aeb8c8;

    font-size:14px;

    line-height:1.75;
}

.db-role-table{
    overflow:hidden;

    border:1px solid #2b374a;

    border-radius:18px;

    background:#182235;
}

.db-role-head,
.db-role-table > div:not(.db-role-head){
    display:grid;

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

    align-items:center;
}

.db-role-head{
    padding:13px 16px;

    background:#202c40;

    color:#8f9bac;

    font-size:7px;
}

.db-role-table > div:not(.db-role-head){
    padding:15px 16px;

    border-top:1px solid #2b374a;

    color:#98a4b5;

    font-size:8px;
}

.db-role-table strong{
    color:#fff;
}

.db-role-table .yes{
    color:#ff8e56;

    font-weight:900;
}


/* PROCESS */

.db-process-grid{
    display:grid;

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

    gap:14px;
}

.db-process-grid article{
    min-height:210px;

    padding:25px;

    border:1px solid #e4e9ef;

    border-radius:18px;

    background:#fff;
}

.db-process-grid article > span{
    color:#ff6518;

    font-size:8px;

    font-weight:900;
}

.db-process-grid h3{
    margin:24px 0 8px;

    color:#111827;

    font-size:17px;
}

.db-process-grid p{
    margin:0;

    color:#667085;

    font-size:10px;

    line-height:1.7;
}


/* FINAL CTA */

.db-final{
    padding:20px 0 95px;
}

.db-final-box{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    padding:52px;

    border-radius:26px;

    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(255,101,24,.29),
            transparent 30%
        ),
        #111827;
}

.db-final-box > div:first-child{
    max-width:730px;
}

.db-final-box > div:first-child > span{
    color:#ff8e56;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;
}

.db-final-box h2{
    margin:10px 0 13px;

    color:#fff;

    font-size:48px;

    line-height:1.04;

    letter-spacing:-2px;
}

.db-final-box p{
    margin:0;

    color:#bdc6d4;

    font-size:14px;

    line-height:1.75;
}

.db-final-actions{
    min-width:230px;

    display:grid;

    gap:9px;
}

.db-outline{
    min-height:49px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 16px;

    border:1px solid #3d495d;

    border-radius:11px;

    color:#fff;

    text-decoration:none;

    font-size:10px;

    font-weight:850;
}


/* RESPONSIVE */

@media(max-width:1180px){

    .db-hero-grid{
        grid-template-columns:1fr;
    }

    .db-browser{
        max-width:850px;

        margin:auto;
    }

    .db-problem-grid,
    .db-search-grid,
    .db-permission-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:900px){

    .db-module-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .db-image-grid{
        grid-template-columns:1fr;
    }

    .db-industry-large{
        grid-row:auto;

        min-height:500px;
    }

    .db-process-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:700px){

    .db-hero{
        padding:60px 0 80px;
    }

    .db-hero-copy h1{
        font-size:45px;

        letter-spacing:-2.4px;
    }

    .db-browser{
        overflow:hidden;
    }

    .db-app-shell{
        grid-template-columns:
            90px 1fr;
    }

    .db-sidebar{
        padding:14px 8px;
    }

    .db-side-nav span{
        padding:8px 5px;

        font-size:5px;
    }

    .db-stat-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .db-content-grid{
        grid-template-columns:1fr;
    }

    .db-floating-status,
    .db-floating-search{
        display:none;
    }

    .db-check-list{
        grid-template-columns:1fr;
    }

    .db-module-grid,
    .db-process-grid{
        grid-template-columns:1fr;
    }

    .db-data-visual{
        min-height:620px;
    }

    .db-entity-customer{
        left:15px;
    }

    .db-entity-order{
        right:15px;
    }

    .db-entity-document{
        left:20px;
    }

    .db-entity-report{
        right:20px;
    }

    .db-industry-large,
    .db-industry-card{
        min-height:460px;
    }

    .db-industry-ui{
        width:190px;

        top:18px;
        right:18px;
    }

    .db-role-head,
    .db-role-table > div:not(.db-role-head){
        grid-template-columns:
            1.2fr repeat(4,.8fr);

        padding-left:10px;
        padding-right:10px;
    }

    .db-final-box{
        display:block;

        padding:32px 23px;
    }

    .db-final-box h2,
    .db-dark-copy h2,
    .db-search-copy h2,
    .db-problem-copy h2{
        font-size:35px;
    }

    .db-final-actions{
        margin-top:25px;
    }

}


/* =========================================================
   QAMZU — CUSTOM WEB DEVELOPMENT
   ========================================================= */

.custom-dev-page{
    background:#fff;
}


/* HERO */

.cd-hero{
    position:relative;

    overflow:hidden;

    padding:90px 0 110px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fafbfe
        );
}

.cd-hero-glow{
    position:absolute;

    width:620px;
    height:620px;

    right:-170px;
    top:-130px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,101,24,.13),
            transparent 68%
        );
}

.cd-hero-grid{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(620px,1.18fr);

    gap:60px;

    align-items:center;
}

.cd-hero-copy h1{
    margin:22px 0;

    color:#111827;

    font-size:clamp(52px,5.4vw,77px);

    line-height:.97;

    letter-spacing:-4px;
}

.cd-hero-copy h1 em{
    display:block;

    color:#ff6518;

    font-style:normal;
}

.cd-hero-copy > p{
    max-width:690px;

    margin:0;

    color:#667085;

    font-size:17px;

    line-height:1.76;
}

.cd-hero-actions{
    display:flex;

    flex-wrap:wrap;

    gap:11px;

    margin-top:31px;
}

.cd-proof{
    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:23px;

    color:#667085;

    font-size:10px;

    font-weight:800;
}

.cd-proof span:before{
    content:"✓";

    margin-right:6px;

    color:#ff6518;
}


/* PLATFORM */

.cd-platform-stage{
    position:relative;

    min-height:620px;
}

.cd-stage-glow{
    position:absolute;

    width:420px;
    height:420px;

    left:90px;
    top:100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,101,24,.17),
            transparent 68%
        );
}

.cd-main-browser{
    position:absolute;

    inset:25px 20px 35px 15px;

    overflow:hidden;

    border:1px solid #dfe5ed;

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 35px 85px rgba(15,23,42,.17);
}

.cd-browser-top{
    height:47px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 16px;

    border-bottom:1px solid #e7ebf0;

    background:#f8fafc;
}

.cd-dots{
    display:flex;

    gap:6px;
}

.cd-dots i{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#cdd5df;
}

.cd-address{
    flex:1;

    max-width:330px;

    padding:7px 11px;

    border:1px solid #e4e9ef;

    border-radius:8px;

    background:#fff;

    color:#98a2b3;

    font-size:7px;
}

.cd-app-shell{
    display:grid;

    grid-template-columns:
        145px 1fr;

    min-height:510px;
}

.cd-sidebar{
    padding:18px 11px;

    background:#111827;
}

.cd-brand{
    display:flex;

    align-items:center;

    gap:7px;

    color:#fff;

    font-size:14px;

    font-weight:900;
}

.cd-brand:before{
    content:"";

    width:28px;
    height:28px;

    border-radius:8px;

    background:#ff6518;
}

.cd-brand span{
    color:#99a5b5;

    font-size:6px;

    font-weight:700;
}

.cd-sidebar nav{
    display:grid;

    gap:5px;

    margin-top:25px;
}

.cd-sidebar nav span{
    padding:9px;

    border-radius:8px;

    color:#9ba6b6;

    font-size:6px;
}

.cd-sidebar nav .active{
    background:#ff6518;

    color:#fff;

    font-weight:900;
}

.cd-dashboard{
    padding:20px;

    background:#f8fafc;
}

.cd-dashboard-head{
    display:flex;

    justify-content:space-between;

    align-items:center;
}

.cd-dashboard-head small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;

    letter-spacing:.1em;
}

.cd-dashboard-head h3{
    margin:4px 0 0;

    color:#111827;

    font-size:15px;
}

.cd-dashboard-head button{
    padding:8px 10px;

    border:0;

    border-radius:8px;

    background:#ff6518;

    color:#fff;

    font-size:6px;

    font-weight:900;
}

.cd-stats{
    display:grid;

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

    gap:8px;

    margin-top:16px;
}

.cd-stats div{
    padding:13px;

    border:1px solid #e5e9ef;

    border-radius:11px;

    background:#fff;
}

.cd-stats span,
.cd-stats strong,
.cd-stats small{
    display:block;
}

.cd-stats span{
    color:#98a2b3;

    font-size:5px;
}

.cd-stats strong{
    margin-top:5px;

    color:#111827;

    font-size:15px;
}

.cd-stats small{
    margin-top:3px;

    color:#667085;

    font-size:5px;
}

.cd-dashboard-grid{
    display:grid;

    grid-template-columns:
        1.25fr .75fr;

    gap:9px;

    margin-top:10px;
}

.cd-workflow-panel,
.cd-chart-panel{
    padding:13px;

    border:1px solid #e5e9ef;

    border-radius:11px;

    background:#fff;
}

.cd-panel-title{
    display:flex;

    justify-content:space-between;
}

.cd-panel-title strong{
    color:#111827;

    font-size:8px;
}

.cd-panel-title span{
    color:#ff6518;

    font-size:6px;
}

.cd-workflow-row{
    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:8px;

    margin-top:9px;

    padding:9px;

    border-radius:9px;

    background:#f7f9fc;
}

.cd-workflow-row > b{
    width:24px;
    height:24px;

    display:grid;

    place-items:center;

    border-radius:7px;

    background:#fff0e8;

    color:#ff6518;

    font-size:6px;
}

.cd-workflow-row p{
    margin:0;
}

.cd-workflow-row strong,
.cd-workflow-row small{
    display:block;
}

.cd-workflow-row strong{
    color:#111827;

    font-size:7px;
}

.cd-workflow-row small{
    margin-top:2px;

    color:#98a2b3;

    font-size:5px;
}

.cd-workflow-row > span{
    padding:3px 5px;

    border-radius:999px;

    font-size:5px;
}

.cd-workflow-row .orange{
    background:#fff0e8;

    color:#d9510e;
}

.cd-workflow-row .green{
    background:#e9f8ef;

    color:#168354;
}

.cd-chart-panel > small{
    color:#98a2b3;

    font-size:5px;

    font-weight:900;
}

.cd-chart-panel > strong{
    display:block;

    margin-top:5px;

    color:#111827;

    font-size:19px;
}

.cd-chart{
    height:125px;

    display:flex;

    align-items:flex-end;

    gap:5px;

    margin-top:12px;
}

.cd-chart i{
    flex:1;

    border-radius:4px 4px 1px 1px;

    background:#ff6518;
}


/* FLOATING */

.cd-floating-card{
    position:absolute;

    z-index:6;

    border:1px solid #e2e7ee;

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 17px 42px rgba(15,23,42,.16);
}

.cd-api-card{
    right:-5px;
    top:65px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:13px;
}

.cd-api-card > span{
    width:35px;
    height:35px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:#111827;

    color:#fff;

    font-size:8px;

    font-weight:900;
}

.cd-api-card small,
.cd-api-card strong{
    display:block;
}

.cd-api-card small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;
}

.cd-api-card strong{
    margin-top:3px;

    color:#111827;

    font-size:7px;
}

.cd-mobile-card{
    left:-5px;
    bottom:5px;

    width:150px;

    padding:13px;
}

.cd-mobile-card small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;
}

.cd-mobile-card > strong{
    display:block;

    margin-top:4px;

    color:#111827;

    font-size:8px;
}

.cd-mini-phone{
    display:grid;

    gap:5px;

    margin-top:10px;

    padding:8px;

    border-radius:9px;

    background:#f7f9fc;
}

.cd-mini-phone span{
    height:5px;

    border-radius:999px;

    background:#dde3ea;
}

.cd-mini-phone span:nth-child(2){
    width:70%;

    background:#ffb28d;
}


/* SECTIONS */

.cd-section{
    padding:100px 0;
}

.cd-soft{
    background:#f7f9fc;
}

.cd-heading{
    max-width:840px;

    margin-bottom:42px;
}

.cd-heading > span,
.cd-label{
    color:#ff6518;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;
}

.cd-heading h2{
    margin:9px 0 14px;

    color:#111827;

    font-size:clamp(40px,4.4vw,57px);

    line-height:1.04;

    letter-spacing:-2.3px;
}

.cd-heading h2 em{
    color:#ff6518;

    font-style:normal;
}

.cd-heading p{
    max-width:760px;

    margin:0;

    color:#667085;

    font-size:15px;

    line-height:1.75;
}


/* TECHNOLOGY GRID */

.cd-tech-grid{
    display:grid;

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

    gap:15px;
}

.cd-tech-grid article{
    min-height:320px;

    padding:26px;

    border:1px solid #e4e9ef;

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 10px 30px rgba(15,23,42,.04);
}

.cd-tech-number{
    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    border-radius:11px;

    background:#fff0e8;

    color:#ff6518;

    font-size:7px;

    font-weight:900;
}

.cd-tech-grid h3{
    margin:23px 0 9px;

    color:#111827;

    font-size:19px;
}

.cd-tech-grid article > p{
    color:#667085;

    font-size:11px;

    line-height:1.7;
}


/* MINI VISUALS */

.cd-mini-browser{
    margin-top:22px;

    padding:12px;

    border-radius:11px;

    background:#f7f9fc;
}

.cd-mini-browser div{
    height:35px;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            #111827,
            #334155
        );
}

.cd-mini-browser span{
    display:block;

    width:75%;
    height:5px;

    margin-top:7px;

    border-radius:999px;

    background:#dfe4ea;
}

.cd-mini-browser span:nth-child(3){
    width:55%;
}

.cd-mini-dashboard{
    display:grid;

    grid-template-columns:
        50px 1fr;

    gap:8px;

    margin-top:22px;

    padding:10px;

    border-radius:11px;

    background:#f7f9fc;
}

.cd-mini-dashboard b{
    border-radius:8px;

    background:#111827;
}

.cd-mini-dashboard div{
    display:grid;

    gap:6px;
}

.cd-mini-dashboard span{
    height:21px;

    border-radius:7px;

    background:#fff;
}

.cd-mini-table{
    display:grid;

    gap:6px;

    margin-top:22px;

    padding:10px;

    border-radius:11px;

    background:#f7f9fc;
}

.cd-mini-table span{
    height:24px;

    border-radius:7px;

    background:#fff;
}

.cd-mini-table span:first-child{
    background:#fff0e8;
}

.cd-market-demo{
    display:grid;

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

    gap:6px;

    margin-top:22px;
}

.cd-market-demo i{
    height:75px;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #fff0e8,
            #e9edf2
        );
}

.cd-calendar-demo{
    display:grid;

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

    gap:5px;

    margin-top:22px;
}

.cd-calendar-demo span{
    display:grid;

    place-items:center;

    height:38px;

    border-radius:8px;

    background:#f7f9fc;

    color:#667085;

    font-size:7px;
}

.cd-calendar-demo .active{
    background:#ff6518;

    color:#fff;

    font-weight:900;
}

.cd-order-demo{
    display:flex;

    justify-content:space-between;

    margin-top:22px;

    padding:14px;

    border-radius:11px;

    background:#f7f9fc;

    color:#667085;

    font-size:8px;
}

.cd-order-demo strong{
    color:#111827;
}

.cd-task-demo{
    display:flex;

    gap:8px;

    margin-top:22px;
}

.cd-task-demo span{
    width:34px;
    height:34px;

    display:grid;

    place-items:center;

    border-radius:9px;

    background:#eaf8f0;

    color:#168354;

    font-size:8px;

    font-weight:900;
}

.cd-task-demo span:last-child{
    background:#fff0e8;

    color:#ff6518;
}

.cd-api-demo{
    display:flex;

    align-items:center;

    gap:6px;

    margin-top:22px;

    padding:12px;

    border-radius:11px;

    background:#f7f9fc;
}

.cd-api-demo span{
    padding:6px 7px;

    border-radius:7px;

    background:#111827;

    color:#fff;

    font-size:5px;

    font-weight:900;
}

.cd-api-demo i{
    color:#ff6518;

    font-style:normal;

    font-weight:900;
}

.cd-report-demo{
    height:90px;

    display:flex;

    align-items:flex-end;

    gap:5px;

    margin-top:22px;

    padding:10px;

    border-radius:11px;

    background:#f7f9fc;
}

.cd-report-demo i{
    flex:1;

    border-radius:4px 4px 0 0;

    background:#ff6518;
}


/* WORKFLOW SECTION */

.cd-workflow-grid{
    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:80px;

    align-items:center;
}

.cd-workflow-copy h2{
    margin:10px 0 16px;

    color:#111827;

    font-size:48px;

    line-height:1.05;

    letter-spacing:-2px;
}

.cd-workflow-copy > p{
    color:#667085;

    font-size:15px;

    line-height:1.8;
}

.cd-workflow-list{
    display:grid;

    gap:10px;

    margin-top:24px;
}

.cd-workflow-list > div{
    padding:14px;

    border:1px solid #e4e9ef;

    border-radius:11px;

    background:#fff;
}

.cd-workflow-list strong,
.cd-workflow-list span{
    display:block;
}

.cd-workflow-list strong{
    color:#111827;

    font-size:10px;
}

.cd-workflow-list span{
    margin-top:4px;

    color:#7d8999;

    font-size:8px;
}


/* FLOW VISUAL */

.cd-flow-visual{
    position:relative;

    min-height:520px;

    border:1px solid #e4e9ef;

    border-radius:27px;

    background:
        radial-gradient(
            circle at center,
            rgba(255,101,24,.10),
            transparent 43%
        ),
        #f8fafc;
}

.cd-flow-node{
    position:absolute;

    z-index:3;

    padding:15px;

    border:1px solid #e2e7ed;

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 14px 35px rgba(15,23,42,.08);
}

.cd-flow-node small,
.cd-flow-node strong{
    display:block;
}

.cd-flow-node small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;

    letter-spacing:.1em;
}

.cd-flow-node strong{
    margin-top:4px;

    color:#111827;

    font-size:11px;
}

.cd-customer{
    width:150px;

    left:30px;
    top:50px;
}

.cd-team{
    width:150px;

    right:30px;
    top:50px;
}

.cd-payment{
    width:145px;

    left:40px;
    bottom:50px;
}

.cd-report{
    width:155px;

    right:35px;
    bottom:50px;
}

.cd-platform{
    width:180px;

    left:50%;
    top:205px;

    transform:translateX(-50%);

    text-align:center;

    background:#111827;
}

.cd-platform > span{
    width:38px;
    height:38px;

    display:grid;

    place-items:center;

    margin:0 auto 7px;

    border-radius:10px;

    background:#ff6518;

    color:#fff;

    font-weight:900;
}

.cd-platform strong{
    color:#fff;
}

.cd-platform small{
    color:#9ba6b6;
}

.cd-flow-line{
    position:absolute;

    height:2px;

    background:#d8dee6;
}

.line-one{
    width:160px;

    left:150px;
    top:150px;

    transform:rotate(28deg);
}

.line-two{
    width:160px;

    right:150px;
    top:150px;

    transform:rotate(-28deg);
}

.line-three{
    width:165px;

    left:145px;
    bottom:150px;

    transform:rotate(-30deg);
}

.line-four{
    width:165px;

    right:145px;
    bottom:150px;

    transform:rotate(30deg);
}


/* IMAGE SECTION */

.cd-real-world{
    background:#f7f9fc;
}

.cd-image-grid{
    display:grid;

    grid-template-columns:
        1.15fr .85fr;

    gap:17px;
}

.cd-image-card{
    position:relative;

    min-height:300px;

    overflow:hidden;

    border-radius:22px;

    background:#111827;

    box-shadow:
        0 20px 50px rgba(15,23,42,.10);
}

.cd-image-large{
    grid-row:span 2;

    min-height:620px;
}

.cd-image-card > img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.cd-image-card:hover > img{
    transform:scale(1.035);
}

.cd-image-shade{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.06),
            rgba(17,24,39,.84)
        );
}

.cd-image-copy{
    position:absolute;

    z-index:3;

    left:25px;
    right:25px;
    bottom:25px;
}

.cd-image-copy span{
    color:#ff9a68;

    font-size:8px;

    font-weight:900;

    letter-spacing:.12em;
}

.cd-image-copy h3{
    max-width:600px;

    margin:8px 0 0;

    color:#fff;

    font-size:25px;

    line-height:1.1;
}

.cd-image-large
.cd-image-copy h3{
    font-size:36px;
}

.cd-project-overlay{
    position:absolute;

    z-index:4;

    top:28px;
    right:28px;

    width:215px;

    padding:15px;

    border-radius:15px;

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

    box-shadow:
        0 17px 40px rgba(15,23,42,.20);

    backdrop-filter:blur(10px);
}

.cd-project-overlay small,
.cd-project-overlay > strong{
    display:block;
}

.cd-project-overlay small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;
}

.cd-project-overlay > strong{
    margin-top:4px;

    color:#111827;

    font-size:11px;
}

.cd-project-overlay > div{
    display:flex;

    justify-content:space-between;

    padding:9px 0;

    border-bottom:1px solid #e8ecf1;

    color:#667085;

    font-size:7px;
}

.cd-project-overlay b{
    color:#111827;
}

.cd-small-overlay{
    position:absolute;

    z-index:4;

    top:20px;
    right:20px;

    padding:12px;

    border-radius:12px;

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

    box-shadow:
        0 12px 30px rgba(15,23,42,.17);
}

.cd-small-overlay strong,
.cd-small-overlay span{
    display:block;
}

.cd-small-overlay strong{
    color:#111827;

    font-size:9px;
}

.cd-small-overlay span{
    margin-top:3px;

    color:#98a2b3;

    font-size:6px;
}


/* ARCHITECTURE */

.cd-architecture-section{
    background:#fff;
}

.cd-architecture-grid{
    display:grid;

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

    gap:80px;

    align-items:center;
}

.cd-architecture{
    position:relative;

    min-height:560px;

    border:1px solid #e4e9ef;

    border-radius:27px;

    background:
        radial-gradient(
            circle at center,
            rgba(255,101,24,.10),
            transparent 43%
        ),
        #f8fafc;
}

.cd-arch-node{
    position:absolute;

    z-index:3;

    padding:15px;

    border:1px solid #e2e7ed;

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 14px 35px rgba(15,23,42,.08);
}

.cd-arch-node small,
.cd-arch-node strong{
    display:block;
}

.cd-arch-node small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;
}

.cd-arch-node strong{
    margin-top:4px;

    color:#111827;

    font-size:10px;
}

.cd-arch-web{
    width:150px;

    left:30px;
    top:45px;
}

.cd-arch-mobile{
    width:145px;

    right:30px;
    top:45px;
}

.cd-arch-db{
    width:145px;

    left:35px;
    bottom:45px;
}

.cd-arch-admin{
    width:145px;

    left:50%;
    bottom:25px;

    transform:translateX(-50%);
}

.cd-arch-external{
    width:155px;

    right:35px;
    bottom:45px;
}

.cd-arch-center{
    position:absolute;

    z-index:4;

    width:180px;

    left:50%;
    top:205px;

    transform:translateX(-50%);

    padding:18px;

    text-align:center;

    border-radius:16px;

    background:#111827;

    box-shadow:
        0 18px 45px rgba(15,23,42,.18);
}

.cd-arch-center > span{
    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    margin:0 auto 8px;

    border-radius:11px;

    background:#ff6518;

    color:#fff;

    font-weight:900;
}

.cd-arch-center strong,
.cd-arch-center small{
    display:block;
}

.cd-arch-center strong{
    color:#fff;

    font-size:11px;
}

.cd-arch-center small{
    margin-top:4px;

    color:#98a3b4;

    font-size:6px;
}

.cd-arch-line{
    position:absolute;

    height:2px;

    background:#d7dde5;
}

.a1{
    width:165px;

    left:150px;
    top:150px;

    transform:rotate(27deg);
}

.a2{
    width:165px;

    right:150px;
    top:150px;

    transform:rotate(-27deg);
}

.a3{
    width:150px;

    left:150px;
    bottom:155px;

    transform:rotate(-31deg);
}

.a4{
    width:130px;

    left:50%;
    bottom:125px;

    transform:
        translateX(-50%)
        rotate(90deg);
}

.a5{
    width:150px;

    right:150px;
    bottom:155px;

    transform:rotate(31deg);
}

.cd-architecture-copy h2{
    margin:10px 0 17px;

    color:#111827;

    font-size:47px;

    line-height:1.05;

    letter-spacing:-2px;
}

.cd-architecture-copy > p{
    color:#667085;

    font-size:15px;

    line-height:1.8;
}

.cd-arch-list{
    display:grid;

    gap:9px;

    margin-top:24px;
}

.cd-arch-list > div{
    display:flex;

    align-items:center;

    gap:10px;

    padding:12px;

    border:1px solid #e4e9ef;

    border-radius:10px;
}

.cd-arch-list b{
    width:29px;
    height:29px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#fff0e8;

    color:#ff6518;

    font-size:6px;
}

.cd-arch-list span{
    color:#475467;

    font-size:9px;

    font-weight:750;
}


/* DARK PROCESS */

.cd-dark{
    background:#111827;
}

.cd-dark-heading{
    max-width:800px;

    margin-bottom:42px;
}

.cd-dark-heading span{
    color:#ff8e56;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;
}

.cd-dark-heading h2{
    margin:9px 0 0;

    color:#fff;

    font-size:48px;

    line-height:1.05;

    letter-spacing:-2px;
}

.cd-process-grid{
    display:grid;

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

    gap:13px;
}

.cd-process-grid article{
    min-height:205px;

    padding:25px;

    border:1px solid #29364a;

    border-radius:17px;

    background:#182235;
}

.cd-process-grid article > span{
    color:#ff8e56;

    font-size:8px;

    font-weight:900;
}

.cd-process-grid h3{
    margin:23px 0 8px;

    color:#fff;

    font-size:17px;
}

.cd-process-grid p{
    margin:0;

    color:#aeb8c8;

    font-size:10px;

    line-height:1.7;
}


/* FINAL */

.cd-final{
    padding:90px 0;
}

.cd-final-box{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:55px;

    padding:55px;

    border-radius:27px;

    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(255,101,24,.30),
            transparent 31%
        ),
        #111827;
}

.cd-final-box > div:first-child{
    max-width:780px;
}

.cd-final-box > div:first-child > span{
    color:#ff8e56;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;
}

.cd-final-box h2{
    margin:10px 0 13px;

    color:#fff;

    font-size:47px;

    line-height:1.04;

    letter-spacing:-2px;
}

.cd-final-box p{
    margin:0;

    color:#bdc6d4;

    font-size:14px;

    line-height:1.75;
}

.cd-final-actions{
    min-width:230px;

    display:grid;

    gap:9px;
}

.cd-outline-button{
    min-height:49px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 16px;

    border:1px solid #3d495c;

    border-radius:11px;

    color:#fff;

    text-decoration:none;

    font-size:10px;

    font-weight:850;
}


/* RESPONSIVE */

@media(max-width:1180px){

    .cd-hero-grid{
        grid-template-columns:1fr;
    }

    .cd-platform-stage{
        max-width:850px;

        width:100%;

        margin:auto;
    }

    .cd-workflow-grid,
    .cd-architecture-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:900px){

    .cd-tech-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .cd-image-grid{
        grid-template-columns:1fr;
    }

    .cd-image-large{
        grid-row:auto;

        min-height:500px;
    }

    .cd-process-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:650px){

    .cd-hero{
        padding:60px 0 80px;
    }

    .cd-hero-copy h1{
        font-size:45px;

        letter-spacing:-2.4px;
    }

    .cd-platform-stage{
        min-height:600px;
    }

    .cd-main-browser{
        inset:20px 0 40px 0;
    }

    .cd-app-shell{
        grid-template-columns:
            85px 1fr;
    }

    .cd-sidebar nav span{
        padding:7px 4px;

        font-size:5px;
    }

    .cd-stats{
        grid-template-columns:1fr;
    }

    .cd-dashboard-grid{
        grid-template-columns:1fr;
    }

    .cd-floating-card{
        display:none;
    }

    .cd-tech-grid,
    .cd-process-grid{
        grid-template-columns:1fr;
    }

    .cd-flow-visual,
    .cd-architecture{
        min-height:630px;
    }

    .cd-image-card,
    .cd-image-large{
        min-height:460px;
    }

    .cd-project-overlay{
        width:185px;

        top:18px;
        right:18px;
    }

    .cd-workflow-copy h2,
    .cd-architecture-copy h2,
    .cd-dark-heading h2,
    .cd-final-box h2{
        font-size:35px;
    }

    .cd-final-box{
        display:block;

        padding:32px 23px;
    }

    .cd-final-actions{
        margin-top:25px;
    }

}


/* =========================================================
   QAMZU — CUSTOM DEV VISUAL DEPTH V2
   ========================================================= */


/* ---------------------------------------------------------
   MARKETPLACE
   --------------------------------------------------------- */

.cd-market-demo{
    margin-top:22px;

    padding:12px;

    border:1px solid #e6eaf0;

    border-radius:14px;

    background:#f7f9fc;
}

.cd-market-search{
    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 10px;

    border:1px solid #e1e6ed;

    border-radius:9px;

    background:#fff;
}

.cd-market-search span{
    color:#ff6518;

    font-size:11px;
}

.cd-market-search strong{
    color:#98a2b3;

    font-size:6px;

    font-weight:600;
}

.cd-market-categories{
    display:flex;

    gap:5px;

    margin-top:8px;
}

.cd-market-categories span{
    padding:5px 7px;

    border-radius:999px;

    background:#fff;

    color:#7e8999;

    font-size:5px;

    font-weight:750;
}

.cd-market-categories .active{
    background:#111827;

    color:#fff;
}

.cd-market-businesses{
    display:grid;

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

    gap:7px;

    margin-top:9px;
}

.cd-market-business{
    overflow:hidden;

    border:1px solid #e4e9ef;

    border-radius:10px;

    background:#fff;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.cd-market-business:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 22px rgba(15,23,42,.10);
}

.cd-market-business-image{
    height:58px;

    background-position:center;

    background-size:cover;
}

.cd-market-business.restaurant
.cd-market-business-image{
    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(17,24,39,.16)
        ),
        url("/assets/images/restaurant.webp");
}

.cd-market-business.salon
.cd-market-business-image{
    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(17,24,39,.16)
        ),
        url("/assets/images/salon.webp");
}

.cd-market-business.auto
.cd-market-business-image{
    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(17,24,39,.16)
        ),
        url("/assets/images/auto.webp");
}

.cd-market-business-copy{
    padding:8px;
}

.cd-market-business-copy strong,
.cd-market-business-copy span{
    display:block;
}

.cd-market-business-copy strong{
    color:#111827;

    font-size:6px;
}

.cd-market-business-copy span{
    margin-top:3px;

    color:#98a2b3;

    font-size:5px;
}


/* ---------------------------------------------------------
   WORKFLOW V2
   --------------------------------------------------------- */

.cd-flow-visual-v2{
    position:relative;

    min-height:610px;

    overflow:hidden;

    border:1px solid #dde4ec;

    border-radius:28px;

    background:
        radial-gradient(
            circle at 50% 49%,
            rgba(255,101,24,.14),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fbfcfe 0%,
            #f4f7fa 100%
        );
}


/* subtle grid */

.cd-flow-visual-v2:before{
    content:"";

    position:absolute;

    inset:0;

    opacity:.38;

    background-image:
        linear-gradient(
            rgba(17,24,39,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,24,39,.035) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;

    pointer-events:none;
}


.cd-flow-caption{
    position:absolute;

    z-index:4;

    left:50%;
    top:22px;

    transform:translateX(-50%);

    text-align:center;
}

.cd-flow-caption span,
.cd-flow-caption strong{
    display:block;
}

.cd-flow-caption span{
    color:#ff6518;

    font-size:6px;

    font-weight:900;

    letter-spacing:.14em;
}

.cd-flow-caption strong{
    margin-top:4px;

    color:#111827;

    font-size:10px;
}


/* real connector paths */

.cd-flow-svg{
    position:absolute;

    z-index:1;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;
}

.cd-flow-svg path{
    fill:none;

    stroke:#d5dde7;

    stroke-width:2.2;

    stroke-linecap:round;

    stroke-dasharray:
        5 6;
}


/* disable old straight-line divs if any remain */

.cd-flow-visual-v2
.cd-flow-line{
    display:none;
}


/* primary nodes */

.cd-flow-visual-v2
.cd-flow-node{
    width:175px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px;

    border:1px solid #dfe5ec;

    border-radius:15px;

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

    box-shadow:
        0 13px 35px rgba(15,23,42,.09);
}

.cd-flow-icon{
    width:34px;
    height:34px;

    display:grid;

    place-items:center;

    flex:0 0 34px;

    border-radius:10px;

    background:#fff0e8;

    color:#ff6518;

    font-size:8px;

    font-weight:900;
}

.cd-flow-node small,
.cd-flow-node strong,
.cd-flow-node em{
    display:block;
}

.cd-flow-node small{
    color:#ff6518;

    font-size:5px;

    font-weight:900;

    letter-spacing:.1em;
}

.cd-flow-node strong{
    margin-top:3px;

    color:#111827;

    font-size:9px;
}

.cd-flow-node em{
    margin-top:3px;

    color:#98a2b3;

    font-size:5px;

    font-style:normal;
}


/* reposition */

.cd-flow-visual-v2
.cd-customer{
    left:25px;
    top:82px;
}

.cd-flow-visual-v2
.cd-team{
    right:25px;
    top:82px;
}

.cd-flow-visual-v2
.cd-payment{
    left:35px;
    bottom:55px;
}

.cd-flow-visual-v2
.cd-report{
    right:35px;
    bottom:55px;
}


/* central core */

.cd-flow-visual-v2
.cd-platform{
    z-index:6;

    width:215px;

    top:235px;

    padding:21px 18px;

    border-radius:18px;

    box-shadow:
        0 25px 55px rgba(15,23,42,.22);
}

.cd-flow-visual-v2
.cd-platform > span{
    width:45px;
    height:45px;

    border-radius:12px;

    font-size:16px;
}

.cd-flow-visual-v2
.cd-platform strong{
    font-size:12px;
}

.cd-flow-visual-v2
.cd-platform small{
    margin-top:5px;

    font-size:6px;
}

.cd-platform-status{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    margin-top:11px;

    padding-top:10px;

    border-top:
        1px solid #2f3b50;

    color:#9eabbc;

    font-size:5px;
}

.cd-platform-status i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#2ecc71;

    box-shadow:
        0 0 0 3px rgba(46,204,113,.12);
}


/* secondary services */

.cd-flow-service{
    position:absolute;

    z-index:5;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 12px;

    border:1px solid #e0e6ed;

    border-radius:12px;

    background:#fff;

    box-shadow:
        0 10px 28px rgba(15,23,42,.08);
}

.cd-flow-service > span{
    width:29px;
    height:29px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#111827;

    color:#fff;

    font-size:6px;

    font-weight:900;
}

.cd-flow-service small,
.cd-flow-service strong{
    display:block;
}

.cd-flow-service small{
    color:#ff6518;

    font-size:4px;

    font-weight:900;

    letter-spacing:.08em;
}

.cd-flow-service strong{
    margin-top:2px;

    color:#111827;

    font-size:7px;
}

.cd-flow-database{
    left:50%;

    top:112px;

    transform:translateX(-50%);
}

.cd-flow-api{
    right:22px;

    top:270px;
}

.cd-flow-automation{
    left:22px;

    top:270px;
}


/* workflow activity chips */

.cd-flow-activity{
    position:absolute;

    z-index:7;

    display:flex;

    align-items:center;

    gap:6px;

    padding:8px 10px;

    border:1px solid #e4e9ef;

    border-radius:999px;

    background:#fff;

    color:#667085;

    font-size:5px;

    font-weight:700;

    box-shadow:
        0 8px 22px rgba(15,23,42,.07);
}

.cd-flow-activity b{
    width:18px;
    height:18px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#e9f8ef;

    color:#168354;

    font-size:5px;
}

.activity-one{
    left:185px;
    top:187px;
}

.activity-two{
    right:180px;
    top:187px;
}

.activity-two b{
    background:#fff0e8;

    color:#ff6518;
}

.activity-three{
    left:50%;

    bottom:122px;

    transform:translateX(-50%);
}


/* responsive */

@media(max-width:900px){

    .cd-market-business-image{
        height:75px;
    }

}


@media(max-width:650px){

    .cd-market-businesses{
        grid-template-columns:1fr;
    }

    .cd-market-business{
        display:grid;

        grid-template-columns:
            95px 1fr;
    }

    .cd-market-business-image{
        height:70px;
    }

    .cd-market-business-copy{
        align-self:center;
    }


    .cd-flow-visual-v2{
        min-height:760px;
    }

    .cd-flow-visual-v2
    .cd-customer{
        left:15px;
        top:80px;
    }

    .cd-flow-visual-v2
    .cd-team{
        right:15px;
        top:165px;
    }

    .cd-flow-database{
        top:250px;
    }

    .cd-flow-visual-v2
    .cd-platform{
        top:345px;
    }

    .cd-flow-automation{
        top:auto;
        left:15px;
        bottom:210px;
    }

    .cd-flow-api{
        top:auto;
        right:15px;
        bottom:210px;
    }

    .cd-flow-visual-v2
    .cd-payment{
        left:15px;
        bottom:55px;
    }

    .cd-flow-visual-v2
    .cd-report{
        right:15px;
        bottom:55px;
    }

    .cd-flow-activity{
        display:none;
    }

    .cd-flow-svg{
        opacity:.35;
    }

}


/* =========================================================
   QAMZU — CUSTOM DEVELOPMENT VISUAL FIX V3
   ========================================================= */


/* ---------------------------------------------------------
   TECHNOLOGY CARDS — USE SPACE PROPERLY
   --------------------------------------------------------- */

.cd-tech-grid article{
    display:flex;
    flex-direction:column;
}

.cd-tech-grid article > p{
    margin-bottom:0;
}


/* ---------------------------------------------------------
   MARKETPLACE FIX
   Old CSS had .cd-market-demo as a 3-column grid.
   Reset it completely.
   --------------------------------------------------------- */

.cd-market-demo{
    display:block !important;
    grid-template-columns:none !important;

    width:100%;

    margin-top:auto;
    padding:13px;

    overflow:hidden;

    border:1px solid #e4e9ef;
    border-radius:14px;

    background:#f7f9fc;
}

.cd-market-search{
    width:100%;

    box-sizing:border-box;
}

.cd-market-categories{
    width:100%;

    overflow:hidden;
}

.cd-market-businesses{
    width:100%;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    gap:7px;
}

.cd-market-business{
    min-width:0;
}

.cd-market-business-image{
    width:100%;
    height:65px;
}

.cd-market-business-copy{
    min-width:0;
}

.cd-market-business-copy strong{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:7px;
}

.cd-market-business-copy span{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* ---------------------------------------------------------
   BOOKING CARD — FULL MINI SCHEDULING UI
   --------------------------------------------------------- */

.cd-calendar-v3{
    display:block !important;

    width:100%;

    margin-top:auto;

    padding:13px;

    border:1px solid #e5e9ef;
    border-radius:14px;

    background:#f7f9fc;
}

.cd-calendar-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-bottom:10px;
}

.cd-calendar-header strong{
    color:#111827;

    font-size:8px;
}

.cd-calendar-header span{
    padding:4px 6px;

    border-radius:999px;

    background:#fff;

    color:#98a2b3;

    font-size:5px;
}

.cd-calendar-days{
    display:grid;

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

    gap:5px;
}

.cd-calendar-days > div{
    display:grid;

    place-items:center;

    height:49px;

    border-radius:9px;

    background:#fff;

    color:#667085;
}

.cd-calendar-days small{
    font-size:4px;
}

.cd-calendar-days strong{
    margin-top:2px;

    font-size:7px;
}

.cd-calendar-days .active{
    background:#ff6518;

    color:#fff;
}

.cd-calendar-appointment{
    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:8px;

    margin-top:8px;

    padding:9px;

    border:1px solid #e5e9ef;
    border-radius:9px;

    background:#fff;
}

.cd-calendar-appointment > span{
    color:#ff6518;

    font-size:6px;

    font-weight:900;
}

.cd-calendar-appointment strong,
.cd-calendar-appointment small{
    display:block;
}

.cd-calendar-appointment strong{
    color:#111827;

    font-size:7px;
}

.cd-calendar-appointment small{
    margin-top:2px;

    color:#98a2b3;

    font-size:5px;
}

.cd-calendar-appointment b{
    width:22px;
    height:22px;

    display:grid;

    place-items:center;

    border-radius:7px;

    background:#e9f8ef;

    color:#168354;

    font-size:6px;
}

.cd-calendar-appointment.secondary b{
    background:#fff0e8;

    color:#ff6518;
}


/* ---------------------------------------------------------
   E-COMMERCE CARD — ORDER UI
   --------------------------------------------------------- */

.cd-order-v3{
    display:block !important;

    width:100%;

    margin-top:auto;

    padding:13px;

    border:1px solid #e5e9ef;
    border-radius:14px;

    background:#f7f9fc;
}

.cd-order-head{
    display:flex;

    align-items:center;
    justify-content:space-between;

    padding-bottom:9px;

    border-bottom:1px solid #e5e9ef;
}

.cd-order-head small,
.cd-order-head strong{
    display:block;
}

.cd-order-head small{
    color:#98a2b3;

    font-size:4px;

    font-weight:900;
}

.cd-order-head strong{
    margin-top:2px;

    color:#111827;

    font-size:8px;
}

.cd-order-head > span{
    padding:4px 7px;

    border-radius:999px;

    background:#e9f8ef;

    color:#168354;

    font-size:5px;

    font-weight:900;
}

.cd-order-product{
    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:8px;

    margin-top:8px;

    padding:8px;

    border-radius:9px;

    background:#fff;
}

.cd-order-image{
    width:32px;
    height:32px;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            #fff0e8,
            #ffcab0
        );
}

.cd-order-image.second{
    background:
        linear-gradient(
            135deg,
            #e8edf3,
            #cfd7e1
        );
}

.cd-order-product strong,
.cd-order-product small{
    display:block;
}

.cd-order-product strong{
    color:#111827;

    font-size:7px;
}

.cd-order-product small{
    margin-top:2px;

    color:#98a2b3;

    font-size:5px;
}

.cd-order-product b{
    color:#111827;

    font-size:7px;
}

.cd-order-total{
    display:flex;

    justify-content:space-between;

    margin-top:9px;

    padding-top:9px;

    border-top:1px solid #e1e6ed;

    color:#667085;

    font-size:7px;
}

.cd-order-total strong{
    color:#111827;

    font-size:9px;
}


/* ---------------------------------------------------------
   WORKFLOW — COMPLETE POSITIONING RESET
   --------------------------------------------------------- */

.cd-flow-visual-v2{
    position:relative !important;

    min-height:620px !important;

    overflow:hidden !important;
}


/*
 * Core renamed so no old .cd-platform rules can move it.
 */

.cd-flow-core-v3{
    position:absolute !important;

    z-index:10 !important;

    left:50% !important;
    top:50% !important;

    width:220px !important;

    box-sizing:border-box;

    padding:22px 20px !important;

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

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            #111827,
            #1e293b
        );

    text-align:center;

    box-shadow:
        0 28px 65px rgba(15,23,42,.25);
}

.cd-flow-core-v3 > span{
    width:46px;
    height:46px;

    display:grid;

    place-items:center;

    margin:
        0 auto 9px;

    border-radius:12px;

    background:#ff6518;

    color:#fff;

    font-size:16px;

    font-weight:900;
}

.cd-flow-core-v3 > strong,
.cd-flow-core-v3 > small{
    display:block;
}

.cd-flow-core-v3 > strong{
    color:#fff;

    font-size:13px;
}

.cd-flow-core-v3 > small{
    margin-top:4px;

    color:#9ba7b8;

    font-size:6px;
}


/* Connected status */

.cd-flow-core-status-v3{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    margin-top:12px;

    padding-top:10px;

    border-top:
        1px solid #324056;

    color:#a9b3c2;

    font-size:5px;
}

.cd-flow-core-status-v3 i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#2ecc71;

    box-shadow:
        0 0 0 4px rgba(46,204,113,.10);
}


/* ---------------------------------------------------------
   WORKFLOW NODE POSITIONS
   --------------------------------------------------------- */

.cd-flow-visual-v2
.cd-customer{
    left:28px !important;
    top:92px !important;
}

.cd-flow-visual-v2
.cd-team{
    right:28px !important;
    top:92px !important;
}

.cd-flow-visual-v2
.cd-payment{
    left:38px !important;
    bottom:55px !important;
    top:auto !important;
}

.cd-flow-visual-v2
.cd-report{
    right:38px !important;
    bottom:55px !important;
    top:auto !important;
}


/* Database above the core */

.cd-flow-database{
    left:50% !important;
    top:115px !important;

    transform:
        translateX(-50%) !important;
}


/* Automation / integrations beside core */

.cd-flow-automation{
    left:28px !important;
    top:285px !important;
}

.cd-flow-api{
    right:28px !important;
    top:285px !important;
}


/* ---------------------------------------------------------
   ACTIVITY STATUS
   --------------------------------------------------------- */

.activity-one{
    left:195px !important;
    top:205px !important;
}

.activity-two{
    right:190px !important;
    top:205px !important;
}

.activity-three{
    left:50% !important;
    bottom:125px !important;

    transform:
        translateX(-50%) !important;
}


/* ---------------------------------------------------------
   CONNECTOR LINES
   --------------------------------------------------------- */

.cd-flow-svg{
    position:absolute !important;

    z-index:1 !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;
}

.cd-flow-svg path{
    stroke:#d6dee8 !important;

    stroke-width:2 !important;

    stroke-dasharray:5 6 !important;
}


/* ---------------------------------------------------------
   Make card visuals align toward bottom
   --------------------------------------------------------- */

.cd-mini-browser,
.cd-mini-dashboard,
.cd-mini-table,
.cd-market-demo,
.cd-calendar-v3,
.cd-order-v3,
.cd-task-demo,
.cd-api-demo,
.cd-report-demo{
    margin-top:auto;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

    .cd-market-businesses{
        grid-template-columns:1fr !important;
    }

    .cd-market-business{
        display:grid;

        grid-template-columns:90px 1fr;
    }

    .cd-market-business-image{
        height:70px;
    }


    .cd-flow-visual-v2{
        min-height:850px !important;
    }

    .cd-flow-core-v3{
        top:48% !important;

        width:190px !important;
    }

    .cd-flow-visual-v2
    .cd-customer{
        left:15px !important;
        top:80px !important;
    }

    .cd-flow-visual-v2
    .cd-team{
        right:15px !important;
        top:175px !important;
    }

    .cd-flow-database{
        top:275px !important;
    }

    .cd-flow-automation{
        left:15px !important;
        top:auto !important;
        bottom:235px !important;
    }

    .cd-flow-api{
        right:15px !important;
        top:auto !important;
        bottom:235px !important;
    }

    .cd-flow-visual-v2
    .cd-payment{
        left:15px !important;
        bottom:60px !important;
    }

    .cd-flow-visual-v2
    .cd-report{
        right:15px !important;
        bottom:60px !important;
    }

    .cd-flow-activity{
        display:none !important;
    }

}

/* =========================================================
   QAMZU SERVICE PAGE PROJECT FORM
   ========================================================= */

.service-lead-section{
    position:relative;
    padding:90px 0;
    overflow:hidden;
    background:
        radial-gradient(circle at 10% 10%,rgba(255,101,24,.10),transparent 28%),
        linear-gradient(180deg,#f7f9fc 0%,#ffffff 100%);
}

.service-lead-grid{
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(480px,1.14fr);
    gap:70px;
    align-items:start;
}

.service-lead-copy{
    position:sticky;
    top:130px;
}

.service-lead-copy .mini-label{
    display:inline-block;
    margin-bottom:13px;
    color:#ff6518;
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}

.service-lead-copy h2{
    max-width:520px;
    margin:0 0 18px;
    color:#111827;
    font-size:clamp(38px,4vw,55px);
    line-height:1.03;
    letter-spacing:-2.2px;
}

.service-lead-copy p{
    max-width:540px;
    margin:0;
    color:#667085;
    font-size:15px;
    line-height:1.8;
}

.service-lead-benefits{
    display:grid;
    gap:11px;
    margin-top:28px;
}

.service-lead-benefits div{
    display:flex;
    align-items:center;
    gap:11px;
    color:#344054;
    font-size:13px;
    font-weight:700;
}

.service-lead-benefits div:before{
    content:"✓";
    display:grid;
    place-items:center;
    flex:0 0 27px;
    width:27px;
    height:27px;
    border-radius:50%;
    background:#fff0e8;
    color:#ff6518;
    font-size:12px;
    font-weight:900;
}

.service-lead-card{
    padding:34px;
    border:1px solid #e3e8ef;
    border-radius:25px;
    background:#fff;
    box-shadow:
        0 25px 70px rgba(15,23,42,.09);
}

.service-form-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:26px;
    padding-bottom:22px;
    border-bottom:1px solid #edf0f4;
}

.service-form-heading h3{
    margin:0;
    color:#111827;
    font-size:23px;
    letter-spacing:-.6px;
}

.service-form-heading p{
    margin:6px 0 0;
    color:#98a2b3;
    font-size:11px;
    line-height:1.5;
}

.service-form-tag{
    flex:0 0 auto;
    padding:8px 11px;
    border-radius:999px;
    background:#fff1e9;
    color:#dc500d;
    font-size:9px;
    font-weight:900;
    letter-spacing:.04em;
}

.service-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
}

.service-form-field{
    display:grid;
    gap:7px;
}

.service-form-field.full{
    grid-column:1 / -1;
}

.service-form-field label{
    color:#344054;
    font-size:11px;
    font-weight:800;
}

.service-form-field input,
.service-form-field select,
.service-form-field textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid #dfe5ec;
    border-radius:11px;
    outline:none;
    background:#fff;
    color:#101828;
    font:inherit;
    font-size:13px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.service-form-field input,
.service-form-field select{
    min-height:49px;
    padding:0 14px;
}

.service-form-field textarea{
    min-height:145px;
    padding:14px;
    resize:vertical;
    line-height:1.6;
}

.service-form-field input:focus,
.service-form-field select:focus,
.service-form-field textarea:focus{
    border-color:#ff6518;
    box-shadow:0 0 0 4px rgba(255,101,24,.10);
}

.service-form-field input::placeholder,
.service-form-field textarea::placeholder{
    color:#a8b0bd;
}

.service-form-submit{
    width:100%;
    min-height:54px;
    margin-top:19px;
    border:0;
    border-radius:12px;
    cursor:pointer;
    background:#ff6518;
    color:#fff;
    font:inherit;
    font-size:13px;
    font-weight:900;
    box-shadow:
        0 12px 28px rgba(255,101,24,.25);
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.service-form-submit:hover{
    transform:translateY(-1px);
    background:#ed570e;
    box-shadow:
        0 16px 32px rgba(255,101,24,.30);
}

.service-form-foot{
    margin:13px 0 0;
    text-align:center;
    color:#98a2b3;
    font-size:9px;
    line-height:1.5;
}

.service-form-honeypot{
    position:absolute !important;
    left:-99999px !important;
    top:auto !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

@media(max-width:950px){

    .service-lead-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .service-lead-copy{
        position:static;
    }

}

@media(max-width:620px){

    .service-lead-section{
        padding:65px 0;
    }

    .service-lead-card{
        padding:23px 18px;
        border-radius:19px;
    }

    .service-form-grid{
        grid-template-columns:1fr;
    }

    .service-form-field.full{
        grid-column:auto;
    }

    .service-form-heading{
        display:block;
    }

    .service-form-tag{
        display:inline-block;
        margin-top:13px;
    }

}

/* QAMZU SERVICE FORM SMOOTH SCROLL */

html{
    scroll-behavior:smooth;
}

#project-form{
    scroll-margin-top:95px;
}