:root {
    --font-display: "Space Grotesk", "Segoe UI", sans-serif;
    --font-body: "Manrope", "Segoe UI", sans-serif;
    --bg: #080b0a;
    --surface: #101512;
    --paper: #e9eee9;
    --fg: #f2f5f1;
    --muted: #9aa59f;
    --mint: #31e8b0;
    --line: rgba(232, 242, 236, .14)
}

body {
    font-family: var(--font-body);
    font-optical-sizing: auto
}

h1,
h2,
h3,
.logo-official,
.btn,
.ghost,
.case-btn,
.navcta,
.navlinks,
.service-row b {
    font-family: var(--font-display)
}

h1,
h2,
h3 {
    text-wrap: balance
}

p {
    text-wrap: pretty
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

[id] {
    scroll-margin-top: 82px
}

a,
button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(49, 232, 176, .2)
}

nav {
    padding: 15px clamp(16px, 2.7vw, 42px);
    background: rgba(8, 11, 10, .76);
    border-color: rgba(255, 255, 255, .08)
}

.navlinks {
    font-weight: 600;
    letter-spacing: -.01em
}

.navlinks>a:not(.navcta) {
    position: relative;
    color: #c7d0cb;
    transition: color .25s ease
}

.navlinks>a:not(.navcta):after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -5px;
    height: 1px;
    background: var(--mint);
    transition: right .25s ease
}

.navlinks>a:not(.navcta):hover {
    color: var(--fg)
}

.navlinks>a:not(.navcta):hover:after {
    right: 0
}

.navcta,
.btn,
.ghost,
.case-btn {
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: 2px;
    font-weight: 650;
    letter-spacing: -.025em;
    transition: transform .25s var(--ease), background-color .25s ease, border-color .25s ease, color .25s ease
}

.navcta {
    padding: 11px 16px;
    border-color: rgba(255, 255, 255, .32)
}

.navcta:hover,
.ghost:hover,
.case-btn:hover {
    background: var(--fg);
    border-color: var(--fg);
    color: var(--bg);
    transform: translateY(-2px)
}

.btn {
    position: relative;
    padding: 14px 20px;
    border: 1px solid var(--mint);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%)
}

.btn:hover {
    background: #74f4cb;
    transform: translateY(-2px)
}

.btn:active,
.ghost:active,
.case-btn:active,
.navcta:active {
    transform: translateY(0) scale(.98)
}

.ghost,
.case-btn {
    border-color: rgba(255, 255, 255, .34)
}

.hero {
    min-height: 100dvh;
    align-items: center;
    padding: clamp(112px, 14vh, 156px) clamp(16px, 2.7vw, 42px) clamp(44px, 7vh, 76px)
}

.hero-bg {
    background:
        linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px),
        radial-gradient(circle at 76% 47%, rgba(49, 232, 176, .105), transparent 28%),
        linear-gradient(135deg, #080b0a 20%, #0d1411 60%, #080b0a);
    background-size: 56px 56px, 56px 56px, auto, auto;
    mask-image: linear-gradient(to bottom, #000 82%, transparent)
}

.hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, .76fr);
    gap: clamp(36px, 7vw, 110px);
    align-items: center;
    max-width: 1540px;
    margin: 0 auto
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 920px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .105em;
    text-transform: none;
    color: #c9d2cd
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 7.25vw, 8.4rem);
    line-height: .82;
    letter-spacing: -.075em;
    max-width: 12ch;
    margin: 22px 0 30px
}

.hero h1 em {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    color: var(--mint)
}

.hero-copy {
    max-width: 590px;
    justify-self: auto
}

.hero-copy p {
    max-width: 54ch;
    margin: 0 0 24px;
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.65;
    color: #b8c2bc
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px
}

.hero-actions .ghost {
    margin-left: 0
}

.hero-proof {
    display: flex;
    gap: 18px;
    padding: 0;
    margin-top: 32px;
    margin-bottom: 0;
    list-style: none;
    color: #77817b;
    font-size: .71rem;
    font-weight: 650
}

.hero-proof li {
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.hero-proof li:before {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--mint);
    box-shadow: 0 0 12px rgba(49, 232, 176, .72)
}

.hero-visual {
    position: relative;
    margin: 0;
    min-height: clamp(480px, 67vh, 720px);
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .09);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(49, 232, 176, .08), transparent 44%),
        rgba(9, 14, 12, .66);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 50px 120px rgba(0, 0, 0, .32)
}

