:root {
    --blue: #2878d9;
    --electric: #3695ff;
    --bg: #02070c;
    --panel: #07111a;
    --text: #f3f6fa;
    --muted: #a6b1c2
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden
}

.page-glow {
    position: absolute;
    pointer-events: none;
    filter: blur(100px);
    opacity: .2
}

.glow-one {
    width: 400px;
    height: 400px;
    background: #065ec4;
    top: 110px;
    right: -150px
}

.glow-two {
    width: 350px;
    height: 300px;
    background: #003d86;
    top: 1340px;
    left: -180px
}

.topbar,
.section,
.trusted,
.section-card,
.contact {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto
}

#logo {
    width: 100px;
    height: auto;
}

.topbar {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(122, 154, 192, .14);
    position: relative;
    z-index: 5
}

.brand {
    display: flex;
    justify-content: center;
    gap: 12px;
    color: #f7f8fb;
    text-decoration: none;
    font-family: Manrope;
    font-size: 27px;
    font-weight: 700
}
.brand > span:last-child {
    display: flex;
    align-items: center;
    line-height: 1;
}

.brand b,
h1 span,
h2 span {
    color: #2d84ed
}

.brand-mark {
    display: flex;
    align-items: center;
}

.brand-mark i {
    display: block;
    width: 13px;
    border: 1px solid #9fc6fa;
    background: repeating-linear-gradient(0deg, rgba(66, 146, 239, .8) 0 2px, transparent 2px 5px);
    box-shadow: inset 3px 0 rgba(255, 255, 255, .2)
}

.brand-mark i:first-child {
    height: 28px;
    opacity: .7
}

.brand-mark i:nth-child(2) {
    height: 45px
}

.brand-mark i:last-child {
    height: 34px;
    background: #267bd8
}

.nav {
    display: flex;
    align-items: center;
    gap: 31px
}

.nav a {
    text-decoration: none;
    color: #f3f6fa;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    position: relative
}

.nav a.active:after {
    content: '';
    position: absolute;
    width: 31px;
    height: 1px;
    background: #3192ff;
    left: 0;
    bottom: -14px
}

.outline-button,
.primary-button {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -.1px;
    padding: 15px 17px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px
}

.outline-button {
    color: #fff;
    border: 1px solid #1686ef;
    background: rgba(5, 15, 25, .3)
}

.outline-button span,
.primary-button span {
    font-size: 18px;
    line-height: 11px;
    color: #74baff
}

.header-cta {
    color: #3195fa;
    padding: 12px 16px
}

.hero {
    min-height: 400px;
    padding: 68px 0 28px;
    display: grid;
    grid-template-columns: 48% 52%;
    position: relative
}

.eyebrow {
    color: #3195fa;
    font-size: 11px;
    letter-spacing: .65px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 14px
}

.hero h1 {
    font-family: Manrope;
    font-size: 37px;
    line-height: 1.18;
    letter-spacing: -1.6px;
    margin: 0 0 18px
}

.hero-text {
    font-size: 15px;
    line-height: 1.65;
    color: #d7dce5;
    max-width: 470px;
    margin: 0 0 25px
}

.button-row {
    display: flex;
    gap: 22px
}

