:root {
    --bg: #050816;
    --bg-deep: #030611;
    --panel: rgba(13, 22, 47, .66);
    --panel-solid: #0a1023;
    --panel-high: #0d1730;
    --text: #f4f7ff;
    --muted: #9ba7c2;
    --dim: #68748f;
    --line: rgba(159, 180, 229, .15);
    --line-strong: rgba(159, 180, 229, .26);
    --cyan: #17d9ed;
    --blue: #2478ff;
    --violet: #9861ff;
    --radius: 22px;
    --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
    color-scheme: dark
}

* {
    box-sizing: border-box
}

.whatsapp-float[hidden] {
    display: none
}

.whatsapp-float {
    position: fixed;
    z-index: 110;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    transition: transform .2s ease, box-shadow .2s ease
}

.whatsapp-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32), 0 0 22px rgba(37, 211, 102, .32)
}

.whatsapp-float:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px
}

.whatsapp-float img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain
}

@media(max-width:640px) {
    .whatsapp-float {
        width: 60px;
        height: 60px
    }

    .whatsapp-float img {
        width: 52px;
        height: 52px
    }
}

html {
    background: var(--bg);
    scroll-behavior: smooth;
    scroll-padding-top: 88px
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

::selection {
    color: #fff;
    background: #208fff99
}

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

button {
    font: inherit
}

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

svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6
}

.wrap {
    width: min(1200px, calc(100% - 64px));
    margin-inline: auto
}

.section-pad {
    padding-block: 124px;
    position: relative
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    background: #fff;
    color: #050816;
    transform: translateY(-180%);
    border-radius: 8px
}

.skip-link:focus {
    transform: translateY(0)
}

.site-noise {
    position: fixed;
    z-index: 50;
    inset: 0;
    pointer-events: none;
    opacity: .018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}

.reading-progress {
    position: fixed;
    z-index: 120;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent
}

.reading-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--violet), var(--blue), var(--cyan));
    box-shadow: 0 0 14px #17d9ed73
}

.site-header {
    position: sticky;
    z-index: 100;
    top: 12px;
    width: min(1200px, calc(100% - 48px));
    margin: 12px auto 0;
    border: 1px solid rgba(194, 216, 255, .16);
    border-radius: 999px;
    background: #0a112294;
    box-shadow: 0 12px 38px #0000003d, inset 0 1px #ffffff14;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    transition: background .25s, border-color .25s, box-shadow .25s
}

.site-header.is-scrolled {
    background: #080e1dc7;
    border-color: #c2d8ff38;
    box-shadow: 0 14px 42px #00000052, inset 0 1px #ffffff17
}

.nav-shell {
    min-height: 72px;
    width: 100%;
    padding-inline: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.brand-mark-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    isolation: isolate
}

.brand-mark-shell:before {
    content: "";
    position: absolute;
    inset: 9%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 217, 237, .24), rgba(36, 120, 255, .11) 46%, transparent 74%);
    filter: blur(4px);
    animation: logo-core-breathe 5.8s ease-in-out infinite alternate
}

.brand-mark {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(36, 120, 255, .22))
}

.brand-mark-galaxy {
    position: absolute;
    z-index: 1;
    inset: -3%;
    pointer-events: none
}

.brand-mark-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 124%;
    height: 48%;
    border: 1px solid rgba(36, 120, 255, .49);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    animation: logo-orbit-spin 22s linear infinite
}

.brand-mark-orbit i {
    position: absolute;
    top: 50%;
    right: 8%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #20e3f3;
    box-shadow: 0 0 7px #17d9ede6, 0 0 13px #17d9ed8c
}

.brand-mark-orbit-b {
    width: 89%;
    height: 82%;
    border-color: #9861ff5e;
    transform: translate(-50%, -50%) rotate(48deg);
    animation-direction: reverse;
    animation-duration: 31s
}

.brand-mark-orbit-b i {
    right: 12%;
    background: #a88cff;
    box-shadow: 0 0 7px #9861ffeb, 0 0 13px #9861ff80
}

.brand-mark-orbit-c {
    width: 139%;
    height: 29%;
    border-color: #17d9ed40;
    transform: translate(-50%, -50%) rotate(12deg);
    animation-duration: 39s
}

.brand-mark-orbit-c i {
    right: 18%;
    width: 3px;
    height: 3px
}

@keyframes logo-orbit-spin {
    0% {
        transform: translate(-50%, -50%) rotate(-25deg)
    }

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

@keyframes logo-core-breathe {
    0% {
        opacity: .62;
        transform: scale(.94)
    }

    to {
        opacity: 1;
        transform: scale(1.06)
    }
}

.brand-wordmark {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.075em
}

.brand-wordmark span {
    color: #148df8;
    background: linear-gradient(110deg, #177dff 10%, #11d9e9 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3.1vw, 42px)
}

.primary-nav>a:not(.nav-cta) {
    font-size: 13px;
    font-weight: 500;
    color: #b9c3d8;
    transition: color .2s
}

.primary-nav>a:not(.nav-cta):hover,
.footer-links a:hover {
    color: #fff
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(45, 165, 255, .38);
    border-radius: 999px;
    background: #1d7aff17;
    transition: background .25s, border-color .25s, transform .25s
}

.nav-cta span {
    color: var(--cyan);
    font-size: 16px;
    transition: transform .25s
}

.nav-cta:hover {
    background: #1d7aff2e;
    border-color: #2dd2ffb3;
    transform: translateY(-1px)
}

.nav-cta:hover span {
    transform: translate(2px, -2px)
}

.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 13px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 13px;
    color: #fff;
    background: #121c35b3
}

.menu-toggle span {
    display: block;
    height: 1px;
    margin: 5px 0;
    background: currentColor;
    transition: transform .2s
}

@media(min-width:721px)and (max-width:800px) {
    .site-header {
        border-radius: 25px
    }

    .nav-shell {
        min-height: 64px
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 102
    }

    .primary-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 12px 18px 18px;
        border: 1px solid rgba(194, 216, 255, .18);
        border-radius: 22px;
        background: #090f1fd1;
        box-shadow: 0 18px 42px #0000005c, inset 0 1px #ffffff12;
        backdrop-filter: blur(24px) saturate(145%);
        -webkit-backdrop-filter: blur(24px) saturate(145%);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s, transform .22s, visibility .22s
    }

    .primary-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible
    }

    .primary-nav>a:not(.nav-cta) {
        padding: 12px 2px;
        border-bottom: 1px solid rgba(159, 180, 229, .08);
        font-size: 14px
    }

    .nav-cta {
        justify-content: space-between;
        margin-top: 14px
    }

    .menu-toggle[aria-expanded=true] span:first-child {
        transform: translateY(3px) rotate(45deg)
    }

    .menu-toggle[aria-expanded=true] span:last-child {
        transform: translateY(-3px) rotate(-45deg)
    }
}

.hero {
    position: relative;
    height: min(850px, 100svh);
    min-height: 420px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-deep)
}

.hero-video-background {
    position: absolute;
    z-index: -3;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    pointer-events: none
}

.hero:before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #02061214, #0306123d)
}

.hero-glow {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .17
}

.hero-glow-a {
    background: #0d58ff;
    top: 100px;
    left: -290px
}

.hero-glow-b {
    background: #07cce8;
    right: -320px;
    bottom: -160px;
    opacity: .12
}

.hero-grid {
    width: min(1440px, calc(100% - 64px));
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr);
    align-items: center;
    gap: 30px;
    flex: 1;
    position: relative
}

.hero-copy {
    position: relative;
    z-index: 4;
    padding-block: 38px
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #8e9fbd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
    line-height: 1.4
}

.status-dot,
.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px #17d9edcc
}

.eyebrow-line {
    display: inline-block;
    height: 1px;
    width: 40px;
    margin-left: 4px;
    background: linear-gradient(90deg, rgba(23, 217, 237, .8), transparent)
}

.hero h1 {
    margin: 28px 0 24px;
    font-family: var(--font-head);
    font-size: clamp(52px, 5vw, 72px);
    line-height: 1.01;
    letter-spacing: -.075em;
    font-weight: 600
}

.typewriter-line {
    display: block;
    min-height: 1.02em
}

.hero h1 #typed-engineering {
    font-size: clamp(24px, 3.6vw, 52px);
    white-space: nowrap
}

@supports (font-size: 1cqw) {
    .hero-copy {
        container-type: inline-size
    }

    .hero h1 #typed-engineering {
        font-size: min(9cqw, 52px)
    }
}

.typewriter-caret {
    display: inline-block;
    width: 2px;
    height: .78em;
    margin-left: 4px;
    vertical-align: -.02em;
    border-radius: 2px;
    background: var(--cyan);
    box-shadow: 0 0 13px #17d9edcc;
    animation: type-caret-blink .9s steps(2, jump-none) infinite
}

@keyframes type-caret-blink {

    0%,
    48% {
        opacity: 1
    }

    49%,
    to {
        opacity: 0
    }
}

.gradient-text {
    color: #5ce9f0;
    background: linear-gradient(103deg, #a7d8ff, #2f8dff 43%, #18dbe8 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.hero-lede {
    max-width: 490px;
    margin: 0;
    color: #a5b0c8;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.85
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 27px;
    margin-top: 35px
}

.button {
    min-height: 54px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    padding: 0 22px;
    border: 1px solid rgba(76, 193, 255, .62);
    border-radius: 13px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: box-shadow .25s, border-color .25s, transform .25s, background .25s
}

.button-primary {
    color: #f8fcff;
    background: linear-gradient(110deg, #246aff47, #0ad2eb1f);
    box-shadow: inset 0 1px #ffffff17, 0 8px 28px #004eff1f
}

.button:hover {
    transform: translateY(-3px);
    border-color: var(--cyan);
    background: linear-gradient(110deg, #246aff6b, #0ad2eb38);
    box-shadow: 0 12px 42px #008cff2e, inset 0 1px #ffffff1f
}

.button-arrow {
    display: inline-grid;
    place-items: center;
    font-size: 18px;
    color: var(--cyan);
    transition: transform .25s
}

.button:hover .button-arrow {
    transform: translate(3px, -3px)
}

.text-link {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: #c5cde0;
    font-size: 13px;
    font-weight: 600;
    transition: color .2s
}

.text-link span {
    color: var(--cyan);
    transition: transform .2s
}

.text-link:hover {
    color: #fff
}

.text-link:hover span {
    transform: translateY(3px)
}

.hero-trustline {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 45px;
    color: #7887a5;
    font-size: 11px;
    letter-spacing: .025em
}

.trust-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #5edfe9;
    background: #15cbe714;
    border: 1px solid rgba(21, 203, 231, .24)
}

.trust-icon svg {
    width: 15px
}

.hero-stage {
    align-self: stretch;
    position: relative;
    min-height: 510px;
    max-height: 650px;
    overflow: visible;
    isolation: isolate
}

.hero-stage:after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7% 2% 2%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(4, 39, 104, .16), transparent 66%)
}

.stage-halo {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 78%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(7, 136, 255, .3) 0%, rgba(32, 74, 231, .14) 36%, rgba(20, 217, 237, .055) 51%, transparent 73%);
    filter: blur(24px)
}

.stage-galaxy {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    border-radius: 50%;
    overflow: visible
}

