:root {
    --navy: #10264d;
    --blue: #1764e8;
    --ink: #142749;
    --muted: #536074;
    --pale: #eef8ff
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    font-family: "Vazirmatn",Tahoma,sans-serif;
    font-size: 14px;
    background: #fff
}

.site-header {
    height: 60px;
    background: #fff;
    position: relative;
    z-index: 5
}

.navbar {
    height: 100%
}

.brand {
    color: var(--ink) !important;
    font-size: 16px;
    line-height: 1.15
}

    .brand b {
        display: block;
        font-weight: 900
    }

    .brand small {
        display: block;
        font-size: 9px;
        color: #59677a;
        margin-top: 3px
    }

.brand-mark {
    font-size: 32px;
    color: #1764e8
}

.nav-link {
    font-size: 12px;
    font-weight: 600;
    color: #253247 !important;
    padding: 18px 8px !important;
    position: relative
}

    .nav-link.active:after {
        content: "";
        height: 2px;
        background: #1764e8;
        width: 24px;
        position: absolute;
        bottom: 7px;
        right: 8px;
        border-radius: 2px
    }

.account {
    font-size: 12px
}

    .account a {
        color: #182946;
        text-decoration: none;
        font-weight: 600
    }

.pill-btn {
    border-radius: 30px;
    padding: 7px 23px;
    background: #1764e8;
    font-size: 12px
}

.user-icon {
    display: none
}

.hero {
    background: #eff8ff;
    min-height: 394px;
    display: flex;
    align-items: center;
    overflow: hidden
}

    .hero > .container-xl {
        padding-top: 28px;
        padding-bottom: 28px
    }

.hero-copy {
    text-align: right;
    padding-right: 36px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #2456a0;
    background: #e0efff;
    border-radius: 30px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px
}

    .eyebrow i {
        background: #1764e8;
        color: #fff;
        padding: 4px 8px;
        border-radius: 20px
    }

.hero h1 {
    font-size: 34px;
    line-height: 1.22;
    font-weight: 900;
    color: #101e3b;
    margin: 0 0 14px
}

    .hero h1 span {
        color: #2366d2;
        font-size: 30px;
        direction: ltr;
        display: inline-block
    }

.hero-sub {
    color: #46556c;
    font-size: 15px;
    margin-bottom: 20px
}

.tech-list {
    display: flex;
    align-items: center;
    gap: 17px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 27px
}

    .tech-list span {
        white-space: nowrap
    }

        .tech-list span i {
            color: #2269d3;
            font-size: 15px;
            margin-left: 5px
        }

    .tech-list > i {
        color: #aab7c9;
        font-style: normal
    }

.hero-actions {
    display: flex;
    gap: 11px
}

.action-main, .action-outline {
    border-radius: 30px;
    padding: 11px 22px;
    font-weight: 700;
    font-size: 13px
}

.action-main {
    background: #1764e8;
    border-color: #1764e8
}

    .action-main i {
        margin-right: 8px
    }

.action-outline {
    color: #1f60bb;
    border: 1px solid #83a8dc;
    background: #fff
}

    .action-outline i {
        margin-left: 7px
    }

.hero-art {
    min-height: 340px;
    display: flex;
    justify-content: center;
    align-items: center
}

.desk-scene {
    position: relative;
    width: min(100%,480px);
    height: 315px
}

.browser-window {
    position: absolute;
    left: 104px;
    top: 45px;
    width: 204px;
    height: 156px;
    background: white;
    border: 1px solid #a7c8ee;
    border-radius: 10px;
    box-shadow: 0 12px 28px #19498524;
    overflow: hidden;
    transform: perspective(650px) rotateY(-5deg)
}

.browser-top {
    height: 18px;
    background: #1b4eaa;
    color: white;
    font-size: 7px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px
}

    .browser-top i {
        width: 4px;
        height: 4px;
        background: #b9d8ff;
        border-radius: 50%
    }

    .browser-top b {
        margin: auto;
        font-size: 7px
    }

    .browser-top span {
        font-size: 7px
    }

.dashboard {
    display: flex;
    height: calc(100% - 18px)
}

    .dashboard aside {
        width: 24px;
        background: #f1f6fd;
        display: flex;
        flex-direction: column;
        gap: 13px;
        padding: 10px 7px;
        color: #3978cf;
        font-size: 8px
    }

.dash-content {
    padding: 8px;
    flex: 1
}

