:root {
    --bg:#02060b;
    --bg-soft:#050b12;
    --panel:#08121d;
    --panel-2:#0c1825;

    --white:#f7f9fc;
    --text:#d0d8e3;
    --muted:#8b9aab;

    --blue:#1683ff;
    --cyan:#38cfff;

    --border:rgba(255,255,255,.095);

    --shadow:
        0 30px 70px rgba(0,0,0,.28);
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;

    background:var(--bg);

    color:var(--text);

    font-family:
        "Segoe UI Variable",
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;

    font-size:16px;

    line-height:1.65;

    -webkit-font-smoothing:antialiased;
}

a {
    color:inherit;
    text-decoration:none;
}

img {
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.container {
    width:min(1240px,calc(100% - 48px));
    margin:auto;
}


/* =====================================================
   HEADER
===================================================== */

.header {
    position:sticky;
    top:0;

    z-index:1000;

    background:
        rgba(2,6,11,.88);

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid var(--border);
}

.nav {
    width:min(1420px,calc(100% - 48px));

    height:86px;

    margin:auto;

    display:flex;
    align-items:center;
}


/* =====================================================
   BRAND
===================================================== */

.brand {
    min-width:265px;

    display:flex;
    align-items:center;

    gap:13px;
}

.brand-icon {
    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    border-radius:14px;

    color:white;

    font-size:17px;
    font-weight:900;

    letter-spacing:-1px;

    background:
        linear-gradient(
            145deg,
            #12253a,
            #07111c
        );

    border:
        1px solid rgba(56,207,255,.2);

    box-shadow:
        inset 0 0 20px rgba(22,131,255,.06),
        0 0 22px rgba(22,131,255,.06);
}

.brand-identity {
    display:flex;
    flex-direction:column;
}

.brand-identity strong {
    color:#f4f7fb;

    font-size:18px;
    font-weight:700;

    line-height:1.05;

    letter-spacing:-.45px;
}

.brand-identity strong span {
    color:var(--cyan);
}

.brand-identity small {
    margin-top:5px;

    color:#65788e;

    font-size:7px;
    font-weight:700;

    letter-spacing:2.4px;
}


/* =====================================================
   NAV
===================================================== */

.desktop-nav {
    margin-left:auto;

    display:flex;

    gap:30px;
}

.desktop-nav a {
    height:86px;

    display:flex;
    align-items:center;

    color:#aeb9c7;

    font-size:13px;
    font-weight:500;

    border-bottom:
        2px solid transparent;

    transition:.2s;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color:white;

    border-color:
        var(--blue);
}

.account-nav {
    margin-left:40px;

    display:flex;
    align-items:center;

    gap:11px;
}

.login {
    min-height:44px;

    padding:0 18px;

    display:flex;
    align-items:center;

    border-radius:9px;

    border:
        1px solid #33485f;

    color:white;

    font-size:12px;
    font-weight:600;
}

.mobile-menu,
.mobile-menu-button {
    display:none;
}


/* =====================================================
   BUTTONS
===================================================== */

.button,
.button-secondary {
    min-height:52px;

    padding:0 25px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    border-radius:10px;

    font-size:13px;

    font-weight:650;

    transition:
        .2s ease;
}

.button {
    color:white;

    background:
        linear-gradient(
            135deg,
            #1989ff,
            #0766e7
        );

    box-shadow:
        0 14px 32px
        rgba(22,131,255,.17);
}

.button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 38px
        rgba(22,131,255,.26);
}

.button.compact {
    min-height:44px;

    padding:0 19px;

    font-size:12px;
}

.button-secondary {
    color:#e9eef5;

    background:
        rgba(5,15,26,.62);

    border:
        1px solid #38688f;
}


/* =====================================================
   TYPOGRAPHY
===================================================== */

.section-label {
    color:#4ebfff;

    font-size:11px;
    font-weight:800;

    letter-spacing:2.7px;

    text-transform:uppercase;
}

.section h2,
.cloud-content h2 {
    margin:
        15px 0 0;

    color:white;

    font-size:
        clamp(42px,4.25vw,62px);

    font-weight:650;

    line-height:1.04;

    letter-spacing:
        -2.6px;
}

.section-copy p,
.section-heading p,
.center-heading p {
    color:var(--muted);

    font-size:16px;

    line-height:1.8;
}