.stage-galaxy:before {
    content: "";
    position: absolute;
    inset: 4% 0;
    border-radius: 50%;
    background: conic-gradient(from 6deg, transparent 0deg, rgba(23, 217, 237, .1) 13deg, rgba(36, 120, 255, .43) 31deg, rgba(152, 97, 255, .28) 49deg, transparent 76deg, transparent 90deg, rgba(23, 217, 237, .08) 105deg, rgba(36, 120, 255, .39) 126deg, rgba(152, 97, 255, .25) 145deg, transparent 168deg, transparent 180deg, rgba(23, 217, 237, .09) 196deg, rgba(36, 120, 255, .36) 216deg, rgba(152, 97, 255, .22) 235deg, transparent 258deg, transparent 270deg, rgba(23, 217, 237, .1) 286deg, rgba(36, 120, 255, .4) 306deg, rgba(152, 97, 255, .26) 325deg, transparent 348deg);
    transform: rotate(-18deg) scaleY(.62);
    filter: blur(17px);
    opacity: .98;
    mask-image: radial-gradient(ellipse at center, transparent 0 8%, rgba(0, 0, 0, .76) 19%, #000 39%, transparent 75%);
    animation: galaxy-cloud-spin 48s linear infinite
}

.stage-galaxy:after {
    content: "";
    position: absolute;
    inset: 1% 0;
    border-radius: 50%;
    background: radial-gradient(circle at 14% 27%, rgba(73, 219, 255, .95) 0 1px, transparent 2.4px), radial-gradient(circle at 77% 21%, rgba(133, 120, 255, .9) 0 1.3px, transparent 2.6px), radial-gradient(circle at 86% 65%, rgba(34, 225, 244, .9) 0 1px, transparent 2.5px), radial-gradient(circle at 20% 73%, rgba(76, 125, 255, .95) 0 1.4px, transparent 2.8px), radial-gradient(circle at 64% 87%, rgba(104, 174, 255, .9) 0 1px, transparent 2.4px), radial-gradient(circle at 42% 11%, rgba(43, 226, 244, .8) 0 1px, transparent 2.3px), radial-gradient(circle at 93% 44%, rgba(165, 119, 255, .85) 0 1px, transparent 2.5px), radial-gradient(circle at 7% 53%, rgba(47, 143, 255, .85) 0 1.1px, transparent 2.7px);
    opacity: .9;
    animation: galaxy-dust-breathe 8s ease-in-out infinite alternate
}

.galaxy-track {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 83%;
    height: 44%;
    border: 1px solid rgba(59, 158, 255, .43);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    animation: galaxy-track-spin 34s linear infinite;
    box-shadow: 0 0 18px #1974ff0f
}

.galaxy-track i {
    position: absolute;
    top: 50%;
    right: 7%;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35e8fa;
    box-shadow: 0 0 8px #17d9ed, 0 0 18px #17d9edd9;
    transform: translateY(-50%)
}

.galaxy-track-two {
    width: 68%;
    height: 72%;
    transform: translate(-50%, -50%) rotate(34deg);
    border-color: #8468ff4d;
    animation-duration: 42s;
    animation-direction: reverse
}

.galaxy-track-two i {
    right: 10%;
    background: #a18bff;
    box-shadow: 0 0 8px #9861ff, 0 0 18px #9861ffe6
}

.galaxy-track-three {
    width: 97%;
    height: 26%;
    transform: translate(-50%, -50%) rotate(12deg);
    border-color: #15d9ed47;
    animation-duration: 54s
}

.galaxy-track-three i {
    right: 19%;
    width: 4px;
    height: 4px
}

@keyframes galaxy-cloud-spin {
    0% {
        rotate: 0deg
    }

    to {
        rotate: 360deg
    }
}

@keyframes galaxy-dust-breathe {
    0% {
        opacity: .52;
        transform: scale(.98)
    }

    to {
        opacity: 1;
        transform: scale(1.02)
    }
}

@keyframes galaxy-track-spin {
    0% {
        rotate: 0deg
    }

    to {
        rotate: 360deg
    }
}

.hero-sculpture-fallback {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: .98;
    transition: opacity .55s ease, visibility .55s ease
}

.hero-sculpture-fallback img {
    position: relative;
    left: 0;
    top: 0;
    width: 49%;
    max-width: 275px;
    min-width: 180px;
    height: auto;
    object-fit: contain;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 22px rgba(0, 132, 255, .21)) drop-shadow(0 0 50px rgba(16, 76, 255, .1));
    animation: mark-drift 8s ease-in-out infinite
}

.hero-stage.webgl-ready .hero-sculpture-fallback {
    opacity: 1;
    visibility: visible
}

@keyframes mark-drift {

    0%,
    to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.022)
    }
}

.stage-grid {
    position: absolute;
    inset: 7% 0 0;
    opacity: .12;
    background-image: linear-gradient(rgba(87, 137, 220, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(87, 137, 220, .08) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%)
}

#hero-canvas {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none
}

.stage-orbit {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(54, 134, 246, .54);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-22deg);
    box-shadow: 0 0 16px #2478ff0e
}

.stage-orbit-one {
    width: 73%;
    height: 38%;
    border-color: #3686f6ad;
    animation: galaxy-orbit-a 34s linear infinite
}

.stage-orbit-two {
    width: 91%;
    height: 54%;
    transform: translate(-50%, -50%) rotate(52deg);
    border-color: #15d9ed57;
    animation: galaxy-orbit-b 47s linear infinite
}

.stage-orbit-three {
    width: 60%;
    height: 70%;
    transform: translate(-50%, -50%) rotate(14deg);
    border-color: #7e58ff66;
    animation: galaxy-orbit-c 39s linear infinite
}

.stage-orbit-four {
    width: 100%;
    height: 26%;
    border-color: #436eff52;
    animation: galaxy-orbit-d 56s linear infinite
}

@keyframes galaxy-orbit-a {
    0% {
        transform: translate(-50%, -50%) rotate(-22deg)
    }

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

@keyframes galaxy-orbit-b {
    0% {
        transform: translate(-50%, -50%) rotate(52deg)
    }

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

@keyframes galaxy-orbit-c {
    0% {
        transform: translate(-50%, -50%) rotate(14deg)
    }

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

@keyframes galaxy-orbit-d {
    0% {
        transform: translate(-50%, -50%) rotate(80deg)
    }

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

.stage-crosshair {
    position: absolute;
    z-index: 3;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(23, 217, 237, .7);
    transform: rotate(45deg)
}

.stage-crosshair:after,
.stage-crosshair:before {
    content: "";
    position: absolute;
    background: #17d9ed99
}

.stage-crosshair:before {
    width: 26px;
    height: 1px;
    left: -7px;
    top: 6px
}

.stage-crosshair:after {
    width: 1px;
    height: 26px;
    top: -7px;
    left: 6px
}

.crosshair-one {
    top: 22%;
    left: 16%
}

.crosshair-two {
    bottom: 23%;
    right: 14%;
    transform: rotate(12deg)
}

.float-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 192px;
    padding: 13px 14px;
    border: 1px solid rgba(116, 157, 230, .23);
    border-radius: 13px;
    background: linear-gradient(135deg, #101d3bdb, #090f21cf);
    box-shadow: 0 20px 55px #0000003d, inset 0 1px #ffffff0a;
    backdrop-filter: blur(14px);
    animation: float-card 6s ease-in-out infinite
}

.float-card-top {
    top: 18%;
    left: 0
}

.float-card-bottom {
    bottom: 17%;
    right: -1%;
    animation-delay: -2.8s
}

.float-card b {
    display: block;
    color: #e8f4ff;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.015em
}

.float-card small {
    display: block;
    margin-top: 1px;
    color: #7e90b1;
    font-size: 10px
}

.mini-icon {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid;
    border-radius: 9px
}

.mini-icon svg {
    width: 18px
}

.mini-icon-cyan {
    color: var(--cyan);
    border-color: #17d9ed40;
    background: #17d9ed14
}

.mini-icon-violet {
    color: #ae8bff;
    border-color: #9861ff47;
    background: #9861ff17
}

.card-spark {
    margin-left: auto;
    font-size: 16px;
    color: #3c8eff
}

.card-pulse {
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #35e7c3;
    box-shadow: 0 0 12px #35e7c3e6
}

@keyframes float-card {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-9px)
    }
}

.stage-caption {
    position: absolute;
    z-index: 6;
    bottom: 5%;
    left: 4%;
    right: 4%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5c7197;
    font-size: 9px;
    letter-spacing: .2em
}

.caption-line {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--cyan)
}

.caption-code {
    margin-left: auto;
    color: #566687;
    letter-spacing: .12em
}

.hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    color: #5f6d8a;
    font-size: 9px;
    letter-spacing: .19em
}

.scroll-cue {
    display: flex;
    align-items: center;
    gap: 12px
}

.scroll-cue-line {
    width: 25px;
    height: 1px;
    background: linear-gradient(90deg, var(--cyan), transparent)
}

.hero-bottom-note {
    letter-spacing: .04em;
    font-size: 11px
}

.signal-strip {
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: #0a1226a6
}

.signal-track {
    min-width: max-content;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: clamp(30px, 5vw, 80px);
    padding-inline: 38px;
    color: #94a6c9;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    animation: signal-drift 38s linear infinite
}

.signal-track i {
    color: var(--cyan);
    font-size: 14px;
    font-style: normal
}

@keyframes signal-drift {
    to {
        transform: translate(-13%)
    }
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 56px;
    margin-bottom: 53px
}

.eyebrow-index {
    color: var(--cyan);
    font-size: 10px
}

h2,
h3,
p {
    overflow-wrap: break-word
}

.section-heading h2,
.manifesto h2,
.contact h2 {
    margin: 21px 0 0;
    font-family: var(--font-head);
    font-size: clamp(40px, 5vw, 63px);
    line-height: 1.1;
    letter-spacing: -.065em;
    font-weight: 500
}

.muted-heading {
    color: #8490ad
}

.section-intro {
    max-width: 390px;
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.85
}

.services {
    background-image: radial-gradient(ellipse 50% 38% at 50% 0%, rgba(32, 73, 146, .12), transparent 100%), linear-gradient(180deg, #050816b8, #050816d6), url(assets/services-background.webp);
    background-position: center, center, center;
    background-size: auto, auto, cover;
    background-repeat: no-repeat
}

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

@media(min-width:1200px) {
    .services .service-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px
    }
}

@media(min-width:721px)and (max-width:1199px) {
    .services .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:390px) {
    .services .service-grid {
        grid-template-columns: 1fr
    }
}

.service-card {
    position: relative;
    min-height: 304px;
    display: flex;
    flex-direction: column;
    padding: 25px 25px 23px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, #0f1931cc, #080d1cb8);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: border-color .3s, background .3s, box-shadow .3s
}

.service-card.is-visible {
    animation: service-card-enter .72s cubic-bezier(.2, .75, .25, 1) both
}

.service-card.is-visible:nth-child(2) {
    animation-delay: 80ms
}

.service-card.is-visible:nth-child(3) {
    animation-delay: .16s
}

.service-card.is-visible:nth-child(4) {
    animation-delay: .24s
}

.service-card.is-visible:nth-child(5) {
    animation-delay: .32s
}

.service-card.is-visible:nth-child(6) {
    animation-delay: .4s
}

.service-card.is-visible:nth-child(7) {
    animation-delay: .48s
}

.service-card.is-visible:nth-child(8) {
    animation-delay: .56s
}

@keyframes service-card-enter {
    0% {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.service-card:hover {
    border-color: #24a7ff6b;
    background: linear-gradient(145deg, #111f3feb, #080f1fe0);
    box-shadow: 0 22px 58px #0003
}

.service-card-featured {
    border-color: #2586ff42;
    background: linear-gradient(145deg, #1735658c, #080d1cc2)
}

.service-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.service-number {
    color: #7889a8;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em
}

.service-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(81, 147, 250, .24);
    border-radius: 13px;
    color: #68caff;
    background: #2169d01a
}

.service-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5
}

.service-card h3 {
    margin: 25px 0 11px;
    font-family: var(--font-head);
    font-size: clamp(21px, 2vw, 25px);
    line-height: 1.18;
    letter-spacing: -.045em;
    font-weight: 500
}

.service-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #96a3be;
    font-size: 12.5px;
    line-height: 1.8
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
    padding-top: 22px
}

.service-tags span {
    padding: 4px 8px;
    border: 1px solid rgba(131, 154, 205, .14);
    border-radius: 5px;
    color: #8292b0;
    font-size: 9px;
    white-space: nowrap
}

.service-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin-top: auto;
    padding: 17px 0 0;
    border: 0;
    color: #dceaff;
    background: transparent;
    font: 600 13px var(--font-body);
    text-decoration: none;
    cursor: pointer
}

.service-more span {
    color: var(--cyan);
    font-size: 16px;
    transition: transform .2s
}

.service-more:hover span {
    transform: translate(3px, -3px)
}

.service-more:focus-visible,
.service-detail-close:focus-visible,
.service-detail-dismiss:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px
}

.card-corner-glow {
    position: absolute;
    top: 56px;
    right: -100px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #1377ff21;
    filter: blur(45px)
}

.service-card-note {
    justify-content: center;
    background: linear-gradient(135deg, #1863aa26, #4a289e1c)
}

.service-card-note .note-kicker {
    color: var(--cyan);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em
}

.service-card-note h3 {
    margin-top: 13px
}

.service-card-note>p:not(.note-kicker) {
    max-width: 265px
}

.card-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 23px;
    color: #d8e6ff;
    font-size: 12px;
    font-weight: 600
}

.card-link span {
    color: var(--cyan);
    font-size: 17px;
    transition: transform .2s
}

.card-link:hover span {
    transform: translate(3px, -3px)
}

