@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: 212 88% 47%;
    --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: 112px;
    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;
    border-radius: 12px;
    padding: 8px;
    display: none;
    transition: background 0.25s;
}
/* The menu's own Let's Talk only shows inside the mobile dropdown. */
.nav-links .nav-cta {
    display: none;
}
.menu-button:active {
    background: hsl(var(--foreground) / 0.08);
}
/* Hamburger -> X: top and bottom bars meet in the middle and turn, the middle one fades. */
.menu-button .lucide-menu line {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition:
        transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.25s ease;
}
.topbar.open .menu-button .lucide-menu line:nth-child(1) {
    opacity: 0;
    transform: scaleX(0.2);
}
.topbar.open .menu-button .lucide-menu line:nth-child(2) {
    transform: rotate(45deg) translateY(6px);
}
.topbar.open .menu-button .lucide-menu line:nth-child(3) {
    transform: rotate(-45deg) translateY(-6px);
}
.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: hsl(212 88% 36%);
}
.button-ghost {
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
    background: #12121266;
}
.button-ghost:hover {
    border-color: hsl(var(--primary) / 0.7);
    background: #050505d9;
}
.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 {
    font-style: normal;
    background: linear-gradient(90deg, #0440b0, #1064c5, #3191ca, #6ab4c9, #3191ca, #1064c5, #0440b0);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hero-em-gradient 8s linear infinite;
}
@keyframes hero-em-gradient {
    to {
        background-position: -300% 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero h1 em {
        animation: none;
        background-position: 0 0;
    }
}
.hero-description {
    color: #c7cee0;
    max-width: 575px;
    margin: auto;
    font-size: 15px;
    line-height: 1.7;
}
.hero-actions {
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
    display: flex;
}
.hero-actions .button-primary {
    box-shadow: 0 8px 30px hsl(var(--primary) / 0.32), 0 14px 34px rgba(0, 0, 0, 0.35);
}
.hero-actions .button-primary:hover {
    box-shadow: 0 10px 34px hsl(var(--primary) / 0.45), 0 16px 38px rgba(0, 0, 0, 0.4);
}
.hero-actions .button-ghost {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.hero-actions .button-ghost:hover {
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4);
}
.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 {
    /* first card lines up with the container edge; cards scroll into the gutters */
    --track-gutter: max(24px, calc((100% - 1160px) / 2));
    scrollbar-width: none;
    gap: 18px;
    margin: 0;
    padding: 0 var(--track-gutter) 4px;
    scroll-padding-inline: var(--track-gutter);
    scroll-snap-type: x mandatory;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    user-select: none;
    overscroll-behavior-inline: contain;
}
.project-track > .project-card {
    scroll-snap-align: start;
}
.project-track.is-static {
    overflow-x: hidden;
    cursor: auto;
}
.project-track.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}
.project-track::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.project-card {
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    cursor: pointer;
    text-align: left;
    border-radius: 18px;
    /* same 16:9 ratio as the recommended thumbnail, so the image isn't cropped */
    flex: 0 0 min(720px, 100vw - 64px);
    aspect-ratio: 16 / 9;
    transition:
        border-color 0.3s,
        transform 0.3s;
    position: relative;
    overflow: hidden;
    -webkit-user-drag: none;
}
.project-track.dragging .project-card {
    pointer-events: none;
}
.project-card:hover {
    border-color: hsl(var(--primary) / 0.7);
    transform: translateY(-4px);
}
.project-thumb-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.project-thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.project-card:hover .project-thumb-media img {
    transform: scale(1.06);
}
.project-thumb-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 8, 15, 0) 30%, rgba(5, 8, 15, 0.55) 62%, rgba(5, 8, 15, 0.92) 100%);
    pointer-events: none;
}
.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: 9px;
}
.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-category.blue {
    color: #5aa0fa;
}
.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;
    display: grid;
}
.service-list .service-row {
    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        color 0.3s ease;
}
.service-list .service-row:hover {
    color: hsl(var(--primary));
}
.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;
    transition:
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.3s ease,
        background 0.3s ease;
}
.service-row:hover .service-icon {
    transform: scale(1.1) rotate(-6deg);
}
.service-name {
    transition: color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-desc {
    transition: color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-row:hover .service-name {
    color: hsl(var(--primary));
    transform: translateX(6px);
}
.service-row:hover .service-desc {
    color: hsl(var(--foreground));
    transform: translateX(6px);
}
.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 {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    /* room for the cards' -1px overlap below */
    padding: 0 1px 1px 0;
}
/* Each card draws its own full border and overlaps its neighbours by 1px, so
   the lines follow the cards instead of spanning empty grid columns. */
.insight-card {
    border: 1px solid hsl(var(--border));
    margin: 0 -1px -1px 0;
    cursor: pointer;
    text-align: left;
    min-height: 430px;
    padding: 24px;
    display: block;
    color: inherit;
    text-decoration: none;
    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;
    position: relative;
}
.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: 13px 0;
}
.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;
}
.service-list > .reveal:nth-child(1),
.project-track > .reveal:nth-child(1),
.insight-grid > .reveal:nth-child(1),
.about-principles > .reveal:nth-child(1) {
    transition-delay: 0s;
}
.service-list > .reveal:nth-child(2),
.project-track > .reveal:nth-child(2),
.insight-grid > .reveal:nth-child(2),
.about-principles > .reveal:nth-child(2) {
    transition-delay: 0.08s;
}
.service-list > .reveal:nth-child(3),
.project-track > .reveal:nth-child(3),
.insight-grid > .reveal:nth-child(3),
.about-principles > .reveal:nth-child(3) {
    transition-delay: 0.16s;
}
.service-list > .reveal:nth-child(4),
.project-track > .reveal:nth-child(4),
.insight-grid > .reveal:nth-child(4) {
    transition-delay: 0.24s;
}
.service-list > .reveal:nth-child(5),
.project-track > .reveal:nth-child(5),
.insight-grid > .reveal:nth-child(5) {
    transition-delay: 0.32s;
}
.insight-grid > .reveal:nth-child(6) {
    transition-delay: 0.4s;
}
.insight-grid > .reveal:nth-child(7) {
    transition-delay: 0.48s;
}
.insight-grid > .reveal:nth-child(8) {
    transition-delay: 0.56s;
}
.insight-grid > .reveal:nth-child(9) {
    transition-delay: 0.64s;
}
.tw-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-typewriter].tw-in-view .tw-word {
    opacity: 1;
    transform: translateY(0);
}
.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;
}
@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: 98px;
    }
    .nav-actions .button {
        display: none;
    }
    .menu-button {
        display: block;
    }
    /* Dimmed backdrop behind the open menu; tapping it closes the menu (app.js). */
    .topbar::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 100dvh;
        background: #00000080;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .topbar.open::after {
        opacity: 1;
        pointer-events: auto;
    }
    .nav-links {
        display: grid;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1;
        padding: 4px 18px 20px;
        border-bottom: 1px solid hsl(var(--border));
        background: #0a0a0a;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition:
            opacity 0.25s ease,
            transform 0.3s ease,
            visibility 0s linear 0.3s;
    }
    .topbar.open .nav-links {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition:
            opacity 0.25s ease,
            transform 0.3s ease,
            visibility 0s;
    }
    .nav-links .nav-link {
        padding: 15px 0;
        text-align: center;
        border-bottom: 1px solid hsl(var(--border) / 0.6);
        font-size: 15px;
        opacity: 0;
        transform: translateY(-4px);
        transition:
            opacity 0.25s ease,
            transform 0.3s ease,
            color 0.2s;
    }
    .nav-links .nav-cta {
        display: flex;
        margin-top: 18px;
        width: 100%;
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    .topbar.open .nav-links .nav-link,
    .topbar.open .nav-links .nav-cta {
        opacity: 1;
        transform: none;
    }
    .topbar.open .nav-links > :nth-child(2) { transition-delay: 0.04s; }
    .topbar.open .nav-links > :nth-child(3) { transition-delay: 0.08s; }
    .topbar.open .nav-links > :nth-child(4) { transition-delay: 0.12s; }
    .topbar.open .nav-links > :nth-child(5) { transition-delay: 0.16s; }
    .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);
    }
    .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;
    }
    .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 {
  width: auto;
  margin: 0;
  padding-block: 10px 16px;
  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(720px, calc(100vw - 64px));
  border: 0;
}