.large-copy {
    font-size:18px !important;

    color:#aab6c5 !important;
}


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

.hero {
    height:720px;

    position:relative;

    overflow:hidden;
}

.hero-picture {
    position:absolute;

    inset:0;
}

.hero-picture img {
    object-position:
        center center;
}

.hero-overlay {
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,6,11,.99) 0%,
            rgba(2,6,11,.95) 23%,
            rgba(2,6,11,.70) 43%,
            rgba(2,6,11,.15) 69%,
            rgba(2,6,11,.01) 100%
        );
}

.hero-inner {
    height:720px;

    position:relative;

    z-index:2;

    display:flex;
    align-items:center;
}

.hero-copy {
    max-width:660px;
}

.eyebrow {
    color:#64c8ff;

    font-size:11px;

    font-weight:750;

    letter-spacing:2.8px;
}

.hero h1 {
    margin:
        18px 0 0;

    color:white;

    max-width:680px;

    font-size:
        clamp(58px,6vw,86px);

    font-weight:650;

    line-height:.98;

    letter-spacing:
        -4px;
}

.hero h1 span {
    display:block;

    color:var(--blue);
}

.hero-lead {
    max-width:590px;

    margin-top:26px;

    color:#b4bfcc;

    font-size:19px;

    line-height:1.65;
}

.hero-actions {
    margin-top:32px;

    display:flex;

    gap:12px;
}

.hero-industries {
    margin-top:38px;

    display:flex;
    flex-wrap:wrap;

    gap:9px;
}

.hero-industries span {
    padding:7px 13px;

    border-radius:30px;

    color:#8496ab;

    background:
        rgba(9,20,33,.72);

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

    font-size:10px;

    font-weight:650;

    letter-spacing:.65px;
}


/* =====================================================
   GENERIC SECTIONS
===================================================== */

.section {
    padding:
        125px 0;
}

.split {
    display:grid;

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

    gap:90px;

    align-items:center;
}

.image-panel {
    height:500px;

    overflow:hidden;

    border-radius:23px;

    border:
        1px solid var(--border);

    box-shadow:var(--shadow);
}

.tall-image {
    height:570px;
}


/* =====================================================
   COMPANY CAPABILITIES
===================================================== */

.company-capabilities {
    margin-top:35px;

    display:grid;

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

    gap:12px;
}

.company-capabilities article {
    min-height:145px;

    padding:22px;

    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            #091420,
            #06101a
        );

    border:
        1px solid var(--border);
}

.company-capabilities span {
    color:#42607b;

    font-size:10px;

    font-weight:800;
}

.company-capabilities strong {
    display:block;

    margin-top:15px;

    color:white;

    font-size:17px;
}

.company-capabilities p {
    margin:
        5px 0 0;

    color:#8192a6;

    font-size:13px;

    line-height:1.55;
}


/* =====================================================
   PRODUCTS
===================================================== */

.products {
    background:var(--bg-soft);

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);
}

.section-heading {
    margin-bottom:55px;

    display:grid;

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

    gap:90px;

    align-items:end;
}

.section-intro {
    margin:0;

    max-width:520px;
}

.product-grid {
    display:grid;

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

    gap:18px;
}

.product {
    min-height:490px;

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#07111b;

    border:
        1px solid var(--border);
}