.note-orbit {
    position: absolute;
    width: 122px;
    height: 122px;
    right: -25px;
    top: -30px;
    border: 1px solid rgba(37, 183, 238, .2);
    border-radius: 50%
}

.note-orbit:before,
.note-orbit:after {
    content: "";
    position: absolute;
    inset: 13px -8px;
    border: 1px solid rgba(37, 183, 238, .16);
    border-radius: 50%;
    transform: rotate(48deg)
}

.note-orbit:after {
    transform: rotate(-48deg)
}

.note-orbit span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 9px var(--cyan)
}

.note-orbit span:nth-child(1) {
    top: 15px;
    left: 20px
}

.note-orbit span:nth-child(2) {
    right: 13px;
    top: 60px;
    background: #a16bff
}

.note-orbit span:nth-child(3) {
    left: 53px;
    bottom: 7px
}

.manifesto {
    border-block: 1px solid rgba(159, 180, 229, .07);
    background: linear-gradient(180deg, #070d1db8, #050816f5);
    overflow: hidden
}

.manifesto-glow {
    position: absolute;
    width: 540px;
    height: 540px;
    top: 10%;
    left: -270px;
    pointer-events: none;
    background: #1a45c21f;
    border-radius: 50%;
    filter: blur(120px)
}

.manifesto-grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    align-items: center;
    gap: clamp(64px, 10vw, 140px)
}

.manifesto-visual {
    min-height: 470px;
    display: grid;
    align-items: center;
    justify-items: center;
    position: relative
}

.manifesto-orb {
    width: min(100%, 400px);
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center
}

.manifesto-orb:before {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21, 91, 223, .26), rgba(18, 201, 228, .07) 42%, transparent 72%);
    filter: blur(25px)
}

.orb-ring {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(44, 135, 255, .32);
    border-radius: 50%
}

.orb-ring-a {
    transform: rotateX(68deg) rotate(-20deg);
    animation: orbit-turn 16s linear infinite
}

.orb-ring-b {
    inset: 8%;
    border-color: #17d9ed38;
    transform: rotateY(63deg) rotate(25deg);
    animation: orbit-turn 20s linear infinite reverse
}

.orb-core {
    position: relative;
    width: 48%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(67, 180, 255, .4);
    border-radius: 36%;
    background: linear-gradient(145deg, #1550c154, #061230bf);
    box-shadow: 0 0 55px #1277ff30, inset 0 0 35px #2589ff1a;
    transform: rotate(12deg);
    isolation: isolate
}

.orb-core-galaxy {
    position: absolute;
    z-index: 0;
    inset: -34%;
    pointer-events: none
}

.orb-core-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 126%;
    height: 49%;
    border: 1px solid rgba(36, 120, 255, .48);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    animation: logo-orbit-spin 24s linear infinite
}

.orb-core-orbit i {
    position: absolute;
    top: 50%;
    right: 9%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--cyan);
    box-shadow: 0 0 11px var(--cyan)
}

.orb-core-orbit-b {
    width: 86%;
    height: 88%;
    border-color: #9861ff5c;
    transform: translate(-50%, -50%) rotate(52deg);
    animation-duration: 34s;
    animation-direction: reverse
}

.orb-core-orbit-b i {
    background: #a88cff;
    box-shadow: 0 0 11px #9861ff
}

.orb-core-orbit-c {
    width: 145%;
    height: 29%;
    border-color: #17d9ed45;
    transform: translate(-50%, -50%) rotate(13deg);
    animation-duration: 42s
}

.orb-core-orbit-c i {
    width: 3px;
    height: 3px
}

.orb-core img {
    position: relative;
    z-index: 2;
    width: 90%;
    opacity: .95;
    transform: rotate(-12deg);
    filter: drop-shadow(0 0 14px rgba(0, 189, 255, .16))
}

.orb-point {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 20px #17d9ede6
}

.orb-point-a {
    top: 14%;
    left: 33%
}

.orb-point-b {
    right: 7%;
    top: 46%;
    background: #9c72ff;
    box-shadow: 0 0 20px #9c72ffe6
}

.orb-point-c {
    bottom: 17%;
    left: 15%;
    width: 5px;
    height: 5px
}

@keyframes orbit-turn {
    to {
        rotate: 360deg
    }
}

.manifesto-visual-label {
    position: absolute;
    bottom: 20px;
    left: 7%;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667797;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em
}

.manifesto h2 {
    font-size: clamp(39px, 4.5vw, 58px)
}

.manifesto-lede {
    margin: 30px 0 7px;
    color: #e2ebff;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.025em
}

.manifesto-body {
    max-width: 520px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.95
}

.principle-list {
    margin-top: 30px;
    border-top: 1px solid var(--line)
}

.principle {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line)
}

.principle-check {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid rgba(23, 217, 237, .21);
    border-radius: 8px;
    background: #17d9ed0e;
    color: var(--cyan);
    font-size: 10px;
    font-weight: 700
}

.principle b {
    display: block;
    color: #dbe6fb;
    font-size: 12px;
    font-weight: 600
}

.principle p {
    margin: 3px 0 0;
    color: #7f8da8;
    font-size: 11px
}

.company-overview {
    border-block: 1px solid rgba(159, 180, 229, .08);
    background: linear-gradient(180deg, #070d1dd6, #050816f5);
    text-align: center
}

.company-overview-inner {
    max-width: 1060px;
    container-type: inline-size
}

.company-overview .eyebrow {
    justify-content: center
}

.company-overview h1 {
    margin: 20px 0 0;
    font-family: var(--font-head);
    font-size: 64px;
    line-height: 1.08;
    letter-spacing: -.06em;
    font-weight: 500
}

.company-overview h1 .gradient-text {
    display: inline-block;
    font-size: clamp(26px, 3.6vw, 52px);
    white-space: nowrap
}

@supports (font-size: 1cqw) {
    .company-overview h1 .gradient-text {
        font-size: min(9cqw, 52px)
    }
}

.company-overview .manifesto-lede {
    max-width: 760px;
    margin: 26px auto 0;
    font-size: 20px;
    line-height: 1.5
}

.company-overview .manifesto-body {
    max-width: 850px;
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.85
}

.overview-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 48px;
    border-block: 1px solid var(--line);
    text-align: left
}

.overview-principles article {
    padding: 25px 24px 26px
}

.overview-principles article+article {
    border-left: 1px solid var(--line)
}

.overview-principles article>span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 700
}

.overview-principles h2 {
    margin: 12px 0 0;
    color: #e4edff;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 500
}

.overview-principles p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7
}

.process {
    background: var(--bg)
}

.process-rail {
    display: block;
    position: relative;
    height: 2px;
    margin: 71px 2% 24px;
    background: linear-gradient(90deg, #2766ff33, #17d9ed1f)
}

.process-rail-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    transform: scaleX(var(--process-progress, 0));
    transform-origin: left center;
    background: linear-gradient(90deg, #6c57ff, #2478ff 53%, #17d9ed);
    box-shadow: 0 0 13px #17d9ed6b;
    will-change: transform
}

.process-rail-dot {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(103, 215, 255, .68);
    border-radius: 50%;
    background: #09142f;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px #17d9ed40;
    transition: background .3s, box-shadow .3s, scale .3s
}

.process-rail-dot.is-active {
    background: #46e8f4;
    box-shadow: 0 0 9px #17d9ed, 0 0 22px #17d9edb8;
    scale: 1.22
}

.process-rail-dot-one {
    left: 0
}

.process-rail-dot-two {
    left: 33.333%
}

.process-rail-dot-three {
    left: 66.666%
}

.process-rail-dot-four {
    left: 100%
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px
}

.process-step {
    position: relative;
    transition: opacity .3s, transform .35s
}

.process-step.is-active .process-step-no {
    color: #f4fbff;
    text-shadow: 0 0 15px rgba(23, 217, 237, .36)
}

.process-step.is-active h3 {
    color: #f4fbff
}

.process-step.is-active .step-caption {
    color: #6dcfe6
}

.process-step-no {
    display: inline-block;
    margin-bottom: 18px;
    color: #39cce8;
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: .1em
}

.process-step h3 {
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-size: 22px;
    letter-spacing: -.04em;
    font-weight: 500
}

.process-step p {
    min-height: 81px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9
}

.step-caption {
    display: block;
    margin-top: 20px;
    color: #5e7192;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em
}

.technology {
    background-color: #060a16;
    background-image: linear-gradient(#0408146b, #0408146b), url(assets/toolkot-baclground.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.tech-heading {
    position: relative;
    z-index: 1
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 44px
}

.tech-card {
    min-width: 0;
    padding: 27px 28px 28px;
    border: 1px solid rgba(159, 180, 229, .14);
    border-radius: 8px;
    background: #0a112494;
    transition: border-color .22s ease, background-color .22s ease
}

.tech-card:hover {
    border-color: #4894ff4d;
    background-color: #0c152bc7
}

.tech-card-category {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    color: #8090ad;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em
}

.tech-card-category span {
    color: #54a0ff;
    font-family: var(--font-head)
}

.tech-card h3 {
    margin: 0 0 9px;
    color: #edf2fb;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500
}

.tech-card-description {
    max-width: 470px;
    min-height: 52px;
    margin: 0;
    color: #9ba7bd;
    font-size: 14px;
    line-height: 1.75
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none
}

.tech-list li {
    padding: 5px 9px;
    border: 1px solid rgba(159, 180, 229, .12);
    border-radius: 4px;
    color: #c1cad9;
    background: #ffffff06;
    font-size: 12px;
    line-height: 1.5
}

.tech-note {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    padding: 22px 0 0;
    border-top: 1px solid rgba(159, 180, 229, .14)
}

.tech-note-mark {
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(84, 160, 255, .38);
    border-radius: 50%;
    color: #70adff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1
}

.tech-note p {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin: 0;
    color: #8996ac;
    font-size: 13px;
    line-height: 1.7
}

.tech-note strong {
    color: #dce5f2;
    font-size: 14px;
    font-weight: 600
}

@media(max-width:720px) {
    .tech-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 32px
    }

    .tech-card {
        padding: 23px 21px 24px
    }

    .tech-card-category {
        margin-bottom: 18px
    }

    .tech-card-description {
        min-height: 0
    }

    .tech-list {
        margin-top: 20px
    }

    .tech-note {
        align-items: flex-start;
        gap: 13px;
        margin-top: 24px
    }

    .tech-note p {
        display: block
    }

    .tech-note strong {
        display: block;
        margin-bottom: 3px
    }
}

.team {
    background: radial-gradient(ellipse 52% 45% at 95% 44%, rgba(19, 66, 142, .095), transparent 100%)
}

.team-film {
    display: grid;
    grid-template-columns: minmax(245px, .72fr) minmax(0, 1.28fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: center;
    margin: 5px 0 54px;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(133, 163, 225, .13);
    border-radius: 22px;
    background: linear-gradient(125deg, #0a132ae6, #070c1b8a);
    box-shadow: inset 0 1px #ffffff06, 0 24px 80px #0000001f;
    overflow: hidden
}

.team-film-copy {
    padding: 8px 0 8px 2px
}

.team-film-copy .eyebrow {
    font-size: 8px;
    letter-spacing: .14em
}

.team-film-copy h3 {
    margin: 24px 0 14px;
    font-family: var(--font-head);
    font-size: clamp(27px, 3vw, 39px);
    line-height: 1.14;
    letter-spacing: -.06em;
    font-weight: 500
}

.team-film-copy>p:not(.eyebrow) {
    max-width: 360px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9
}

.team-film-footnote {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 29px;
    color: #8292b1;
    font-size: 8px;
    letter-spacing: .14em;
    font-weight: 700
}

.film-live-dot,
.team-film-loop>span {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #28e4c2;
    box-shadow: 0 0 12px #28e4c2a6
}

.team-film-visual {
    margin: 0;
    position: relative;
    min-width: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(109, 153, 240, .22);
    border-radius: 15px;
    background: #071024;
    box-shadow: 0 18px 50px #00000047;
    isolation: isolate
}

.team-film-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.team-film-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(4, 9, 22, .04), transparent 50%, rgba(4, 9, 22, .12)), linear-gradient(0deg, rgba(4, 9, 22, .72), transparent 26%)
}

.team-film-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #e7f0ffd6;
    font-size: 8px;
    letter-spacing: .14em;
    font-weight: 700;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .5)
}

.team-film-caption i {
    padding-inline: 5px;
    color: var(--cyan);
    font-style: normal
}

.team-film-loop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: #b7c7e5;
    font-size: 7px;
    letter-spacing: .12em
}

.team-film-loop>span {
    width: 5px;
    height: 5px
}

