@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap";
@layer base {
    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }
    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }
    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(
            --default-font-family,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            "Helvetica Neue",
            "Noto Sans",
            Arial,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol",
            "Noto Color Emoji"
        );
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }
    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }
    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit;
    }
    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit;
    }
    b,
    strong {
        font-weight: bolder;
    }
    code,
    kbd,
    samp,
    pre {
        font-family: var(
            --default-mono-font-family,
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            "Courier New",
            monospace
        );
        font-feature-settings: var(
            --default-mono-font-feature-settings,
            normal
        );
        font-variation-settings: var(
            --default-mono-font-variation-settings,
            normal
        );
        font-size: 1em;
    }
    small {
        font-size: 80%;
    }
    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative;
    }
    sub {
        bottom: -0.25em;
    }
    sup {
        top: -0.5em;
    }
    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }
    :-moz-focusring:where(:not(iframe)) {
        outline: auto;
    }
    progress {
        vertical-align: baseline;
    }
    summary {
        display: list-item;
    }
    ol,
    ul,
    menu {
        list-style: none;
    }
    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block;
    }
    img,
    video {
        max-width: 100%;
        height: auto;
    }
    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0;
    }
    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0;
    }
    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder;
    }
    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px;
    }
    ::file-selector-button {
        margin-inline-end: 4px;
    }
    ::placeholder {
        opacity: 1;
    }
    @supports (not ((-webkit-appearance: -apple-pay-button))) or
        (contain-intrinsic-size: 1px) {
        ::placeholder {
            color: currentColor;
        }
        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent);
            }
        }
    }
    textarea {
        resize: vertical;
    }
    ::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit;
    }
    ::-webkit-datetime-edit {
        display: inline-flex;
    }
    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }
    ::-webkit-datetime-edit {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-year-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-month-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-day-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-hour-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-minute-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-second-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }
    ::-webkit-calendar-picker-indicator {
        line-height: 1;
    }
    :-moz-ui-invalid {
        box-shadow: none;
    }
    button,
    input:where([type="button"], [type="reset"], [type="submit"]) {
        appearance: button;
    }
    ::file-selector-button {
        appearance: button;
    }
    ::-webkit-inner-spin-button {
        height: auto;
    }
    ::-webkit-outer-spin-button {
        height: auto;
    }
    [hidden]:where(:not([hidden="until-found"])) {
        display: none !important;
    }
}
@font-face {
    font-family: Aspekta;
    src: url(/fonts/AspektaVF.woff2) format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
:root {
    --background: 0 0% 4%;
    --foreground: 210 40% 96%;
    --border: 0 0% 17%;
    --card: 0 0% 7%;
    --primary: 217 93% 53%;
    --primary-foreground: 0 0% 100%;
    --muted: 220 16% 53%;
    --muted-foreground: 220 17% 68%;
    --app-font-sans: "Aspekta", ui-sans-serif, sans-serif;
    --app-font-mono: "DM Mono", ui-monospace, monospace;
    --display-font: "Aspekta", ui-sans-serif, sans-serif;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    background: hsl(var(--background));
    min-width: 320px;
    color: hsl(var(--foreground));
    font-family: var(--app-font-sans);
    -webkit-font-smoothing: antialiased;
    margin: 0;
}
button,
a,
input,
textarea {
    font: inherit;
}
button,
a {
    -webkit-tap-highlight-color: transparent;
}
a {
    color: inherit;
    text-decoration: none;
}
::selection {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}
.site-shell {
    overflow: clip;
}
.container {
    width: min(1160px, 100% - 48px);
    margin-inline: auto;
}
.mono {
    font-family: var(--app-font-mono);
}
.eyebrow {
    color: hsl(var(--primary));
    font: 500 11px/1 var(--app-font-mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.focus-ring:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 4px;
}
.topbar {
    z-index: 50;
    border-bottom: 1px solid #0000;
    transition:
        background 0.35s,
        border-color 0.35s,
        -webkit-backdrop-filter 0.35s,
        backdrop-filter 0.35s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.topbar.scrolled,
.topbar.open {
    border-color: hsl(var(--border) / 0.8);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: #0a0a0ae0;
}
.nav-inner {
    justify-content: space-between;
    align-items: center;
    height: 76px;
    display: flex;
}
.brand-logo {
    width: 138px;
    height: auto;
    display: block;
}
.nav-links {
    align-items: center;
    gap: 35px;
    display: flex;
}
.nav-link {
    color: #acb4c3;
    cursor: pointer;
    font-size: 12px;
    transition: color 0.2s;
}
.nav-link:hover {
    color: hsl(var(--foreground));
}
.nav-actions {
    align-items: center;
    gap: 12px;
    display: flex;
}
.menu-button {
    color: hsl(var(--foreground));
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 8px;
    display: none;
}
.button {
    cursor: pointer;
    border: 1px solid #0000;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 700;
    transition:
        transform 0.25s,
        background 0.25s,
        border-color 0.25s,
        color 0.25s;
    display: inline-flex;
}
.button:hover {
    transform: translateY(-2px);
}
.button-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 8px 30px hsl(var(--primary) / 0.22);
}
.button-primary:hover {
    box-shadow: 0 10px 34px hsl(var(--primary) / 0.36);
    background: #4489f8;
}
.button-ghost {
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
    background: #12121266;
}
.button-ghost:hover {
    border-color: hsl(var(--primary) / 0.7);
    background: hsl(var(--primary) / 0.08);
}
.button-small {
    min-height: 38px;
    padding-inline: 15px;
    font-size: 11px;
}
.hero {
    isolation: isolate;
    background: hsl(var(--background));
    align-items: center;
    min-height: 780px;
    padding: 190px 0 125px;
    display: flex;
    position: relative;
}
.hero-aurora {
    z-index: -1;
    pointer-events: none;
    opacity: 0.9;
    filter: blur(48px) saturate(1.15);
    transform: translate(
        calc(var(--pointer-x, 0) * 16px),
        calc(var(--pointer-y, 0) * 12px)
    );
    background: radial-gradient(34% 26% at 28% 48%, #186df77a, #0000 72%),
        radial-gradient(31% 24% at 68% 28%, #498cf859, #0000 72%),
        radial-gradient(35% 28% at 72% 72%, #0856d46e, #0000 70%);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: 16s ease-in-out infinite alternate aurora-drift;
    position: absolute;
    inset: -24% -18%;
}
.hero-circuit-grid {
    z-index: 0;
    pointer-events: none;
    opacity: 0.78;
    position: absolute;
    inset: 76px 0 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 10%, #0000 86%);
    mask-image: linear-gradient(#000 10%, #0000 86%);
}
.circuit-traces {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: visible;
}
.trace-path {
    fill: none;
    stroke: hsl(var(--primary) / 0.34);
    stroke-width: 1.2px;
    vector-effect: non-scaling-stroke;
}
.trace-light-trail {
    fill: none;
    stroke: url(#trace-gradient);
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-dasharray: 0.2 0.8;
    stroke-dashoffset: 1px;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px hsl(var(--primary)))
        drop-shadow(0 0 14px hsl(var(--primary) / 0.78));
    animation: 11.5s linear infinite trace-dash;
}
.trail-two {
    animation-duration: 13s;
    animation-delay: -6.5s;
}
.trail-three {
    animation-duration: 14.5s;
    animation-delay: -8.2s;
}
.trail-four {
    animation-duration: 12.6s;
    animation-delay: -9s;
}
.hero-content {
    z-index: 1;
    text-align: center;
    max-width: 950px;
    margin: auto;
    position: relative;
}
.hero-kicker {
    isolation: isolate;
    color: #b8bfcc;
    background: hsl(var(--foreground) / 0.035);
    border: 1px solid #0000;
    border-radius: 999px;
    align-items: center;
    padding: 9px 14px;
    display: inline-flex;
    position: relative;
    overflow: hidden;
}
.hero-kicker:before {
    content: "";
    z-index: -2;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        transparent 0 25%,
        hsl(var(--primary) / 0.1) 33%,
        hsl(var(--primary)) 42%,
        transparent 52% 100%
    );
    animation: 3.8s linear infinite border-flow;
    position: absolute;
    inset: -2px;
}
.hero-kicker:after {
    content: "";
    z-index: -1;
    border-radius: inherit;
    background: #0d0d0df0;
    position: absolute;
    inset: 1px;
}
.kicker-label {
    z-index: 1;
    letter-spacing: 0.12em;
    font: 500 11px/1 var(--app-font-mono);
    position: relative;
}
.kicker-label strong {
    color: hsl(var(--primary));
    font-weight: 500;
}
.hero h1 {
    font: 700 clamp(52px, 8.3vw, 112px) / 0.93 var(--display-font);
    letter-spacing: -0.072em;
    margin: 28px 0 27px;
}
.hero h1 em {
    color: hsl(var(--primary));
    font-style: normal;
}
.hero-description {
    color: #a3acbd;
    max-width: 575px;
    margin: auto;
    font-size: 15px;
    line-height: 1.7;
}
.hero-actions {
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
    display: flex;
}
.section {
    padding: 132px 0;
    position: relative;
}
.section-header {
    margin-bottom: 56px;
    display: block;
}
.section-title {
    font: 500 clamp(35px, 5.2vw, 66px) / 0.98 var(--display-font);
    letter-spacing: -0.06em;
    max-width: none;
    margin: 17px 0 0;
}
.section-title em {
    color: hsl(var(--primary));
    font-style: normal;
}
.section-lede {
    max-width: 760px;
    color: hsl(var(--muted-foreground));
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.75;
}
.signal-section,
.insights-section {
    background: #0d0d0d;
}
.about-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    align-items: start;
    gap: clamp(50px, 9vw, 130px);
    display: grid;
}
.about-intro h2 {
    font: 500 clamp(40px, 5.2vw, 70px) / 0.98 var(--display-font);
    letter-spacing: -0.065em;
    max-width: none;
    margin: 20px 0 0;
}
.about-intro h2 span {
    color: hsl(var(--primary));
}
.about-story {
    padding-top: 2px;
}
.about-lede {
    color: #cacfd8;
    max-width: 540px;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}
.about-principles {
    border-top: 1px solid hsl(var(--border));
    margin-top: 16px;
    display: grid;
}
.about-principle {
    border-bottom: 1px solid hsl(var(--border));
    grid-template-columns: 42px 1fr;
    gap: 16px;
    padding: 10px 0;
    display: grid;
}
.about-principle-mark {
    color: hsl(var(--primary));
    place-items: start;
    padding-top: 3px;
    display: grid;
}
.about-principle strong {
    color: hsl(var(--foreground));
    font-size: 14px;
    font-weight: 600;
    display: block;
}
.about-principle p {
    color: hsl(var(--muted-foreground));
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.6;
}
.projects-section {
    background: hsl(var(--background));
}
.project-track {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 18px;
    margin-left: max(16px, 50vw - 580px);
    padding: 0 max(16px, 50vw - 580px) 4px 0;
    display: flex;
    overflow-x: auto;
}
.project-track::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.project-card {
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    scroll-snap-align: start;
    cursor: pointer;
    text-align: left;
    border-radius: 18px;
    flex: 0 0 min(660px, 100vw - 64px);
    min-height: 430px;
    transition:
        border-color 0.3s,
        transform 0.3s;
    position: relative;
    overflow: hidden;
}
.project-card:hover {
    border-color: hsl(var(--primary) / 0.7);
    transform: translateY(-4px);
}
.project-content {
    z-index: 1;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    display: flex;
    position: absolute;
    bottom: 25px;
    left: 27px;
    right: 27px;
}
.project-content h3 {
    font: 500 31px var(--display-font);
    letter-spacing: -0.04em;
    margin: 7px 0 0;
}
.project-meta {
    color: #b5bcc9;
    font-size: 11px;
}
.project-category {
    font-family: var(--app-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 10px;
}
.project-category.raspberry {
    color: #f06a92;
}
.project-category.cyan {
    color: #6be2fa;
}
.project-category.purple {
    color: #d196f8;
}
.project-category.green {
    color: #67e9b1;
}
.project-category.amber {
    color: #fcd069;
}
.project-arrow {
    border: 1px solid hsl(var(--foreground) / 0.26);
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    transition:
        background 0.25s,
        transform 0.25s;
    display: grid;
}
.project-card:hover .project-arrow {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    transform: translate(3px, -3px);
}
.services-section {
    background: #111;
}
.service-list {
    border-top: 1px solid hsl(var(--border));
}
.service-row {
    border-bottom: 1px solid hsl(var(--border));
    cursor: pointer;
    grid-template-columns: 54px 1fr 1.35fr;
    align-items: center;
    gap: 22px;
    padding: 25px 0;
    transition:
        padding 0.3s,
        color 0.3s;
    display: grid;
}
.service-row:hover {
    color: hsl(var(--primary));
    padding-left: 14px;
    padding-right: 14px;
}
.service-icon {
    border: 1px solid hsl(var(--primary) / 0.38);
    width: 44px;
    height: 44px;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.1);
    border-radius: 12px;
    place-items: center;
    display: grid;
}
.service-row:nth-child(1) .service-icon {
    color: #f06a92;
    background: #f06a921a;
    border-color: #f06a9266;
}
.service-row:nth-child(2) .service-icon {
    color: #6be2fa;
    background: #6be2fa1a;
    border-color: #6be2fa66;
}
.service-row:nth-child(3) .service-icon {
    color: #d196f8;
    background: #d196f81a;
    border-color: #d196f866;
}
.service-row:nth-child(4) .service-icon {
    color: #67e9b1;
    background: #67e9b11a;
    border-color: #67e9b166;
}
.service-row:nth-child(5) .service-icon {
    color: #fcd069;
    background: #fcd0691a;
    border-color: #fcd06966;
}
.service-name {
    font: 500 26px var(--display-font);
    letter-spacing: -0.04em;
    color: hsl(var(--foreground));
}
.service-desc {
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    line-height: 1.5;
}
.insight-grid {
    border-top: 1px solid hsl(var(--border));
    border-left: 1px solid hsl(var(--border));
    grid-template-columns: repeat(3, 1fr);
    display: grid;
}
.insight-card {
    border-right: 1px solid hsl(var(--border));
    border-bottom: 1px solid hsl(var(--border));
    cursor: pointer;
    text-align: left;
    min-height: 430px;
    padding: 24px;
    transition:
        background 0.3s,
        transform 0.3s;
}
.insight-card:hover {
    background: hsl(var(--primary) / 0.06);
}
.insight-thumb {
    background: hsl(var(--background));
    border-radius: 10px;
    height: 158px;
    overflow: hidden;
}
.insight-thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: block;
}
.insight-card:hover .insight-thumb img {
    transform: scale(1.04);
}
.insight-card h3 {
    font: 500 23px var(--display-font);
    letter-spacing: -0.04em;
    margin: 18px 0 13px;
}
.insight-card p {
    color: hsl(var(--muted-foreground));
    font-size: 12px;
    line-height: 1.6;
}
.insight-card .read-meta {
    color: hsl(var(--muted));
    font: 10px var(--app-font-mono);
    justify-content: space-between;
    margin-top: 22px;
    display: flex;
}
.contact-section {
    color: hsl(var(--primary-foreground));
    background: linear-gradient(116deg, #09328b, #186df7 48%, #6daefd);
    padding: 126px 0 112px;
    position: relative;
    overflow: hidden;
}
.contact-section:before {
    content: "";
    opacity: 0.16;
    background-image: linear-gradient(
        135deg,
        transparent 48%,
        hsl(var(--primary-foreground) / 0.45) 49%,
        transparent 50%
    );
    mix-blend-mode: overlay;
    background-size: 36px 36px;
    position: absolute;
    inset: 0;
}
.contact-section:after {
    content: "";
    border: 1px solid hsl(var(--primary-foreground) / 0.25);
    width: 580px;
    height: 580px;
    box-shadow:
        0 0 0 44px hsl(var(--primary-foreground) / 0.04),
        0 0 0 110px hsl(var(--primary-foreground) / 0.035);
    pointer-events: none;
    border-radius: 50%;
    position: absolute;
    top: -230px;
    right: -180px;
}
.contact-inner {
    z-index: 1;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr);
    align-items: end;
    gap: 70px;
    display: grid;
    position: relative;
}
.contact-section .eyebrow {
    color: hsl(var(--primary-foreground) / 0.64);
}
.contact-title {
    max-width: none;
    font: 600 clamp(47px, 8vw, 103px) / 0.91 var(--display-font);
    letter-spacing: -0.08em;
    margin: 18px 0 0;
}
.contact-title em {
    color: #0c0f17;
    font-style: normal;
}
.contact-note {
    max-width: 330px;
    color: hsl(var(--primary-foreground) / 0.8);
    margin: 35px 0 0;
    font-size: 13px;
    line-height: 1.7;
}
.contact-button {
    background: hsl(var(--primary-foreground));
    color: hsl(var(--primary));
    margin-top: 28px;
}
.contact-button:hover {
    color: hsl(var(--foreground));
    background: #131825;
}
.footer {
    background: hsl(var(--background));
    padding: 34px 0;
}
.footer-inner {
    color: hsl(var(--muted));
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    font-size: 11px;
    display: flex;
}
.footer-logo {
    width: 110px;
}
.reveal {
    opacity: 0;
    transition:
        opacity 0.75s,
        transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateY(22px);
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 {
    transition-delay: 0.1s;
}
.delay-2 {
    transition-delay: 0.2s;
}
.delay-3 {
    transition-delay: 0.3s;
}
.hero .reveal {
    opacity: 1;
    animation: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both hero-in;
    transform: none;
}
.hero .delay-1 {
    animation-delay: 0.1s;
}
.hero .delay-2 {
    animation-delay: 0.2s;
}
.hero .delay-3 {
    animation-delay: 0.3s;
}
.modal-backdrop {
    z-index: 100;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #07090dc7;
    place-items: center;
    padding: 20px;
    display: grid;
    position: fixed;
    inset: 0;
}
.modal {
    border: 1px solid hsl(var(--border));
    background: #141824;
    border-radius: 18px;
    width: min(550px, 100%);
    max-height: min(90vh, 700px);
    padding: 30px;
    overflow: auto;
    box-shadow: 0 24px 90px #02040880;
}
.modal-head {
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    display: flex;
}
.modal h2 {
    font: 500 34px var(--display-font);
    letter-spacing: -0.05em;
    margin: 10px 0 0;
}
.close-button {
    color: hsl(var(--muted));
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 3px;
}
.close-button:hover {
    color: hsl(var(--foreground));
}
@keyframes hero-in {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes aurora-drift {
    0% {
        transform: translate3d(
                calc(var(--pointer-x, 0) * 16px - 3%),
                calc(var(--pointer-y, 0) * 12px - 2%),
                0
            )
            rotate(-3deg) scale(1);
    }
    to {
        transform: translate3d(
                calc(var(--pointer-x, 0) * 16px + 3%),
                calc(var(--pointer-y, 0) * 12px + 2%),
                0
            )
            rotate(4deg) scale(1.08);
    }
}
@keyframes border-flow {
    to {
        transform: rotate(360deg);
    }
}
@keyframes trace-dash {
    to {
        stroke-dashoffset: 0;
    }
}
@media (max-width: 800px) {
    .container {
        width: min(100% - 36px, 620px);
    }
    .nav-inner {
        height: 68px;
    }
    .brand-logo {
        width: 123px;
    }
    .nav-links,
    .nav-actions .button {
        display: none;
    }
    .menu-button {
        display: block;
    }
    .topbar.open .nav-links {
        border-bottom: 1px solid hsl(var(--border));
        background: #0a0a0afa;
        gap: 0;
        padding: 12px 18px 20px;
        display: grid;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
    }
    .topbar.open .nav-link {
        border-bottom: 1px solid hsl(var(--border));
        padding: 15px 0;
    }
    .hero {
        min-height: 720px;
        padding-top: 150px;
    }
    .hero h1 {
        font-size: clamp(48px, 14vw, 78px);
    }
    .section {
        padding: 92px 0;
    }
    .section-lede {
        margin-top: 22px;
    }
    .about-layout,
    .contact-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .project-card {
        flex-basis: calc(100vw - 36px);
        min-height: 390px;
    }
    .insight-grid {
        grid-template-columns: 1fr 1fr;
    }
    .contact-title {
        margin-bottom: 0;
    }
}
@media (max-width: 500px) {
    .container {
        width: calc(100% - 32px);
    }
    .hero {
        padding-bottom: 100px;
    }
    .hero-actions {
        margin-inline: auto;
        flex-direction: column;
        align-items: stretch;
        max-width: 250px;
        margin-top: 28px;
    }
    .hero-actions .button {
        width: 100%;
    }
    .section-header {
        margin-bottom: 38px;
    }
    .about-intro h2 {
        font-size: 45px;
    }
    .service-row {
        grid-template-columns: 46px 1fr;
        gap: 13px;
    }
    .service-icon {
        border-radius: 10px;
        width: 38px;
        height: 38px;
    }
    .service-desc {
        display: none;
    }
    .service-name {
        font-size: 22px;
    }
    .insight-grid {
        grid-template-columns: 1fr;
    }
    .insight-card {
        min-height: 0;
    }
    .insight-thumb {
        height: 170px;
    }
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .modal {
        padding: 23px;
    }
    .contact-section {
        padding: 92px 0 86px;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    :before,
    :after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}
/* navigation */
@media (min-width: 801px) {
    .nav-inner {
        position: relative;
    }

    .nav-links {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* hero */
.hero {
  overflow: hidden;
}

.hero-aurora {
  inset: 0;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  background:
    radial-gradient(ellipse 90% 56% at 24% 112%, rgba(36, 128, 224, .4), transparent 78%),
    radial-gradient(ellipse 85% 58% at 78% 114%, rgba(18, 65, 189, .44), transparent 78%),
    linear-gradient(180deg, #050609 0%, #070b16 54%, #071836 100%);
  background-size: 135% 135%, 130% 130%, 100% 100%;
  animation: hero-aurora-field 14s ease-in-out infinite alternate;
}

.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.hero-aurora::before {
  width: 150%;
  height: 76%;
  left: -25%;
  bottom: -39%;
  background: radial-gradient(ellipse at 43% 53%, rgba(86, 213, 255, .48) 0%, rgba(33, 145, 244, .44) 24%, rgba(20, 88, 208, .34) 48%, transparent 77%);
  filter: blur(46px);
  animation: hero-aurora-wave-one 11s ease-in-out infinite alternate;
}

.hero-aurora::after {
  width: 140%;
  height: 72%;
  left: -20%;
  bottom: -43%;
  background: radial-gradient(ellipse at 58% 45%, rgba(76, 146, 246, .38), rgba(29, 82, 213, .38) 30%, rgba(10, 46, 142, .22) 58%, transparent 77%);
  filter: blur(52px);
  animation: hero-aurora-wave-two 15s ease-in-out infinite alternate;
}

@keyframes hero-aurora-field {
  from { background-position: 5% 100%, 90% 100%, center; }
  to { background-position: 55% 85%, 30% 96%, center; }
}

@keyframes hero-aurora-wave-one {
  0% { transform: translate3d(-15%, 8%, 0) rotate(-9deg) scale(.96); opacity: .51; }
  35% { transform: translate3d(-1%, -12%, 0) rotate(4deg) scale(1.12); opacity: .76; }
  70% { transform: translate3d(17%, 1%, 0) rotate(-5deg) scale(1.06); opacity: .66; }
  100% { transform: translate3d(9%, -15%, 0) rotate(8deg) scale(1.17); opacity: .84; }
}

@keyframes hero-aurora-wave-two {
  0% { transform: translate3d(15%, -8%, 0) rotate(6deg) scale(.96); opacity: .44; }
  40% { transform: translate3d(-10%, 4%, 0) rotate(-8deg) scale(1.1); opacity: .68; }
  75% { transform: translate3d(-19%, -13%, 0) rotate(3deg) scale(1.04); opacity: .57; }
  100% { transform: translate3d(4%, 5%, 0) rotate(-6deg) scale(1.16); opacity: .74; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora,
  .hero-aurora::before,
  .hero-aurora::after {
    animation: none;
  }
}

/* services */
.services-section .section-lede {
  max-width: none;
}

.services-section .service-row {
  grid-template-columns: 54px minmax(180px, .9fr) minmax(0, 1.7fr);
}

.services-section .service-icon {
  border-color: #2c69be;
  background: linear-gradient(145deg, rgba(40, 113, 223, .28), rgba(20, 60, 135, .09)), #101827;
  box-shadow: none;
}

.services-section .service-row:nth-child(2) .service-icon {
  border-color: #268fae;
  background: linear-gradient(145deg, rgba(31, 160, 201, .28), rgba(17, 80, 105, .09)), #101827;
}

.services-section .service-row:nth-child(3) .service-icon {
  border-color: #9156b7;
  background: linear-gradient(145deg, rgba(161, 85, 205, .28), rgba(83, 37, 126, .09)), #101827;
}

.services-section .service-row:nth-child(4) .service-icon {
  border-color: #258967;
  background: linear-gradient(145deg, rgba(35, 173, 114, .28), rgba(18, 94, 72, .09)), #101827;
}

.services-section .service-row:nth-child(5) .service-icon {
  border-color: #a97724;
  background: linear-gradient(145deg, rgba(207, 143, 47, .28), rgba(108, 67, 19, .09)), #101827;
}

@media (min-width: 501px) and (max-width: 760px) {
  .services-section .service-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .services-section .service-desc {
    grid-column: 2;
  }
}

@media (max-width: 500px) {
  .services-section .service-row {
    grid-template-columns: 46px minmax(0, 1fr);
  }
}

/* projects */
.projects-section .project-track {
  --project-left-inset: max(24px, calc((100vw - 1160px) / 2));
  width: auto;
  margin-left: 0;
  padding: 10px max(16px, calc((100vw - 1160px) / 2)) 16px var(--project-left-inset);
  scroll-padding-left: var(--project-left-inset);
  gap: 18px;
  -webkit-mask-image: none;
  mask-image: none;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.projects-section .project-track::-webkit-scrollbar {
  display: none;
}

.projects-section .project-track:focus-visible {
  outline: 2px solid #76aaff;
  outline-offset: 4px;
}

.projects-section .project-card {
  flex: 0 0 min(660px, calc(100vw - 64px));
  min-height: 430px;
  border: 0;
}

.projects-section .project-content {
  bottom: 25px;
  left: 27px;
  right: 27px;
}

.projects-section .project-content h3 {
  font-size: 31px;
}

.projects-section .project-category {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 27px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  line-height: 1;
}

.projects-section .project-category.cyan {
  border-color: rgba(107, 226, 250, .5);
  background: linear-gradient(120deg, rgba(20, 130, 199, .38), rgba(107, 226, 250, .14));
}

.projects-section .project-category.amber {
  border-color: rgba(252, 208, 105, .5);
  background: linear-gradient(120deg, rgba(179, 105, 29, .4), rgba(252, 208, 105, .15));
}

.projects-section .project-category.raspberry {
  border-color: #f06a9280;
  background: #f06a9229;
}

.projects-section .project-category.purple {
  border-color: #d196f880;
  background: #d196f829;
}

.projects-section .project-category.green {
  border-color: #67e9b180;
  background: #67e9b129;
}

.thumbnail-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #080e1a 0%, #101b32 52%, #07101f 100%);
  color: #b8c9e5;
  text-align: center;
  font-size: 13px;
}

.thumbnail-placeholder span { position: relative; z-index: 1; }
.project-card > .thumbnail-placeholder { position: absolute; inset: 0; }

@media (max-width: 700px) {
  .projects-section .project-card {
    flex-basis: calc(100vw - 36px);
    min-height: 390px;
  }

  .projects-section .project-content {
    bottom: 24px;
    left: 24px;
    right: 24px;
  }

  .projects-section .project-content h3 {
    font-size: 32px;
  }
}

@media (min-width: 501px) and (max-width: 800px) {
  .projects-section .project-track {
    --project-left-inset: max(18px, calc((100vw - 620px) / 2));
  }
}

@media (max-width: 500px) {
  .projects-section .project-track {
    --project-left-inset: 16px;
  }
}

/* section-more */
.projects-section .section-lede-row,
.insights-section .section-lede-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.section-lede-row .section-lede {
  flex: 1 1 auto;
  min-width: 0;
  margin: 24px 0 0;
}

.section-more {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
  margin-bottom: 0;
  padding: 0 0 2px;
  color: hsl(var(--foreground));
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

.section-more:hover {
  color: hsl(var(--primary));
}

.section-more svg {
  width: 17px;
  height: 17px;
  transition: transform .2s ease;
}

.section-more:hover svg {
  transform: translateX(3px);
}

@media (max-width: 700px) {
  .projects-section .section-lede-row,
  .insights-section .section-lede-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .section-lede-row .section-lede {
    flex-basis: 100%;
  }

  .section-more {
    margin-left: 0;
    margin-right: auto;
  }
}

/* insights */
.insights-section .insight-thumb {
  height: 184px;
  border-radius: 0;
}

/* contact */
.contact-section {
    display: flex;
    align-items: center;
    min-height: 470px;
    padding: 70px 0;
    isolation: isolate;
    background: radial-gradient(
            ellipse 65% 75% at 0% 100%,
            rgba(18, 73, 179, 0.48),
            transparent 80%
        ),
        radial-gradient(
            ellipse 55% 80% at 100% 0%,
            rgba(10, 42, 117, 0.48),
            transparent 82%
        ),
        linear-gradient(120deg, #01030b 5%, #071638 51%, #000105 100%);
    background-size:
        125% 125%,
        125% 125%,
        100% 100%;
    animation: aurora-field 14s ease-in-out infinite alternate;
}

.contact-section::before,
.contact-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.contact-section::before {
    inset: -38% 18% -38% -25%;
    border: 0;
    width: auto;
    height: auto;
    border-radius: 50%;
    box-shadow: none;
    background: radial-gradient(
        ellipse at 46% 60%,
        rgba(73, 179, 236, 0.62) 0%,
        rgba(21, 98, 194, 0.55) 22%,
        rgba(7, 43, 137, 0.5) 44%,
        transparent 72%
    );
    filter: blur(36px);
    opacity: 0.44;
    animation: aurora-wave-one 12s ease-in-out infinite alternate;
}

.contact-section::after {
    inset: -52% -28% -36% 30%;
    border: 0;
    width: auto;
    height: auto;
    border-radius: 50%;
    box-shadow: none;
    background: radial-gradient(
        ellipse at 55% 48%,
        rgba(54, 155, 215, 0.55) 0%,
        rgba(15, 81, 177, 0.56) 26%,
        rgba(8, 26, 100, 0.48) 51%,
        transparent 74%
    );
    filter: blur(48px);
    opacity: 0.38;
    animation: aurora-wave-two 16s ease-in-out infinite alternate;
}

.contact-section .contact-inner {
    z-index: 1;
    width: min(1160px, 100% - 48px);
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
    align-items: end;
    gap: clamp(36px, 5vw, 72px);
}

@keyframes aurora-field {
    from {
        background-position:
            0% 100%,
            100% 0%,
            center;
    }
    to {
        background-position:
            24% 70%,
            74% 28%,
            center;
    }
}

@keyframes aurora-wave-one {
    0% {
        transform: translate3d(-9%, 10%, 0) rotate(-13deg) scale(1);
        opacity: 0.35;
    }
    50% {
        transform: translate3d(10%, -7%, 0) rotate(8deg) scale(1.12);
        opacity: 0.55;
    }
    100% {
        transform: translate3d(22%, 5%, 0) rotate(-6deg) scale(0.94);
        opacity: 0.42;
    }
}

@keyframes aurora-wave-two {
    0% {
        transform: translate3d(8%, -9%, 0) rotate(10deg) scale(0.92);
        opacity: 0.3;
    }
    50% {
        transform: translate3d(-14%, 12%, 0) rotate(-8deg) scale(1.12);
        opacity: 0.49;
    }
    100% {
        transform: translate3d(-25%, -3%, 0) rotate(7deg) scale(1);
        opacity: 0.36;
    }
}

.contact-section .eyebrow {
    color: #a8caff;
}

.contact-section .contact-title {
    margin: 23px 0 0;
    color: #fff;
    font-size: clamp(52px, 6.5vw, 76px);
    line-height: 0.94;
}

.contact-section .contact-title em {
    color: #9cc9ff;
}

.contact-section .contact-action {
    width: 100%;
    min-width: 0;
    padding-bottom: 7px;
}

.contact-section .contact-note {
    max-width: none;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 1.65;
}

.contact-section .contact-button {
    margin-top: 28px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    gap: 10px;
    background: #fff;
    color: #0c214c;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.contact-section .contact-button:hover {
    background: #dcecff;
    color: #0c214c;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
}

@media (max-width: 800px) {
    .contact-section {
        min-height: 0;
        padding: 60px 0;
    }

    .contact-section .contact-inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .contact-section .contact-title {
        font-size: clamp(52px, 9vw, 76px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-section,
    .contact-section::before,
    .contact-section::after {
        animation: none;
    }
}

@media (max-width: 500px) {
    .contact-section {
        padding: 56px 0;
    }

    .contact-section .contact-inner {
        width: calc(100% - 40px);
    }

    .contact-section .contact-title {
        font-size: clamp(48px, 11vw, 62px);
    }

    .contact-section .contact-note {
        font-size: 14px;
    }
}

/* footer */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.footer-copyright {
  color: hsl(var(--muted));
  line-height: 1.5;
  text-align: center;
}

.footer-socials {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
}

.footer-social {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  color: hsl(var(--muted));
  background: rgba(255, 255, 255, .035);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}

.footer-social i {
  font-size: 13px;
  line-height: 1;
}

.footer-social:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / .65);
  background: hsl(var(--primary) / .12);
  transform: translateY(-2px);
}

@media (max-width: 800px) {
  .footer-inner {
    gap: 18px;
  }
}

@media (max-width: 500px) {
  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .footer-socials {
    justify-self: center;
  }
}

/* about-principles */
.about-intro h2 {
  font-size: clamp(52px, 6.2vw, 84px);
}

@media (min-width: 801px) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 85px);
  }
}

.about-lede {
  max-width: none;
}

.about-principles,
.about-principle {
  border: 0;
}

.about-principle-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2c69be;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(40, 113, 223, .28), rgba(20, 60, 135, .09)), #101827;
  color: #77adff;
  box-shadow: none;
}

.about-principle {
  grid-template-columns: 44px 1fr;
}

.about-principle-mark svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (max-width: 600px) {
  .about-principle-mark {
    width: 38px;
    height: 38px;
  }

  .about-principle {
    grid-template-columns: 38px 1fr;
  }
  .about-intro h2 {
    font-size: clamp(48px, 10vw, 54px);
  }
}

/* project-index */
.project-hero {
    min-height: 0;
    padding: 122px 0 52px;
    overflow: hidden;
    position: relative;
}
.project-hero > .container { position: relative; z-index: 1; }
.project-hero .section-header { margin: 0; }
.project-hero .section-title { max-width: 900px; color: #fff; }
.project-hero .section-title em { color: #9cc9ff; }
.project-hero .section-lede { max-width: 620px; color: rgba(255,255,255,.84); }
.project-index { background: #0d0d0d; padding: 76px 0 120px; }
.project-filters { display: flex; align-items: end; gap: 16px; margin-bottom: 42px; }
.project-filters label { display: grid; gap: 9px; color: hsl(var(--muted-foreground)); font-size: 12px; }
.project-search { flex: 1; }
.project-category-filter { position: relative; min-width: 230px; }
.project-category-filter::after { content: ""; position: absolute; right: 18px; bottom: 19px; width: 7px; height: 7px; border-right: 2px solid hsl(var(--muted-foreground)); border-bottom: 2px solid hsl(var(--muted-foreground)); transform: rotate(45deg); pointer-events: none; }
.project-filters input, .project-filters select { width: 100%; height: 46px; padding: 0 16px; border: 1px solid hsl(var(--border)); border-radius: 5px; background: transparent; color: hsl(var(--foreground)); font: inherit; font-size: 14px; }
.project-filters select { appearance: none; padding-right: 42px; }
.project-filters input:focus-visible, .project-filters select:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.project-index-card { cursor: default; min-height: 370px; }
.project-index-card h2 { font: 500 23px var(--display-font); letter-spacing: -.04em; margin: 18px 0 13px; }
.project-index-card .eyebrow { margin-top: 18px; }
.project-index-card p { margin: 0; }
.project-index-thumb { position: relative; border-radius: 0; height: 184px; }
.project-empty { border: 1px solid hsl(var(--border)); padding: 48px 24px; color: hsl(var(--muted-foreground)); text-align: center; }
.project-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 42px; }
.page-control { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 12px; border: 1px solid hsl(var(--border)); border-radius: 8px; color: hsl(var(--foreground)); font-size: 12px; text-decoration: none; }
.page-control:hover, .page-control.current { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .16); }
.page-control.disabled { color: hsl(var(--muted)); opacity: .5; }
@media (max-width: 700px) { .project-hero { padding: 108px 0 42px; } .project-index { padding: 56px 0 90px; } .project-filters { flex-wrap: wrap; } .project-search, .project-category-filter { flex: 1 1 100%; min-width: 0; } }

/* Shared visibility */
[hidden] { display: none !important; }