.product-main {
    display:grid;

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

.product-main picture {
    min-height:490px;
}

.product-main-copy {
    padding:48px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.product-category {
    color:var(--cyan);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.8px;
}

.product h3 {
    margin:
        9px 0 14px;

    color:white;

    font-size:32px;

    font-weight:650;

    letter-spacing:-1px;
}

.product p {
    color:#99a8ba;

    font-size:14px;

    line-height:1.7;
}

.tags {
    margin:
        13px 0 24px;

    display:flex;

    flex-wrap:wrap;

    gap:7px;
}

.tags span {
    padding:7px 11px;

    border-radius:20px;

    color:#8ea0b5;

    font-size:10px;

    border:
        1px solid var(--border);
}

.development {
    width:fit-content;

    padding:7px 10px;

    border-radius:6px;

    color:#70859d;

    border:
        1px solid var(--border);

    font-size:8px;

    font-weight:800;

    letter-spacing:1.4px;
}

.product-main-copy a {
    margin-top:25px;

    color:#3db6ff;

    font-size:12px;

    font-weight:650;
}

.image-product picture {
    position:absolute;
    inset:0;
}

.image-gradient {
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(2,6,11,.98) 5%,
            rgba(2,6,11,.48) 58%,
            rgba(2,6,11,.04)
        );
}

.image-product-copy {
    position:absolute;

    left:28px;
    right:28px;
    bottom:30px;
}


/* =====================================================
   SOLUTIONS
===================================================== */

.center-heading {
    max-width:800px;

    margin:
        0 auto 60px;

    text-align:center;
}

.solution-layout {
    display:grid;

    grid-template-columns:
        1.16fr .84fr;

    gap:25px;
}

.solution-image {
    min-height:560px;

    overflow:hidden;

    border-radius:23px;

    border:
        1px solid var(--border);

    box-shadow:var(--shadow);
}

.solution-cards {
    display:grid;

    grid-template-columns:
        1fr;

    gap:12px;
}

.solution-cards article {
    min-height:128px;

    padding:22px 24px;

    display:grid;

    grid-template-columns:
        58px 1fr;

    gap:17px;

    align-items:center;

    border-radius:15px;

    background:#07111b;

    border:
        1px solid var(--border);
}

.solution-icon {
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    border-radius:13px;

    color:var(--cyan);

    background:#0c2034;

    font-size:23px;
}

.solution-cards span {
    color:#52708b;

    font-size:9px;

    font-weight:800;
}

.solution-cards strong {
    display:block;

    margin-top:3px;

    color:white;

    font-size:17px;
}

.solution-cards p {
    margin:4px 0 0;

    color:#8192a6;

    font-size:13px;
}


/* =====================================================
   TECHNOLOGY
===================================================== */

.technology {
    background:var(--bg-soft);

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);
}

.technology-header {
    margin-bottom:55px;

    display:grid;

    grid-template-columns:
        1.15fr .85fr;

    gap:80px;

    align-items:end;
}

.technology-header h2 {
    margin:
        15px 0 0;

    color:white;

    font-size:
        clamp(42px,4.25vw,62px);

    line-height:1.04;

    letter-spacing:-2.6px;
}

.technology-header > p {
    margin:0;

    color:#8b9aab;

    font-size:17px;

    line-height:1.75;
}

.technology-layout {
    display:grid;

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

    gap:24px;
}

.technology-image {
    min-height:600px;

    overflow:hidden;

    border-radius:23px;

    border:
        1px solid var(--border);

    box-shadow:var(--shadow);
}

.technology-steps {
    display:grid;

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

    gap:14px;
}

.technology-steps article {
    min-height:285px;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            #0b1724,
            #07101a
        );

    border:
        1px solid var(--border);
}

.tech-number {
    color:#40bcff;

    font-size:13px;

    font-weight:800;
}

.technology-steps h3 {
    margin:
        0 0 8px;

    color:white;

    font-size:21px;

    font-weight:650;
}

.technology-steps p {
    margin:0;

    color:#8798ab;

    font-size:14px;

    line-height:1.65;
}


/* =====================================================
   SECURITY
===================================================== */

.security {
    background:#02070c;
}

.security-list {
    margin-top:32px;

    display:grid;

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

    gap:10px;
}

.security-list span {
    padding:15px;

    border-radius:10px;

    color:#b2bdc9;

    background:#08121c;

    border:
        1px solid var(--border);

    font-size:13px;
}

.security-image {
    height:540px;
}


/* =====================================================
   CLOUD
===================================================== */

.cloud-section {
    height:580px;

    position:relative;

    overflow:hidden;
}

.cloud-background {
    position:absolute;

    inset:0;
}

.cloud-overlay {
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,6,11,.97),
            rgba(2,6,11,.70) 44%,
            rgba(2,6,11,.10)
        );
}

.cloud-content {
    height:580px;

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;
}

.cloud-content h2 {
    max-width:600px;
}

.cloud-content > p {
    max-width:580px;

    color:#afbac7;

    font-size:17px;

    line-height:1.75;
}

.cloud-flow {
    margin-top:24px;

    padding:16px 20px;

    display:flex;

    gap:17px;

    align-items:center;

    border-radius:10px;

    background:
        rgba(5,14,24,.8);

    border:
        1px solid var(--border);

    backdrop-filter:blur(12px);
}