.team-film-status {
    color: inherit;
    font-size: inherit;
    font-weight: 700
}

.team-film-play {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 20px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(66, 220, 245, .55);
    border-radius: 999px;
    color: #f2fbff;
    background: #040c1fd1;
    box-shadow: 0 0 28px #19a3ff33, inset 0 1px #ffffff14;
    font: 600 12px var(--font-body);
    letter-spacing: .02em;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: border-color .2s, background .2s, box-shadow .2s
}

.team-film-play[hidden] {
    display: none
}

.team-film-play span {
    color: var(--cyan);
    font-size: 11px
}

.team-film-play:hover,
.team-film-play:focus-visible {
    border-color: var(--cyan);
    background: #091d39f2;
    box-shadow: 0 0 34px #19a3ff52;
    outline: none
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
}

.team-card {
    min-width: 0;
    transform-style: preserve-3d
}

.team-photo-wrap {
    position: relative;
    aspect-ratio: 4 / 4.75;
    overflow: hidden;
    border: 1px solid rgba(143, 167, 223, .15);
    border-radius: 18px;
    background: linear-gradient(145deg, #111d39, #080d1d);
    isolation: isolate
}

.team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(.84) contrast(1.03);
    transition: transform .7s cubic-bezier(.2, .65, .3, 1), filter .5s
}

.team-card:nth-child(1) .team-photo {
    object-position: center 28%
}

.team-card:nth-child(2) .team-photo {
    object-position: center 20%
}

.team-card:nth-child(3) .team-photo {
    object-position: center 14%
}

.team-card:nth-child(4) .team-photo {
    object-position: center 19%
}

.team-photo-wrap:after {
    content: "";
    position: absolute;
    inset: 20% 0 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, rgba(5, 8, 22, .62));
    opacity: .9
}

.team-card:hover .team-photo {
    transform: scale(1.055);
    filter: saturate(1.02) contrast(1.04)
}

.team-photo-index {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 13px;
    padding: 5px 7px;
    color: #d8e8ff;
    border: 1px solid rgba(209, 231, 255, .2);
    border-radius: 5px;
    background: #040b1c7a;
    backdrop-filter: blur(8px);
    font-size: 8px;
    letter-spacing: .12em
}

.team-photo-glow {
    position: absolute;
    z-index: 0;
    width: 80%;
    aspect-ratio: 1;
    left: 10%;
    bottom: -45%;
    opacity: 0;
    background: #145bff;
    filter: blur(50px);
    transition: opacity .35s
}

.team-card:hover .team-photo-glow {
    opacity: .27
}

.team-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 2px 0
}

.team-meta h3 {
    margin: 0;
    color: #e9f0ff;
    font-family: var(--font-head);
    font-size: clamp(14px, 1.25vw, 17px);
    line-height: 1.35;
    letter-spacing: -.035em;
    font-weight: 500
}

.team-meta p {
    margin: 5px 0 0;
    color: #8290ad;
    font-size: 11px
}

.team-arrow {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: #7f91b5;
    font-size: 14px;
    transition: color .2s, border .2s, background .2s
}

.team-card:hover .team-arrow,
.team-social:hover {
    color: var(--cyan);
    border-color: #17d9ed66;
    background: #17d9ed0f
}

.team-note {
    display: flex;
    align-items: center;
    gap: 17px;
    max-width: 870px;
    margin-top: 45px;
    padding: 19px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0b132787
}

.team-note-mark {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    flex-shrink: 0;
    border-radius: 9px;
    border: 1px solid rgba(23, 217, 237, .2);
    background: #17d9ed0f;
    color: var(--cyan)
}

.team-note p {
    margin: 0;
    color: #8b9ab7;
    font-size: 12px;
    line-height: 1.8
}

.contact {
    overflow: hidden;
    text-align: center;
    border-top: 1px solid rgba(159, 180, 229, .07);
    background: linear-gradient(180deg, #060b1b, #060918)
}

.contact-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column
}

.contact .eyebrow {
    justify-content: center
}

.contact h2 {
    margin-top: 24px;
    font-size: clamp(50px, 6.8vw, 86px)
}

.contact-copy {
    max-width: 510px;
    margin: 25px 0 28px;
    color: #a0aec8;
    font-size: 14px;
    line-height: 1.9
}

.button-large {
    min-height: 60px;
    padding-inline: 27px
}

.contact-email {
    margin-top: 20px;
    color: #7d8ead;
    font-size: 12px;
    transition: color .2s
}

.contact-email:hover {
    color: var(--cyan)
}

.contact-field-lines {
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
    background-image: linear-gradient(rgba(72, 115, 203, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(72, 115, 203, .16) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 77%)
}

.contact-glow {
    position: absolute;
    z-index: 0;
    width: 650px;
    height: 400px;
    top: 22%;
    left: 50%;
    transform: translate(-50%);
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(13, 82, 234, .22), rgba(0, 178, 224, .065) 42%, transparent 72%);
    filter: blur(40px)
}

.contact-decoration {
    position: absolute;
    z-index: -1;
    width: 500px;
    height: 320px;
    top: 14%;
    left: 50%;
    transform: translate(-50%);
    pointer-events: none
}

.deco-ring {
    position: absolute;
    inset: 10px 20px;
    border: 1px solid rgba(34, 111, 255, .18);
    border-radius: 50%;
    transform: rotate(-16deg)
}

.deco-ring-two {
    inset: 25px 0;
    border-color: #17d9ed1a;
    transform: rotate(20deg)
}

.deco-cross {
    position: absolute;
    top: 0;
    right: 8%;
    color: #17d9ed8c;
    font-size: 20px
}

.site-footer {
    border-top: 1px solid var(--line);
    background-color: #040713;
    background-image: linear-gradient(180deg, rgba(4, 7, 19, .8), rgba(4, 7, 19, .94)), url("assets/services-background.webp");
    background-position: center, center 44%;
    background-size: cover;
    background-repeat: no-repeat
}

.footer-main {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    align-items: center;
    gap: 30px;
    padding-block: 39px
}

.footer-brand .brand-mark-shell {
    width: 39px;
    height: 39px;
    flex-basis: 39px
}

.footer-brand .brand-mark {
    width: 28px;
    height: 28px
}

.footer-brand .brand-wordmark {
    font-size: 19px
}

.footer-tagline {
    margin: 0;
    color: #7e8dab;
    font-size: 11px;
    line-height: 1.7
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 17px
}

.footer-links a {
    color: #8390ac;
    font-size: 10px;
    transition: color .2s
}

.footer-email {
    justify-self: end;
    display: flex;
    gap: 12px;
    align-items: center;
    color: #d3deef;
    font-size: 11px
}

.footer-email span {
    color: var(--cyan);
    font-size: 16px
}

.footer-email:hover {
    color: var(--cyan)
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 60px;
    border-top: 1px solid rgba(159, 180, 229, .09);
    color: #5e6b85;
    font-size: 13px
}

.footer-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #74839f;
    font-size: 12px;
    letter-spacing: .06em
}

.footer-status .status-dot {
    width: 5px;
    height: 5px
}

.back-to-top {
    color: #7988a4;
    font-size: 12px;
    letter-spacing: .04em;
    transition: color .2s
}

.back-to-top:hover {
    color: var(--cyan)
}

.cursor-glow {
    position: fixed;
    z-index: 49;
    top: 0;
    left: 0;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(17, 109, 255, .07), transparent 68%);
    transform: translate(-50%, -50%);
    transition: opacity .3s
}

@media(hover:hover)and (pointer:fine) {
    body.has-cursor .cursor-glow {
        opacity: 1
    }
}

@media(prefers-reduced-motion:no-preference) {
    .hero-eyebrow {
        animation: subtle-rise .7s .08s both
    }

    @keyframes subtle-rise {
        0% {
            opacity: 0;
            transform: translateY(10px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }
}

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

    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .signal-track {
        animation: none !important
    }

    .typewriter-caret {
        animation: none !important;
        opacity: 1
    }
}

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

    .brand-mark-orbit,
    .orb-core-orbit {
        animation: none !important
    }

    .stage-galaxy:before {
        animation: galaxy-cloud-spin 48s linear infinite !important
    }

    .stage-galaxy:after {
        animation: galaxy-dust-breathe 8s ease-in-out infinite alternate !important
    }

    .galaxy-track-one {
        animation: galaxy-track-spin 34s linear infinite !important
    }

    .galaxy-track-two {
        animation: galaxy-track-spin 42s linear infinite reverse !important
    }

    .galaxy-track-three {
        animation: galaxy-track-spin 54s linear infinite !important
    }

    .stage-orbit-one {
        animation: galaxy-orbit-a 34s linear infinite !important
    }

    .stage-orbit-two {
        animation: galaxy-orbit-b 47s linear infinite !important
    }

    .stage-orbit-three {
        animation: galaxy-orbit-c 39s linear infinite !important
    }

    .stage-orbit-four {
        animation: galaxy-orbit-d 56s linear infinite !important
    }
}

@media(max-width:1000px) {
    .wrap {
        width: min(100% - 48px, 900px)
    }

    .section-pad {
        padding-block: 96px
    }

    .hero {
        height: min(850px, 100svh);
        min-height: 420px;
        padding: 0
    }

    .hero-grid {
        grid-template-columns: minmax(0, .9fr) minmax(350px, 1.1fr);
        gap: 12px
    }

    .hero h1 {
        font-size: clamp(51px, 6.6vw, 69px)
    }

    .hero-stage {
        min-height: 475px
    }

    .float-card-top {
        left: -2%
    }

    .float-card-bottom {
        right: -2%
    }

    .section-heading {
        gap: 32px
    }

    .company-overview h1 {
        font-size: 52px
    }

    .service-card {
        padding: 22px 20px
    }

    .service-card h3 {
        font-size: 22px
    }

    .manifesto-grid {
        gap: 65px
    }

    .manifesto-visual {
        min-height: 400px
    }

    .process-grid {
        gap: 22px
    }

    .team-film {
        grid-template-columns: minmax(215px, .72fr) minmax(0, 1.28fr);
        gap: 25px;
        padding: 20px
    }

    .team-film-copy h3 {
        font-size: clamp(25px, 3vw, 32px)
    }

    .team-grid {
        gap: 12px
    }

    .team-meta {
        align-items: flex-start
    }

    .team-meta h3 {
        font-size: 14px
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 24px
    }

    .footer-email {
        justify-self: start
    }
}