.primary-button {
    background: linear-gradient(105deg, #1961b4, #247fe3);
    color: white;
    box-shadow: 0 12px 25px rgba(28, 119, 224, .18)
}

.hero-visual {
    position: relative;
    height: 330px;
    margin-top: -42px
}

.orbit {
    position: absolute;
    border: 1px solid rgba(49, 138, 252, .55);
    border-radius: 50%;
    top: 55px;
    left: 63px
}

.orbit-a {
    width: 275px;
    height: 275px
}

.orbit-b {
    width: 310px;
    height: 310px;
    top: 37px;
    left: 46px;
    border-style: dotted;
    opacity: .55
}

.orbit-c {
    width: 244px;
    height: 244px;
    top: 70px;
    left: 79px;
    border-color: rgba(49, 138, 252, .35)
}

.buildings {
    position: absolute;
    left: 143px;
    top: 110px;
    width: 144px;
    height: 130px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    filter: drop-shadow(0 10px 12px #0064ba80)
}

.buildings i {
    display: block;
    width: 35px;
    background: repeating-linear-gradient(0deg, #6cb0fc 0 3px, transparent 3px 8px), linear-gradient(90deg, #152432, #4898f3);
    border: 1px solid #7ebcff
}

.buildings i:first-child {
    height: 70px;
    opacity: .7
}

.buildings i:nth-child(2) {
    height: 108px
}

.buildings i:last-child {
    height: 82px
}

.benefit {
    position: absolute;
    width: 135px;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1.45;
    font-weight: 600
}

.benefit em {
    font-style: normal;
    margin: auto auto 8px;
    border: 1px solid #2e91f7;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-size: 27px
}

.benefit span {
    display: block
}

.b-top-left {
    top: 20px;
    left: 5px
}

.b-top-right {
    top: 20px;
    right: 1px
}

.b-bottom-left {
    bottom: 0;
    left: 0
}

.b-bottom-right {
    bottom: 0;
    right: 0
}

.dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3d97fc
}

.dot-a {
    top: 90px;
    left: 115px
}

.dot-b {
    top: 123px;
    right: 109px
}

.dot-c {
    bottom: 84px;
    right: 137px
}

.trusted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    color: #778294;
    font-size: 22px;
    font-weight: 700;
    opacity: .9
}

.trusted>span {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    color: #c5ceda
}

.trusted .script {
    font-family: cursive;
    font-size: 20px
}

.trusted div span {
    font-size: 17px
}

.section-card {
    display: grid;
    background: linear-gradient(120deg, rgba(8, 19, 29, .95), rgba(3, 10, 16, .8));
    border: 1px solid rgba(113, 147, 184, .22);
    border-radius: 9px
}

.solutions {
    grid-template-columns: repeat(5, 1fr);
    padding: 31px 24px 25px
}

.solutions article {
    padding: 0 20px;
    border-right: 1px solid rgba(112, 143, 177, .2)
}

.solutions article:last-child {
    border: 0
}

.icon {
    color: #338df6;
    font-size: 34px;
    line-height: 35px;
    height: 50px
}

.solutions h3 {
    font-family: Manrope;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 13px
}

.solutions p,
.step p {
    font-size: 13px;
    color: #d0d7e0;
    line-height: 1.65;
    margin: 0 0 17px
}

.solutions a,
.tech>a {
    font-size: 12px;
    color: #37a0ff;
    text-decoration: none
}

.process {
    padding: 48px 0;
    display: grid;
    grid-template-columns: 29% 71%;
    gap: 28px
}

.process h2,
.results h2,
.contact h2 {
    font-family: Manrope;
    margin: 0 0 16px;
    font-size: 27px;
    line-height: 1.35;
    letter-spacing: -.8px
}

.process-copy>p:not(.eyebrow) {
    color: #ced6e0;
    font-size: 13px;
    line-height: 1.65;
    margin: 0 0 21px
}

.steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    position: relative;
    padding-top: 5px
}

.steps:before {
    content: '';
    height: 1px;
    border-top: 2px dotted #287cce;
    position: absolute;
    left: 49px;
    right: 48px;
    top: 36px
}

.step {
    position: relative;
    z-index: 1
}

.step-icon {
    width: 66px;
    height: 66px;
    border: 1px solid #278deb;
    border-radius: 50%;
    background: #050b11;
    display: grid;
    place-items: center;
    font-size: 35px;
    margin-bottom: 16px
}

.step small {
    color: #3a9dff;
    font-size: 12px
}

.step h3 {
    font-size: 13px;
    margin: 9px 0 6px
}

.step p {
    font-size: 12px;
    margin: 0
}

.tech {
    padding: 30px 32px 25px;
    text-align: center;
    display: block
}

.tech .eyebrow {
    margin-bottom: 18px
}

.tech-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 21px;
    color: #dce3ef;
    font-size: 18px
}

.tech-list span {
    display: flex;
    align-items: center;
    gap: 7px
}

.tech-list b {
    font-size: 15px;
    text-align: left;
    font-weight: 500;
    line-height: 1.1
}

.tech-list .net {
    font-size: 27px
}

.js {
    font-weight: 700;
    font-size: 13px !important;
    padding: 6px;
    background: #d9dfeb;
    color: #101721
}

.results {
    padding: 34px 0 27px
}

.results h2 {
    font-size: 26px
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px
}

