:root {

    --bg: #07111f;
    --bg-soft: #0b1728;
    --panel: #0e1c2e;
    --panel-2: #102238;

    --line: rgba(255,255,255,.10);
    --line-strong: rgba(255,255,255,.17);

    --text: #f2f6fb;

    --muted: #9aabbe;
    --muted-2: #6f8196;

    --accent: #67d9ff;
    --accent-2: #8b7cff;

    --white: #ffffff;

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

    --radius: 28px;

    --container: 1240px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--bg);

    color: var(--text);

    font-family:
        "DM Sans",
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;
}


body.modal-open {
    overflow: hidden;
}


::selection {

    background: var(--accent);

    color: #03101b;
}


a {

    color: inherit;

    text-decoration: none;
}


button,
input,
textarea,
select {

    font: inherit;
}


button {
    cursor: pointer;
}


.site-noise {

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: .035;

    z-index: 100;

    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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}


.cursor-glow {

    position: fixed;

    width: 360px;

    height: 360px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(103,217,255,.10),
            transparent 68%
        );

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

    z-index: 0;

    opacity: .75;
}


.container {

    width:
        min(
            var(--container),
            calc(100% - 48px)
        );

    margin:
        0 auto;

    position: relative;

    z-index: 2;
}


.section {

    padding:
        150px 0;

    position: relative;
}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 50;

    border-bottom:
        1px solid transparent;

    transition:
        .35s;
}


.site-header.scrolled {

    background:
        rgba(7,17,31,.82);

    backdrop-filter:
        blur(18px);

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


.nav-wrap {

    height: 84px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;
}


.brand {

    display: flex;

    align-items: center;

    gap: 12px;
}


.brand-mark {

    width: 35px;

    height: 35px;

    display: grid;

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

    gap: 3px;

    align-items: end;
}


.brand-mark span {

    display: block;

    border-radius: 2px;

    background:
        linear-gradient(
            180deg,
            var(--accent),
            var(--accent-2)
        );

    animation:
        markPulse 3s ease-in-out infinite;
}


.brand-mark span:nth-child(1) {
    height: 45%;
}


.brand-mark span:nth-child(2) {

    height: 75%;

    animation-delay:
        .2s;
}


.brand-mark span:nth-child(3) {

    height: 100%;

    animation-delay:
        .4s;
}


@keyframes markPulse {

    50% {

        transform:
            scaleY(.72);

        opacity: .65;
    }

}


.brand-text {

    font:
        800 15px/1
        "Manrope",
        sans-serif;

    letter-spacing:
        -.03em;
}


.brand-text span {

    display: block;

    font-size: 9px;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    color:
        var(--muted);

    margin-top: 5px;
}


.main-nav {

    display: flex;

    align-items: center;

    gap: 30px;

    font-size: 13px;

    color:
        #b6c3d1;
}


.main-nav > a {

    transition:
        .25s;
}


.main-nav > a:hover {

    color:
        var(--text);
}


.nav-cta {

    padding:
        11px 15px;

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

    border-radius:
        999px;

    color:
        var(--text) !important;
}


.nav-cta span {

    margin-left: 7px;

    color:
        var(--accent);
}


.menu-toggle {

    display: none;

    background:
        none;

    border: 0;

    width: 42px;

    height: 42px;
}


.menu-toggle span {

    display: block;

    width: 23px;

    height: 1px;

    background: #fff;

    margin: 7px auto;
}



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

.hero {

    min-height:
        900px;

    padding-top:
        185px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 78% 38%,
            rgba(77,128,255,.13),
            transparent 32%
        ),

        radial-gradient(
            circle at 15% 20%,
            rgba(103,217,255,.08),
            transparent 27%
        );
}


.hero-grid {

    display: grid;

    grid-template-columns:
        1.02fr .98fr;

    gap: 70px;

    align-items:
        center;
}


.eyebrow,
.section-kicker {

    font-size: 11px;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

    color:
        var(--accent);

    font-weight:
        700;
}


.eyebrow {

    display: flex;

    align-items:
        center;

    gap: 10px;

    margin-bottom:
        28px;
}


.pulse-dot {

    width: 7px;

    height: 7px;

    background:
        var(--accent);

    border-radius: 50%;

    box-shadow:
        0 0 0 7px
        rgba(103,217,255,.08);

    animation:
        pulse 2s infinite;
}


@keyframes pulse {

    50% {

        box-shadow:
            0 0 0 12px
            rgba(103,217,255,0);
    }

}


.hero h1 {

    font:
        800
        clamp(58px,7vw,100px)/.94
        "Manrope",
        sans-serif;

    letter-spacing:
        -.065em;

    margin:
        0 0 32px;

    max-width:
        850px;
}