@media(max-width:720px) {
    html {
        scroll-padding-top: 72px
    }

    .wrap {
        width: calc(100% - 40px)
    }

    .section-pad {
        padding-block: 78px
    }

    .site-header {
        width: calc(100% - 24px);
        margin-top: 10px;
        top: 10px;
        border-radius: 25px
    }

    .nav-shell {
        min-height: 64px;
        padding-inline: 13px
    }

    .brand-mark-shell {
        width: 39px;
        height: 39px;
        flex-basis: 39px
    }

    .brand-mark {
        width: 28px;
        height: 28px
    }

    .brand-wordmark {
        font-size: 20px
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 102
    }

    .primary-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 12px 18px 18px;
        border: 1px solid rgba(194, 216, 255, .18);
        border-radius: 22px;
        background: #090f1fd1;
        box-shadow: 0 18px 42px #0000005c, inset 0 1px #ffffff12;
        backdrop-filter: blur(24px) saturate(145%);
        -webkit-backdrop-filter: blur(24px) saturate(145%);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s, transform .22s, visibility .22s
    }

    .primary-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible
    }

    .primary-nav>a:not(.nav-cta) {
        padding: 12px 2px;
        border-bottom: 1px solid rgba(159, 180, 229, .08);
        font-size: 14px
    }

    .nav-cta {
        justify-content: space-between;
        margin-top: 14px
    }

    .menu-toggle[aria-expanded=true] span:first-child {
        transform: translateY(3px) rotate(45deg)
    }

    .menu-toggle[aria-expanded=true] span:last-child {
        transform: translateY(-3px) rotate(-45deg)
    }

    .hero {
        height: min(850px, 100svh);
        min-height: 360px;
        padding: 0
    }

    .hero-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .hero-copy {
        padding-block: 36px 0
    }

    .hero h1 {
        margin-top: 25px;
        font-size: clamp(47px, 12vw, 66px)
    }

    .hero-lede {
        max-width: 500px;
        font-size: 15px
    }

    .hero-actions {
        gap: 20px;
        margin-top: 28px
    }

    .button {
        min-height: 51px;
        gap: 16px;
        padding-inline: 16px;
        font-size: 12px
    }

    .hero-trustline {
        margin-top: 26px
    }

    .hero-stage {
        width: 100%;
        min-height: min(410px, 105vw);
        max-height: 460px;
        margin-top: 8px
    }

    .stage-orbit-one {
        width: 76%;
        height: 41%
    }

    .stage-orbit-two {
        width: 92%;
        height: 58%
    }

    .float-card {
        min-width: 166px;
        gap: 8px;
        padding: 10px 11px
    }

    .float-card-top {
        top: 14%;
        left: -1%
    }

    .float-card-bottom {
        right: 0;
        bottom: 13%
    }

    .float-card b {
        font-size: 11px
    }

    .float-card small {
        font-size: 9px
    }

    .mini-icon {
        width: 27px;
        height: 27px
    }

    .stage-caption {
        bottom: 2%
    }

    .hero-bottom {
        padding-top: 10px
    }

    .hero-bottom-note {
        display: none
    }

    .signal-track {
        min-height: 58px;
        gap: 25px;
        font-size: 9px
    }

    .section-heading {
        display: block;
        margin-bottom: 35px
    }

    .section-heading h2,
    .manifesto h2 {
        margin-top: 17px;
        font-size: clamp(36px, 9.5vw, 50px)
    }

    .company-overview h1 {
        font-size: 40px
    }

    .company-overview .manifesto-lede {
        margin-top: 20px;
        font-size: 18px
    }

    .company-overview .manifesto-body {
        font-size: 14px
    }

    .overview-principles {
        grid-template-columns: 1fr;
        margin-top: 32px;
        text-align: center
    }

    .overview-principles article {
        padding: 20px 12px
    }

    .overview-principles article+article {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .overview-principles h2 {
        font-size: 17px
    }

    .section-intro {
        max-width: 540px;
        margin-top: 22px;
        font-size: 13px
    }

    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px
    }

    .service-card {
        min-height: 285px;
        padding: 18px 15px;
        border-radius: 16px
    }

    .service-number {
        font-size: 8px;
        letter-spacing: .1em
    }

    .service-icon {
        width: 37px;
        height: 37px;
        border-radius: 11px
    }

    .service-icon svg {
        width: 21px
    }

    .service-card h3 {
        font-size: clamp(19px, 4.8vw, 23px);
        margin-top: 22px
    }

    .service-card p {
        font-size: 11px;
        line-height: 1.75
    }

    .service-tags {
        gap: 4px;
        padding-top: 15px
    }

    .service-tags span {
        font-size: 8px;
        padding: 4px 6px
    }

    .service-card-note {
        grid-column: span 2;
        min-height: 240px;
        padding: 24px
    }

    .service-card-note h3 {
        font-size: 25px
    }

    .manifesto-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .manifesto-visual {
        min-height: auto;
        order: 2
    }

    .manifesto-orb {
        width: min(80%, 320px)
    }

    .manifesto-visual-label {
        bottom: -6px;
        left: 4%
    }

    .manifesto-copy {
        order: 1
    }

    .manifesto-lede {
        margin-top: 24px;
        font-size: 16px
    }

    .principle-list {
        margin-top: 24px
    }

    .process-rail {
        margin: 45px 0 20px
    }

    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px
    }

    .process-step p {
        min-height: auto
    }

    .step-caption {
        margin-top: 13px
    }

    .team-film {
        grid-template-columns: 1fr;
        gap: 23px;
        margin-bottom: 42px;
        padding: 18px;
        border-radius: 18px
    }

    .team-film-copy h3 {
        margin-top: 17px;
        font-size: clamp(29px, 7vw, 38px)
    }

    .team-film-copy>p:not(.eyebrow) {
        max-width: 500px;
        font-size: 12px
    }

    .team-film-footnote {
        margin-top: 18px
    }

    .team-film-visual {
        border-radius: 12px
    }

    .team-film-caption {
        left: 12px;
        right: 12px;
        bottom: 10px;
        font-size: 7px
    }

    .team-film-loop {
        font-size: 6px
    }

    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 13px
    }

    .team-photo-wrap {
        aspect-ratio: 4 / 4.8;
        border-radius: 14px
    }

    .team-meta {
        padding-top: 12px
    }

    .team-meta h3 {
        font-size: 14px
    }

    .team-meta p {
        font-size: 10px
    }

    .team-arrow {
        width: 27px;
        height: 27px
    }

    .team-note {
        margin-top: 30px;
        padding: 16px;
        gap: 12px
    }

    .team-note p {
        font-size: 11px
    }

    .contact h2 {
        font-size: clamp(46px, 12vw, 68px)
    }

    .contact-copy {
        font-size: 13px
    }

    .contact-decoration {
        width: 340px;
        height: 260px;
        top: 17%
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 24px 14px;
        padding-block: 30px
    }

    .footer-tagline {
        font-size: 10px
    }

    .footer-links {
        gap: 9px 12px
    }

    .footer-links a {
        font-size: 9px
    }

    .footer-email {
        font-size: 10px;
        gap: 6px
    }

    .footer-bottom {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px 20px;
        padding-block: 17px;
        font-size: 12px
    }

    .footer-status {
        order: 3;
        width: 100%
    }

    .back-to-top {
        margin-left: auto
    }

    .cursor-glow {
        display: none
    }
}

@media(max-width:390px) {
    .wrap {
        width: calc(100% - 32px)
    }

    .hero h1 {
        font-size: clamp(36px, 10.25vw, 40px)
    }

    .team-film-caption {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px
    }

    .hero-stage {
        min-height: 340px
    }

    .float-card {
        min-width: 150px
    }

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

    .service-card {
        min-height: 255px;
        padding: 21px
    }

    .service-card-note {
        grid-column: auto
    }

    .service-card h3 {
        font-size: 24px
    }

    .process-grid {
        gap: 26px 19px
    }

    .team-meta h3 {
        font-size: 12px
    }

    .team-arrow {
        width: 24px;
        height: 24px
    }

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

    .footer-email {
        justify-self: start
    }
}

.team-card {
    position: relative;
    padding: 0 0 18px;
    border: 1px solid rgba(143, 167, 223, .12);
    border-radius: 19px;
    background: linear-gradient(165deg, #0f1931eb, #070c1bf0);
    overflow: hidden;
    box-shadow: 0 12px 32px #0000001f;
    transition: border-color .28s ease, box-shadow .28s ease;
    will-change: transform
}

.team-card:hover {
    border-color: #17d9ed5c;
    box-shadow: 0 24px 55px #00000047, 0 0 30px #2478ff1a
}

.team-card .team-photo-wrap {
    border: 0;
    border-radius: 18px 18px 0 0
}

.team-card .team-meta {
    padding: 17px 17px 0;
    min-height: 62px
}

.team-card .team-meta h3 {
    font-size: clamp(15px, 1.2vw, 18px)
}

.team-card .team-meta p {
    font-size: 10px;
    line-height: 1.55
}

.team-bio {
    margin: 13px 17px 0;
    color: #9ba9c4;
    font-size: 11px;
    line-height: 1.8
}

.team-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 13px 17px 0
}

.team-skills span {
    padding: 5px 7px;
    border: 1px solid rgba(105, 139, 202, .18);
    border-radius: 5px;
    color: #b9c9e6;
    background: #1e315359;
    font-size: 9px;
    line-height: 1.2
}

.team-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px 17px 0;
    margin-top: 14px;
    border-top: 1px solid rgba(143, 167, 223, .1)
}

.team-socials a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d9e7ff;
    font-size: 10px;
    text-decoration: none;
    padding: 7px 10px;
    border: 1px solid rgba(143, 167, 223, .18);
    border-radius: 7px;
    background: #0c172db8;
    transition: color .2s, border-color .2s, background .2s, transform .2s
}

.team-socials a:hover,
.team-socials a:focus-visible {
    color: var(--cyan);
    border-color: #17d9ed6b;
    background: #17d9ed12;
    transform: translateY(-2px);
    outline: none
}

.team-socials a span {
    color: var(--cyan)
}

@media(max-width:900px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .team-bio {
        font-size: 12px
    }
}

@media(max-width:520px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .team-card {
        max-width: 420px;
        width: 100%;
        margin-inline: auto
    }

    .team-card .team-photo-wrap {
        aspect-ratio: 4/3.8
    }
}

.manifesto-orb .orb-core img {
    position: relative;
    z-index: 2
}

.process-step {
    opacity: 1
}

.projects {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #050816, #070c1d, #050816)
}

.projects:before {
    content: "";
    position: absolute;
    width: 620px;
    height: 460px;
    top: 12%;
    left: -270px;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(36, 120, 255, .12), transparent 70%);
    filter: blur(34px)
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px
}

.projects-grid .project-showcase {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 22px;
    height: 100%;
    padding: 20px;
    border-radius: 18px
}

.projects-grid .project-content h3 {
    font-size: clamp(27px, 2.5vw, 34px)
}

.project-showcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(25px, 4vw, 52px);
    align-items: center;
    padding: clamp(18px, 2.3vw, 30px);
    border: 1px solid rgba(143, 167, 223, .16);
    border-radius: 25px;
    background: linear-gradient(145deg, #0e1830eb, #070c1bf5);
    box-shadow: 0 28px 80px #0003
}

.project-showcase:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: .65;
    background: linear-gradient(135deg, rgba(23, 217, 237, .07), transparent 35%, transparent 70%, rgba(114, 83, 255, .07))
}

.project-video-frame {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(150, 178, 230, .2);
    border-radius: 17px;
    background: #050b19;
    box-shadow: 0 20px 46px #00000057;
    isolation: isolate
}

.project-demo-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #070c19
}

.project-video-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3, 8, 19, .58), transparent 25%, transparent 74%, rgba(3, 8, 19, .55))
}

.project-video-topline {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #e3edff;
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7)
}

.project-video-topline span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.project-video-topline i,
.project-video-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px #17d9edd9
}

.project-video-caption {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(215, 229, 255, .16);
    border-radius: 6px;
    color: #dce8ff;
    background: #030917ad;
    backdrop-filter: blur(9px);
    font-size: 8px;
    letter-spacing: .12em
}

.project-video-live-dot {
    width: 5px;
    height: 5px;
    flex-basis: 5px;
    animation: project-live-pulse 1.7s ease-in-out infinite
}

@keyframes project-live-pulse {

    0%,
    to {
        opacity: 1;
        box-shadow: 0 0 #17d9ed4d
    }

    50% {
        opacity: .7;
        box-shadow: 0 0 0 5px #17d9ed00
    }
}

.project-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 3px 0
}

.project-kicker-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.project-kicker,
.project-category {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 8px;
    border: 1px solid rgba(23, 217, 237, .23);
    border-radius: 5px;
    color: #9ceefa;
    background: #17d9ed0f;
    font-size: 8px;
    letter-spacing: .13em;
    line-height: 1.2
}

.project-category {
    border-color: #8fa7df2e;
    color: #9eacc8;
    background: #8fa7df0b
}

.project-content h3 {
    margin: 20px 0 15px;
    color: #f0f5ff;
    font-family: var(--font-head);
    font-size: clamp(30px, 3.3vw, 43px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.055em
}

.project-lede {
    margin: 0;
    color: #d3def4;
    font-size: 13px;
    line-height: 1.8
}

.project-description {
    margin: 12px 0 0;
    color: #8999b8;
    font-size: 11px;
    line-height: 1.85
}

.project-capabilities {
    display: grid;
    gap: 13px;
    margin-top: 22px
}

.project-capability {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 11px;
    align-items: start
}

.project-capability-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(23, 217, 237, .18);
    border-radius: 7px;
    color: var(--cyan);
    background: #17d9ed0e;
    font-size: 9px
}

.project-capability b {
    display: block;
    margin: 1px 0 4px;
    color: #e2ebfc;
    font-size: 11px;
    font-weight: 600
}

.project-capability p {
    margin: 0;
    color: #8493b0;
    font-size: 10px;
    line-height: 1.7
}

.project-tech-block {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid rgba(143, 167, 223, .13)
}

.project-tech-label {
    padding-top: 6px;
    color: #7182a4;
    font-size: 8px;
    letter-spacing: .14em
}

.project-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.project-tech-tags span {
    padding: 5px 8px;
    border: 1px solid rgba(143, 167, 223, .17);
    border-radius: 5px;
    color: #bac9e4;
    background: #13203a94;
    font-size: 9px
}

@media(max-width:1000px) {
    .projects-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px
    }

    .project-showcase {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px
    }

    .project-video-frame {
        aspect-ratio: 16 / 9
    }

    .project-content {
        padding: 4px 2px 2px
    }

    .project-content h3 {
        font-size: clamp(32px, 5vw, 44px)
    }

    .project-capabilities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 13px
    }

    .project-capability {
        grid-template-columns: 1fr;
        gap: 8px
    }
}