.hero-visual:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(130deg, rgba(255, 255, 255, .035), transparent 32% 70%, rgba(49, 232, 176, .045))
}

#protocol-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block
}

.protocol-topline,
.protocol-endpoint,
.response-panel {
    position: absolute;
    z-index: 3;
    font-family: var(--font-display)
}

.protocol-topline {
    top: 18px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    color: #77827c;
    font-size: .65rem;
    font-weight: 650;
    letter-spacing: .06em
}

.protocol-topline span:last-child {
    color: var(--mint)
}

.motion-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mint);
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer
}

.motion-toggle:hover {
    color: var(--fg)
}

.protocol-endpoint {
    left: 20px;
    bottom: 18px;
    color: #79847e;
    font-size: .66rem
}

.response-panel {
    left: 50%;
    top: 50%;
    width: min(76%, 360px);
    transform: translate(-50%, -48%);
    padding: 18px;
    border: 1px solid rgba(207, 255, 234, .22);
    background: rgba(7, 12, 10, .66);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .34)
}

.response-route,
.response-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #89958e;
    font-size: .65rem
}

.response-route span {
    color: var(--mint);
    font-weight: 700
}

.response-route code {
    overflow: hidden;
    color: #aeb8b2;
    text-overflow: ellipsis;
    white-space: nowrap
}

.response-panel strong {
    display: block;
    margin: 22px 0 18px;
    font-size: clamp(4.4rem, 8.7vw, 7.6rem);
    line-height: .72;
    letter-spacing: -.09em;
    color: var(--fg)
}

.response-panel strong span {
    display: block;
    margin: 13px 0 0 5px;
    font-size: .19em;
    line-height: 1;
    letter-spacing: .18em;
    color: var(--mint)
}

.response-meta {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .09)
}

.response-meta b {
    color: #dce5e0;
    font-weight: 550
}

.hero-visual.webgl-fallback #protocol-canvas {
    display: none
}

.section,
.motion-sticky,
footer {
    padding-left: clamp(16px, 2.7vw, 42px);
    padding-right: clamp(16px, 2.7vw, 42px)
}

.section-head,
.work-grid,
.service-layout,
.process-grid,
.motion-sticky,
footer {
    max-width: 1540px;
    margin-left: auto;
    margin-right: auto
}

.section-head h2,
.service-sticky h2,
.motion-copy h2,
.final h2 {
    font-family: var(--font-display)
}

.portfolio-more {
    margin-top: 18px
}

.final-copy {
    max-width: 600px;
    margin: 0 auto 28px;
    color: #a0a7a2;
    line-height: 1.6
}

.final h2 em {
    font-family: inherit;
    font-style: normal
}

.footer-primary,
.footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 18px
}

.footer-links a {
    color: #a3ada7;
    transition: color .2s ease
}

.footer-links a:hover {
    color: var(--fg)
}

@media(max-width:1050px) {
    .hero-grid {
        grid-template-columns: 1fr .78fr;
        gap: 28px
    }

    .hero h1 {
        font-size: clamp(3.5rem, 7vw, 6.4rem)
    }

    .hero-visual {
        min-height: 540px
    }
}

@media(max-width:850px) {
    .hero {
        align-items: start;
        padding-top: 112px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 42px
    }

    .hero h1 {
        font-size: clamp(3.4rem, 14vw, 6.5rem);
        max-width: 9ch;
        line-height: .84
    }

    .hero-visual {
        width: min(100%, 620px);
        min-height: 470px;
        justify-self: center
    }

    .hero-proof {
        flex-wrap: wrap
    }
}

@media(max-width:560px) {
    .hero {
        padding-top: 98px;
        padding-bottom: 48px
    }

    .hero h1 {
        font-size: clamp(3.25rem, 15.1vw, 5.25rem);
        margin-top: 18px
    }

    .hero-copy p {
        font-size: .98rem
    }

    .hero-actions>a {
        flex: 1 1 auto
    }

    .hero-proof {
        gap: 9px 16px;
        margin-top: 24px
    }

    .hero-visual {
        min-height: 430px
    }

    .response-panel {
        width: calc(100% - 44px)
    }

    .response-panel strong {
        font-size: 5.6rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .motion-toggle {
        display: none
    }

    .navlinks>a:after,
    .navcta,
    .btn,
    .ghost,
    .case-btn {
        transition: none
    }
}