.hero h1 em,
.section-heading h2 span,
.about-copy h2 span,
.location-copy h2 span,
.faq-intro h2 span,
.cta-inner em {

    font-style:
        normal;

    color:
        transparent;

    background:

        linear-gradient(
            100deg,
            #fff 10%,
            var(--accent) 52%,
            #9b91ff
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;
}


.hero-lead {

    max-width:
        640px;

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.8;

    margin:
        0 0 34px;
}


.hero-actions {

    display: flex;

    align-items: center;

    gap: 28px;
}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    border: 0;

    border-radius:
        999px;

    padding:
        16px 23px;

    font-weight:
        700;

    font-size:
        13px;

    transition:
        .3s;

    position: relative;

    overflow: hidden;
}


.btn span {

    transition:
        .3s;
}


.btn:hover span {

    transform:
        translate(3px,-3px);
}


.btn-primary {

    background:
        #eaf8ff;

    color:
        #07111f;

    box-shadow:
        0 12px 30px
        rgba(103,217,255,.12);
}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 45px
        rgba(103,217,255,.2);
}


.btn-secondary {

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

    color:
        var(--text);

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


.btn-secondary:hover {

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


.text-link {

    font-size:
        13px;

    color:
        #b9c6d4;
}


.text-link span {

    color:
        var(--accent);

    margin-left:
        8px;
}


.hero-proof {

    display: flex;

    gap: 25px;

    align-items:
        center;

    margin-top:
        70px;
}


.proof-item strong {

    display: block;

    font:
        700 13px
        "Manrope",
        sans-serif;
}


.proof-item span {

    display: block;

    color:
        var(--muted-2);

    font-size:
        11px;

    margin-top:
        3px;
}


.proof-divider {

    height: 28px;

    width: 1px;

    background:
        var(--line);
}



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

.hero-visual {

    position: relative;

    min-height:
        550px;
}


.visual-frame {

    position: absolute;

    inset:
        0 0 35px 20px;

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

    border-radius:
        28px;

    background:

        linear-gradient(
            145deg,
            rgba(18,39,63,.9),
            rgba(7,18,32,.94)
        );

    box-shadow:
        var(--shadow);

    overflow:
        hidden;

    transform:
        perspective(1000px)
        rotateY(-4deg)
        rotateX(2deg);

    transition:
        transform .6s;
}


.visual-frame:hover {

    transform:
        perspective(1000px)
        rotateY(0)
        rotateX(0)
        translateY(-5px);
}


.visual-topbar {

    height: 48px;

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

    display: flex;

    align-items:
        center;

    padding:
        0 17px;

    gap: 16px;

    color:
        #6f8196;

    font-size:
        9px;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.window-dots {

    display: flex;

    gap: 5px;
}


.window-dots i {

    width: 6px;

    height: 6px;

    border-radius:
        50%;

    background:
        #40536a;
}


.status {

    margin-left:
        auto;
}


.status b {

    display: inline-block;

    width: 5px;

    height: 5px;

    background:
        #67e3a1;

    border-radius:
        50%;

    margin-right:
        6px;
}


.visual-canvas {

    position: relative;

    height:
        calc(100% - 48px);

    overflow:
        hidden;
}


.grid-lines {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );
}


.floating-card {

    position: absolute;

    background:
        rgba(11,28,47,.92);

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

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.3);

    border-radius:
        18px;

    backdrop-filter:
        blur(12px);
}


.card-main {

    left: 11%;

    top: 15%;

    width: 55%;

    padding:
        24px;

    animation:
        float 5s
        ease-in-out
        infinite;
}


.mini-label {

    font-size:
        9px;

    letter-spacing:
        .16em;

    color:
        var(--muted);

    margin-bottom:
        15px;
}


.metric-row strong {

    font:
        800 55px/1
        "Manrope";
}


.metric-row span {

    color:
        var(--muted);
}


.metric-bar {

    height:
        6px;

    border-radius:
        9px;

    background:
        #182c41;

    margin:
        19px 0 11px;

    overflow:
        hidden;
}


.metric-bar span {

    display: block;

    height:
        100%;

    background:

        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-2)
        );

    border-radius:
        9px;
}


.metric-foot {

    display: flex;

    justify-content:
        space-between;

    font-size:
        9px;

    color:
        var(--muted);
}


.metric-foot b {

    color:
        #76dfac;
}


.card-small {

    display: flex;

    align-items:
        center;

    gap: 11px;

    padding:
        13px 15px;

    min-width:
        175px;

    animation:
        float 6s
        ease-in-out
        infinite;
}


.card-small b {

    display: block;

    font-size:
        11px;
}


.card-small small {

    display: block;

    color:
        var(--muted-2);

    font-size:
        9px;

    margin-top:
        2px;
}


.card-small-one {

    right:
        6%;

    top:
        20%;
}


.card-small-two {

    right:
        10%;

    bottom:
        17%;

    animation-delay:
        -2s;
}