@media(max-width:600px) {

    .projects-grid .project-showcase,
    .project-showcase {
        gap: 23px;
        padding: 13px;
        border-radius: 19px
    }

    .project-video-frame {
        aspect-ratio: 16 / 9;
        border-radius: 12px
    }

    .project-video-topline {
        top: 10px;
        left: 9px;
        right: 9px;
        font-size: 7px;
        letter-spacing: .08em
    }

    .project-video-caption {
        left: 9px;
        bottom: 9px;
        font-size: 7px
    }

    .project-kicker,
    .project-category {
        font-size: 7px
    }

    .project-content h3 {
        margin-top: 16px;
        font-size: clamp(29px, 8vw, 39px)
    }

    .project-capabilities {
        grid-template-columns: 1fr;
        gap: 13px
    }

    .project-capability {
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 10px
    }

    .project-tech-block {
        gap: 9px
    }
}

@media(prefers-reduced-motion:reduce) {
    .project-video-live-dot {
        animation: none
    }
}

.portfolio-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.portfolio-project {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(159, 180, 229, .16);
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(14, 24, 48, .95), rgba(7, 12, 27, .98));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.portfolio-project[hidden] {
    display: none !important
}

.portfolio-gallery {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #080d18;
    touch-action: pan-y;
    outline-offset: -4px;
}

.portfolio-gallery-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    cursor: zoom-in;
}

.portfolio-gallery-label {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 9px;
    border: 1px solid rgba(224, 236, 255, .18);
    border-radius: 4px;
    background: rgba(5, 9, 20, .72);
    color: #e1eaff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
}

.portfolio-gallery-controls {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    border: 1px solid rgba(224, 236, 255, .16);
    border-radius: 7px;
    background: rgba(5, 9, 20, .82);
    color: #edf4ff;
    backdrop-filter: blur(12px);
}

.portfolio-gallery-arrow {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(159, 180, 229, .18);
    border-radius: 5px;
    background: rgba(255, 255, 255, .06);
    color: inherit;
    cursor: pointer;
    font-size: 18px;
}

.portfolio-gallery-arrow:hover {
    background: rgba(23, 217, 237, .16);
    border-color: rgba(23, 217, 237, .5)
}

.portfolio-gallery-counter {
    min-width: 48px;
    color: #bdc9df;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.portfolio-project-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
}

.portfolio-project-type {
    margin: 0 0 9px;
    color: #78dfeb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.portfolio-project-content h3 {
    margin: 0;
    color: #f2f6ff;
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.portfolio-project-description {
    margin: 11px 0 0;
    color: #aab7ce;
    font-size: 14px;
    line-height: 1.7;
}

.portfolio-project-features {
    display: grid;
    gap: 7px;
    width: 100%;
    margin: 15px 0 0;
    padding: 0 0 0 18px;
    color: #d0dcf0;
    font-size: 13px;
    line-height: 1.5;
}

.portfolio-project-features li::marker {
    color: #55d8e5
}

.portfolio-project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    width: 100%;
    margin-top: auto;
    padding-top: 18px;
}

.portfolio-project-tech span {
    padding: 5px 8px;
    border: 1px solid rgba(143, 167, 223, .2);
    border-radius: 4px;
    background: rgba(19, 32, 58, .62);
    color: #c5d2e8;
    font-size: 11px;
}

.portfolio-page-header {
    max-width: 800px;
    margin: 0 auto;
    padding: 130px 0 42px;
    text-align: center;
}

.portfolio-page-header .back-btn {
    margin-bottom: 26px
}

.portfolio-page-header h1 {
    margin: 10px 0 12px;
    color: #f2f6ff;
    font-family: var(--font-head);
    font-size: 48px;
    line-height: 1.12;
}

.portfolio-page-header > p:last-child {
    margin: 0;
    color: #aab7ce;
    font-size: 16px;
}

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 32px;
}

.portfolio-filter {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(159, 180, 229, .2);
    border-radius: 5px;
    background: rgba(255, 255, 255, .035);
    color: #b9c6dc;
    cursor: pointer;
    font-size: 13px;
}

.portfolio-filter:hover,
.portfolio-filter.active {
    border-color: rgba(23, 217, 237, .55);
    background: rgba(23, 217, 237, .1);
    color: #dffaff
}

.portfolio-project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
    padding-bottom: 90px;
}

.portfolio-project-list .portfolio-project {
    display: flex;
    flex-direction: column;
}

.portfolio-project-list .portfolio-gallery {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
}

.portfolio-project-list .portfolio-project-content {
    flex: 1 1 auto;
    padding: 22px;
}

.portfolio-project-list .portfolio-project-content h3 {
    font-size: 26px
}

.portfolio-project-list .portfolio-project[data-category="mobile"] .portfolio-gallery {
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at 50% 45%, #18243a, #080d18 70%);
}

.portfolio-project-list .portfolio-project[data-category="mobile"] .portfolio-gallery-image {
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .4));
}

@media(max-width: 1000px) {
    .portfolio-project-list {
        gap: 18px
    }

    .portfolio-project-list .portfolio-project-content {
        padding: 18px
    }

    .portfolio-project-list .portfolio-project-content h3 {
        font-size: 23px
    }
}

@media(max-width: 700px) {
    .portfolio-project-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px
    }

    .portfolio-project-content {
        padding: 19px
    }

    .portfolio-project-content h3 {
        font-size: 22px
    }

    .portfolio-page-header {
        padding-top: 110px;
        padding-bottom: 30px
    }

    .portfolio-page-header h1 {
        font-size: 36px
    }

    .portfolio-page-header > p:last-child {
        font-size: 14px
    }

    .portfolio-filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        margin-right: -16px;
        padding-bottom: 6px;
        scrollbar-width: thin
    }

    .portfolio-filter {
        flex: 0 0 auto
    }

    .portfolio-gallery-label {
        top: 9px;
        left: 9px;
        font-size: 9px
    }

    .portfolio-gallery-controls {
        right: 8px;
        bottom: 8px
    }

    .portfolio-gallery-arrow {
        width: 32px;
        height: 32px
    }

    .portfolio-project-list .portfolio-project-content h3 {
        font-size: 26px
    }

    .portfolio-project-list .portfolio-project[data-category="mobile"] .portfolio-gallery {
        aspect-ratio: 4 / 5;
        max-height: 520px
    }
}

.project-image-viewer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(54px, 7vh, 76px) clamp(16px, 5vw, 72px) 72px;
    overflow: hidden;
    border: 0;
    background: rgba(3, 6, 14, .97);
    color: #edf4ff;
}

.project-image-viewer[open] {
    display: grid;
    grid-template: auto minmax(0, 1fr) auto / minmax(48px, 1fr) minmax(0, 1200px) minmax(48px, 1fr);
    align-items: center;
    justify-items: center;
    gap: 10px 18px;
}

.project-image-viewer::backdrop {
    background: rgba(1, 3, 9, .9);
    backdrop-filter: blur(10px);
}

.project-image-viewer-title {
    grid-area: 1 / 2;
    justify-self: start;
    margin: 0;
    color: #dce7fa;
    font-size: 14px;
    font-weight: 600;
}

.project-image-viewer-image {
    grid-area: 2 / 2;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.project-image-viewer-close {
    position: absolute;
    top: 18px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(220, 232, 250, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    font-size: 27px;
    line-height: 1;
}

.project-image-viewer-arrow {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(220, 232, 250, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
}

.project-image-viewer-arrow[aria-label="Previous screenshot"] {
    grid-area: 2 / 1;
    justify-self: end
}

.project-image-viewer-arrow[aria-label="Next screenshot"] {
    grid-area: 2 / 3;
    justify-self: start
}

.project-image-viewer-arrow:hover,
.project-image-viewer-close:hover {
    border-color: rgba(23, 217, 237, .65);
    background: rgba(23, 217, 237, .14)
}

.project-image-viewer-counter {
    grid-area: 3 / 2;
    color: #b7c4d9;
    font-size: 12px;
    font-variant-numeric: tabular-nums
}

@media(max-width: 600px) {
    .project-image-viewer {
        padding: 68px 10px 74px
    }

    .project-image-viewer[open] {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 8px
    }

    .project-image-viewer-close {
        top: 12px;
        right: 12px
    }

    .project-image-viewer-arrow {
        width: 38px;
        height: 38px
    }
}

.hero-stage {
    position: relative
}

.stage-halo {
    width: min(64%, 400px)
}

.stage-galaxy {
    inset: 50% auto auto 50%;
    width: min(68%, 430px);
    height: min(68%, 430px);
    transform: translate(-50%, -50%);
    overflow: visible
}

.stage-galaxy:before,
.stage-galaxy:after {
    inset: 0
}

.galaxy-track {
    width: 82%;
    height: 45%
}

.galaxy-track-two {
    width: 72%;
    height: 68%
}

.galaxy-track-three {
    width: 96%;
    height: 29%
}

.stage-orbit-one {
    width: min(63%, 390px);
    height: min(40%, 230px)
}

.stage-orbit-two {
    width: min(70%, 430px);
    height: min(51%, 285px)
}

.stage-orbit-three {
    width: min(56%, 345px);
    height: min(63%, 355px)
}

.stage-orbit-four {
    width: min(72%, 440px);
    height: min(28%, 165px)
}

.hero-sculpture-fallback {
    inset: 0;
    display: grid;
    place-items: center
}

.hero-sculpture-fallback img {
    display: block;
    width: min(46%, 275px);
    max-width: 275px;
    min-width: 180px;
    height: auto;
    margin: 0;
    object-fit: contain;
    transform-origin: 50% 50%
}

@media(max-width:700px) {
    .stage-galaxy {
        width: min(78%, 390px);
        height: min(72%, 390px)
    }

    .stage-orbit-one {
        width: min(72%, 340px);
        height: min(39%, 190px)
    }

    .stage-orbit-two {
        width: min(78%, 370px);
        height: min(50%, 235px)
    }

    .stage-orbit-three {
        width: min(64%, 310px);
        height: min(62%, 290px)
    }

    .stage-orbit-four {
        width: min(80%, 380px);
        height: min(27%, 130px)
    }
}

#manifesto-visual-stage {
    position: relative;
    perspective: 1200px
}

#manifesto-orb {
    position: relative;
    transform-style: preserve-3d;
    cursor: grab;
    user-select: none
}

#manifesto-orb:active {
    cursor: grabbing
}

.manifesto-3d-canvas {
    position: absolute;
    inset: -24px;
    width: calc(100% + 48px) !important;
    height: calc(100% + 48px) !important;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 18px 42px rgba(23, 217, 237, .2))
}

#manifesto-orb.has-3d-logo .orb-core>img {
    opacity: 0;
    transform: rotate(-12deg) scale(.72);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none
}

#manifesto-orb.has-3d-logo .orb-core {
    background: radial-gradient(circle, #2478ff2e, #05081600 72%);
    border-color: #64e8f529;
    box-shadow: 0 0 70px #2478ff38, inset 0 0 32px #9861ff24
}

.manifesto-hud-node {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px;
    border-radius: 999px;
    background: #080e22c2;
    border: 1px solid rgba(100, 232, 245, .22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px #00000059, 0 0 18px #2478ff24;
    pointer-events: none;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .26s ease;
    will-change: transform
}

.manifesto-hud-node span {
    display: flex;
    flex-direction: column;
    line-height: 1.2
}

.manifesto-hud-node b {
    font-family: var(--font-head);
    font-size: 9.5px;
    letter-spacing: .08em;
    color: #eef3ff
}

.manifesto-hud-node small {
    font-size: 9.5px;
    color: #ebf1ffad
}

.hud-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0
}

.hud-dot-cyan {
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan)
}

.hud-dot-violet {
    background: var(--violet);
    box-shadow: 0 0 10px var(--violet)
}

.hud-dot-blue {
    background: var(--blue);
    box-shadow: 0 0 10px var(--blue)
}

.manifesto-hud-node-a {
    top: 6%;
    left: -2%
}

.manifesto-hud-node-b {
    top: 46%;
    right: -6%
}

.manifesto-hud-node-c {
    bottom: 8%;
    left: 2%
}

@media(max-width:720px) {
    .manifesto-hud-node {
        padding: 6px 10px
    }

    .manifesto-hud-node small {
        display: none
    }

    .manifesto-hud-node-a {
        top: 4%;
        left: 0
    }

    .manifesto-hud-node-b {
        top: 46%;
        right: -2%
    }

    .manifesto-hud-node-c {
        bottom: 6%;
        left: 2%
    }
}