.dash-title {
    font-size: 8px;
    font-weight: 700
}

    .dash-title span {
        float: left;
        color: #a6b3c4
    }

.stats {
    display: flex;
    gap: 5px;
    margin: 7px 0
}

    .stats i {
        height: 22px;
        flex: 1;
        border-radius: 3px;
        background: linear-gradient(135deg,#e4f1ff,#f5f9ff)
    }

.chart {
    height: 56px;
    border: 1px solid #edf1f7;
    position: relative
}

    .chart svg, .line-chart svg {
        position: absolute;
        inset: 4px;
        width: calc(100% - 8px);
        height: 90%
    }

    .chart polyline, .line-chart polyline {
        fill: none;
        stroke: #2875df;
        stroke-width: 3
    }

.bars {
    position: absolute;
    inset: auto 8px 3px;
    display: flex;
    gap: 5px;
    height: 30px;
    align-items: end
}

    .bars i {
        width: 12%;
        background: #d7e9ff;
        border-radius: 2px 2px 0 0;
        height: 40%
    }

        .bars i:nth-child(2n) {
            height: 80%
        }

.table {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 3px;
    margin-top: 6px
}

    .table i, .rows i {
        height: 4px;
        background: #e8eef6;
        border-radius: 4px
    }

.float-tech {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    color: #273954
}

.tech-logo {
    height: 54px;
    width: 54px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 16px #23456e18;
    color: #1764d9;
    font-weight: 900;
    font-size: 34px
}

.react {
    left: 28px;
    top: 33px
}

    .react .tech-logo {
        background: #2366d3;
        color: #82e5ff
    }

.vue {
    left: 120px;
    top: 7px
}

    .vue .tech-logo {
        color: #36a883;
        font-size: 39px
    }

.node {
    right: 22px;
    top: 33px
}

    .node .tech-logo {
        background: #50a83e;
        color: #efffe7;
        font-size: 22px
    }

.laptop {
    position: absolute;
    z-index: 2;
    width: 312px;
    left: 74px;
    top: 117px;
    transform: rotate(-5deg)
}

.laptop-screen {
    height: 177px;
    border: 7px solid #193252;
    border-bottom-width: 10px;
    border-radius: 13px 13px 7px 7px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 11px 25px #18355a35
}

.laptop-bar {
    height: 18px;
    background: #1953b2;
    color: #fff;
    padding: 2px 7px;
    font-size: 7px
}

    .laptop-bar span {
        float: left
    }

.laptop-body {
    display: flex;
    height: calc(100% - 18px)
}

.side-menu {
    width: 51px;
    background: #163968;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 13px 9px
}

    .side-menu i {
        height: 4px;
        width: 30px;
        border-radius: 4px;
        background: #7ba6dd
    }

.laptop-data {
    padding: 9px;
    flex: 1;
    font-size: 8px
}

    .laptop-data strong {
        font-size: 8px
    }

.mini-cards {
    display: flex;
    gap: 5px;
    margin: 7px 0
}

    .mini-cards i {
        height: 25px;
        flex: 1;
        background: #eef5ff;
        border-radius: 3px
    }

.line-chart {
    height: 48px;
    border: 1px solid #edf0f5;
    position: relative
}

.rows {
    display: flex;
    gap: 4px;
    flex-direction: column;
    margin-top: 5px
}

    .rows i {
        height: 3px
    }

.laptop-base {
    height: 12px;
    margin: 0 -16px;
    background: linear-gradient(#b7c2d0,#60738b);
    clip-path: polygon(5% 0,95% 0,100% 100%,0 100%);
    border-radius: 0 0 10px 10px
}

.plant {
    position: absolute;
    left: 2px;
    bottom: 24px;
    z-index: 1;
    text-align: center;
    font-size: 11px
}

    .plant span {
        display: block;
        font-size: 62px;
        filter: saturate(.9)
    }

    .plant i {
        display: block;
        width: 43px;
        height: 35px;
        margin: -8px auto 1px;
        background: linear-gradient(100deg,#c9deef,#fff);
        border-radius: 3px 3px 13px 13px;
        box-shadow: 0 3px 8px #294a721a
    }

    .plant b {
        font-size: 10px
    }

.coffee {
    position: absolute;
    right: 20px;
    bottom: 32px;
    width: 46px;
    height: 62px;
    background: linear-gradient(90deg,#425a75,#1b3659 30%,#47607c);
    border-radius: 7px 7px 14px 14px;
    z-index: 1
}

    .coffee span {
        position: absolute;
        right: -15px;
        top: 13px;
        width: 19px;
        height: 30px;
        border: 5px solid #425a75;
        border-left: 0;
        border-radius: 0 15px 15px 0
    }

    .coffee i {
        height: 5px;
        display: block;
        background: #8da3bd;
        border-radius: 50%;
        margin-top: 4px
    }

.desk-shadow {
    position: absolute;
    bottom: 18px;
    left: 20px;
    right: 4px;
    height: 19px;
    background: #c9dfef;
    filter: blur(14px)
}

.section-pad {
    padding: 22px 0 27px
}

.section-heading {
    text-align: center;
    margin-bottom: 24px
}

    .section-heading h2 {
        font-size: 20px;
        font-weight: 900;
        color: #172944;
        margin: 0 0 8px
    }

    .section-heading p {
        font-size: 11px;
        color: #576578;
        margin: 0
    }

.skill-grid {
    padding: 0 4px
}

.skill-card, .benefit-card {
    height: 142px;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    box-shadow: 0 4px 12px #20334d0a;
    text-align: center;
    padding: 0 7px 10px;
    background: #fff
}

.ring {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: -3px auto 8px;
    background: conic-gradient(var(--ring) var(--value),#e8edf3 0);
    display: grid;
    place-items: center;
    position: relative
}

    .ring:before {
        content: "";
        position: absolute;
        inset: 6px;
        background: #fff;
        border-radius: 50%
    }

    .ring span {
        position: relative;
        font-size: 14px;
        font-weight: 800;
        color: #183253
    }

.blue {
    --ring: #2269e7
}

.green {
    --ring: #23a777
}

.purple {
    --ring: #9253d3
}

.orange {
    --ring: #f0a332
}

.teal {
    --ring: #20aeb3
}

.skill-card > i {
    font-size: 16px
}

.skill-card h3, .use-card h3, .benefit-card h3 {
    font-size: 12px;
    font-weight: 800;
    margin: 3px 0 6px;
    color: #1d2b42
}

.skill-card p, .use-card p, .benefit-card p {
    font-size: 10px;
    line-height: 1.65;
    color: #556174;
    margin: 0
}

.blue-t {
    color: #1b67dc
}

.green-t {
    color: #20a676
}

.purple-t {
    color: #9253d3
}

.orange-t {
    color: #eea22d
}

.teal-t {
    color: #24aeb2
}

.uses {
    background: #eff9ff;
    padding-top: 26px;
    padding-bottom: 31px
}

.use-card {
    height: 192px;
    text-align: center;
    border-radius: 18px;
    padding: 12px 8px;
    background: white;
    box-shadow: 0 4px 16px #27445d09
}

.illustration {
    height: 95px;
    margin-bottom: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #216be0
}

.saas > i {
    font-size: 55px;
    filter: drop-shadow(0 5px 3px #b1cfff)
}

.saas > b {
    position: absolute;
    color: white;
    background: #327be7;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 14px
}

.mini-node {
    position: absolute;
    bottom: 7px;
    left: 20%;
    right: 20%;
    font-size: 14px;
    color: #2780ed
}

.cloud > i {
    font-size: 57px;
    color: #3282ee;
    filter: drop-shadow(0 6px 4px #bfdbff)
}

.server-stack {
    position: absolute;
    font-size: 19px;
    line-height: .9;
    color: #244d91;
    text-shadow: 0 2px #96b7ed
}

.shop .bi-window {
    font-size: 62px;
    color: #347fe9
}

.shop .bi-cart-fill {
    position: absolute;
    right: 25%;
    bottom: 9px;
    font-size: 37px;
    background: white;
    padding: 2px;
    color: #2872df
}

.gear > i {
    font-size: 67px;
    color: #2872db
}

.gear > span {
    position: absolute;
    font-size: 12px;
    color: #2872db;
    left: 8%;
    right: 8%;
    top: 40%
}

.benefits {
    padding-top: 22px;
    padding-bottom: 27px
}

    .benefits .section-heading {
        margin-bottom: 14px
    }

        .benefits .section-heading h2 {
            margin-bottom: 4px
        }

.heading-underline {
    display: block;
    width: 23px;
    height: 2px;
    background: #2167d8;
    margin: auto;
    border-radius: 5px
}

.benefit-card {
    height: 111px;
    padding-top: 11px
}

    .benefit-card > i {
        font-size: 27px;
        display: block;
        margin-bottom: 4px
    }

    .benefit-card h3 {
        font-size: 11px
    }

    .benefit-card p {
        font-size: 9px
    }

.cta {
    background: radial-gradient(ellipse at 78% 50%,#174985 0,#0e3265 38%,#0b2753 75%);
    color: white;
    min-height: 188px;
    overflow: hidden;
    padding: 21px 0 17px
}

    .cta small {
        font-size: 11px;
        color: #d5e6ff
    }

    .cta h2 {
        font-size: 19px;
        font-weight: 900;
        margin: 5px 0 7px
    }

    .cta p {
        font-size: 10px;
        color: #c8d8ee;
        margin-bottom: 17px
    }

.cta-actions {
    display: flex;
    gap: 10px
}

.cta .action-main {
    padding: 10px 20px
}

.action-outline.light {
    background: transparent;
    border-color: #56749d;
    color: #dceaff
}

.cta-art {
    position: relative;
    height: 140px
}

.future {
    position: absolute;
    left: 4%;
    top: 20px;
    font-family: cursive;
    font-size: 19px;
    line-height: 1.5;
    color: #d4e7ff;
    transform: rotate(-7deg)
}

.code-laptop {
    position: absolute;
    right: 10%;
    top: 23px;
    width: 170px;
    height: 104px;
    background: #102442;
    border: 6px solid #071a35;
    border-radius: 9px;
    box-shadow: 0 15px 22px #05162c80;
    transform: perspective(400px) rotateY(-12deg);
    color: #6ba8f1;
    font: 10px monospace;
    padding: 10px
}

    .code-laptop b {
        position: absolute;
        right: -10px;
        bottom: -22px;
        font-size: 21px;
        color: #74adf5
    }

.cta-plant {
    position: absolute;
    right: 0;
    bottom: -8px;
    font-size: 62px;
    filter: brightness(.7)
}

@media(min-width:1200px) {
    .container-xl {
        max-width: 1160px
    }
}

@media(max-width:991px) {
    .site-header {
        height: auto;
        min-height: 60px
    }

    .navbar-collapse {
        background: white;
        padding: 12px 8px;
        box-shadow: 0 8px 16px #17365c12
    }

    .navbar-nav {
        align-items: stretch !important
    }

    .nav-link {
        padding: 9px !important
    }

        .nav-link.active:after {
            display: none
        }

    .account {
        padding: 10px 0
    }

    .hero {
        padding: 20px 0
    }

    .hero-copy {
        padding: 0 20px
    }

    .hero-art {
        order: 2
    }

    .hero .row {
        flex-direction: column-reverse
    }

    .desk-scene {
        transform: scale(.9)
    }

    .skill-card {
        height: 150px
    }

    .uses {
        padding-top: 28px
    }

    .benefit-card {
        height: 125px
    }
}

@media(max-width:575px) {
    .hero h1 {
        font-size: 29px
    }

        .hero h1 span {
            font-size: 25px
        }

    .hero-sub {
        font-size: 13px
    }

    .tech-list {
        gap: 8px;
        font-size: 10px;
        flex-wrap: wrap
    }

    .hero-actions {
        flex-wrap: wrap
    }

    .action-main, .action-outline {
        font-size: 11px;
        padding: 10px 14px
    }

    .desk-scene {
        transform: scale(.72);
        transform-origin: top center;
        margin-bottom: -75px;
        width: 480px;
        max-width: none
    }

    .hero-art {
        min-height: 245px;
        overflow: hidden
    }

    .section-heading h2 {
        font-size: 17px
    }

    .section-heading p {
        font-size: 10px
    }

    .skill-card {
        height: 148px
    }

    .ring {
        width: 68px;
        height: 68px
    }

    .use-card {
        height: 184px
    }

    .illustration {
        height: 83px
    }

    .use-card h3 {
        font-size: 10px
    }

    .use-card p {
        font-size: 9px
    }

    .benefit-card {
        height: 130px
    }

        .benefit-card h3 {
            font-size: 10px
        }

    .cta h2 {
        font-size: 16px
    }

    .cta-art {
        height: 120px
    }

    .future {
        left: 7%
    }
}

/* Keep skill card copy inside the cards at every responsive width. */
.skill-card {
    height: 100%;
    min-height: 174px;
    padding: 8px 10px 14px;
    overflow-wrap: anywhere;
}

    .skill-card .ring {
        margin-top: 0;
    }

    .skill-card h3 {
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .skill-card p {
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

@media (max-width: 575px) {
    .skill-card {
        min-height: 178px;
    }
}