.mini-icon {

    width:
        29px;

    height:
        29px;

    border-radius:
        9px;

    background:
        #172f48;

    display: grid;

    place-items:
        center;

    color:
        var(--accent);

    font-size:
        9px;

    font-weight:
        800;
}


.ring {

    width:
        29px;

    height:
        29px;

    border-radius:
        50%;

    border:
        2px solid
        var(--accent);

    display: grid;

    place-items:
        center;

    font-size:
        8px;

    color:
        #fff;
}


.code-window {

    position: absolute;

    bottom:
        8%;

    left:
        11%;

    width:
        48%;

    padding:
        18px 20px;

    border-radius:
        14px;

    background:
        #06111d;

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

    font:
        11px/2.05
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    color:
        #a5b8ca;

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


.indent {

    padding-left:
        18px;
}


.c1 {
    color: #a594ff;
}


.c2 {
    color: #68dfff;
}


.c3 {
    color: #75e5ad;
}


@keyframes float {

    50% {
        transform:
            translateY(-10px);
    }

}


.floating-tag {

    position: absolute;

    padding:
        10px 13px;

    border-radius:
        9px;

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

    background:
        #0c1c2f;

    color:
        #b8c7d6;

    font-size:
        9px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.22);
}


.tag-left {

    bottom: 0;

    left: 0;
}


.tag-right {

    right: 0;

    top: 6%;

    animation:
        float 4s
        ease-in-out
        infinite;
}


.hero-orbit {

    position: absolute;

    border:
        1px solid
        rgba(103,217,255,.09);

    border-radius:
        50%;

    pointer-events:
        none;
}


.orbit-one {

    width:
        720px;

    height:
        720px;

    right:
        -350px;

    top:
        80px;
}


.orbit-two {

    width:
        430px;

    height:
        430px;

    left:
        -270px;

    bottom:
        -220px;
}


.scroll-cue {

    position: absolute;

    bottom:
        30px;

    left:
        50%;

    transform:
        translateX(-50%);

    font-size:
        9px;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    color:
        #62758a;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.scroll-cue span {

    width:
        28px;

    height:
        1px;

    background:
        #62758a;
}



/* =========================
   LOGO STRIP
========================= */

.logo-strip {

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

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

    overflow:
        hidden;

    background:
        #081525;
}


.logo-strip-inner {

    height:
        75px;

    display:
        flex;

    align-items:
        center;

    gap:
        27px;

    white-space:
        nowrap;

    color:
        #62758a;

    font-size:
        9px;

    letter-spacing:
        .15em;
}


.strip-line {

    height:
        1px;

    background:
        var(--line);

    flex:
        1;

    min-width:
        35px;
}



/* =========================
   SECTION HEADINGS
========================= */

.section-heading {

    display:
        grid;

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

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        70px;
}


.section-heading h2,
.standards-head h2,
.about-copy h2,
.location-copy h2,
.faq-intro h2 {

    font:
        800
        clamp(42px,5vw,70px)/1
        "Manrope";

    letter-spacing:
        -.055em;

    margin:
        18px 0 0;
}


.section-heading p {

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.85;

    margin:
        0;
}



/* =========================
   SERVICES
========================= */

.services-section {

    background:

        linear-gradient(
            180deg,
            #07111f,
            #091626
        );
}


.services-grid {

    display:
        grid;

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

    gap:
        1px;

    background:
        var(--line);

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

    border-radius:
        24px;

    overflow:
        hidden;
}


.service-card {

    min-height:
        390px;

    background:
        var(--bg);

    padding:
        38px;

    position:
        relative;

    overflow:
        hidden;

    transition:
        .4s;
}


.service-card:hover {

    background:
        #0b1a2c;

    transform:
        translateY(-4px);

    z-index:
        2;
}


.service-card:after {

    content: "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    right:
        -130px;

    bottom:
        -130px;

    background:

        radial-gradient(
            circle,
            rgba(103,217,255,.13),
            transparent 70%
        );

    transition:
        .5s;
}


.service-card:hover:after {

    right:
        -70px;

    bottom:
        -70px;
}


.service-feature {

    grid-row:
        span 2;

    min-height:
        781px;

    background:

        linear-gradient(
            145deg,
            #0b1d31,
            #07111f
        );
}


.service-number {

    font:
        600 10px
        "Manrope";

    color:
        #5e7185;

    letter-spacing:
        .12em;
}


.service-icon {

    margin:
        65px 0 22px;

    width:
        48px;

    height:
        48px;

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

    border-radius:
        14px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--accent);

    font-weight:
        700;

    font-size:
        18px;
}


.service-feature .service-icon {

    margin-top:
        145px;
}


.service-card h3 {

    font:
        700 22px/1.2
        "Manrope";

    margin:
        0 0 13px;

    letter-spacing:
        -.025em;
}


.service-card p {

    font-size:
        13px;

    color:
        var(--muted);

    line-height:
        1.8;

    max-width:
        460px;
}