.galaxy-track-four {
    width: 58%;
    height: 86%;
    transform: translate(-50%, -50%) rotate(-62deg);
    border-color: #3686f652;
    animation-duration: 46s;
    animation-direction: reverse
}

.galaxy-track-four i {
    right: 14%;
    width: 5px;
    height: 5px;
    background: #4ea8ff;
    box-shadow: 0 0 8px #2478ff, 0 0 16px #2478ffd9
}

.manifesto-orb {
    position: relative;
    width: min(100%, 390px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: visible;
    isolation: isolate
}

.orb-ring-a {
    transform: rotate(-22deg) scaleY(.46);
    animation: orb-flat-spin-a 24s linear infinite
}

.orb-ring-b {
    inset: 9%;
    border-color: #17d9ed3d;
    transform: rotate(38deg) scaleY(.52);
    animation: orb-flat-spin-b 32s linear infinite reverse
}

@keyframes orb-flat-spin-a {
    0% {
        transform: rotate(-22deg) scaleY(.46)
    }

    to {
        transform: rotate(338deg) scaleY(.46)
    }
}

@keyframes orb-flat-spin-b {
    0% {
        transform: rotate(38deg) scaleY(.52)
    }

    to {
        transform: rotate(398deg) scaleY(.52)
    }
}

.manifesto-3d-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 12px 28px rgba(23, 217, 237, .18))
}

#manifesto-orb.has-3d-logo .orb-core>img {
    opacity: 0;
    transform: rotate(-12deg) scale(.8);
    transition: opacity .4s ease, transform .4s ease
}

#manifesto-orb.has-3d-logo .orb-core {
    background: radial-gradient(circle, #2478ff33, #0508161a 72%);
    border-color: #64e8f538
}

.service-about {
    padding: 0 0 88px;
    scroll-margin-top: 88px;
    background: linear-gradient(180deg, #090f1ff0, #050816e0)
}

.service-detail-cover {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: clamp(340px, 42vw, 540px);
    overflow: hidden;
    background: #0b1530
}

.service-detail-cover img {
    position: absolute;
    z-index: -2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%
}

.service-detail-cover:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, #040916d1, #0409162e 78%), linear-gradient(0deg, rgba(5, 10, 24, .78), transparent 70%)
}

.service-cover-copy {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
    padding: 180px 0 54px
}

.service-cover-copy .eyebrow {
    margin: 0;
    color: var(--cyan)
}

.service-cover-copy h1 {
    max-width: 780px;
    margin: 14px 0 0;
    color: #f4f7ff;
    font-family: var(--font-head);
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.08;
    font-weight: 500
}

.service-detail-wrap {
    padding-top: 28px
}

.service-detail-lead {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(30px, 6vw, 76px);
    padding: 34px 0 52px;
    border-bottom: 1px solid var(--line)
}

.service-detail-intro {
    min-width: 0;
    color: #aab7ce;
    font-size: 16px;
    line-height: 1.85
}

.service-detail-intro p {
    margin: 0 0 16px
}

.service-detail-intro .service-detail-intro-lede {
    color: #e0e9fb;
    font-size: 19px;
    line-height: 1.75
}

.service-detail-content {
    min-width: 0;
    padding: 12px 0 0
}

.service-detail-content #service-detail-body {
    color: #aab7ce;
    font-size: 16px;
    line-height: 1.8
}

.service-detail-content #service-detail-body section {
    margin-top: 38px;
    padding-top: 28px;
    border-top: 1px solid var(--line)
}

.service-detail-content #service-detail-body h3 {
    margin: 0 0 12px;
    color: #f1f5ff;
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 500
}

.service-detail-content #service-detail-body section p {
    margin: 0 0 12px
}

.service-detail-content #service-detail-body ul,
.service-detail-content #service-detail-body ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 23px
}

.service-detail-content #service-detail-body li {
    padding-left: 4px
}

.service-detail-content #service-detail-body li::marker {
    color: var(--cyan)
}

.service-detail-content #service-detail-body li strong {
    color: #edf4ff
}

.service-detail-content #service-detail-body .service-detail-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-left: 2px solid var(--cyan);
    color: #c4d0e6;
    background: #17d9ed0f
}

.service-detail-visual {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 12px
}

.service-detail-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    border-radius: inherit;
    object-fit: contain
}

.service-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.service-detail-actions .button {
    cursor: pointer
}

.service-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    color: #b3c0d8;
    font: 600 14px var(--font-body);
    text-decoration: none;
    transition: color .2s
}

.service-detail-back:hover {
    color: var(--cyan)
}

@media(max-width:760px) {
    .service-detail-lead {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px
    }

    .service-detail-visual {
        width: min(100%, 560px);
        justify-self: center
    }
}

@media(max-width:600px) {
    .service-detail-cover {
        min-height: 280px
    }

    .service-cover-copy {
        width: calc(100% - 40px);
        padding: 150px 0 30px
    }

    .service-detail-wrap {
        padding-top: 20px
    }

    .service-detail-lead {
        padding: 24px 0 34px
    }

    .service-detail-intro {
        font-size: 14px
    }

    .service-detail-intro .service-detail-intro-lede {
        font-size: 16px
    }

    .service-detail-content #service-detail-body {
        font-size: 15px
    }

    .service-detail-content #service-detail-body h3 {
        font-size: 20px
    }

    .service-detail-actions {
        align-items: stretch;
        flex-direction: column
    }

    .service-detail-actions .button {
        width: 100%
    }
}

dialog.request-modal {
    position: fixed;
    inset: 0;
    width: min(920px, calc(100vw - 32px));
    max-width: none;
    max-height: min(90dvh, 880px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(159, 180, 229, .24);
    border-radius: 20px;
    color: var(--text);
    background: #090f20;
    box-shadow: 0 28px 90px #0000009e
}

dialog.request-modal::backdrop {
    background: #02050ec7
}

.request-modal-panel {
    width: 100%;
    max-height: min(90dvh, 880px);
    overflow-y: auto;
    padding: clamp(22px, 3vw, 36px);
    border: 0;
    border-radius: inherit;
    background: linear-gradient(150deg, #0d162cfa, #070c1bfc);
    box-shadow: none;
    scrollbar-color: rgba(112, 145, 198, .48) transparent;
    scrollbar-gutter: stable
}

.request-modal-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: start;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line)
}

.request-modal-heading .eyebrow {
    margin: 0;
    font-size: 10px
}

.request-modal-heading h2 {
    margin: 12px 0 8px;
    font-family: var(--font-head);
    font-size: clamp(27px, 3.2vw, 38px);
    font-weight: 500;
    line-height: 1.12
}

.request-modal-heading p:not(.eyebrow) {
    max-width: 640px;
    margin: 0;
    color: #9ba9c2;
    font-size: 14px;
    line-height: 1.65
}

.request-modal-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: #eaf2ff;
    background: #ffffff0b;
    font: 400 25px/1 var(--font-body);
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s
}

.request-modal-close:hover {
    color: var(--cyan);
    border-color: #17d9ed6b;
    background: #17d9ed12
}

.request-form {
    margin-top: 22px
}

.request-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important
}

.request-field {
    min-width: 0;
    gap: 7px;
    color: #dbe5f8;
    font-size: 13px;
    font-weight: 600
}

.request-field>span {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px
}

.request-field>span b {
    color: #72e2f1
}

.request-field small,
.request-needs legend small {
    color: #7585a0;
    font-size: 11px;
    font-weight: 400
}

.request-field input,
.request-field select,
.request-field textarea {
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid rgba(143, 167, 223, .2);
    border-radius: 9px;
    color: #edf4ff;
    background: #04091694;
    font: 400 14px/1.45 var(--font-body)
}

.request-field input::placeholder,
.request-field textarea::placeholder {
    color: #6f7d98
}

.request-field select {
    color-scheme: dark
}

.request-field textarea {
    min-height: 132px;
    resize: vertical
}

.request-needs {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(143, 167, 223, .17);
    border-radius: 10px
}

.request-needs legend {
    padding: 0 7px;
    color: #dbe5f8;
    font-size: 13px;
    font-weight: 600
}

.request-checks {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 8px
}

.request-checks label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 43px;
    padding: 9px 10px;
    border: 1px solid rgba(143, 167, 223, .12);
    border-radius: 8px;
    color: #aebbd2;
    background: #ffffff06;
    font-size: 12px;
    line-height: 1.35
}

.request-checks input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--cyan)
}

.request-field-hint {
    color: #7787a2;
    font-size: 11px;
    font-weight: 400
}

.request-form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.request-privacy-note {
    max-width: 390px;
    margin: 0;
    color: #74839e;
    font-size: 12px;
    line-height: 1.5
}

.request-form-actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    gap: 10px
}

.request-form-actions .button {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 13px;
    cursor: pointer
}

.request-cancel {
    border: 1px solid rgba(143, 167, 223, .2);
    color: #d7e1f4;
    background: #ffffff0b
}

.request-cancel:hover {
    border-color: #8fa7df61;
    background: #ffffff14
}

.request-form-status {
    margin: 12px 0 0;
    color: #8e9db8;
    font-size: 13px
}

@media(max-width:640px) {
    dialog.request-modal {
        width: calc(100vw - 20px);
        max-height: 94dvh;
        border-radius: 16px
    }

    .request-modal-panel {
        max-height: 94dvh;
        padding: 20px 17px
    }

    .request-modal-heading {
        grid-template-columns: minmax(0, 1fr) 38px;
        gap: 12px;
        padding-bottom: 17px
    }

    .request-modal-close {
        width: 38px;
        height: 38px
    }

    .request-modal-heading h2 {
        font-size: 27px
    }

    .request-form {
        margin-top: 18px
    }

    .request-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 15px !important
    }

    .request-needs {
        padding: 12px 10px
    }

    .request-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }

    .request-checks label {
        align-items: flex-start;
        min-height: 48px;
        padding: 9px 7px;
        font-size: 11px
    }

    .request-form-bottom {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-top: 18px
    }

    .request-form-actions {
        justify-content: flex-end
    }
}

body.is-loading {
    overflow: hidden
}

.site-loader {
    --uib-size: clamp(104px, 28vw, 150px);
    --uib-speed: 2.5s;
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    background: #050816;
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease
}

.site-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.loader-slices {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--uib-size);
    height: var(--uib-size)
}

.loader-slice {
    position: relative;
    width: 100%;
    height: calc(var(--uib-size) / 6)
}

.loader-slice:before,
.loader-slice:after {
    --uib-a: calc(var(--uib-speed) / -2);
    --uib-b: calc(var(--uib-speed) / -6);
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - var(--uib-size) / 12);
    width: calc(100% / 6);
    height: 100%;
    border-radius: 50%;
    background: var(--uib-color);
    animation: loader-orbit var(--uib-speed) linear infinite
}

.loader-slice:nth-child(1) {
    --uib-color: #17d9ed
}

.loader-slice:nth-child(2) {
    --uib-color: #17c9f1
}

.loader-slice:nth-child(3) {
    --uib-color: #2496fb
}

.loader-slice:nth-child(4) {
    --uib-color: #2478ff
}

.loader-slice:nth-child(5) {
    --uib-color: #3269ff
}

.loader-slice:nth-child(6) {
    --uib-color: #4a7cff
}

.loader-slice:nth-child(1):after {
    animation-delay: var(--uib-a)
}

.loader-slice:nth-child(2):before {
    animation-delay: var(--uib-b)
}

.loader-slice:nth-child(2):after {
    animation-delay: calc(var(--uib-a) + var(--uib-b))
}

.loader-slice:nth-child(3):before {
    animation-delay: calc(var(--uib-b) * 2)
}

.loader-slice:nth-child(3):after {
    animation-delay: calc(var(--uib-a) + var(--uib-b) * 2)
}

.loader-slice:nth-child(4):before {
    animation-delay: calc(var(--uib-b) * 3)
}

.loader-slice:nth-child(4):after {
    animation-delay: calc(var(--uib-a) + var(--uib-b) * 3)
}

.loader-slice:nth-child(5):before {
    animation-delay: calc(var(--uib-b) * 4)
}

.loader-slice:nth-child(5):after {
    animation-delay: calc(var(--uib-a) + var(--uib-b) * 4)
}

.loader-slice:nth-child(6):before {
    animation-delay: calc(var(--uib-b) * 5)
}

.loader-slice:nth-child(6):after {
    animation-delay: calc(var(--uib-a) + var(--uib-b) * 5)
}