.project-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 8px 0 0;
  line-height: 1.5;
}

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

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

.projects-section .project-category,
.project-index-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: max-content;
  min-height: 23px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  line-height: 1;
}

.project-index-category {
  font-family: var(--app-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
}

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

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

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

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

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

.projects-section .project-category.blue,
.project-index-category.blue {
  border-color: rgba(90, 160, 250, .55);
  background: linear-gradient(120deg, rgba(21, 90, 210, .4), rgba(90, 160, 250, .15));
}
.project-index-category.blue {
  color: #5aa0fa;
}

/* Labels sit on top of arbitrary thumbnails: a neutral frosted chip with
   white text reads on any image, and a small dot carries the category colour. */
.projects-section .project-card .project-category {
  --label-rgb: 107, 226, 250;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  background: rgba(8, 11, 18, .62);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #f2f5fa;
  font-weight: 500;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
.projects-section .project-card .project-category::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--label-rgb));
  box-shadow: 0 0 0 3px rgba(var(--label-rgb), .22);
}
.project-card .project-category.raspberry { --label-rgb: 240, 106, 146; }
.project-card .project-category.cyan { --label-rgb: 107, 226, 250; }
.project-card .project-category.purple { --label-rgb: 209, 150, 248; }
.project-card .project-category.green { --label-rgb: 103, 233, 177; }
.project-card .project-category.amber { --label-rgb: 252, 208, 105; }
.project-card .project-category.blue { --label-rgb: 90, 160, 250; }