.stats article {
    background: linear-gradient(135deg, #07111a, #050c12);
    border: 1px solid rgba(105, 139, 177, .17);
    border-radius: 7px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center
}

.stat-icon {
    font-size: 38px;
    color: #328fff;
    width: 44px;
    height: 44px;
    border: 2px solid #328fff;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.stats p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    color: #e4e9ef
}

.stats b {
    font-size: 15px
}

.contact {
    width: 100%;
    padding: 25px max(24px, calc((100% - 1180px)/2));
    background: linear-gradient(110deg, #1f66bf, #0e3f83 52%, #08213f);
    display: grid;
    grid-template-columns: 80px 1fr 440px;
    gap: 50px;
    align-items: center
}

.contact .contact-mark .brand-mark {
    filter: drop-shadow(0 5px 8px #0d355e)
}

.contact h2 {
    font-size: 24px;
    margin: 0 0 4px
}

.contact p {
    margin: 3px 0;
    font-size: 13px;
    line-height: 1.55
}

.contact-action .primary-button {
    background: linear-gradient(105deg, #2b82e4, #1964bd);
    width: 100%;
    margin-bottom: 18px
}

.contact-action>div {
    display: flex;
    justify-content: space-around
}

.contact-action>div a {
    font-size: 12px;
    color: white;
    text-decoration: none
}

.menu-toggle {
    display: none
}

.reveal {
    animation: fadeUp .7s both
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(max-width:900px) {
    .nav {
        gap: 14px
    }

    .header-cta {
        display: none
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 52px
    }

    .hero-visual {
        max-width: 530px;
        width: 100%;
        margin: 10px auto 0
    }

    .trusted {
        overflow: hidden;
        gap: 28px
    }

    .trusted div:nth-of-type(n+5) {
        display: none
    }

    .solutions {
        grid-template-columns: repeat(3, 1fr)
    }

    .solutions article:nth-child(3) {
        border: 0
    }

    .solutions article:nth-child(n+4) {
        margin-top: 22px
    }

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

    .process-copy {
        max-width: 440px
    }

    .contact {
        grid-template-columns: 65px 1fr
    }

    .contact-action {
        grid-column: 2
    }

    .stats {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:620px) {

    .topbar,
    .section,
    .trusted,
    .section-card {
        width: min(100% - 32px, 1180px)
    }

    .topbar {
        height: 72px
    }

    .brand {
        font-size: 22px
    }

    .brand-mark {
        transform: scale(.8);
        transform-origin: left bottom;
        width: 46px
    }

    .menu-toggle {
        display: block;
        background: none;
        border: 0;
        color: white;
        width: 30px
    }

    .menu-toggle span {
        display: block;
        height: 2px;
        background: #fff;
        margin: 6px 0
    }

    .nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        padding: 18px;
        background: #08121d;
        flex-direction: column;
        align-items: flex-start;
        border: 1px solid #193653
    }

    .nav.open {
        display: flex
    }

    .nav a.active:after {
        bottom: -5px
    }

    .hero {
        padding-top: 44px
    }

    .hero h1 {
        font-size: 31px
    }

    .button-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 11px
    }

    .hero-visual {
        height: 285px;
        transform: scale(.83);
        transform-origin: top center;
        margin-left: -8%
    }

    .trusted {
        height: 70px;
        gap: 21px
    }

    .trusted div:nth-of-type(n+4) {
        display: none
    }

    .trusted>span {
        font-size: 8px
    }

    .trusted div {
        font-size: 16px
    }

    .solutions {
        grid-template-columns: 1fr;
        padding: 14px
    }

    .solutions article,
    .solutions article:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid rgba(112, 143, 177, .2);
        padding: 17px 10px
    }

    .solutions article:last-child {
        border-bottom: 0
    }

    .solutions article:nth-child(n+4) {
        margin-top: 0
    }

    .process {
        padding: 39px 0
    }

    .steps {
        grid-template-columns: 1fr 1fr;
        gap: 22px
    }

    .steps:before {
        display: none
    }

    .step-icon {
        width: 54px;
        height: 54px;
        font-size: 29px
    }

    .tech {
        padding: 25px 15px
    }

    .tech-list {
        flex-wrap: wrap;
        gap: 17px;
        justify-content: center
    }

    .tech-list span {
        font-size: 14px
    }

    .tech-list b {
        font-size: 12px
    }

    .results h2 {
        font-size: 23px
    }

    .stats {
        grid-template-columns: 1fr
    }

    .contact {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 8px
    }

    .contact-mark {
        display: none
    }

    .contact-action {
        grid-column: 1
    }

    .contact-action>div {
        gap: 12px;
        justify-content: flex-start;
        flex-direction: column
    }

    .contact p br {
        display: none
    }
}