@keyframes loader-orbit {

    0%,
    to {
        transform: translate(calc(var(--uib-size) * .25)) scale(.74);
        opacity: .65
    }

    25% {
        transform: translate(0) scale(.47);
        opacity: .3
    }

    50% {
        transform: translate(calc(var(--uib-size) * -.25)) scale(.74);
        opacity: .65
    }

    75% {
        transform: translate(0) scale(1);
        opacity: 1
    }
}

@media(prefers-reduced-motion:reduce) {
    .site-loader {
        transition: none
    }

    .loader-slice:before,
    .loader-slice:after {
        animation: none;
        opacity: .85;
        transform: none
    }
}

#request-modal .request-modal-panel {
    box-sizing: border-box;
    padding: clamp(22px, 3vw, 36px);
    overflow-x: hidden
}

#request-modal .request-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important
}

#request-modal .request-needs {
    min-width: 0
}

#request-modal .request-needs legend {
    max-width: 100%;
    white-space: normal
}

#request-modal .request-needs .request-checks {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 8px
}

#request-modal .request-needs .request-checks label {
    display: flex;
    align-items: center;
    min-width: 0;
    box-sizing: border-box;
    gap: 9px;
    min-height: 44px;
    padding: 9px 10px;
    overflow: hidden
}

#request-modal .request-needs .request-checks label>span {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    overflow-wrap: anywhere
}

#request-modal .request-needs .request-checks input[type=checkbox] {
    flex: 0 0 15px;
    width: 15px !important;
    min-width: 15px;
    height: 15px !important;
    padding: 0;
    margin: 0
}

#request-modal .request-field input,
#request-modal .request-field select,
#request-modal .request-field textarea {
    box-sizing: border-box !important;
    min-width: 0
}

@media(max-width:640px) {
    #request-modal .request-modal-panel {
        padding: 20px 17px
    }

    #request-modal .request-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 15px !important
    }

    #request-modal .request-needs .request-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }

    #request-modal .request-needs .request-checks label {
        align-items: flex-start;
        padding: 9px 7px
    }
}

body {
    font-size: 16px
}

.primary-nav>a:not(.nav-cta),
.nav-cta,
.button,
.text-link {
    font-size: 14px
}

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

.section-intro,
.contact-copy {
    font-size: 16px
}

.service-card p,
.manifesto-body,
.process-step p,
.team-film-copy>p:not(.eyebrow),
.team-note p {
    font-size: 14px
}

.service-tags span {
    font-size: 12px
}

.manifesto-lede {
    font-size: 20px
}

.principle b,
.project-capability b {
    font-size: 14px
}

.principle p,
.team-meta p,
.project-capability p {
    font-size: 13px
}

.process-step h3 {
    font-size: 24px
}

.team-meta h3,
.team-card .team-meta h3 {
    font-size: 17px
}

.team-card .team-meta p {
    font-size: 13px
}

.team-bio {
    font-size: 14px
}

.team-skills span,
.team-socials a {
    font-size: 11px
}

.footer-tagline,
.footer-email {
    font-size: 13px
}

.footer-links a {
    font-size: 12px
}

.project-lede {
    font-size: 16px
}

.project-description {
    font-size: 14px
}

.project-tech-tags span {
    font-size: 11px
}

.project-capabilities {
    gap: 16px
}

.projects-header h1 {
    margin: 16px 0;
    font-family: var(--font-head);
    font-size: clamp(40px, 6vw, 58px);
    line-height: 1.1
}

.projects-header>p {
    font-size: 17px
}

.filter-btn {
    font-size: 14px
}

.team-card[data-member-card] {
    cursor: pointer;
    transform: none !important;
}

.team-card[data-member-card]:hover {
    transform: none !important;
    border-color: rgba(143, 167, 223, .22);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
    z-index: auto;
}

.team-card[data-member-card]:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

.team-card[data-member-card]:hover .team-photo {
    transform: none;
    filter: none;
}

.team-card[data-member-card] .team-photo-glow {
    display: none;
}

.team-card[data-member-card] .team-photo-index {
    display: none;
}

.team-card[data-member-card] .team-photo-wrap {
    position: relative;
}

.team-card-more {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f2f7ff;
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    pointer-events: none;
}

.team-card[data-member-card]:hover .team-card-more,
.team-card[data-member-card]:focus-visible .team-card-more {
    color: #7ce4ed;
}

.team-card[data-member-card] .team-profile-extra,
.team-card[data-member-card] .team-socials,
.team-card[data-member-card] .team-arrow {
    display: none !important;
}

.member-dialog {
    position: fixed;
    inset: 0;
    width: min(900px, calc(100vw - 32px));
    max-width: none;
    max-height: min(88dvh, 760px);
    margin: auto;
    padding: 28px;
    overflow: auto;
    border: 1px solid rgba(159, 180, 229, .24);
    border-radius: 14px;
    background: linear-gradient(145deg, #101a31, #070c1b);
    color: var(--text);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .65);
}

.member-dialog::backdrop {
    background: rgba(2, 5, 14, .8);
    backdrop-filter: blur(8px);
}

.member-dialog-layout {
    display: grid;
    grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
    align-items: start;
    gap: 28px;
}

.member-dialog-photo {
    display: block;
    width: 100%;
    max-height: 560px;
    aspect-ratio: 4 / 5;
    border-radius: 9px;
    object-fit: cover;
}

.member-dialog-content {
    min-width: 0;
    padding: 12px 24px 8px 0;
}

.member-dialog-role {
    margin: 0 0 9px;
    color: #7ce4ed;
    font-size: 12px;
    font-weight: 600;
}

.member-dialog-content h2 {
    margin: 0 0 18px;
    color: #f2f6ff;
    font-family: var(--font-head);
    font-size: 30px;
    line-height: 1.2;
}

.member-dialog-bio .team-profile-bio {
    margin: 0 0 13px;
    color: #bfcbdf;
    font-size: 14px;
    line-height: 1.8;
}

.member-dialog-bio .team-profile-stack {
    margin: 16px 0 0;
    color: #87dfe8;
    font-size: 13px;
    line-height: 1.7;
}

.member-dialog-socials .team-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: none;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(143, 167, 223, .16);
    opacity: 1;
    overflow: visible;
    transform: none;
    visibility: visible;
}

.member-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(159, 180, 229, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: #f2f6ff;
    cursor: pointer;
    font-size: 24px;
}

.member-dialog-close:hover {
    border-color: rgba(23, 217, 237, .55);
    color: var(--cyan);
}

@media(max-width: 640px) {
    .member-dialog {
        width: calc(100vw - 24px);
        max-height: 92dvh;
        padding: 18px;
    }

    .member-dialog-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .member-dialog-photo {
        width: min(100%, 320px);
        max-height: 38dvh;
        aspect-ratio: 4 / 3;
        margin-inline: auto;
    }

    .member-dialog-content {
        padding: 0 2px 4px;
    }

    .member-dialog-content h2 {
        padding-right: 35px;
        font-size: 25px;
    }
}

@media(max-width:720px) {

    .section-intro,
    .contact-copy {
        font-size: 15px
    }

    .service-card p,
    .manifesto-body,
    .process-step p,
    .team-film-copy>p:not(.eyebrow),
    .team-note p,
    .project-description {
        font-size: 14px
    }

    .service-tags span {
        font-size: 10px
    }

    .team-meta h3,
    .team-card .team-meta h3 {
        font-size: 16px
    }
}

.team-card .team-profile-extra {
    text-align: center
}

.team-socials {
    justify-content: center
}

.team-card {
    position: relative;
    overflow: hidden;
    height: auto !important;
    transition: transform .4s cubic-bezier(.165, .84, .44, 1), box-shadow .4s ease
}

.team-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px #0006;
    z-index: 2
}

.team-photo {
    transition: transform .6s cubic-bezier(.165, .84, .44, 1)
}

.team-card:hover .team-photo {
    transform: scale(1.06)
}

.team-profile-extra,
.team-socials {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    overflow: hidden;
    transform: translateY(15px);
    transition: opacity .4s ease, visibility .4s ease, transform .4s cubic-bezier(.165, .84, .44, 1), max-height .4s ease, margin-top .4s ease
}

.team-card:hover .team-profile-extra,
.team-card:hover .team-socials {
    opacity: 1;
    visibility: visible;
    max-height: 400px;
    transform: translateY(0);
    margin-top: 15px
}

.typewriter-caret {
    display: inline-block;
    width: 6px;
    height: .9em;
    background-color: var(--accent-cyan, #64e8f5);
    vertical-align: baseline;
    margin-left: 6px;
    animation: blinkCursor 1s step-end infinite
}

@keyframes blinkCursor {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

.request-modal-panel {
    background: #0d1220;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 24px;
    box-shadow: 0 30px 60px #0009;
    padding: 40px
}

.request-field input,
.request-field select,
.request-field textarea {
    background: #ffffff08;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 14px 16px;
    color: #fff;
    transition: all .3s ease
}

.request-field input:focus,
.request-field select:focus,
.request-field textarea:focus {
    border-color: var(--accent-cyan, #64e8f5);
    background: #ffffff0f;
    outline: none
}

.request-form-grid {
    gap: 24px 20px
}

.request-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px
}

.request-checks label {
    background: #ffffff05;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .2s
}

.request-checks label:hover {
    background: #ffffff0d
}

.request-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    align-items: start;
    width: 100%
}

.request-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    position: relative
}

.request-field-wide {
    grid-column: 1 / -1 !important
}

.request-field input,
.request-field select,
.request-field textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100%;
    margin: 0
}

@media(max-width:768px) {
    .request-form-grid {
        grid-template-columns: 1fr !important
    }
}

.company-overview h2 {
    margin: 20px 0 0;
    font-family: var(--font-head);
    font-size: 64px;
    line-height: 1.08;
    letter-spacing: -.06em;
    font-weight: 500
}

.company-overview h2 .gradient-text {
    display: inline-block;
    font-size: clamp(26px, 3.6vw, 52px);
    white-space: nowrap
}

.company-overview h2 .gradient-text {
    font-size: min(9cqw, 52px)
}

.company-overview h2 {
    font-size: 52px
}

.company-overview h2 {
    font-size: 40px
}

.hero-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, #05081699, #05081659 45%, #050816e0)
}

.hero-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px
}

.hero .hero-content h1 {
    margin: 22px 0 20px;
    font-size: clamp(38px, 6vw, 78px);
    line-height: 1.03;
    max-width: 16ch
}

.hero-sub {
    max-width: 56ch;
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.55;
    color: #eef3ffd9;
    margin: 0 0 30px
}

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

.footer-socials {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    align-items: center
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: transform .2s ease, opacity .2s ease
}

.footer-socials img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
    transform: translateY(-2px);
    opacity: .8
}

.footer-legal {
    display: inline-flex;
    gap: 16px
}

.footer-legal a {
    color: inherit;
    opacity: .8
}

.engage-grid,
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 40px
}

.engage-card {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: #ffffff08
}

.engage-tag {
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--cyan)
}

.engage-card h3 {
    margin: 12px 0 8px;
    font-size: 24px
}

.engage-card ul {
    margin: 16px 0 0;
    padding-left: 18px;
    line-height: 1.7;
    opacity: .85
}

.why-grid {
    margin-top: 56px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

.why-grid h3 {
    font-size: 18px;
    margin: 0 0 6px
}

.why-grid p {
    margin: 0;
    opacity: .75;
    line-height: 1.55
}

.engage-note {
    margin-top: 36px;
    text-align: center;
    opacity: .8
}

.faq-list {
    max-width: 820px;
    margin: 40px auto 0;
    display: grid;
    gap: 12px
}

.faq-item {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 18px 22px;
    background: #ffffff08
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    list-style: none
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary:after {
    content: "+";
    float: right;
    color: var(--cyan)
}

.faq-item[open] summary:after {
    content: "\2013"
}

.faq-item p {
    margin: 12px 0 0;
    line-height: 1.65;
    opacity: .85
}

.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 130px 0 60px;
    line-height: 1.7
}

.legal-page h1 {
    font-size: clamp(34px, 5vw, 52px);
    margin: 0 0 8px
}

.legal-page h2 {
    font-size: 22px;
    margin: 32px 0 8px
}

.contact-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 16px
}

.trust-bar {
    border-block: 1px solid rgba(255, 255, 255, .08);
    background: #ffffff05
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    padding-block: 28px;
    text-align: center
}

.trust-grid b {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: -.03em
}

.trust-grid div:last-child b {
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 2.1
}

.trust-grid span {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .65
}