.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);
  }

  .projects-section .project-content {
    bottom: 16px;
    left: 18px;
    right: 16px;
    gap: 12px;
  }

  .projects-section .project-content h3 {
    font-size: 24px;
    margin-top: 6px;
  }

  /* a 16:9 card is short on phones; keep the image visible */
  .project-card-desc {
    display: none;
  }

  .project-arrow {
    width: 34px;
    height: 34px;
  }
}

/* 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;
  }
}

@media (max-width: 800px) {
  .project-track {
    --track-gutter: max(18px, calc((100% - 620px) / 2));
  }
}

@media (max-width: 500px) {
  .project-track {
    --track-gutter: 16px;
  }
}

/* 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: pointer; min-height: 370px; }
.project-index-card h2 { font: 500 23px var(--display-font); letter-spacing: -.04em; margin: 13px 0; }
.project-index-card .eyebrow,
.project-index-card .project-index-category { margin-top: 18px; }
.project-index-card .eyebrow { margin-top: 18px; }
.project-index-card p { margin: 0; }
.project-index-thumb { position: relative; border-radius: 0; height: 184px; }
.content-type-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(4, 10, 24, .68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #eef2ff;
  font: 500 9px/1 var(--app-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.project-empty { border: 1px solid hsl(var(--border)); padding: 48px 24px; color: hsl(var(--muted-foreground)); text-align: center; }
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 64px 24px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: linear-gradient(180deg, hsl(var(--card) / .6), hsl(var(--card) / .2));
  text-align: center;
}
.empty-state-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
}
.empty-state h3 { margin: 0; font-size: 17px; font-weight: 600; color: hsl(var(--foreground)); }
.empty-state p { margin: 0; font-size: 14px; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.empty-state .button { margin-top: 6px; }
.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; } }

/* detail pages */
.detail-header { padding: 140px 0 0; }
.detail-header .section-title { margin-bottom: 40px; }
.detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 2px; }
.detail-tag-plain { display: inline-flex; align-items: center; width: max-content; min-height: 23px; padding: 4px 9px; border: 1px solid hsl(var(--border)); border-radius: 999px; color: hsl(var(--muted-foreground)); font: 500 9px/1 var(--app-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.detail-meta-dot { opacity: .6; margin: 0 6px; }
.detail-divider { border: none; border-top: 1px solid hsl(var(--border)); margin: 16px 0 0; }
.detail-byline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.detail-author { display: flex; align-items: center; gap: 10px; }
.detail-author-avatar { width: 28px; height: 28px; border-radius: 50%; padding: 5px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); object-fit: contain; flex: none; }
.detail-author-avatar--photo { padding: 0; object-fit: cover; }
.detail-author-avatar--initials { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 11px; font-weight: 600; color: hsl(var(--primary)); }
.detail-author-info { display: flex; align-items: center; font-size: 13.5px; }
.detail-author-name { font-weight: 600; color: hsl(var(--foreground)); }
.detail-author-date { color: hsl(var(--muted-foreground)); }
.detail-author-info .detail-meta-dot { margin: 0 8px; }
.detail-share { display: flex; align-items: center; gap: 6px; }
.detail-share-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 12px; cursor: pointer; background: transparent; transition: border-color .2s, color .2s, background .2s; }
.detail-share-btn:hover { border-color: hsl(var(--primary) / .7); color: hsl(var(--foreground)); background: hsl(var(--primary) / .08); }
.detail-share-btn.copied { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.detail-section { padding: 44px 0 30px; }
.detail-article { max-width: 800px; margin: 0 auto; }
.detail-media { margin-bottom: 40px; }
.detail-media img { width: auto; max-width: 100%; height: auto; display: block; margin-inline: auto; }
.detail-media .thumbnail-placeholder { height: 360px; }
.detail-body { display: grid; gap: 18px; color: hsl(var(--muted-foreground)); font-size: 16px; line-height: 1.8; }
.detail-body p { margin: 0; }
.detail-body h2, .detail-body h3 { color: hsl(var(--foreground)); font-family: var(--display-font); letter-spacing: -0.01em; line-height: 1.3; }
.detail-body h2 { font-size: 26px; }
.detail-body h3 { font-size: 21px; }
.detail-body a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.detail-body ul, .detail-body ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.detail-body ul { list-style: disc; }
.detail-body ol { list-style: decimal; }
.detail-body li::marker { color: hsl(var(--primary)); }
.detail-body li.ql-indent-1 { margin-left: 1.5em; }
.detail-body li.ql-indent-2 { margin-left: 3em; }
.detail-body li.ql-indent-3 { margin-left: 4.5em; }
.detail-body li.ql-indent-4 { margin-left: 6em; }
.detail-body ul li[class*="ql-indent-"] { list-style-type: circle; }
.detail-body blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid hsl(var(--primary) / .5); color: hsl(var(--foreground)); font-style: italic; }
.detail-body img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin-inline: auto; }
.detail-body .ql-align-left img { margin-inline: 0 auto; }
.detail-body .ql-align-right img { margin-inline: auto 0; }
.detail-body .ql-video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; }
.detail-body strong { color: hsl(var(--foreground)); }
.related-section { padding: 64px 0 80px; }
.related-divider { margin: 0 0 40px; }
.related-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.related-header .section-title { font-size: clamp(22px, 2.6vw, 28px); color: #fff; text-transform: capitalize; margin: 0; }
/* beats the mobile .section-more rule that left-aligns it under home section ledes */
.related-header .section-more { margin: 0 0 0 auto; padding: 0; }
.related-header .section-title em { color: inherit; }
.related-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
  .detail-header { padding: 108px 0 0; }
  .detail-byline { align-items: flex-start; }
  .detail-section { padding: 32px 0 16px; }
  .detail-media { margin-bottom: 28px; }
  .detail-media .thumbnail-placeholder { height: 240px; }
  .related-section { padding: 40px 0 56px; }
  .related-divider { margin-bottom: 28px; }
}
@media (max-width: 500px) {
  .related-grid { grid-template-columns: 1fr; }
}

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

