/* ==========================================================
   ART SYSTEM GROUP
   REDESIGN
========================================================== */

:root {
    --blue: #0787ff;
    --blue-light: #40a9ff;

    --navy: #071522;
    --navy-2: #091b2b;
    --navy-3: #0d2234;

    --ink: #0b1723;
    --text: #182533;
    --muted: #687888;

    --white: #ffffff;
    --off-white: #f5f8fb;

    --line: #dce5ed;

    --green: #25d18a;

    --max-width: 1600px;
}


/* ==========================================================
   RESET
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    margin: 0;

    font-family: "Manrope", Arial, sans-serif;

    color: var(--text);
    background: var(--white);

    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

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

button {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}


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

.site-header {
    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;

    transform: none;

    width: 100%;
    max-width: none;

    height: 88px;

    padding: 0 5%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: white;

    background:
            rgba(3, 14, 25, .88);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-bottom:
            1px solid rgba(255, 255, 255, .07);

    box-shadow:
            0 8px 30px rgba(0, 0, 0, .15);
}


/* BRAND */

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

    gap: 13px;
}

.brand-symbol {
    position: relative;

    width: 38px;
    height: 38px;

    display: block;
}

.brand-symbol i {
    position: absolute;

    width: 13px;
    height: 34px;

    background:
            linear-gradient(
                    180deg,
                    #3eacff,
                    #087fee
            );

    transform: skew(-32deg);
}

.brand-symbol i:first-child {
    left: 7px;
}

.brand-symbol i:last-child {
    right: 7px;

    transform: skew(32deg);
}

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

.brand-name strong {
    font-size: 18px;

    letter-spacing: .5px;

    line-height: 1;
}

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

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

    letter-spacing: 3.6px;
}


/* NAV */

.desktop-nav {
    display: flex;
    align-items: center;

    gap: 42px;
}

.desktop-nav a {
    position: relative;

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

    opacity: .9;
}

.desktop-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--blue);

    transition: width .25s ease;
}

.desktop-nav a:hover::after {
    width: 100%;
}


/* HEADER CONTACT */

.header-actions {
    display: flex;
    align-items: center;

    gap: 20px;
}

.header-contact {
    padding: 14px 24px;

    display: flex;
    align-items: center;

    gap: 22px;

    background: var(--blue);

    border-radius: 3px;

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

    transition:
            background .2s,
            transform .2s;
}

.header-contact:hover {
    background: #006fd7;

    transform: translateY(-1px);
}


/* MOBILE BUTTON */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    padding: 10px;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    height: 2px;

    margin: 5px 0;

    background: white;

    transition: .25s;
}


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

.mobile-menu {
    position: fixed;

    z-index: 90;

    inset: 0;

    padding: 110px 7% 40px;

    display: none;
    flex-direction: column;

    gap: 0;

    color: white;

    background:
            radial-gradient(
                    circle at 90% 10%,
                    rgba(8, 127, 238, .25),
                    transparent 35%
            ),
            #071522;
}

.mobile-menu.open {
    display: flex;
}

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

    border-bottom:
            1px solid rgba(255, 255, 255, .12);

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


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

.hero {
    position: relative;

    --orbit-x: 78%;
    --orbit-y: 47%;

    min-height: 650px;

    max-width: var(--max-width);

    margin: auto;

    padding: 150px 5% 65px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: white;

    background:
            linear-gradient(
                    120deg,
                    #020d17 0%,
                    #061827 48%,
                    #082238 100%
            );
}


/* FULL HERO IMAGE */

.hero-bg {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;
}

.hero-bg-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    opacity: .98;

    transform: scale(1.03);

    animation:
            heroBgFloat 10s ease-in-out infinite;
}


/* HERO SHADE */

.hero-shade {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
            linear-gradient(
                    90deg,
                    rgba(2, 12, 22, .91) 0%,
                    rgba(2, 12, 22, .78) 30%,
                    rgba(2, 12, 22, .42) 58%,
                    rgba(2, 12, 22, .12) 100%
            ),
            linear-gradient(
                    180deg,
                    rgba(0, 0, 0, .04) 0%,
                    rgba(0, 0, 0, .22) 100%
            );
}


/* HERO CONTENT */