.cloud-flow span {
    color:white;

    font-size:11px;

    font-weight:650;
}

.cloud-flow i {
    color:var(--cyan);

    font-style:normal;
}


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

.app-section {
    background:var(--bg-soft);
}

.dashboard {
    height:465px;
}

.app-buttons {
    margin-top:29px;

    display:flex;

    gap:11px;
}


/* =====================================================
   FOOTER
===================================================== */

.footer {
    padding:
        75px 0 28px;

    background:#010305;

    border-top:
        1px solid var(--border);
}

.footer-grid {
    display:grid;

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

    gap:60px;
}

.footer-brand p {
    color:#66798e;

    font-size:13px;
}

.footer-grid > div:not(:first-child) {
    display:flex;

    flex-direction:column;

    gap:10px;
}

.footer-grid strong {
    margin-bottom:6px;

    color:#bdc7d2;

    font-size:13px;
}

.footer-grid a {
    color:#718296;

    font-size:12px;
}

.footer-grid a:hover {
    color:white;
}

.footer-bottom {
    margin-top:55px;

    padding-top:22px;

    color:#46596e;

    font-size:10px;

    border-top:
        1px solid rgba(255,255,255,.05);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1100px) {

    .desktop-nav,
    .account-nav {
        display:none;
    }

    .mobile-menu-button {
        margin-left:auto;

        display:block;

        padding:8px;

        color:white;

        background:transparent;

        border:0;

        font-size:22px;
    }

    .mobile-menu.open {
        display:flex;

        flex-direction:column;

        padding:
            16px 25px 25px;

        background:#04090f;
    }

    .mobile-menu a {
        padding:11px 0;

        border-bottom:
            1px solid var(--border);
    }

    .product-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .product-main {
        grid-column:
            1 / -1;
    }

    .technology-layout {
        grid-template-columns:1fr;
    }

    .technology-image {
        min-height:480px;
    }

}


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

@media(max-width:700px) {

    .container,
    .nav {
        width:
            calc(100% - 28px);
    }

    .nav {
        height:76px;
    }

    .brand {
        min-width:auto;
    }

    .brand-icon {
        width:45px;
        height:45px;

        font-size:14px;
    }

    .brand-identity strong {
        font-size:15px;
    }

    .hero {
        height:720px;
    }

    .hero-inner {
        height:720px;

        align-items:flex-start;
    }

    .hero-picture img {
        object-position:
            62% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2,6,11,.99),
                rgba(2,6,11,.81)
            );
    }

    .hero-copy {
        padding-top:72px;
    }

    .hero h1 {
        font-size:49px;

        letter-spacing:-2.7px;
    }

    .hero-lead {
        font-size:16px;
    }

    .hero-actions,
    .app-buttons {
        flex-direction:column;
    }

    .hero-actions a,
    .app-buttons a {
        width:100%;
    }

    .hero-industries {
        margin-top:27px;
    }

    .section {
        padding:85px 0;
    }

    .split,
    .section-heading,
    .technology-header,
    .solution-layout {
        grid-template-columns:1fr;

        gap:35px;
    }

    .section h2,
    .technology-header h2,
    .cloud-content h2 {
        font-size:38px;

        letter-spacing:-1.8px;
    }

    .company-capabilities,
    .technology-steps,
    .security-list {
        grid-template-columns:1fr;
    }

    .image-panel,
    .tall-image {
        height:330px;
    }

    .product-grid {
        grid-template-columns:1fr;
    }

    .product-main {
        display:block;
    }

    .product-main picture {
        display:block;

        height:340px;

        min-height:340px;
    }

    .product-main-copy {
        padding:30px;
    }

    .image-product {
        min-height:410px;
    }

    .solution-image {
        min-height:330px;
    }

    .solution-cards {
        grid-template-columns:1fr;
    }

    .technology-image {
        min-height:330px;
    }

    .technology-steps article {
        min-height:210px;
    }

    .security-image {
        height:330px;
    }

    .cloud-section,
    .cloud-content {
        height:540px;
    }

    .cloud-background img {
        object-position:
            67% center;
    }

    .cloud-flow {
        flex-wrap:wrap;
    }

    .dashboard {
        height:310px;
    }

    .footer-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }

}