/* auth */
.auth-body { background: hsl(var(--background)); margin: 0; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.auth-glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 50% at 50% 0%, hsl(var(--primary) / .16), transparent 70%); pointer-events: none; }
.auth-card { position: relative; z-index: 1; width: min(380px, 100%); border: 1px solid hsl(var(--border)); border-radius: 16px; padding: 36px 32px; background: hsl(var(--card)); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.auth-brand { display: inline-flex; margin-bottom: 28px; }
.auth-brand-logo { height: 26px; width: auto; }
.auth-title { font: 600 26px var(--display-font); letter-spacing: -0.03em; margin: 0; color: hsl(var(--foreground)); }
.auth-lede { color: hsl(var(--muted-foreground)); font-size: 13.5px; margin: 8px 0 24px; }
.auth-alert { display: flex; align-items: center; gap: 9px; background: hsl(0 70% 50% / .12); border: 1px solid hsl(0 70% 50% / .4); color: hsl(0 85% 72%); font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; }
.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 8px; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.auth-field-input { position: relative; }
.auth-field-input i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted)); font-size: 13px; pointer-events: none; }
.auth-field input { width: 100%; height: 44px; padding: 0 14px 0 38px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-size: 14px; transition: border-color .2s; }
.auth-field input:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.auth-field input:focus { border-color: hsl(var(--primary) / .6); }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.auth-remember input { width: 15px; height: 15px; accent-color: hsl(var(--primary)); }
.auth-submit { width: 100%; justify-content: center; margin-top: 6px; gap: 8px; }

/* admin */
.admin-body { background: hsl(var(--background)); margin: 0; color: hsl(var(--foreground)); font-family: var(--app-font-sans); -webkit-font-smoothing: antialiased; }
.admin-shell { display: flex; min-height: 100vh; }