.hero-content {
    position: relative;

    z-index: 5;

    max-width: 600px;
}

.hero-eyebrow {
    margin: 0 0 25px;

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

    letter-spacing: 3px;
}

.hero h1 {
    margin: 0;

    font-size:
            clamp(54px, 5.2vw, 78px);

    line-height: .99;

    letter-spacing: -4px;

    font-weight: 700;
}

.hero h1 span {
    color: var(--blue);
}

.hero-description {
    max-width: 510px;

    margin: 30px 0;

    font-size: 15px;

    line-height: 1.7;

    color:
            rgba(255, 255, 255, .83);
}

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 28px;
}


/* BUTTONS */

.button-primary {
    min-height: 48px;

    padding: 0 22px;

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

    gap: 30px;

    background: var(--blue);

    color: white;

    border-radius: 3px;

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

    transition:
            background .2s,
            transform .2s;
}

.button-primary:hover {
    background: #006fd7;

    transform: translateY(-2px);
}

.button-secondary {
    display: inline-flex;

    gap: 14px;

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


/* HERO INDEX */

.hero-index {
    width: 260px;

    margin-top: 40px;

    display: flex;
    justify-content: space-between;

    color:
            rgba(255, 255, 255, .4);

    font-size: 10px;
}

.hero-index span {
    position: relative;

    width: 45px;

    padding-bottom: 12px;
}

.hero-index span::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 1px;

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

.hero-index .active {
    color: white;
}

.hero-index .active::after {
    height: 2px;

    background: var(--blue);
}


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

.hero-orbits {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;
}

.orbit {
    position: absolute;

    left: var(--orbit-x);
    top: var(--orbit-y);

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

    border-radius: 50%;

    box-sizing: border-box;

    opacity: .9;
}


/* ORBIT 1 */

.orbit-1 {
    width: 430px;
    height: 430px;

    border:
            1px solid rgba(72, 196, 255, .22);

    box-shadow:
            0 0 30px rgba(0, 170, 255, .14),
            inset 0 0 30px rgba(0, 170, 255, .08);

    animation:
            orbitSpin 18s linear infinite;
}

.orbit-1::before,
.orbit-1::after {
    content: "";

    position: absolute;

    border-radius: 50%;
}

.orbit-1::before {
    inset: 16px;

    border:
            1px dashed rgba(120, 220, 255, .22);
}

.orbit-1::after {
    width: 10px;
    height: 10px;

    top: -5px;
    left: 50%;

    transform:
            translateX(-50%);

    background: #35c8ff;

    box-shadow:
            0 0 14px rgba(53, 200, 255, .9);
}


/* ORBIT 2 */

.orbit-2 {
    width: 560px;
    height: 560px;

    border:
            1px solid rgba(70, 170, 255, .14);

    border-top-color:
            rgba(120, 220, 255, .5);

    border-right-color:
            rgba(120, 220, 255, .28);

    animation:
            orbitSpinReverse 28s linear infinite;
}

.orbit-2::before {
    content: "";

    position: absolute;

    inset: 26px;

    border-radius: 50%;

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


/* ORBIT 3 */

.orbit-3 {
    width: 690px;
    height: 690px;

    border:
            1px dashed rgba(90, 190, 255, .16);

    filter:
            blur(.2px);

    animation:
            orbitSpin 40s linear infinite;
}

.orbit-3::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    right: 70px;
    top: 40px;

    border-radius: 50%;

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

    box-shadow:
            0 0 12px rgba(0, 214, 255, .9);
}


/* ORBIT 4 */

.orbit-4 {
    width: 500px;
    height: 500px;

    background:
            conic-gradient(
                    from 0deg,

                    rgba(0, 0, 0, 0) 0deg,

                    rgba(80, 210, 255, 0) 20deg,

                    rgba(80, 210, 255, .28) 26deg,

                    rgba(80, 210, 255, 0) 36deg,

                    rgba(80, 210, 255, 0) 90deg,

                    rgba(80, 210, 255, .25) 102deg,

                    rgba(80, 210, 255, 0) 116deg,

                    rgba(80, 210, 255, 0) 180deg,

                    rgba(80, 210, 255, .18) 194deg,

                    rgba(80, 210, 255, 0) 208deg,

                    rgba(80, 210, 255, 0) 270deg,

                    rgba(80, 210, 255, .26) 285deg,

                    rgba(80, 210, 255, 0) 300deg,

                    rgba(80, 210, 255, 0) 360deg
            );

    -webkit-mask:
            radial-gradient(
                    circle,
                    transparent 67%,
                    black 68%,
                    black 71%,
                    transparent 72%
            );

    mask:
            radial-gradient(
                    circle,
                    transparent 67%,
                    black 68%,
                    black 71%,
                    transparent 72%
            );

    animation:
            orbitSpinReverse 22s linear infinite;
}


/* HERO ANIMATIONS */

@keyframes heroBgFloat {

    0%,
    100% {
        transform:
                scale(1.03)
                translateY(0);
    }

    50% {
        transform:
                scale(1.06)
                translateY(-6px);
    }
}


@keyframes orbitSpin {

    from {
        transform:
                translate(-50%, -50%)
                rotate(0deg);
    }

    to {
        transform:
                translate(-50%, -50%)
                rotate(360deg);
    }
}


@keyframes orbitSpinReverse {

    from {
        transform:
                translate(-50%, -50%)
                rotate(360deg);
    }

    to {
        transform:
                translate(-50%, -50%)
                rotate(0deg);
    }
}


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

.system-status {
    position: absolute;

    z-index: 5;

    top: 190px;
    right: 6%;

    width: 230px;

    padding: 22px;

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

    background:
            rgba(4, 18, 31, .68);

    backdrop-filter: blur(12px);

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

.status-header {
    margin-bottom: 18px;

    display: flex;
    justify-content: space-between;

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

    letter-spacing: 1.4px;
}

.status-header small {
    color:
            rgba(255, 255, 255, .45);
}

.status-row {
    padding: 7px 0;

    display: flex;
    justify-content: space-between;

    font-size: 10px;
}

.status-row > span {
    font-weight: 700;
}

.status-row div {
    display: flex;
    align-items: center;

    gap: 7px;

    color:
            rgba(255, 255, 255, .75);
}

.status-row i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
            var(--green);

    box-shadow:
            0 0 10px rgba(37, 209, 138, .8);
}


/* MINI STATS */

.hero-mini-stats {
    position: absolute;

    z-index: 6;

    right: 5%;
    bottom: 45px;

    display: flex;

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

    backdrop-filter:
            blur(8px);
}

.hero-mini-stats div {
    min-width: 150px;

    padding: 18px;

    display: flex;
    align-items: baseline;

    gap: 8px;
}

.hero-mini-stats div + div {
    border-left:
            1px solid rgba(255, 255, 255, .2);
}

.hero-mini-stats strong {
    font-size: 27px;
}

.hero-mini-stats span {
    font-size: 8px;

    letter-spacing: 1.5px;
}


/* ==========================================================
   EXPERIENCE
========================================================== */

.experience {
    max-width: var(--max-width);

    margin: auto;

    min-height: 180px;

    display: grid;

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

    background: #f8fafc;

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

.experience > div {
    padding: 40px 38px;

    display: flex;
    justify-content: center;
    flex-direction: column;
}

.experience > div + div {
    border-left:
            1px solid var(--line);
}

.experience-label span {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    line-height: 1.6;
}

.experience-label i,
.clients-label i {
    width: 30px;
    height: 2px;

    margin-top: 16px;

    display: block;

    background: var(--blue);
}

.experience-stat strong {
    color: var(--blue);

    font-size:
            clamp(37px, 3vw, 50px);

    letter-spacing: -2px;
}

.experience-stat p {
    margin: 6px 0 0;

    font-size: 13px;

    line-height: 1.45;
}


/* MAP */

.experience-map {
    position: relative;

    overflow: hidden;

    background:
            radial-gradient(
                    circle at center,
                    rgba(8, 127, 238, .12),
                    transparent 55%
            );
}

.map-grid {
    position: absolute;

    inset: 0;

    opacity: .35;

    background-image:
            linear-gradient(
                    rgba(8, 127, 238, .15) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(8, 127, 238, .15) 1px,
                    transparent 1px
            );

    background-size:
            24px 24px;

    mask-image:
            radial-gradient(
                    circle,
                    black,
                    transparent 70%
            );
}

.experience-map span {
    position: relative;

    align-self: flex-end;

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

    letter-spacing: 1.5px;
}


/* ==========================================================
   TECHNOLOGIES
========================================================== */

.technologies {
    max-width: var(--max-width);

    margin: auto;

    padding: 30px 5%;

    display: grid;

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

    gap: 12px;
}


.technology-intro {
    padding:
            30px 30px 30px 0;
}

.section-label {
    margin:
            0 0 28px;

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

    letter-spacing: 2.2px;

    line-height: 1.6;
}

.section-label.light {
    color:
            rgba(255, 255, 255, .65);
}

.technology-intro h2 {
    margin:
            0 0 25px;

    font-size:
            clamp(30px, 2.7vw, 43px);

    line-height: 1.05;

    letter-spacing: -2px;
}

.technology-intro > p:not(.section-label) {
    max-width: 260px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;
}

.inline-link {
    margin-top: 30px;

    display: inline-flex;

    gap: 20px;

    color: var(--blue);

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


/* TECHNOLOGY CARDS */

.technology-card {
    position: relative;

    min-height: 390px;

    padding: 24px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    color: white;

    background-color:
            var(--navy);

    background-position:
            center;

    background-size:
            cover;

    transition:
            transform .3s,
            box-shadow .3s;
}

.technology-card:hover {
    transform:
            translateY(-5px);

    box-shadow:
            0 20px 35px rgba(0, 20, 40, .2);
}

.technology-cctv {
    background-image:
            url("assets/system-cctv.jpg"),
            linear-gradient(
                    135deg,
                    #132c40,
                    #06121c
            );

    background-position:
            80% center;
}

.technology-sswin {
    background-image:
            url("assets/system-sswin.jpg"),
            linear-gradient(
                    135deg,
                    #17324a,
                    #071522
            );
}

.technology-lan {
    background-image:
            url("assets/system-lan.jpg"),
            linear-gradient(
                    135deg,
                    #07518d,
                    #051421
            );
}

.technology-electric {
    background-image:
            url("assets/system-electric.jpg"),
            linear-gradient(
                    135deg,
                    #293742,
                    #071522
            );
}

.technology-gradient {
    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    180deg,
                    rgba(4, 16, 27, .05) 10%,
                    rgba(4, 16, 27, .92) 100%
            );
}

.technology-number,
.technology-content {
    position: relative;

    z-index: 2;
}

.technology-number {
    margin-top: auto;

    font-size: 10px;
    font-weight: 700;
}

.technology-content {
    margin-top: 15px;
}

.technology-content h3 {
    margin: 0;

    font-size: 25px;

    line-height: 1.05;

    letter-spacing: -1px;
}

.technology-content p {
    min-height: 42px;

    margin: 13px 0 0;

    color:
            rgba(255, 255, 255, .72);

    font-size: 12px;

    line-height: 1.5;
}

.technology-content > span {
    position: absolute;

    right: 0;
    bottom: 5px;

    font-size: 22px;
}


/* ==========================================================
   PROJECTS
========================================================== */

.projects {
    max-width: var(--max-width);
    margin: auto;

    padding: 30px 5%;

    border-top: 90px solid #ffffff;

    display: grid;

    grid-template-columns:
        .72fr 1.5fr 1.5fr;

    gap: 30px;

    color: white;

    background:
            linear-gradient(
                    120deg,
                    #06131f,
                    #081c2c
            );
}

.projects-intro {
    padding:
            25px 10px 25px 0;
}

.projects-intro h2 {
    margin: 0;

    font-size:
            clamp(28px, 2.4vw, 38px);

    line-height: 1.1;

    letter-spacing: -1.6px;
}

.project-arrows {
    margin-top: 45px;

    display: flex;

    gap: 12px;
}

.project-arrows button {
    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    color: white;

    background:
            transparent;

    cursor: pointer;
}


/* PROJECT */

.project {
    min-width: 0;

    display: grid;

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

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

.project-image {
    position: relative;

    min-height: 330px;

    background-position:
            center;

    background-size:
            cover;
}

.project-dpd {
    background-image:
            url("assets/project-realizacja-1.png"),
            linear-gradient(
                    135deg,
                    #17324a,
                    #071522
            );

    background-position:
            center 15%;
}

.project-raben {
    background-image:
            url("assets/project-raben.jpg"),
            linear-gradient(
                    135deg,
                    #30495d,
                    #071522
            );
}

.project-photo-label {
    position: absolute;

    left: 15px;
    bottom: 15px;

    font-size: 10px;
}

.project-info {
    padding: 20px;

    display: flex;
    flex-direction: column;
}

.project-type {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;

    color:
            rgba(255, 255, 255, .6);
}

.project-info h3 {
    margin: 8px 0;

    font-size: 24px;
}

.project-info > p {
    margin: 0;

    min-height: 60px;

    font-size: 11px;

    line-height: 1.55;

    color:
            rgba(255, 255, 255, .72);
}

.project-info ul {
    margin: 17px 0;

    padding: 0;

    list-style: none;
}

.project-info li {
    position: relative;

    padding:
            4px 0 4px 18px;

    font-size: 10px;

    color:
            rgba(255, 255, 255, .8);
}

.project-info li::before {
    content: "◇";

    position: absolute;

    left: 0;

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

.project-info > a {
    margin-top: auto;

    padding: 11px 13px;

    display: flex;
    justify-content: space-between;

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

    font-size: 10px;

    transition:
            background .2s;
}

.project-info > a:hover {
    background:
            rgba(255, 255, 255, .08);
}


/* ==========================================================
   CLIENTS
========================================================== */

.clients {
    max-width: var(--max-width);

    margin: auto;

    min-height: 120px;

    padding: 25px 5%;

    display: grid;

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

    align-items: center;

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

    background: #fafcfe;
}

.clients-label span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.7px;
}

.client {
    text-align: center;

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

    letter-spacing: -.8px;

    color: #24303b;
}

.client b {
    color: #ff7315;
}


/* ==========================================================
   PROCESS
========================================================== */

.process {
    max-width: var(--max-width);

    margin: auto;

    padding: 45px 5%;

    display: flex;
    align-items: center;

    gap: 25px;

    background: white;
}

.process-intro {
    min-width: 250px;
}

.process-intro .section-label {
    margin-bottom: 12px;
}

.process-intro h2 {
    margin: 0;

    font-size: 29px;

    line-height: 1.05;

    letter-spacing: -1.4px;
}

.process-step {
    flex: 1;

    display: flex;

    gap: 15px;

    align-items: flex-start;
}

.step-number {
    color: var(--blue);

    font-size: 20px;
    font-weight: 800;
}

.process-step h3 {
    margin: 1px 0 8px;

    font-size: 12px;
}

.process-step p {
    margin: 0;

    max-width: 150px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.55;
}

.process-arrow {
    color: var(--blue);
}


/* ==========================================================
   CONTACT
========================================================== */

.contact {
    position: relative;

    max-width: var(--max-width);

    margin: auto;

    min-height: 330px;

    padding: 60px 5%;

    display: grid;

    grid-template-columns:
        1.2fr 1.8fr;

    gap: 60px;

    align-items: center;

    overflow: hidden;

    color: white;

    background:
            linear-gradient(
                    90deg,
                    #061523 0%,
                    rgba(6, 21, 35, .93) 48%,
                    rgba(6, 21, 35, .35) 100%
            ),
            url("assets/contact-camera.jpg")
            right center / cover no-repeat,
            #071522;
}

.contact-overlay {
    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    90deg,
                    rgba(0, 0, 0, .1),
                    transparent
            );
}

.contact-intro,
.contact-cards {
    position: relative;

    z-index: 2;
}

.contact-intro .section-label {
    margin-bottom: 20px;
}

.contact-intro h2 {
    margin: 0;

    font-size:
            clamp(37px, 3.4vw, 52px);

    line-height: 1.03;

    letter-spacing: -2.5px;
}

.contact-intro h2 span {
    color: var(--blue);
}

.contact-intro > p:not(.section-label) {
    max-width: 500px;

    margin: 20px 0 25px;

    color:
            rgba(255, 255, 255, .68);

    font-size: 12px;

    line-height: 1.65;
}


/* CONTACT CARDS */

.contact-cards {
    display: grid;

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

    gap: 18px;

    max-width: 620px;
}

.contact-card {
    padding: 24px;

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

    background:
            rgba(5, 20, 33, .76);

    backdrop-filter:
            blur(10px);
}

.person {
    margin-bottom: 20px;

    display: flex;
    align-items: center;

    gap: 13px;
}

.person-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

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

    border-radius: 50%;

    font-size: 9px;
}

.person h3 {
    margin: 0 0 3px;

    font-size: 14px;
}

.person span {
    color:
            rgba(255, 255, 255, .55);

    font-size: 9px;
}

.contact-row {
    padding: 12px 0;

    display: flex;
    align-items: center;

    gap: 13px;

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

    font-size: 11px;
}

.contact-row > span {
    color: var(--blue);
}

.contact-row.mail {
    color: var(--blue-light);
}


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

.site-footer {
    max-width: var(--max-width);

    margin: auto;

    min-height: 100px;

    padding: 25px 5%;

    display: grid;

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

    gap: 45px;

    align-items: center;

    color: white;

    background: #06121c;
}

.site-footer nav {
    display: flex;

    gap: 30px;
}

.site-footer nav a {
    color:
            rgba(255, 255, 255, .65);

    font-size: 10px;
}

.footer-copy {
    justify-self: end;

    display: flex;
    flex-direction: column;

    color:
            rgba(255, 255, 255, .45);

    font-size: 9px;
}

.footer-copy small {
    margin-top: 4px;
}

.back-top {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

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

    border-radius: 50%;
}


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

@media (max-width: 1150px) {

    .desktop-nav {
        gap: 20px;
    }

    .system-status {
        right: 4%;
    }


    /* HERO ORBITS */

    .hero {
        --orbit-x: 80%;
        --orbit-y: 47%;
    }

    .orbit-1 {
        width: 360px;
        height: 360px;
    }

    .orbit-2 {
        width: 470px;
        height: 470px;
    }

    .orbit-3 {
        width: 590px;
        height: 590px;
    }

    .orbit-4 {
        width: 420px;
        height: 420px;
    }


    /* TECHNOLOGIES */

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

    .technology-intro {
        grid-column:
                1 / -1;
    }

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


    /* PROJECTS */

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

    .projects-intro {
        grid-column:
                1 / -1;
    }


    /* CLIENTS */

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

        gap: 25px;
    }

    .clients-label {
        grid-column:
                1 / -1;
    }


    /* PROCESS */

    .process {
        flex-wrap: wrap;
    }

    .process-intro {
        width: 100%;
    }

}


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