.service-card ul {

    list-style:
        none;

    padding:
        0;

    margin:
        27px 0 35px;
}


.service-card li {

    font-size:
        11px;

    color:
        #9eafc0;

    padding:
        8px 0;

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


.service-card li:before {

    content:
        "—";

    color:
        var(--accent);

    margin-right:
        9px;
}


.service-link {

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

    color:
        #d8e4ef;
}


.service-link span {

    color:
        var(--accent);

    margin-left:
        8px;
}



/* =========================
   MARQUEE
========================= */

.marquee-section {

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

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

    overflow:
        hidden;

    background:
        #091827;
}


.marquee-track {

    display:
        flex;

    align-items:
        center;

    gap:
        36px;

    width:
        max-content;

    white-space:
        nowrap;

    padding:
        25px 0;

    animation:
        marquee 30s
        linear
        infinite;

    font:
        700 13px
        "Manrope";

    color:
        #8799ad;
}


.marquee-track b {

    color:
        var(--accent);
}


@keyframes marquee {

    to {

        transform:
            translateX(-50%);
    }

}



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

.process-section {

    background:
        #081321;
}


.process-timeline {

    position:
        relative;
}


.process-line {

    position:
        absolute;

    left:
        31px;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        var(--line);
}


.process-line span {

    display:
        block;

    width:
        1px;

    background:

        linear-gradient(
            var(--accent),
            transparent
        );

    height:
        45%;

    animation:
        lineGrow 5s
        ease-in-out
        infinite
        alternate;
}


@keyframes lineGrow {

    to {

        height:
            85%;
    }

}


.process-step {

    display:
        grid;

    grid-template-columns:
        64px 1fr 100px;

    gap:
        32px;

    padding:
        35px 0;

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

    position:
        relative;
}


.step-index {

    width:
        63px;

    height:
        63px;

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

    border-radius:
        50%;

    background:
        #081522;

    display:
        grid;

    place-items:
        center;

    font-size:
        11px;

    color:
        var(--accent);

    z-index:
        2;
}


.step-content span {

    font-size:
        10px;

    color:
        var(--accent);

    text-transform:
        uppercase;

    letter-spacing:
        .15em;
}


.step-content h3 {

    font:
        700 27px
        "Manrope";

    letter-spacing:
        -.03em;

    margin:
        7px 0 8px;
}


.step-content p {

    color:
        var(--muted);

    font-size:
        13px;

    max-width:
        650px;

    margin:
        0;
}


.step-side {

    align-self:
        center;

    color:
        #5e7184;

    font:
        10px
        "Manrope";

    letter-spacing:
        .12em;

    text-align:
        right;
}



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

.capability-layout {

    display:
        grid;

    grid-template-columns:
        .42fr .58fr;

    gap:
        55px;

    align-items:
        stretch;
}


.capability-list {

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


.capability-tab {

    width:
        100%;

    border:
        0;

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

    background:
        none;

    color:
        var(--muted);

    padding:
        25px 0;

    display:
        grid;

    grid-template-columns:
        45px 1fr 30px;

    text-align:
        left;

    align-items:
        center;

    transition:
        .3s;
}


.capability-tab span {

    font-size:
        10px;

    color:
        #62758a;
}


.capability-tab strong {

    font:
        600 18px
        "Manrope";

    letter-spacing:
        -.02em;
}


.capability-tab i {

    font-style:
        normal;

    text-align:
        right;

    color:
        #587087;
}


.capability-tab:hover,
.capability-tab.active {

    color:
        var(--text);
}


.capability-tab.active strong {

    color:
        var(--accent);
}


.capability-panel {

    min-height:
        480px;

    position:
        relative;

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

    border-radius:
        26px;

    overflow:
        hidden;

    background:

        linear-gradient(
            140deg,
            #0c1f33,
            #07111e
        );
}


.panel-art {

    position:
        absolute;

    inset:
        0;

    padding:
        45px;

    transition:
        .5s;
}


.panel-art.hidden {

    display:
        none;
}


.art-browser {

    position:
        absolute;

    left:
        16%;

    top:
        17%;

    width:
        67%;

    height:
        47%;

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

    border-radius:
        17px;

    background:
        #0c1b2c;

    box-shadow:
        0 35px 70px
        rgba(0,0,0,.35);

    transform:
        rotate(-4deg);

    animation:
        browserFloat 6s
        ease-in-out
        infinite;
}


.art-header {

    height:
        30px;

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


.art-body {

    padding:
        27px;
}


.art-body span {

    display:
        block;

    width:
        65%;

    height:
        7px;

    background:
        #2c4055;

    margin-bottom:
        13px;

    border-radius:
        5px;
}


.art-body span:nth-child(2) {

    width:
        45%;
}


.art-body span:nth-child(3) {

    width:
        53%;
}


.art-body b {

    display:
        block;

    width:
        90px;

    height:
        27px;

    background:

        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-2)
        );

    border-radius:
        7px;

    margin-top:
        27px;
}


.art-orb {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(1px);
}


.orb-a {

    width:
        160px;

    height:
        160px;

    right:
        -30px;

    top:
        40px;

    background:

        radial-gradient(
            circle,
            rgba(103,217,255,.22),
            transparent 68%
        );
}


.orb-b {

    width:
        260px;

    height:
        260px;

    left:
        -110px;

    bottom:
        -100px;

    background:

        radial-gradient(
            circle,
            rgba(139,124,255,.2),
            transparent 68%
        );
}


@keyframes browserFloat {

    50% {

        transform:
            rotate(-1deg)
            translateY(-12px);
    }

}


.panel-caption {

    position:
        absolute;

    left:
        45px;

    bottom:
        38px;

    max-width:
        390px;
}


.panel-caption small {

    font-size:
        9px;

    color:
        var(--accent);

    letter-spacing:
        .14em;
}


.panel-caption strong {

    display:
        block;

    font:
        700 22px/1.2
        "Manrope";

    margin-top:
        8px;
}


.agency-grid {

    display:
        grid;

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

    gap:
        13px;

    width:
        70%;

    margin:
        60px auto;
}


.agency-grid i {

    height:
        90px;

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

    background:

        linear-gradient(
            145deg,
            #102941,
            #091522
        );

    border-radius:
        13px;

    animation:
        gridBlink 4s infinite;
}


.agency-grid i:nth-child(2n) {

    animation-delay:
        .6s;
}


.agency-grid i:nth-child(3n) {

    animation-delay:
        1.1s;
}


@keyframes gridBlink {

    50% {

        transform:
            translateY(-7px);

        border-color:
            rgba(103,217,255,.35);
    }

}


.content-stack {

    width:
        65%;

    margin:
        50px auto;
}


.content-stack div {

    height:
        65px;

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

    border-radius:
        12px;

    margin:
        12px 0;

    background:

        linear-gradient(
            90deg,
            #0f253c 65%,
            #112d45 65%
        );

    animation:
        stackFloat 5s infinite;
}


.content-stack div:nth-child(2) {
    animation-delay: .4s;
}


.content-stack div:nth-child(3) {
    animation-delay: .8s;
}


.content-stack div:nth-child(4) {
    animation-delay: 1.2s;
}


@keyframes stackFloat {

    50% {

        transform:
            translateX(9px);
    }

}


.shop-interface {

    width:
        70%;

    height:
        230px;

    margin:
        55px auto;

    display:
        grid;

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

    gap:
        14px;

    position:
        relative;
}


.shop-interface span {

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

    border-radius:
        12px;

    background:

        linear-gradient(
            145deg,
            #102a42,
            #0a1727
        );

    animation:
        shopPulse 4s infinite;
}


.shop-interface span:nth-child(2) {
    animation-delay: .5s;
}


.shop-interface span:nth-child(3) {
    animation-delay: 1s;
}


.shop-interface b {

    position:
        absolute;

    bottom:
        -35px;

    left:
        0;

    font:
        700 11px
        "Manrope";

    color:
        var(--accent);

    letter-spacing:
        .15em;
}


@keyframes shopPulse {

    50% {

        transform:
            translateY(-8px);
    }

}



/* =========================
   ABOUT
========================= */

.about-section {

    background:

        linear-gradient(
            180deg,
            #091625,
            #07111f
        );
}


.about-grid {

    display:
        grid;

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

    gap:
        110px;

    align-items:
        center;
}


.about-card {

    height:
        560px;

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

    border-radius:
        26px;

    position:
        relative;

    overflow:
        hidden;

    background:

        linear-gradient(
            145deg,
            #0d2339,
            #07111f
        );

    padding:
        35px;

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


.about-big {

    position:
        absolute;

    left:
        35px;

    bottom:
        70px;

    font:
        800 74px/.85
        "Manrope";

    letter-spacing:
        -.065em;
}


.about-big em {

    color:
        var(--accent);

    font-style:
        normal;
}


.about-stamp {

    position:
        absolute;

    right:
        30px;

    top:
        100px;

    width:
        85px;

    height:
        85px;

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

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    text-align:
        center;

    font:
        700 13px/.9
        "Manrope";

    transform:
        rotate(12deg);

    color:
        #b4c4d3;
}


.about-stamp span {

    font-size:
        8px;

    letter-spacing:
        .15em;

    color:
        var(--accent);
}


.about-lines {

    position:
        absolute;

    right:
        -40px;

    bottom:
        0;

    display:
        flex;

    gap:
        8px;

    align-items:
        flex-end;
}


.about-lines i {

    width:
        18px;

    height:
        150px;

    background:

        linear-gradient(
            180deg,
            transparent,
            var(--accent)
        );

    opacity:
        .15;
}


.about-lines i:nth-child(2) {
    height: 250px;
}


.about-lines i:nth-child(3) {
    height: 340px;
}


.about-lines i:nth-child(4) {
    height: 210px;
}


.about-lines i:nth-child(5) {
    height: 410px;
}


.about-copy > p {

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.9;

    max-width:
        670px;
}


.about-details {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

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

    margin-top:
        38px;
}


.about-details div {

    padding:
        18px 0;

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


.about-details small {

    display:
        block;

    color:
        #64778b;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    margin-bottom:
        5px;
}


.about-details strong {

    font-size:
        12px;

    font-weight:
        600;

    color:
        #d5e0ea;
}



/* =========================
   STANDARDS
========================= */

.standards-section {

    background:
        #081523;
}


.standards-head {

    margin-bottom:
        70px;
}


.standards-grid {

    display:
        grid;

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

    gap:
        1px;

    background:
        var(--line);

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


.standard {

    background:
        #081523;

    padding:
        35px;

    min-height:
        280px;

    transition:
        .3s;
}


.standard:hover {

    background:
        #0d1e31;
}


.standard span {

    font-size:
        10px;

    color:
        var(--accent);
}


.standard h3 {

    font:
        700 20px
        "Manrope";

    margin:
        55px 0 12px;
}


.standard p {

    font-size:
        12px;

    color:
        var(--muted);

    line-height:
        1.8;
}



/* =========================
   LOCATION
========================= */

.location-section {

    background:
        #07111f;
}


.location-card {

    display:
        grid;

    grid-template-columns:
        .82fr 1.18fr;

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

    border-radius:
        28px;

    overflow:
        hidden;

    background:
        #0a1828;
}


.location-copy {

    padding:
        58px;
}


.location-copy p {

    color:
        var(--muted);

    max-width:
        480px;

    font-size:
        14px;

    line-height:
        1.8;

    margin:
        25px 0;
}


.address-block {

    display:
        flex;

    gap:
        15px;

    padding:
        22px 0;

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

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

    margin-bottom:
        25px;
}


.address-icon {

    width:
        34px;

    height:
        34px;

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

    border-radius:
        9px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--accent);
}


.address-block strong {

    display:
        block;

    font:
        700 13px
        "Manrope";
}


.address-block span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.7;

    margin-top:
        4px;
}


.map-wrap {

    min-height:
        510px;

    position:
        relative;

    overflow:
        hidden;

    background:
        #102235;
}


.map-wrap iframe {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;

    filter:
        grayscale(.9)
        invert(.88)
        hue-rotate(180deg)
        brightness(.72)
        contrast(1.05);
}


.map-overlay {

    position:
        absolute;

    left:
        30px;

    bottom:
        30px;

    background:
        rgba(6,16,27,.9);

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

    padding:
        13px 17px;

    border-radius:
        12px;

    backdrop-filter:
        blur(10px);
}


.map-overlay b {

    display:
        block;

    font-size:
        11px;
}


.map-overlay small {

    color:
        var(--muted);

    font-size:
        9px;
}


.map-pin {

    display:
        inline-block;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 0 8px
        rgba(103,217,255,.1);

    margin-right:
        7px;
}



/* =========================
   FAQ
========================= */

.faq-section {

    background:
        #081523;
}


.faq-grid {

    display:
        grid;

    grid-template-columns:
        .55fr 1fr;

    gap:
        100px;
}


.faq-intro p {

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;

    max-width:
        340px;

    margin-top:
        28px;
}


.faq-list {

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


.faq-item {

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

    padding:
        0;
}


.faq-item summary {

    list-style:
        none;

    cursor:
        pointer;

    padding:
        25px 5px;

    font:
        600 16px
        "Manrope";

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.faq-item summary::-webkit-details-marker {

    display:
        none;
}


.faq-item summary:after {

    content:
        "+";

    font-size:
        20px;

    color:
        var(--accent);

    font-weight:
        400;

    transition:
        .3s;
}


.faq-item[open] summary:after {

    transform:
        rotate(45deg);
}


.faq-item p {

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.8;

    margin:
        0 35px 25px 5px;

    max-width:
        760px;
}



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

.contact-section {

    padding-top:
        80px;

    background:
        #07111f;
}


.contact-shell {

    display:
        grid;

    grid-template-columns:
        .7fr 1.3fr;

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

    border-radius:
        28px;

    overflow:
        hidden;

    background:

        linear-gradient(
            145deg,
            #0d2034,
            #091522
        );
}


.contact-intro {

    padding:
        60px 50px;

    background:

        linear-gradient(
            145deg,
            rgba(103,217,255,.07),
            transparent 60%
        );

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


.contact-intro h2 {

    font:
        800 62px/.94
        "Manrope";

    letter-spacing:
        -.06em;

    margin:
        20px 0;
}


.contact-intro p {

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;
}


.contact-details {

    margin-top:
        70px;
}


.contact-details a {

    display:
        block;

    padding:
        16px 0;

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


.contact-details small {

    display:
        block;

    color:
        #63768a;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    font-size:
        9px;
}


.contact-details strong {

    display:
        block;

    margin-top:
        4px;

    font-size:
        12px;

    font-weight:
        500;
}


.contact-form {

    padding:
        60px;
}


.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;
}


.contact-form label {

    display:
        block;

    color:
        #94a7ba;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

    margin-bottom:
        19px;
}


.contact-form input,
.contact-form textarea,
.contact-form select {

    display:
        block;

    width:
        100%;

    margin-top:
        8px;

    background:
        #081624;

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

    border-radius:
        10px;

    padding:
        14px 15px;

    color:
        var(--text);

    outline:
        none;

    text-transform:
        none;

    letter-spacing:
        0;

    font-size:
        13px;

    resize:
        vertical;

    transition:
        .25s;
}


.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {

    border-color:
        rgba(103,217,255,.55);

    box-shadow:
        0 0 0 4px
        rgba(103,217,255,.06);
}


.contact-form option {

    background:
        #0b1727;
}


.consent {

    display:
        flex !important;

    align-items:
        flex-start;

    gap:
        10px;

    text-transform:
        none !important;

    letter-spacing:
        0 !important;

    font-size:
        10px !important;

    line-height:
        1.5;

    color:
        #718398 !important;
}


.consent input {

    width:
        15px;

    height:
        15px;

    margin:
        0;

    accent-color:
        var(--accent);
}


.form-submit {

    margin-top:
        8px;
}


.form-note {

    font-size:
        10px;

    color:
        #61748a;

    margin-top:
        14px;
}


.form-status {

    min-height:
        20px;

    margin-top:
        8px;

    font-size:
        11px;

    color:
        var(--accent);
}



/* =========================
   CTA
========================= */

.cta-band {

    padding:
        135px 0;

    position:
        relative;

    overflow:
        hidden;

    background:
        #eaf8ff;

    color:
        #07111f;
}


.cta-glow {

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    right:
        -150px;

    top:
        -250px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(103,217,255,.5),
            transparent 65%
        );
}


.cta-inner {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;
}


.cta-inner > span {

    position:
        absolute;

    top:
        -50px;

    font-size:
        9px;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    color:
        #526678;
}


.cta-inner h2 {

    font:
        800
        clamp(48px,6vw,82px)/.92
        "Manrope";

    letter-spacing:
        -.06em;

    margin:
        0;
}


.cta-inner em {

    background:

        linear-gradient(
            100deg,
            #07111f,
            #4d61a9
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;
}


.cta-inner .btn {

    flex-shrink:
        0;
}


.btn-light {

    background:
        #fff;

    color:
        #07111f;
}



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

.site-footer {

    background:
        #050d17;

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


.footer-top {

    display:
        grid;

    grid-template-columns:
        1.8fr .7fr .8fr 1fr;

    gap:
        60px;

    padding:
        80px 0;
}


.footer-brand p {

    max-width:
        300px;

    color:
        #687b8e;

    font-size:
        12px;

    line-height:
        1.8;

    margin-top:
        22px;
}


.footer-col > span {

    display:
        block;

    color:
        #d5e0ea;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    margin-bottom:
        17px;
}


.footer-col a,
.footer-address {

    display:
        block;

    color:
        #718498;

    font-size:
        11px;

    margin:
        10px 0;

    transition:
        .2s;
}


.footer-col a:hover {

    color:
        var(--accent);
}


.footer-bottom {

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

    display:
        flex;

    justify-content:
        space-between;

    padding:
        22px 0;

    color:
        #526579;

    font-size:
        9px;

    letter-spacing:
        .04em;
}



/* =========================
   REVEAL
========================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.reveal.is-visible {

    opacity:
        1;

    transform:
        none;
}


.reveal-delay {

    transition-delay:
        .18s;
}



/* =========================
   LEGAL
========================= */

.legal-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    background:
        rgba(2,7,13,.82);

    backdrop-filter:
        blur(18px);

    display:
        none;

    padding:
        50px 20px;

    overflow:
        auto;
}


.legal-overlay.open {

    display:
        block;
}


.legal-modal {

    width:
        min(900px,100%);

    margin:
        auto;

    background:
        #0b1929;

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

    border-radius:
        25px;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.5);

    position:
        relative;
}


.legal-close {

    position:
        absolute;

    right:
        20px;

    top:
        20px;

    width:
        40px;

    height:
        40px;

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

    border-radius:
        50%;

    background:
        #091523;

    color:
        #fff;

    font-size:
        23px;

    z-index:
        2;
}


.legal-page {

    padding:
        65px;
}


.legal-page h1 {

    font:
        800 54px/1
        "Manrope";

    letter-spacing:
        -.055em;

    margin:
        18px 0;
}


.legal-updated {

    color:
        #6e8194;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    margin-bottom:
        40px;
}


.legal-page h2 {

    font:
        700 22px
        "Manrope";

    margin:
        35px 0 10px;
}


.legal-page p {

    color:
        #9badbf;

    font-size:
        14px;

    line-height:
        1.9;
}



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

@media(max-width:1050px) {

    .hero-grid {

        grid-template-columns:
            1fr;

        gap:
            70px;
    }


    .hero {

        padding-top:
            150px;
    }


    .hero-visual {

        max-width:
            700px;

        width:
            100%;

        margin:
            auto;
    }


    .services-grid {

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


    .service-feature {

        grid-row:
            span 1;

        min-height:
            500px;
    }


    .service-feature .service-icon {

        margin-top:
            65px;
    }


    .section-heading {

        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;
    }


    .about-card {

        max-width:
            650px;
    }


    .standards-grid {

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


    .capability-layout {

        grid-template-columns:
            1fr;
    }


    .faq-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .contact-shell {

        grid-template-columns:
            1fr;
    }


    .contact-intro {

        border-right:
            0;

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


    .contact-details {

        margin-top:
            40px;
    }


    .footer-top {

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

}



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

@media(max-width:760px) {

    .container {

        width:
            min(
                var(--container),
                calc(100% - 30px)
            );
    }


    .section {

        padding:
            100px 0;
    }


    .main-nav {

        display:
            none;

        position:
            absolute;

        left:
            15px;

        right:
            15px;

        top:
            74px;

        background:
            rgba(7,17,31,.97);

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

        border-radius:
            18px;

        padding:
            15px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

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


    .main-nav.open {

        display:
            flex;
    }


    .main-nav > a {

        padding:
            13px;
    }


    .nav-cta {

        text-align:
            center;

        margin-top:
            8px;
    }


    .menu-toggle {

        display:
            block;
    }


    .hero {

        min-height:
            auto;

        padding-top:
            135px;

        padding-bottom:
            100px;
    }


    .hero h1 {

        font-size:
            58px;
    }


    .hero-lead {

        font-size:
            15px;
    }


    .hero-proof {

        gap:
            12px;

        flex-wrap:
            wrap;

        margin-top:
            50px;
    }


    .proof-divider {

        display:
            none;
    }


    .hero-visual {

        min-height:
            420px;
    }


    .visual-frame {

        inset:
            0 0 25px;
    }


    .card-main {

        left:
            7%;

        width:
            70%;

        top:
            12%;
    }


    .card-small-one {

        right:
            3%;

        top:
            30%;
    }


    .card-small-two {

        right:
            4%;

        bottom:
            15%;
    }


    .code-window {

        left:
            7%;

        width:
            64%;

        font-size:
            9px;
    }


    .tag-right {

        display:
            none;
    }


    .logo-strip-inner {

        gap:
            20px;

        overflow:
            hidden;
    }


    .services-grid {

        grid-template-columns:
            1fr;
    }


    .service-feature {

        min-height:
            auto;
    }


    .service-card {

        min-height:
            330px;

        padding:
            28px;
    }


    .process-step {

        grid-template-columns:
            50px 1fr;

        gap:
            18px;
    }


    .step-index {

        width:
            50px;

        height:
            50px;
    }


    .step-side {

        display:
            none;
    }


    .capability-panel {

        min-height:
            420px;
    }


    .panel-caption {

        left:
            28px;

        bottom:
            28px;
    }


    .about-card {

        height:
            440px;
    }


    .about-big {

        font-size:
            58px;
    }


    .standards-grid {

        grid-template-columns:
            1fr;
    }


    .location-card {

        grid-template-columns:
            1fr;
    }


    .map-wrap {

        min-height:
            380px;
    }


    .location-copy {

        padding:
            35px;
    }


    .contact-intro,
    .contact-form {

        padding:
            35px;
    }


    .contact-intro h2 {

        font-size:
            52px;
    }


    .form-row {

        grid-template-columns:
            1fr;
    }


    .cta-inner {

        display:
            block;
    }


    .cta-inner h2 {

        font-size:
            58px;

        margin-bottom:
            35px;
    }


    .footer-top {

        grid-template-columns:
            1fr 1fr;

        gap:
            40px;
    }


    .footer-brand {

        grid-column:
            1/-1;
    }


    .footer-bottom {

        display:
            block;
    }


    .footer-bottom span {

        display:
            block;

        margin:
            5px 0;
    }


    .legal-page {

        padding:
            35px 25px;
    }


    .legal-page h1 {

        font-size:
            42px;
    }


    .cursor-glow {

        display:
            none;
    }

}



/* =========================
   REDUCED MOTION
========================= */

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

    *,
    *:before,
    *:after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;
    }


    .cursor-glow {

        display:
            none;
    }

}