/* sidebar */
.admin-sidebar { width: 260px; flex: none; display: flex; flex-direction: column; background: linear-gradient(190deg, #060a1c 0%, #0a1230 46%, #0d1b42 100%); padding: 22px 16px; position: sticky; top: 0; height: 100vh; border-right: 1px solid rgba(255,255,255,.06); }
.admin-brand { display: flex; align-items: center; justify-content: center; margin: 2px 0 30px; }
.admin-brand img { height: 32px; width: auto; }
.admin-nav { display: grid; gap: 3px; }
.admin-nav-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: rgba(255,255,255,.62); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background .2s, color .2s, transform .2s; width: 100%; text-align: left; background: none; border: none; font-family: inherit; cursor: pointer; }
.admin-nav-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: 13.5px; color: rgba(255,255,255,.8); transition: background .2s, color .2s; }
.admin-nav-link:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateX(1px); }
.admin-nav-link:hover .admin-nav-icon { background: rgba(255,255,255,.14); }
.admin-nav-link.active { color: #fff; background: linear-gradient(90deg, hsl(var(--primary) / .28), hsl(var(--primary) / .06)); }
.admin-nav-link.active .admin-nav-icon { background: hsl(var(--primary)); color: #fff; box-shadow: 0 4px 14px -2px hsl(var(--primary) / .65); }
.admin-nav-link.active::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 4px 4px 0; background: hsl(var(--primary)); }
.admin-nav-form { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.admin-nav-logout { color: #fdba9c; }
.admin-nav-logout .admin-nav-icon { background: rgba(251,146,96,.14); color: #fb9268; }
.admin-nav-logout:hover { color: #fff; background: rgba(251,146,96,.14); }
.admin-nav-logout:hover .admin-nav-icon { background: #fb7a4a; color: #fff; }
.admin-sidebar-spacer { flex: 1; }
.admin-sidebar-footer { display: grid; justify-items: center; gap: 10px; padding-top: 18px; text-align: center; }
.admin-version-badge { font: 600 10px/1 var(--app-font-mono); letter-spacing: .06em; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); }
.admin-copyright { font-size: 11px; color: rgba(255,255,255,.35); line-height: 1.5; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 40px; background: hsl(var(--background) / .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid hsl(var(--border)); flex-wrap: wrap; }
.admin-topbar h1 { font: 600 26px var(--display-font); letter-spacing: -0.02em; margin: 0; }
.admin-topbar-subtitle { margin: 4px 0 0; font-size: 12.5px; color: hsl(var(--muted-foreground)); max-width: 480px; line-height: 1.5; }
.admin-topbar-right { display: flex; align-items: center; gap: 12px; }
.admin-user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card)); }
.admin-user-chip .admin-table-avatar { width: 36px; height: 36px; }
.admin-user-chip-info { line-height: 1.3; }
.admin-user-chip-name { font-size: 13px; font-weight: 600; color: hsl(var(--foreground)); }
.admin-user-chip-email { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.admin-content { flex: 1; padding: 28px 40px 60px; }
.admin-page { display: flex; flex-direction: column; gap: 22px; width: 100%; }
.admin-flash { display: flex; align-items: center; gap: 11px; background: hsl(var(--card)); border: 1px solid hsl(var(--primary) / .35); color: hsl(var(--foreground)); font-size: 13px; padding: 12px 16px; border-radius: 12px; box-shadow: 0 14px 34px -20px rgba(0,0,0,.7); }
.admin-flash i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--primary) / .16); color: hsl(var(--primary)); font-size: 12px; }

/* section intro (dashboard-style heading block) */
.admin-page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.admin-page-intro p { margin: 6px 0 0; color: hsl(var(--muted-foreground)); font-size: 13px; max-width: 560px; line-height: 1.6; }

/* dashboard stat cards */
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.admin-stat-card { border: 1px solid hsl(var(--border)); border-radius: 16px; padding: 20px 22px; background: hsl(var(--card)); display: flex; align-items: center; gap: 16px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.admin-stat-card:hover { border-color: hsl(var(--primary) / .4); transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.7); }
.admin-stat-info { display: grid; gap: 4px; min-width: 0; }
.admin-stat-label { font-size: 12px; color: hsl(var(--muted-foreground)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.admin-stat-value { font: 600 30px var(--display-font); letter-spacing: -0.02em; }
.admin-stat-icon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 17px; }
.admin-stat-icon.cyan { background: #6be2fa1a; color: #6be2fa; }
.admin-stat-icon.purple { background: #d196f81a; color: #d196f8; }
.admin-stat-icon.amber { background: #fcd0691a; color: #fcd069; }
.admin-stat-icon.raspberry { background: #f06a921a; color: #f06a92; }
.admin-stat-icon.green { background: #67e9b11a; color: #67e9b1; }
.admin-stat-icon.blue { background: #5aa0fa1a; color: #5aa0fa; }

/* dashboard panels */
.admin-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.admin-panel { border: 1px solid hsl(var(--border)); border-radius: 16px; background: hsl(var(--card)); overflow: hidden; }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid hsl(var(--border)); }
.admin-panel-head h2 { font: 600 15px var(--display-font); margin: 0; letter-spacing: -0.01em; }
.admin-panel-list { display: grid; }
.admin-panel-row { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid hsl(var(--border)); text-decoration: none; color: inherit; transition: background .2s; }
.admin-panel-row:last-child { border-bottom: none; }
.admin-panel-row:hover { background: hsl(var(--foreground) / .04); }
.admin-panel-row-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.admin-panel-row-title { font-size: 13.5px; font-weight: 600; color: hsl(var(--foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-panel-row-meta { font-size: 11.5px; color: hsl(var(--muted-foreground)); flex: none; }
.admin-panel-empty { padding: 28px 20px; text-align: center; color: hsl(var(--muted-foreground)); font-size: 13px; }

/* data card: toolbar + table + pagination bundled together */
.admin-data-card { border: 1px solid hsl(var(--border)); border-radius: 18px; background: hsl(var(--card)); box-shadow: 0 30px 70px -46px rgba(0,0,0,.85); overflow: hidden; }
.admin-data-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid hsl(var(--border)); flex-wrap: wrap; }
.admin-data-toolbar.project-filters { align-items: center; margin-bottom: 0; }
.admin-toolbar-fields { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.admin-data-toolbar.project-filters .project-search { flex: 1 1 260px; max-width: 360px; }
.admin-data-toolbar.project-filters .project-category-filter { flex: 0 1 200px; min-width: 170px; }
.admin-data-toolbar.project-filters input,
.admin-data-toolbar.project-filters select { height: 42px; padding: 0 14px; border-radius: 9px; background: hsl(var(--foreground) / .06); font-size: 13px; }
.admin-data-toolbar.project-filters select { padding-right: 36px; }
.admin-data-toolbar.project-filters .project-category-filter::after { bottom: 17px; right: 18px; }
.admin-data-toolbar.project-filters .button { min-height: 42px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; table-layout: fixed; }
.admin-table th { text-align: left; padding: 13px 22px; color: hsl(var(--muted-foreground)); font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; background: hsl(var(--foreground) / .02); border-bottom: 1px solid hsl(var(--border)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table th:first-child { width: 26%; }
.admin-table th.admin-table-col-name { width: 40%; }
.admin-table th.admin-table-col-category { width: 22%; }
.admin-table th.admin-table-col-title { width: 34%; }
.admin-table th.admin-table-col-topic { width: 19%; }
.admin-table th.admin-table-col-type { width: 10%; }
.admin-table th.admin-table-col-status { width: 15%; }
.admin-table th.admin-table-col-date { width: 14%; }
.admin-table th.admin-table-col-home { width: 14%; }
.admin-table th.admin-table-col-user { width: 36%; }
.admin-table th.admin-table-col-email { width: 42%; }
.admin-table th.admin-table-col-actions { width: 8%; }
.admin-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.admin-badge-featured { color: hsl(43 96% 58%); background: hsl(43 96% 58% / .12); border: 1px solid hsl(43 96% 58% / .35); }
.admin-badge-featured i { font-size: 10px; }
.admin-table td { padding: 13px 22px; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
.admin-table tbody tr { transition: background .15s; }
.admin-table tbody tr:hover { background: hsl(var(--foreground) / .025); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table-name { font-weight: 600; color: hsl(var(--foreground)); }
.admin-table .project-index-category { width: auto; max-width: 100%; white-space: normal; vertical-align: middle; }
.admin-table-muted { color: hsl(var(--muted-foreground)); font-size: 12.5px; font-family: var(--app-font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table-user { display: flex; align-items: center; gap: 12px; }
.admin-table-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: hsl(var(--primary) / .16); color: hsl(var(--primary)); display: grid; place-items: center; font: 600 12px var(--display-font); overflow: hidden; }
.admin-table-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-table-actions { display: flex; justify-content: flex-end; }
.admin-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; color: hsl(var(--muted-foreground)); text-decoration: none; background: none; border: none; cursor: pointer; font-size: 12.5px; transition: background .2s, color .2s; }
.admin-icon-btn:hover { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.admin-icon-btn.danger:hover { background: hsl(0 70% 50% / .12); color: hsl(0 80% 68%); }
.admin-empty { display: grid; justify-items: center; gap: 10px; padding: 56px 16px; text-align: center; color: hsl(var(--muted-foreground)); font-size: 13.5px; }
.admin-empty i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); font-size: 18px; }
.admin-data-footer { display: flex; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid hsl(var(--border)); }
.admin-data-footer .admin-pagination { margin: 0; gap: 6px; }
.admin-data-footer .admin-pagination .page-control { min-width: 30px; min-height: 30px; padding: 0 9px; font-size: 11px; border-radius: 7px; }

/* kebab action menu */
.admin-kebab { position: relative; display: inline-block; }
.admin-kebab-trigger { width: 34px; height: 34px; border-radius: 9px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--muted-foreground)); display: grid; place-items: center; cursor: pointer; font-size: 13px; transition: border-color .2s, color .2s; }
.admin-kebab-trigger:hover,
.admin-kebab.open .admin-kebab-trigger { border-color: hsl(var(--primary) / .55); color: hsl(var(--foreground)); }
.admin-kebab-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 172px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 13px; padding: 6px; box-shadow: 0 20px 42px -16px rgba(0,0,0,.65); z-index: 1000; display: none; }
.admin-kebab-menu.open { display: grid; gap: 1px; }
.admin-kebab-menu.is-detached { position: fixed; right: auto; top: auto; }
.admin-kebab-menu form { margin: 0; }
.admin-kebab-menu a,
.admin-kebab-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 8px; border: none; background: none; color: hsl(var(--foreground)); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.admin-kebab-menu a:hover,
.admin-kebab-menu button:hover { background: hsl(var(--foreground) / .06); }
.admin-kebab-menu a i,
.admin-kebab-menu button i { width: 14px; text-align: center; font-size: 12px; color: hsl(var(--muted-foreground)); }
.admin-kebab-menu-divider { height: 1px; margin: 5px 4px; background: hsl(var(--border)); }
.admin-kebab-menu .danger { color: hsl(0 75% 68%); }
.admin-kebab-menu .danger:hover { background: hsl(0 70% 50% / .1); }
.admin-kebab-menu .danger i { color: hsl(0 75% 68%); }

/* forms */
.admin-form-card { width: 100%; border: 1px solid hsl(var(--border)); border-radius: 18px; background: hsl(var(--card)); box-shadow: 0 30px 70px -46px rgba(0,0,0,.85); padding: 28px 28px 24px; }
.admin-form-stack { display: flex; flex-direction: column; gap: 22px; }
.admin-form { display: grid; gap: 18px; }
.admin-form-row { display: grid; gap: 8px; }
.admin-form-row label { font-size: 12.5px; color: hsl(var(--muted-foreground)); font-weight: 500; }
.admin-form-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-form-reset { padding: 0; border: none; background: none; color: hsl(0 75% 60%); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: color .2s; }
.admin-form-reset:hover { color: hsl(0 80% 48%); }
.admin-form-hint { font-size: 11.5px; color: hsl(var(--muted)); margin-top: -2px; }
.admin-featured-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid hsl(var(--border)); border-radius: 14px; background: hsl(var(--foreground) / .025); }
.admin-switch { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.admin-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.admin-switch-track { width: 40px; height: 24px; border-radius: 999px; background: hsl(var(--foreground) / .16); transition: background .2s; position: relative; }
.admin-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--card)); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .2s; }
.admin-switch input:checked + .admin-switch-track { background: hsl(var(--primary)); }
.admin-switch input:checked + .admin-switch-track::after { transform: translateX(16px); }
.admin-switch input:focus-visible + .admin-switch-track { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.admin-featured-text { flex: 1; display: grid; gap: 3px; min-width: 0; }
.admin-featured-title { font-size: 13.5px; color: hsl(var(--foreground)); font-weight: 600; cursor: pointer; }
.admin-featured-text .admin-form-hint { margin-top: 0; }
.admin-featured-order { flex: none; display: flex; align-items: center; gap: 8px; }
.admin-featured-order label { font-size: 12px; white-space: nowrap; }
.admin-featured-order input { width: 68px; text-align: center; padding-inline: 8px; transition: opacity .2s; }
.admin-featured-card.is-off .admin-featured-order { opacity: .45; }
.admin-featured-order input:disabled { cursor: not-allowed; }
.admin-input-unit { display: flex; align-items: stretch; }
.admin-form-row .admin-input-unit input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.admin-input-unit-suffix { flex: none; display: flex; align-items: center; padding: 0 14px; border: 1px solid hsl(var(--border)); border-left: none; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: hsl(var(--foreground) / .04); color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.admin-form-row input,
.admin-form-row select,
.admin-form-row textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 14px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-size: 14px; transition: border-color .2s; color-scheme: dark; }
.admin-form-row select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.5 3.5L5 7l3.5-3.5' stroke='%238a93a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.admin-form-row input:focus-visible,
.admin-form-row select:focus-visible,
.admin-form-row textarea:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; }
.admin-form-row input[readonly] { opacity: .7; cursor: not-allowed; background: hsl(var(--foreground) / .04); }
.admin-form-row textarea { min-height: 110px; resize: vertical; }
.admin-form-row textarea.admin-textarea-sm { min-height: 64px; }
.admin-form-error { display: flex; align-items: center; gap: 6px; color: hsl(0 80% 68%); font-size: 12px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 18px; }
.admin-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.admin-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); text-decoration: none; font-size: 13px; font-weight: 600; background: transparent; cursor: pointer; transition: border-color .2s; }
.admin-btn-secondary:hover { border-color: hsl(var(--primary) / .6); }

.admin-topic-field { display: grid; gap: 8px; }
.admin-topic-field input[hidden] { display: none; }

/* thumbnail / image upload */
.admin-upload { display: flex; align-items: center; gap: 16px; }
.admin-upload-preview { position: relative; flex: none; width: 108px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); display: grid; place-items: center; color: hsl(var(--muted)); }
.admin-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-upload-preview i { font-size: 18px; }
.admin-upload-preview--wide { width: 160px; height: auto; aspect-ratio: 16 / 9; }
.admin-upload-preview--square { width: 96px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; }
.admin-upload-controls { display: grid; gap: 8px; flex: 1; min-width: 0; }
.admin-upload-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-upload-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s; }
.admin-upload-btn:hover { border-color: hsl(var(--primary) / .6); color: hsl(var(--primary)); }
.admin-upload-remove { display: inline-flex; align-items: center; gap: 6px; color: hsl(0 75% 68%); font-size: 12px; background: none; border: none; cursor: pointer; padding: 0; }
.admin-upload-remove:hover { text-decoration: underline; }
.admin-upload-filename { font-size: 11.5px; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-upload input[type="file"] { display: none; }

/* tags input */
.admin-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--background)); }
.admin-tags:focus-within { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; }
.admin-tags-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: hsl(var(--primary) / .14); color: hsl(var(--primary)); font-size: 12px; font-weight: 600; }
.admin-tags-chip button { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: none; background: hsl(var(--primary) / .2); color: inherit; cursor: pointer; font-size: 9px; line-height: 1; padding: 0; }
.admin-tags-chip button:hover { background: hsl(var(--primary) / .35); }
.admin-tags input { flex: 1 1 120px; min-width: 120px; border: none; background: none; padding: 6px 4px; color: hsl(var(--foreground)); font: inherit; font-size: 14px; }
.admin-tags input:focus { outline: none; }