@media (max-width: 760px) {

    html {
        scroll-padding-top: 70px;
    }


    /* HEADER */

    .site-header {
        position: fixed;

        height: 72px;

        padding: 0 6%;

        background:
                rgba(3, 14, 25, .92);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .brand-symbol {
        width: 29px;
        height: 29px;
    }

    .brand-symbol i {
        width: 10px;
        height: 27px;
    }

    .brand-name strong {
        font-size: 14px;
    }

    .brand-name small {
        font-size: 7px;
    }

    .desktop-nav,
    .header-contact {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }


    /* HERO */

    .hero {
        --orbit-x: 73%;
        --orbit-y: 43%;

        min-height: 700px;

        padding:
                125px 6% 45px;

        align-items: flex-start;
    }

    .hero-bg-image {
        object-position:
                68% center;
    }

    .hero::after {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 4;

        pointer-events: none;

        background:
                linear-gradient(
                        180deg,
                        rgba(3, 14, 25, .18),
                        rgba(3, 14, 25, .08) 52%,
                        rgba(3, 14, 25, .75)
                );
    }

    .hero-content {
        z-index: 5;
    }

    .hero-eyebrow {
        font-size: 9px;

        letter-spacing: 2px;
    }

    .hero h1 {
        font-size:
                clamp(48px, 13vw, 64px);

        letter-spacing: -3px;
    }

    .hero-description {
        max-width: 90%;

        font-size: 14px;
    }

    .hero-buttons {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }


    /* MOBILE ORBITS */

    .orbit-1 {
        width: 240px;
        height: 240px;
    }

    .orbit-2 {
        width: 320px;
        height: 320px;
    }

    .orbit-3 {
        width: 400px;
        height: 400px;
    }

    .orbit-4 {
        width: 280px;
        height: 280px;
    }


    /* OLD HUD */

    .system-status {
        display: none;
    }

    .hero-index {
        display: none;
    }

    .hero-mini-stats {
        z-index: 6;

        left: 6%;
        right: 6%;
        bottom: 25px;

        width: auto;
    }

    .hero-mini-stats div {
        width: 50%;

        min-width: 0;
    }


    /* EXPERIENCE */

    .experience {
        display: block;
    }

    .experience > div {
        padding:
                25px 6%;
    }

    .experience > div + div {
        border-left: 0;

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

    .experience-label {
        padding-top:
                35px !important;
    }

    .experience-stat {
        position: relative;
    }

    .experience-stat::after {
        content: "→";

        position: absolute;

        right: 6%;
        top: 50%;

        color: var(--blue);

        transform:
                translateY(-50%);
    }

    .experience-map {
        min-height: 150px;
    }


    /* TECHNOLOGIES */

    .technologies {
        max-width: var(--max-width);
        margin: auto;

        padding: 55px 6%;

        display: grid;

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

        gap: 12px;
    }

    .technology-intro {
        padding:
                0 0 25px;

        grid-column:
                1 / -1;
    }

    .technology-intro h2 {
        font-size: 39px;
    }

    .technology-card {
        min-height: 290px;

        padding: 18px;
    }

    .technology-content h3 {
        font-size: 21px;
    }

    .technology-content p {
        padding-right: 15px;

        font-size: 10px;
    }


    /* PROJECTS */

    .projects {
        padding: 50px 6%;

        display: block;
    }

    .projects-intro {
        margin-bottom: 35px;
    }

    .project-arrows {
        display: none;
    }

    .project {
        margin-bottom: 25px;

        display: block;
    }

    .project-image {
        min-height: 260px;
    }

    .project-info {
        padding: 24px;
    }

    .project-info h3 {
        font-size: 27px;
    }

    .project-info > p {
        min-height: auto;

        font-size: 13px;
    }

    .project-info li {
        font-size: 12px;
    }

    .project-info > a {
        margin-top: 20px;

        padding: 14px;

        font-size: 12px;
    }


    /* CLIENTS */

    .clients {
        padding: 35px 6%;

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

        gap: 30px;
    }

    .clients-label {
        grid-column:
                1 / -1;
    }

    .client {
        text-align: left;

        font-size: 21px;
    }


    /* PROCESS */

    .process {
        padding: 55px 6%;

        display: block;
    }

    .process-intro {
        margin-bottom: 35px;
    }

    .process-intro h2 {
        font-size: 37px;
    }

    .process-step {
        padding: 22px 0;

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

    .process-step h3 {
        font-size: 15px;
    }

    .process-step p {
        max-width: none;

        font-size: 12px;
    }

    .process-arrow {
        display: none;
    }


    /* CONTACT */

    .contact {
        min-height: 0;

        padding: 60px 6%;

        display: block;

        background-position:
                75% center;
    }

    .contact-intro h2 {
        font-size: 43px;
    }

    .contact-intro > p:not(.section-label) {
        font-size: 13px;
    }

    .contact-cards {
        margin-top: 40px;

        display: block;
    }

    .contact-card {
        margin-top: 12px;
    }


    /* FOOTER */

    .site-footer {
        padding: 35px 6%;

        display: flex;
        flex-wrap: wrap;

        gap: 30px;
    }

    .site-footer nav {
        width: 100%;

        flex-wrap: wrap;

        gap:
                15px 25px;
    }

    .footer-copy {
        margin-right: auto;

        justify-self: auto;
    }

}


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

@media (max-width: 430px) {

    .hero {
        --orbit-x: 75%;
        --orbit-y: 42%;
    }

    .hero h1 {
        font-size: 48px;
    }

    .orbit-1 {
        width: 210px;
        height: 210px;
    }

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

    .orbit-3 {
        width: 345px;
        height: 345px;
    }

    .orbit-4 {
        width: 245px;
        height: 245px;
    }

    .technology-card {
        min-height: 245px;
    }

    .technology-content h3 {
        font-size: 19px;
    }

    .technology-content p {
        font-size: 9px;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

}