/* status badges */
.admin-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 10.5px/1 var(--app-font-mono); letter-spacing: .04em; text-transform: uppercase; }
.admin-status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-status-badge.draft { color: hsl(var(--muted-foreground)); background: hsl(var(--foreground) / .08); }
.admin-status-badge.scheduled { color: #fcd069; background: #fcd0691a; }
.admin-status-badge.published { color: #67e9b1; background: #67e9b11a; }

/* rich text editor */
.admin-editor .ql-toolbar.ql-snow { border: 1px solid hsl(var(--border)); border-bottom: none; border-radius: 10px 10px 0 0; background: hsl(var(--background)); padding: 10px 12px; }
.admin-editor .ql-container.ql-snow { border: 1px solid hsl(var(--border)); border-radius: 0 0 10px 10px; background: hsl(var(--background)); font-family: inherit; font-size: 14px; }
.admin-editor .ql-editor { height: 75vh; min-height: 260px; color: hsl(var(--foreground)); line-height: 1.7; scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
.admin-editor .ql-editor::-webkit-scrollbar { width: 10px; }
.admin-editor .ql-editor::-webkit-scrollbar-track { background: transparent; }
.admin-editor .ql-editor::-webkit-scrollbar-thumb { background-color: hsl(var(--border)); border-radius: 999px; border: 2px solid hsl(var(--background)); background-clip: padding-box; }
.admin-editor .ql-editor::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--muted)); }
.admin-editor .ql-editor.ql-blank::before { color: hsl(var(--muted)); font-style: normal; }
.admin-editor .ql-stroke { stroke: hsl(var(--muted-foreground)); }
.admin-editor .ql-fill { fill: hsl(var(--muted-foreground)); }
.admin-editor .ql-picker { color: hsl(var(--muted-foreground)); }
.admin-editor button:hover .ql-stroke,
.admin-editor .ql-picker-label:hover .ql-stroke,
.admin-editor button.ql-active .ql-stroke { stroke: hsl(var(--primary)); }
.admin-editor button:hover .ql-fill,
.admin-editor button.ql-active .ql-fill { fill: hsl(var(--primary)); }
.admin-editor button:hover,
.admin-editor .ql-picker-label:hover,
.admin-editor button.ql-active { color: hsl(var(--primary)); }
.admin-editor .ql-toolbar.ql-snow .ql-picker-options { background: hsl(var(--card)); border-color: hsl(var(--border)); }
.admin-editor .ql-snow .ql-tooltip { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); box-shadow: 0 20px 42px -16px rgba(0,0,0,.65); }
.admin-editor .ql-snow .ql-tooltip input[type="text"] { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); }
.admin-editor .ql-snow .ql-tooltip a.ql-action::after,
.admin-editor .ql-snow .ql-tooltip a.ql-remove::before { color: hsl(var(--primary)); }
@media (max-width: 900px) {
  .admin-panels { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: auto; height: auto; position: static; flex-direction: row; align-items: center; padding: 12px 14px; overflow-x: auto; }
  .admin-brand { margin: 0 14px 0 2px; }
  .admin-brand img { height: 22px; }
  .admin-nav { display: flex; flex-direction: row; gap: 4px; }
  .admin-nav-link { padding: 7px; }
  .admin-nav-link.active::before { display: none; }
  .admin-nav-link > span:not(.admin-nav-icon) { display: none; }
  .admin-nav-form { margin: 0 0 0 6px; padding: 0 0 0 10px; border-top: none; border-left: 1px solid rgba(255,255,255,.1); }
  .admin-sidebar-spacer { display: none; }
  .admin-sidebar-footer { display: none; }
  .admin-content { padding: 20px 16px 40px; }
  .admin-topbar { position: static; padding: 16px 16px; }
  .admin-topbar h1 { font-size: 22px; }
  .admin-topbar-subtitle { display: none; }
  .admin-user-chip-info { display: none; }
  .admin-user-chip { padding: 4px; }
  .admin-data-toolbar { flex-wrap: wrap; }
  .admin-toolbar-fields { flex-direction: column; align-items: stretch; width: 100%; }
  .admin-data-toolbar.project-filters .project-search,
  .admin-data-toolbar.project-filters .project-category-filter { flex: 1 1 100%; max-width: none; min-width: 0; }
  .admin-data-toolbar.project-filters .button { width: 100%; }
  .admin-form-card { padding: 20px; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-table-muted { font-family: inherit; }
  .admin-table { table-layout: auto; min-width: 680px; }
  .admin-table th:first-child { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .menu-button .lucide-menu line,
    .nav-links,
    .nav-links .nav-link,
    .nav-links .nav-cta,
    .topbar::after {
        transition-duration: 0.01s !important;
        transition-delay: 0s !important;
    }
}