@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;
    }
}

/* =========================================================================
   Digihave public site — "Digital Edge" motion system
   Dark aurora, glass surfaces, electric blue. Admin + login use admin.css.
   ========================================================================= */

@font-face {
    font-family: Aspekta;
    src: url(/fonts/AspektaVF.woff2) format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

/* Registered so gradients can be animated (rotating borders, stage colour). */
@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property --stage {
    syntax: "<color>";
    inherits: true;
    initial-value: #f06a92;
}

:root {
    --bg: #04050a;
    --bg-soft: #070911;
    --surface: #0a0d16;
    --surface-2: #0f131e;
    --glass: rgba(14, 18, 30, 0.52);
    --glass-strong: rgba(10, 13, 22, 0.82);
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --text: #eef2fa;
    --text-soft: #c3cada;
    --muted: #8a93a8;
    --dim: #5d667b;
    --blue: #1d6bff;
    --blue-rgb: 29, 107, 255;
    --blue-2: #5b9bff;
    --cyan: #6fd6ff;
    --cyan-rgb: 111, 214, 255;
    --royal-rgb: 30, 82, 230;
    --grad: linear-gradient(100deg, #2f6dff 0%, #4f9bff 45%, #86dcff 100%);
    --grad-hero: linear-gradient(100deg, #2a63f6 0%, #3f8cff 25%, #7fd3ff 50%, #3f8cff 75%, #2a63f6 100%);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --font-sans: "Aspekta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --radius: 22px;
    --radius-lg: 30px;
    --intro: 150ms;
}

html.has-intro {
    --intro: 2050ms;
}

/* ---------- base ---------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    color-scheme: dark;
    scrollbar-color: #232c42 var(--bg);
    scrollbar-width: thin;
}

/* The JS smooth scroller drives scrolling itself; native smoothing would
   fight every frame it sets. */
html.has-smooth-scroll {
    scroll-behavior: auto;
}

body {
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--blue);
    color: #fff;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #1d2538;
    border: 2px solid var(--bg);
    border-radius: 10px;
}

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

.site-shell {
    overflow-x: clip;
}

.container {
    width: min(1200px, 100% - 48px);
    margin-inline: auto;
}

.focus-ring:focus-visible,
.insight-card:focus-visible,
.project-track:focus-visible {
    outline: 2px solid var(--blue-2);
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 300;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--bg);
    font-size: 13px;
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform 0.3s var(--ease);
}

.skip-link:focus-visible {
    transform: none;
    outline: 2px solid var(--blue);
}

.grain {
    position: fixed;
    inset: -50%;
    z-index: 95;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 7s steps(8) infinite;
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-4%, 3%); }
    40% { transform: translate(3%, -5%); }
    60% { transform: translate(-6%, -2%); }
    80% { transform: translate(5%, 4%); }
}

/* ---------- aurora (animated gradient mesh) ----------
   Soft radial blobs drifting on the compositor; no blur filter, the
   gradients are already soft, so nothing repaints while they move. */
.aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.aurora span {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    will-change: transform;
}

.aurora span:nth-child(1) {
    left: -14%;
    bottom: -48%;
    width: 72vmax;
    height: 52vmax;
    background: radial-gradient(closest-side, rgba(29, 107, 255, 0.85), rgba(29, 107, 255, 0.25) 55%, transparent);
    animation: aurora-a 19s ease-in-out infinite alternate;
}

.aurora span:nth-child(2) {
    right: -18%;
    bottom: -40%;
    width: 64vmax;
    height: 48vmax;
    background: radial-gradient(closest-side, rgba(54, 194, 255, 0.55), rgba(54, 194, 255, 0.12) 55%, transparent);
    animation: aurora-b 23s ease-in-out infinite alternate;
}

.aurora span:nth-child(3) {
    left: 22%;
    top: -38%;
    width: 56vmax;
    height: 40vmax;
    background: radial-gradient(closest-side, rgba(var(--royal-rgb), 0.42), rgba(var(--royal-rgb), 0.1) 55%, transparent);
    animation: aurora-c 27s ease-in-out infinite alternate;
}

.aurora span:nth-child(4) {
    left: 36%;
    bottom: -30%;
    width: 40vmax;
    height: 28vmax;
    background: radial-gradient(closest-side, rgba(120, 240, 255, 0.35), transparent);
    animation: aurora-d 15s ease-in-out infinite alternate;
}

@keyframes aurora-a {
    to { transform: translate3d(14%, -12%, 0) rotate(12deg) scale(1.15); }
}

@keyframes aurora-b {
    to { transform: translate3d(-16%, -8%, 0) rotate(-14deg) scale(1.1); }
}

@keyframes aurora-c {
    to { transform: translate3d(-12%, 18%, 0) rotate(18deg) scale(1.2); }
}

@keyframes aurora-d {
    to { transform: translate3d(-24%, -14%, 0) scale(1.3); }
}

/* cross-document page transitions (progressive enhancement)
   Calm by design: the page being left fades and settles back a touch, the
   new one fades in with a short rise. Only the image of the card that was
   opened travels (boot.js names it as the page is left): it glides to the
   detail page's hero image while fading across into it, so it reads as a
   soft dissolve on the move rather than a solid tile flying about. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: vt-out 0.4s ease both;
}

::view-transition-new(root) {
    animation: vt-in 0.6s var(--ease) 0.2s both;
}

::view-transition-group(*) {
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1);
}

/* The bar stays on top of anything in flight. */
::view-transition-group(site-header) {
    z-index: 2;
}

::view-transition-group(*.media) {
    z-index: 1;
    overflow: clip;
    border-radius: 26px;
}

::view-transition-old(*.media),
::view-transition-new(*.media) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
}

/* The card's picture fades out as it leaves; the hero image fades in (with
   a slight zoom settling) before the move ends. */
::view-transition-old(*.media) {
    animation: vt-media-out 0.45s ease both;
}

::view-transition-new(*.media) {
    animation: vt-media-in 0.55s var(--ease) 0.25s both;
}

/* A hero image with no card to come from (e.g. opened from search) just
   arrives with its page. */
::view-transition-old(*.media):only-child {
    animation: vt-out 0.4s ease both;
}

::view-transition-new(*.media):only-child {
    animation: vt-in 0.6s var(--ease) 0.2s both;
}

@keyframes vt-out {
    to {
        opacity: 0;
        transform: scale(0.985);
    }
}

@keyframes vt-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes vt-media-out {
    to { opacity: 0; }
}

@keyframes vt-media-in {
    from {
        opacity: 0;
        transform: scale(1.04);
    }
}

html.vt-arrival .detail-media[data-reveal] {
    opacity: 1 !important;
    animation: none !important;
}

html.vt-arrival .detail-media[data-reveal] img {
    animation: none !important;
}

/* ---------- typography helpers ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--blue-2);
    font: 500 11.5px/1 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-title,
.display-title {
    margin-top: 20px;
    font-size: clamp(38px, 5.4vw, 76px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.section-title em,
.display-title .text-accent,
.page-title em,
.cta-title em,
.grad-text {
    font-style: normal;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Split headings: each word rises out of its own mask and un-blurs. */
[data-split] .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0 0.1em 0.2em;
    margin: 0 -0.1em -0.2em;
}

[data-split] .w-i {
    display: inline-block;
    padding-bottom: 0.2em;
    margin-bottom: -0.2em;
    filter: blur(8px);
    opacity: 0.2;
    transform: translate3d(0, 120%, 0) rotate(4deg);
    transform-origin: 0 100%;
    transition:
        transform 1.15s var(--ease),
        filter 1s var(--ease),
        opacity 0.9s var(--ease);
    transition-delay: calc(var(--wi, 0) * 55ms + var(--split-delay, 0ms));
}

[data-split].is-in .w-i {
    filter: blur(0);
    opacity: 1;
    transform: none;
}

[data-split].is-split em,
[data-split].is-split .text-accent {
    background: none;
    color: inherit;
}

/* Gradient text has to live on the moving word itself: a transformed
   child drops out of its parent's background-clip: text in Chrome. Each word
   shows its slice of one gradient stretched over the whole highlighted phrase
   (--gw = phrase width, --gx = the word's offset, both set by JS), so the
   colour runs across the phrase instead of restarting on every word. */
[data-split].is-split em .w-i,
[data-split].is-split .text-accent .w-i {
    padding-right: 0.08em;
    margin-right: -0.08em;
    background: var(--grad);
    background-size: var(--gw, 100%) 100%;
    background-position: calc(var(--gx, 0px) * -1) 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- buttons ---------- */
.button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 22px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font: 600 13px/1 var(--font-sans);
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition:
        transform 0.5s var(--ease),
        box-shadow 0.4s,
        background-color 0.3s,
        border-color 0.3s,
        color 0.3s;
}

.button svg {
    flex: none;
    transition: transform 0.5s var(--ease);
}

.button:hover svg {
    transform: rotate(-10deg) scale(1.1);
}

.button:active {
    scale: 0.97;
}

.button-primary {
    background: var(--blue);
    color: #fff;
    box-shadow:
        0 12px 32px -10px rgba(var(--blue-rgb), 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.button-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, #2f6dff, #57a6ff, #2f6dff);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.35s;
}

.button-primary::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.8s var(--ease);
}

.button-primary:hover {
    box-shadow:
        0 18px 44px -10px rgba(var(--blue-rgb), 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-primary:hover::before {
    opacity: 1;
    animation: sheen 1.8s linear infinite;
}

.button-primary:hover::after {
    left: 130%;
}

@keyframes sheen {
    to { background-position: -200% 0; }
}

/* Animated conic border that orbits the primary hero button. */
.button-glow {
    overflow: visible;
}

.button-glow > .button-label,
.button-glow > svg {
    position: relative;
    z-index: 1;
}

.button-glow::before {
    inset: -2px;
    z-index: -2;
    border-radius: inherit;
    background: conic-gradient(from var(--angle), transparent 0 60%, #86dcff 75%, #fff 80%, transparent 90%);
    opacity: 1;
    animation: spin-angle 3.2s linear infinite;
}

.button-glow:hover::before {
    background: conic-gradient(from var(--angle), transparent 0 50%, #86dcff 70%, #fff 80%, transparent 95%);
    animation: spin-angle 1.6s linear infinite;
}

.button-glow::after {
    inset: 0;
    left: 0;
    width: auto;
    z-index: -1;
    border-radius: inherit;
    background: var(--blue);
    transform: none;
    transition: background-color 0.3s;
}

.button-glow:hover::after {
    left: 0;
    background: #2f78ff;
}

@keyframes spin-angle {
    to { --angle: 360deg; }
}

.button-ghost {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.button-ghost:hover {
    border-color: rgba(var(--blue-rgb), 0.7);
    background: rgba(var(--blue-rgb), 0.12);
}

.button-small {
    min-height: 40px;
    padding-inline: 18px;
    font-size: 12.5px;
}

.button-lg {
    min-height: 54px;
    padding-inline: 28px;
    font-size: 14px;
}

/* Labels stay put on hover (no rolling copy); the button itself reacts. */
.button-label,
.nav-link-label {
    display: inline-block;
    line-height: 1.3;
}

[data-magnetic] {
    transition: transform 0.6s var(--ease);
}

.copy-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    cursor: pointer;
    font: 600 12px/1 var(--font-sans);
    transition:
        background-color 0.3s,
        border-color 0.3s,
        color 0.3s,
        transform 0.5s var(--ease);
}

.copy-chip svg {
    width: 14px;
    height: 14px;
    transition: transform 0.5s var(--ease-back);
}

.copy-chip:hover {
    border-color: rgba(var(--blue-rgb), 0.6);
    background: rgba(var(--blue-rgb), 0.12);
    color: #fff;
}

.copy-chip:active {
    transform: scale(0.95);
}

.copy-chip.is-done {
    border-color: rgba(52, 211, 153, 0.6);
    background: rgba(52, 211, 153, 0.14);
    color: #a7f3d0;
}

.copy-chip.is-done svg {
    transform: rotate(-12deg) scale(1.15);
}

/* ---------- header ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 14px 0;
    pointer-events: none;
    /* Named only while a page transition runs (boot.js): a permanent
       view-transition-name makes the header a backdrop root, and the glass
       bar would then stop blurring the page scrolling underneath. */
}

/* At the top it is an open, full-width bar. Once the page scrolls it
   draws in to a glass capsule: narrower and a little shorter, with the nav
   pill melting into the glass. */
.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(1280px, 100% - 28px);
    height: 64px;
    margin-inline: auto;
    padding: 0 10px 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    pointer-events: auto;
    transition:
        width 0.8s var(--ease),
        height 0.6s var(--ease),
        padding 0.6s var(--ease),
        background-color 0.5s,
        border-color 0.5s,
        box-shadow 0.5s,
        -webkit-backdrop-filter 0.5s,
        backdrop-filter 0.5s;
}

.site-header.is-scrolled .header-inner,
html.menu-open .site-header .header-inner {
    border-color: var(--line);
    background: rgba(8, 11, 18, 0.7);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

.site-header.is-scrolled .header-inner {
    width: min(1000px, 100% - 28px);
    height: 58px;
    padding-left: 18px;
}

/* Reading progress: a thin line along the very top edge of the page. */
.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad);
    box-shadow: 0 0 12px rgba(91, 155, 255, 0.8);
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
}

/* The full logo stays in the capsule too. */
.brand-link {
    display: inline-flex;
    flex: none;
    border-radius: 8px;
}

.brand-logo {
    width: 112px;
    height: auto;
}

.nav-pill {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: border-color 0.5s, background-color 0.5s;
}

.site-header.is-scrolled .nav-pill {
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Links: hovering brightens the label over a faint wash of its own; the
   section in view sits on a solid white pill (dark label) that glides only
   when the section changes, never after the pointer. */
.nav-link {
    position: relative;
    z-index: 1;
    padding: 9px 17px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    transition:
        color 0.35s,
        background-color 0.35s,
        scale 0.3s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.nav-link:active {
    scale: 0.95;
}

.nav-link.is-active {
    background-color: transparent;
    color: #070b14;
    font-weight: 600;
}

.nav-indicator {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 0;
    z-index: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #dde6f5);
    box-shadow:
        0 8px 24px -10px rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(10, 26, 77, 0.12);
    opacity: 0;
    scale: 0.9;
    transition:
        transform 0.6s var(--ease),
        width 0.6s var(--ease),
        opacity 0.35s,
        scale 0.5s var(--ease-back);
}

.nav-pill.has-indicator .nav-indicator {
    opacity: 1;
    scale: 1;
}

.nav-pill.no-anim .nav-indicator {
    transition: none;
}

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

/* Search: looks like a compact search field (magnifier, then "Search"),
   so it reads as search at a glance. On hover it brightens and a caret
   starts blinking after the word, as if ready to type. Collapses to a
   round magnifier button on narrower screens. */
.palette-trigger {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 9px;
    width: 156px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    cursor: pointer;
    font: 500 12.5px/1 var(--font-sans);
    text-align: left;
    transition:
        border-color 0.3s,
        background-color 0.3s,
        color 0.3s,
        scale 0.3s var(--ease);
}

.palette-trigger-icon {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--text-soft);
    transition: color 0.3s, transform 0.5s var(--ease);
}

.palette-trigger-label {
    position: relative;
}

.palette-trigger-label::after {
    content: "";
    position: absolute;
    left: calc(100% + 3px);
    top: 50%;
    width: 1.5px;
    height: 14px;
    margin-top: -7px;
    border-radius: 1px;
    background: var(--blue-2);
    opacity: 0;
}

.palette-trigger:hover,
.palette-trigger:focus-visible {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.palette-trigger:hover .palette-trigger-icon,
.palette-trigger:focus-visible .palette-trigger-icon {
    color: #fff;
    transform: scale(1.08);
}

.palette-trigger:hover .palette-trigger-label::after,
.palette-trigger:focus-visible .palette-trigger-label::after {
    animation: caret 1s steps(1) infinite;
}

.palette-trigger:active {
    scale: 0.96;
}

@keyframes caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.menu-button {
    display: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.menu-button:active {
    transform: scale(0.94);
}

.menu-lines {
    position: relative;
    display: block;
    width: 18px;
    height: 10px;
}

.menu-lines span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.6px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.55s var(--ease), top 0.55s var(--ease);
}

.menu-lines span:first-child {
    top: 0;
}

.menu-lines span:last-child {
    top: 8.4px;
}

html.menu-open .menu-lines span:first-child {
    top: 4.2px;
    transform: rotate(45deg);
}

html.menu-open .menu-lines span:last-child {
    top: 4.2px;
    transform: rotate(-45deg);
}

/* Mobile menu: a glass panel that drops down from the bar over a dimmed,
   tappable backdrop (tapping it closes the menu). */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 99;
    padding: 88px 14px 14px;
    overflow-y: auto;
    background: rgba(2, 3, 8, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.4s,
        visibility 0s linear 0.6s;
}

html.menu-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s;
}

.mobile-menu-panel {
    display: grid;
    gap: 22px;
    width: 100%;
    padding: 10px 18px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(var(--blue-rgb), 0.16), transparent 70%),
        rgba(10, 13, 22, 0.94);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
    transform-origin: 50% 0;
    transition:
        opacity 0.35s,
        transform 0.6s var(--ease);
}

html.menu-open .mobile-menu-panel {
    opacity: 1;
    transform: none;
}

.mobile-menu-nav {
    display: grid;
}

.mobile-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.1;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.4s,
        transform 0.6s var(--ease),
        color 0.3s;
}

.mobile-link svg {
    width: 22px;
    height: 22px;
    margin-left: auto;
    color: var(--dim);
    transition: transform 0.5s var(--ease), color 0.3s;
}

.mobile-link:hover svg,
.mobile-link:focus-visible svg {
    color: var(--blue-2);
    transform: rotate(45deg);
}

.mobile-menu-foot {
    display: grid;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s, transform 0.6s var(--ease);
}

.mobile-menu-foot .button {
    width: 100%;
    min-height: 52px;
    font-size: 14px;
}

html.menu-open .mobile-link,
html.menu-open .mobile-menu-foot {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.08s + var(--i) * 0.05s);
}

/* ---------- preloader ---------- */
/* Opening screen, first home visit of a session (about 2.7s):
   a fine grid settles in; the logo is drawn in thin light, part by part,
   then fills in as the outline fades; a glow swells and one sheen crosses
   it; the screen lifts away upwards on a soft edge. */
@property --pl-wipe {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--bg);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, transparent calc(var(--pl-wipe) - 18%), #000 var(--pl-wipe));
    mask-image: linear-gradient(to top, transparent calc(var(--pl-wipe) - 18%), #000 var(--pl-wipe));
    animation: pl-lift 0.85s var(--ease-io) 1.95s forwards;
}

html.no-intro .preloader {
    display: none;
}

.preloader-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-position: center;
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 46% 42% at 50% 50%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 46% 42% at 50% 50%, #000, transparent 75%);
    opacity: 0;
    scale: 1.12;
    animation: pl-grid-in 1.6s var(--ease) 0.05s forwards;
}

.preloader-haze {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(760px, 120vw);
    aspect-ratio: 2.6;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(29, 107, 255, 0.18), transparent);
    translate: -50% -50%;
    opacity: 0.4;
    animation: pl-haze 1.4s ease 0.6s forwards;
}

.preloader-logo {
    position: relative;
    width: min(360px, 70vw);
    aspect-ratio: 298 / 72;
    animation: pl-logo-out 0.6s var(--ease-io) 1.9s forwards;
}

.preloader-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: pl-glow 1.6s ease 0.6s both;
}

/* Each part: drawn as a thin line of light, then filled as the line fades. */
.pl-part {
    stroke: #9cd0ff;
    stroke-width: 0.8;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    animation:
        pl-draw 0.85s var(--ease-io) forwards,
        pl-fill 0.55s ease forwards,
        pl-unstroke 0.5s ease forwards;
    animation-delay:
        calc(var(--p) * 0.05s),
        calc(0.75s + var(--p) * 0.04s),
        calc(1s + var(--p) * 0.04s);
}

/* One soft sheen across the logo only (masked by the logo itself). */
.preloader-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(185, 225, 255, 0.75) 50%, transparent 60%) 140% 0 / 250% 100% no-repeat;
    -webkit-mask: var(--logo-url) center / 100% 100% no-repeat;
    mask: var(--logo-url) center / 100% 100% no-repeat;
    mix-blend-mode: plus-lighter;
    animation: pl-shine 0.9s var(--ease-io) 1.3s both;
}

@keyframes pl-grid-in {
    to { opacity: 1; scale: 1; }
}

@keyframes pl-haze {
    to { opacity: 1; }
}

@keyframes pl-glow {
    0% { filter: drop-shadow(0 0 0 rgba(91, 155, 255, 0)); }
    55% { filter: drop-shadow(0 0 22px rgba(91, 155, 255, 0.6)); }
    100% { filter: drop-shadow(0 0 12px rgba(91, 155, 255, 0.35)); }
}

@keyframes pl-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes pl-fill {
    to { fill-opacity: 1; }
}

@keyframes pl-unstroke {
    to { stroke-opacity: 0; }
}

@keyframes pl-shine {
    to { background-position: -40% 0; }
}

@keyframes pl-logo-out {
    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

@keyframes pl-lift {
    to {
        --pl-wipe: 118%;
        visibility: hidden;
    }
}

/* ---------- command palette (Ctrl/⌘ + K) ---------- */
.palette {
    width: min(640px, 100% - 32px);
    max-width: none;
    max-height: none;
    margin: min(14vh, 120px) auto auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--text);
}

.palette::backdrop {
    background: rgba(2, 4, 10, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.35s;
}

.palette.is-open::backdrop {
    opacity: 1;
}

.palette-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: min(560px, 76vh);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(var(--blue-rgb), 0.16), transparent 60%),
        var(--glass-strong);
    box-shadow:
        0 40px 120px -30px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
    filter: blur(6px);
    transition:
        opacity 0.3s,
        transform 0.5s var(--ease),
        filter 0.4s;
}

.palette.is-open .palette-panel {
    opacity: 1;
    transform: none;
    filter: none;
}

.palette-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px 0 20px;
    border-bottom: 1px solid var(--line);
}

.palette-search > svg {
    flex: none;
    width: 19px;
    height: 19px;
    color: var(--blue-2);
}

.palette-input {
    flex: 1;
    min-width: 0;
    height: 62px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: 500 16px var(--font-sans);
}

.palette-input::placeholder {
    color: var(--dim);
}

.palette-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--blue-2);
    border-radius: 50%;
    opacity: 0;
    animation: spin 0.7s linear infinite;
    transition: opacity 0.2s;
}

.palette.is-loading .palette-spinner {
    opacity: 1;
}

.palette-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.5s var(--ease);
}

.palette-close svg {
    width: 15px;
    height: 15px;
}

.palette-close:hover {
    background: rgba(var(--blue-rgb), 0.2);
    color: #fff;
    transform: rotate(90deg);
}

.palette-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    scrollbar-width: thin;
}

.palette-list {
    display: grid;
}

.palette-group {
    padding: 14px 12px 8px;
    color: var(--dim);
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.palette-group[hidden],
.palette-item[hidden] {
    display: none;
}

.palette-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    animation: palette-item-in 0.45s var(--ease) both;
    animation-delay: calc(var(--pi, 0) * 22ms);
}

.palette-item.is-active {
    background: linear-gradient(90deg, rgba(var(--blue-rgb), 0.22), rgba(var(--blue-rgb), 0.06));
    box-shadow: inset 0 0 0 1px rgba(var(--blue-rgb), 0.35);
}

.palette-item-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.palette-item-icon svg {
    width: 17px;
    height: 17px;
}

.palette-item.is-active .palette-item-icon {
    border-color: transparent;
    background: var(--blue);
    color: #fff;
}

.palette-item-text {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 3px;
}

.palette-item-title {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-item-title mark {
    background: none;
    color: var(--cyan);
}

.palette-item-meta {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes palette-item-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.palette-empty {
    padding: 36px 16px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.palette-empty span {
    color: var(--text);
}

/* ---------- toasts ---------- */
.toast-region {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 160;
    display: grid;
    justify-items: center;
    gap: 10px;
    pointer-events: none;
    translate: -50% 0;
}

.toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 11px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--glass-strong);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    animation: toast-in 0.6s var(--ease-back) both;
}

.toast.is-leaving {
    animation: toast-out 0.35s var(--ease-io) both;
}

.toast-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #18b26b;
    color: #fff;
}

.toast-icon svg {
    width: 13px;
    height: 13px;
}

.toast-icon path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.5s var(--ease) 0.2s forwards;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.85);
        filter: blur(4px);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(12px) scale(0.92);
    }
}

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- custom cursor ---------- */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
    pointer-events: none;
    transition: opacity 0.3s;
}

.cursor.is-hidden {
    opacity: 0;
}

.cursor-ring,
.cursor-dot {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.cursor-ring > span {
    position: absolute;
    top: -18px;
    left: -18px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: #fff;
    font-size: 0;
    transition:
        top 0.5s var(--ease),
        left 0.5s var(--ease),
        width 0.5s var(--ease),
        height 0.5s var(--ease),
        background-color 0.35s,
        border-color 0.35s,
        font-size 0.3s,
        scale 0.3s var(--ease);
}

.cursor-dot > span {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    transition: opacity 0.3s, scale 0.3s;
}

.cursor.is-hover .cursor-ring > span {
    top: -28px;
    left: -28px;
    width: 56px;
    height: 56px;
    border-color: rgba(var(--blue-rgb), 0.9);
    background: rgba(var(--blue-rgb), 0.12);
}

.cursor.has-label .cursor-ring > span {
    top: -46px;
    left: -46px;
    width: 92px;
    height: 92px;
    border-color: transparent;
    background: var(--blue);
    box-shadow: 0 16px 40px -10px rgba(var(--blue-rgb), 0.8);
    font: 600 12.5px var(--font-sans);
    letter-spacing: -0.01em;
}

.cursor.has-label .cursor-dot > span {
    opacity: 0;
}

.cursor.is-down .cursor-ring > span {
    scale: 0.85;
}

html.has-cursor [data-cursor]:not(.project-track),
html.has-cursor [data-cursor] * {
    cursor: none;
}

/* ---------- shared entrance for above-the-fold content ---------- */
.hero-in {
    animation: fade-up 1.1s var(--ease) both;
    animation-delay: calc(var(--d, 0) * 90ms + var(--intro));
}

@keyframes fade-up {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(26px);
    }
}

@keyframes fade-in {
    to { opacity: 1; }
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --bleed: 42vh;
    min-height: 100vh;
    min-height: 100svh;
    padding: 150px 0 170px;
    overflow: hidden;
    /* Clip sideways only: the background is allowed to run on below. */
    overflow-x: clip;
    overflow-y: visible;
    background: var(--bg);
}

/* The hero's light doesn't stop at its edge: the background layer runs
   --bleed past the bottom, under the next section, and dissolves along a
   long eased fade instead of being cut off. */
.hero-bg {
    position: absolute;
    inset: 0 0 calc(var(--bleed) * -1);
    z-index: -1;
    pointer-events: none;
    --fade: calc(var(--bleed) + 18vh);
    -webkit-mask-image: linear-gradient(to bottom,
        #000 calc(100% - var(--fade)),
        rgba(0, 0, 0, 0.9) calc(100% - var(--fade) * 0.85),
        rgba(0, 0, 0, 0.7) calc(100% - var(--fade) * 0.65),
        rgba(0, 0, 0, 0.42) calc(100% - var(--fade) * 0.45),
        rgba(0, 0, 0, 0.18) calc(100% - var(--fade) * 0.25),
        rgba(0, 0, 0, 0.05) calc(100% - var(--fade) * 0.1),
        transparent);
    mask-image: linear-gradient(to bottom,
        #000 calc(100% - var(--fade)),
        rgba(0, 0, 0, 0.9) calc(100% - var(--fade) * 0.85),
        rgba(0, 0, 0, 0.7) calc(100% - var(--fade) * 0.65),
        rgba(0, 0, 0, 0.42) calc(100% - var(--fade) * 0.45),
        rgba(0, 0, 0, 0.18) calc(100% - var(--fade) * 0.25),
        rgba(0, 0, 0, 0.05) calc(100% - var(--fade) * 0.1),
        transparent);
}

/* These stay hero-sized; only the aurora's glow and the dot field spill. */
.hero-bg .aurora,
.hero-grid,
.hero-spot,
.hero-vignette {
    bottom: var(--bleed);
}

/* The aurora drifts against the pointer. It must not clip itself, or the
   shifted clip box shows as a hard edge along the hero's sides; the hero's own
   overflow (which doesn't move) does the clipping instead. */
.hero-bg .aurora {
    overflow: visible;
    opacity: 0.85;
    transform: translate3d(calc(var(--mx, 0) * -36px), calc(var(--my, 0) * -36px), 0);
    transition: transform 1.6s var(--ease);
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 34%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse 62% 52% at 50% 34%, #000 10%, transparent 72%);
    animation: grid-drift-lg 30s linear infinite;
}

@keyframes grid-drift-lg {
    to { background-position: 72px 72px, 72px 72px; }
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-spot {
    position: absolute;
    inset: 0;
    background: radial-gradient(560px circle at var(--hx, 50%) var(--hy, 40%), rgba(120, 175, 255, 0.11), transparent 60%);
    opacity: 0;
    transition: opacity 0.6s;
}

.hero.is-pointer .hero-spot {
    opacity: 1;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 52% 40% at 50% 44%, rgba(4, 5, 10, 0.62) 0%, transparent 100%),
        linear-gradient(to bottom, rgba(4, 5, 10, 0.55) 0%, transparent 22%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    text-align: center;
}

.hero-kicker {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    overflow: hidden;
    border-radius: 999px;
    color: #b8bfcc;
}

.hero-kicker::before {
    content: "";
    position: absolute;
    inset: -60%;
    z-index: -2;
    background: conic-gradient(from 0deg, transparent 0 25%, rgba(var(--blue-rgb), 0.15) 33%, var(--blue-2) 42%, transparent 52% 100%);
    animation: spin 4s linear infinite;
}

.hero-kicker::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: rgba(10, 13, 22, 0.94);
}

.kicker-label {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.14em;
}

.kicker-label strong {
    color: var(--blue-2);
    font-weight: 500;
}

.hero-title {
    margin: 30px 0 28px;
    font-size: clamp(48px, 8.6vw, 132px);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.hero-line {
    display: block;
    perspective: 900px;
}

/* Line one is split into characters that tumble in out of a blur. */
.hero-line .ch {
    display: inline-block;
    white-space: pre;
    transform-origin: 50% 85%;
}

html.js:not(.reduced-motion) .hero-line[data-chars]:not(.is-split) {
    opacity: 0;
}

html.js .hero-line.is-split .ch {
    animation: char-in 1.25s var(--ease) both;
    animation-delay: calc(var(--ci) * 36ms + var(--intro) + 80ms);
}

@keyframes char-in {
    from {
        opacity: 0;
        filter: blur(16px);
        transform: translate3d(0, 0.5em, -120px) rotateX(-80deg);
    }
}

.hero-line--accent {
    padding-bottom: 0.08em;
    animation: accent-in 1.5s var(--ease) both;
    animation-delay: calc(var(--intro) + 520ms);
}

@keyframes accent-in {
    from {
        opacity: 0;
        filter: blur(20px);
        transform: translateY(0.35em) scale(0.94);
    }
}

/* "Digital" and the rotating word share one gradient spanning the phrase;
   --pan (0 → 1) slides it by one full period so the loop is seamless. */
@property --pan {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.hero-line--accent .grad-text {
    background-image: var(--grad-hero);
    background-size: calc(var(--gw, 300px) * 2) 100%;
    background-position: calc(var(--pan) * var(--gw, 300px) * -2 - var(--gx, 0px)) 0;
    background-repeat: repeat-x;
    animation: grad-pan 7s linear infinite;
}

@keyframes grad-pan {
    to { --pan: 1; }
}

.rotator {
    position: relative;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    text-align: left;
}

.rotator.is-ready {
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
    transition: width 0.9s var(--ease);
}

.rotator.is-ready::before {
    content: "\200b";
}

.rotator.is-ready .rotator-word {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 0.08em 0.12em 0;
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 55%, 0) scale(0.92);
    transition:
        transform 0.9s var(--ease),
        opacity 0.6s var(--ease),
        filter 0.8s var(--ease);
}

.rotator.is-ready .rotator-word.is-active {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

.rotator.is-ready .rotator-word.is-leaving {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, -55%, 0) scale(1.04);
}

.hero-description {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-soft);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
}

.hero-actions .button {
    min-height: 50px;
    padding-inline: 25px;
    font-size: 13.5px;
}

@keyframes hint-pulse {
    to { box-shadow: 0 0 0 10px rgba(var(--cyan-rgb), 0); }
}

/* ---------- sections ---------- */
.section {
    position: relative;
    padding: clamp(96px, 11vw, 160px) 0;
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: end;
    gap: 28px 64px;
    margin-bottom: clamp(48px, 6vw, 80px);
}

.section-lede {
    max-width: 460px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.section-lede-row {
    display: grid;
    justify-items: start;
    gap: 26px;
}

.section-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition:
        transform 0.6s var(--ease),
        border-color 0.3s,
        background-color 0.3s;
}

.section-more-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    transition: transform 0.6s var(--ease);
}

.section-more svg {
    width: 16px;
    height: 16px;
}

.section-more:hover {
    border-color: rgba(var(--blue-rgb), 0.6);
    background: rgba(var(--blue-rgb), 0.08);
}

.section-more:hover .section-more-icon {
    transform: rotate(-45deg);
}

/* ---------- about ---------- */
.about {
    position: relative;
    padding-top: clamp(64px, 8vw, 110px);
    overflow: clip;
}

/* Two soft light pools drifting at their own pace behind the section. */
.about-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.about-orb {
    position: absolute;
    border-radius: 50%;
}

.about-orb--a {
    top: 4%;
    right: -18%;
    width: min(70vw, 900px);
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(var(--blue-rgb), 0.16), transparent);
}

.about-orb--b {
    top: 48%;
    left: -22%;
    width: min(60vw, 760px);
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(var(--cyan-rgb), 0.08), transparent);
}

/* Intro: heading (with a cluster of floating keyword chips under it) on
   the left, the statement, lit word by word on scroll, on the right. */
.about-intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(32px, 6vw, 96px);
}

.about-statement {
    padding-top: 64px;
    font-size: clamp(19px, 1.8vw, 25px);
    font-weight: 500;
    line-height: 1.36;
    letter-spacing: -0.025em;
    text-wrap: pretty;
}

.about-statement mark {
    background: none;
    color: inherit;
}

.about-statement .sw {
    transition: opacity 0.5s, color 0.5s, filter 0.5s;
}

html.js .about-statement.is-scrub .sw {
    opacity: 0.14;
    filter: blur(1.5px);
}

html.js .about-statement.is-scrub .sw.is-lit {
    opacity: 1;
    filter: none;
}

.about-statement mark .sw.is-lit {
    color: #7db6ff;
    text-shadow: 0 0 30px rgba(var(--blue-rgb), 0.45);
}


/* Pillars: tall glass cards. Each picture is built from layers that slide
   at different depths as the card tilts after the pointer; the three
   columns also rise at different speeds while the page scrolls. */
.about-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: clamp(48px, 6vw, 80px);
}

.pillar {
    --rx: 0deg;
    --ry: 0deg;
    --lx: 0;
    --ly: 0;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(var(--blue-rgb), 0.12), transparent 60%),
        linear-gradient(180deg, #0d121d, #080b13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.7s var(--ease), box-shadow 0.6s;
}

.pillar:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 50px 90px -50px rgba(var(--blue-rgb), 0.7);
}

/* A soft light follows the pointer across the card. */
.pillar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(130, 185, 255, 0.12), transparent 50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

.pillar:hover::before {
    opacity: 1;
}

.pillar-visual {
    position: relative;
    height: clamp(220px, 20vw, 280px);
}

.pillar-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    translate: calc(var(--lx) * var(--depth) * 1px) calc(var(--ly) * var(--depth) * 1px);
    transition: translate 0.7s var(--ease);
}

.pv-glow {
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--blue-rgb), 0.35), transparent);
    animation: pv-breathe 5s ease-in-out infinite;
}

@keyframes pv-breathe {
    50% { transform: scale(1.12); opacity: 0.7; }
}

.pillar-visual svg {
    width: 82%;
    height: auto;
    overflow: visible;
}

/* purpose: a radar sweeping for what matters */
.pv-target circle {
    fill: none;
    stroke: rgba(130, 185, 255, 0.28);
    stroke-width: 1;
}

.pv-cross {
    stroke: rgba(130, 185, 255, 0.16);
    stroke-dasharray: 3 5;
}

.pv-sweep {
    fill: rgba(79, 155, 255, 0.22);
    transform-origin: 110px 90px;
    animation: spin 5s linear infinite;
}

.pv-blip {
    position: absolute;
    left: var(--bx);
    top: var(--by);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #86dcff;
    box-shadow: 0 0 14px #86dcff;
    animation: pv-blip 2.5s ease-out infinite;
    animation-delay: var(--bd);
}

@keyframes pv-blip {
    0%, 100% { opacity: 0.2; scale: 0.7; }
    20% { opacity: 1; scale: 1.2; }
}

.pv-core {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 30%, #4f9bff 60%);
    box-shadow: 0 0 0 8px rgba(79, 155, 255, 0.18), 0 0 30px rgba(79, 155, 255, 0.9);
}

@keyframes chip-bob {
    50% { transform: translateY(-9px); }
}

/* creative: shapes turning, a curve being drawn with its handles */
.pv-shape {
    position: absolute;
    border: 1px solid rgba(130, 185, 255, 0.4);
}

.pv-shape--ring {
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    translate: -32% -14%;
    animation: pv-orbit 9s ease-in-out infinite;
}

.pv-shape--square {
    width: 26%;
    aspect-ratio: 1;
    border-radius: 22%;
    background: rgba(79, 155, 255, 0.08);
    translate: 46% 26%;
    animation: pv-turn 12s linear infinite;
}

@keyframes pv-orbit {
    50% { transform: translate(14px, -10px) scale(1.06); }
}

@keyframes pv-turn {
    to { transform: rotate(1turn); }
}

.pv-handle {
    stroke: rgba(130, 185, 255, 0.35);
    stroke-width: 1;
}

.pv-curve {
    fill: none;
    stroke: #7cc0ff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    filter: drop-shadow(0 0 8px rgba(79, 155, 255, 0.8));
    animation: pv-draw 4.5s var(--ease-io) infinite;
}

@keyframes pv-draw {
    0% { stroke-dashoffset: 1; }
    45%, 80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1; }
}

.pv-anchor {
    fill: #0b1222;
    stroke: #fff;
    stroke-width: 1.5;
}

.pv-knob {
    fill: #4f9bff;
}

.pv-swatch {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2f6dff, #86dcff);
    box-shadow: 0 16px 34px -10px rgba(47, 109, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    translate: 70% -90%;
    animation: chip-bob 5s ease-in-out infinite;
}

/* impact: steady growth */
.pv-grid {
    position: absolute;
    inset: 12% 10%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
    mask-image: radial-gradient(closest-side, #000, transparent);
}

.pv-bars {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    width: 64%;
    height: 58%;
}

.pv-bars i {
    flex: 1;
    height: var(--h);
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, rgba(79, 155, 255, 0.55), rgba(79, 155, 255, 0.08));
    transform-origin: 50% 100%;
    animation: pv-rise 3.6s var(--ease-io) infinite;
    animation-delay: calc(var(--b) * 0.12s);
}

@keyframes pv-rise {
    0%, 100% { transform: scaleY(0.82); }
    50% { transform: scaleY(1); }
}

.pv-line {
    fill: none;
    stroke: #86dcff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    filter: drop-shadow(0 0 8px rgba(134, 220, 255, 0.7));
    animation: pv-draw 5s var(--ease-io) infinite;
}

.pv-end {
    transform-box: fill-box;
    transform-origin: center;
    fill: #fff;
    filter: drop-shadow(0 0 10px #86dcff);
    animation: pv-blip 2.5s ease-out infinite;
}

.pillar-copy {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 6px 28px 30px;
}

.pillar h3 {
    font-size: clamp(21px, 1.9vw, 26px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.pillar p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.7;
}

/* How we work: three stations on a line that fills as the page scrolls,
   each lighting up as the light reaches it. */
.about-process {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    margin-top: clamp(56px, 7vw, 96px);
}

.process-label {
    display: block;
    margin-bottom: 14px;
    color: var(--blue-2);
    font: 500 11.5px var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.process-copy h3 {
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.process-copy p {
    max-width: 420px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.process-track {
    --p: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.process-line {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 39px;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--line-strong);
}

.process-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2f6dff, #4f9bff, #86dcff);
    box-shadow: 0 0 14px rgba(91, 155, 255, 0.9);
    transform: scaleX(var(--p));
    transform-origin: 0 50%;
}

.process-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 16px;
    width: 80px;
}

.process-node {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: #0b0f19;
    color: var(--muted);
    transition:
        background-color 0.5s,
        border-color 0.5s,
        color 0.5s,
        box-shadow 0.6s,
        scale 0.6s var(--ease-back);
}

.process-node svg {
    width: 26px;
    height: 26px;
}

.process-step.is-lit .process-node {
    border-color: transparent;
    background: radial-gradient(circle at 50% 30%, #4f9bff, #1d5fe6);
    color: #fff;
    box-shadow: 0 0 0 8px rgba(var(--blue-rgb), 0.12), 0 18px 40px -12px rgba(var(--blue-rgb), 0.9);
    scale: 1.06;
}

.process-name {
    color: var(--muted);
    font: 500 11.5px var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.5s;
}

.process-step.is-lit .process-name {
    color: #fff;
}

/* Spotlight: a soft light and a border glow that follow the pointer
   (project cards, CTA and listing cards). */
[data-spotlight] {
    --sx: 50%;
    --sy: 50%;
}

.project-card::before,
.insight-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(120, 175, 255, 0.1), transparent 45%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

.insight-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--sx) var(--sy), rgba(130, 185, 255, 0.85), transparent 55%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

.project-card:hover::before,
.insight-card:hover::before,
.insight-card:hover::after {
    opacity: 1;
}

.cta-card:hover,
.project-card:hover {
    box-shadow: 0 40px 80px -50px rgba(var(--blue-rgb), 0.6);
}

/* ---------- services: scroll story ---------- */
.services {
    overflow: clip;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 14%, var(--bg-soft) 86%, var(--bg) 100%);
}

.services-glow {
    position: absolute;
    left: -20%;
    top: 30%;
    width: 70%;
    height: 50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--blue-rgb), 0.12), transparent);
    pointer-events: none;
}

.services .section-lede {
    max-width: 420px;
}

.story {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(40px, 6vw, 96px);
}

.story-rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--line);
}

.story-rail span {
    display: block;
    height: 100%;
    background: linear-gradient(180deg, #f06a92, #6be2fa 25%, #d196f8 50%, #67e9b1 75%, #fcd069);
    box-shadow: 0 0 12px rgba(var(--blue-rgb), 0.8);
    transform: scaleY(var(--p, 0));
    transform-origin: 50% 0;
}

.story-list {
    position: relative;
    padding-left: 44px;
}

.story-step {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 46vh;
    padding: 28px 0;
    opacity: 0.25;
    filter: blur(1.2px);
    transition: opacity 0.6s var(--ease), filter 0.6s var(--ease);
}

.story-step.is-active {
    opacity: 1;
    filter: none;
}

.story-step::before {
    content: "";
    position: absolute;
    left: -44px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -5px;
    border: 2px solid var(--bg-soft);
    border-radius: 50%;
    background: var(--dim);
    transition: background-color 0.4s, box-shadow 0.4s, transform 0.5s var(--ease-back);
}

.story-step.is-active::before {
    background: rgb(var(--accent));
    box-shadow: 0 0 0 5px rgba(var(--accent), 0.18), 0 0 20px rgb(var(--accent));
    transform: scale(1.25);
}

.story-heading {
    margin: 0;
    font: inherit;
}

.story-toggle {
    display: flex;
    align-items: baseline;
    gap: 18px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.story-name {
    padding: 0 0.08em 0.16em 0;
    margin: 0 -0.08em -0.16em 0;
    font-size: clamp(32px, 3.8vw, 56px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.story-step.is-active .story-name {
    background: linear-gradient(100deg, #fff 40%, rgb(var(--accent)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.story-plus {
    display: none;
}

.story-panel {
    display: grid;
    grid-template-rows: 1fr;
}

.story-panel-inner {
    min-height: 0;
}

.story-visual-inline {
    display: none;
}

.story-desc {
    max-width: 470px;
    margin-top: 20px;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.7;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.service-tags li {
    padding: 7px 13px;
    border: 1px solid rgba(var(--accent), 0.3);
    border-radius: 999px;
    background: rgba(var(--accent), 0.07);
    color: rgb(var(--accent));
    font-size: 12px;
    font-weight: 500;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(rgb(var(--accent)), rgb(var(--accent))) 0 100% / 0 1.5px no-repeat;
    transition: background-size 0.6s var(--ease), color 0.3s;
}

.service-link svg {
    width: 17px;
    height: 17px;
    transition: transform 0.5s var(--ease);
}

.service-link:hover {
    color: rgb(var(--accent));
    background-size: 100% 1.5px;
}

.service-link:hover svg {
    transform: translateX(4px);
}

.story-stage {
    position: relative;
}

/* No frame and no pager: each illustration (already shaped like its medium —
   canvas, browser, phone, game screen, network) floats over a pool of its
   service colour and a faint grid, with a soft shadow grounding it. */
.stage {
    position: sticky;
    top: max(110px, calc(50vh - 250px));
    transition: --stage 0.9s var(--ease);
}

.stage-screen {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 3.1;
}

.stage-screen::before {
    content: "";
    position: absolute;
    inset: -6%;
    z-index: -2;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
}

.stage-screen::after {
    content: "";
    position: absolute;
    inset: 4% 8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--stage) 30%, transparent), transparent);
    filter: blur(24px);
}

.stage::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: -2%;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--stage) 42%, transparent), transparent);
    filter: blur(8px);
}

.stage-visual {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(24px) scale(0.92);
    transition:
        opacity 0.6s,
        filter 0.7s var(--ease),
        transform 0.9s var(--ease);
}

.stage-visual.is-active {
    opacity: 1;
    filter: none;
    transform: none;
}

.stage-visual.is-active .sv {
    animation: stage-float 7s var(--ease-io) infinite;
}

.stage-visual:not(.is-active) .sv * {
    animation-play-state: paused;
}

@keyframes stage-float {
    50% { translate: 0 -10px; }
}

/* service illustrations (inline SVG, coloured by --accent) */
.sv {
    position: relative;
    width: 92%;
    height: auto;
    overflow: visible;
}

.sv * {
    animation-fill-mode: backwards;
}

.story-step:not(.is-open) .story-visual-inline .sv * {
    animation-play-state: paused;
}

.sv-panel {
    fill: rgba(255, 255, 255, 0.035);
    stroke: rgba(255, 255, 255, 0.12);
}

.sv-panel-strong {
    fill: #121826;
    stroke: rgba(255, 255, 255, 0.16);
}

.sv-dim {
    fill: rgba(255, 255, 255, 0.14);
}

.sv-block {
    fill: rgba(255, 255, 255, 0.09);
}

.sv-fill {
    fill: rgb(var(--accent));
}

.sv-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
}

/* design */
.sv-design .sv-block {
    animation: sv-shimmer 3.2s ease-in-out infinite;
}

.sv-design .sv-b2 { animation-delay: 0.3s; }
.sv-design .sv-b3 { animation-delay: 0.6s; }
.sv-design .sv-b4 { animation-delay: 0.9s; }
.sv-design .sv-b5 { animation-delay: 1.2s; }

.sv-pen {
    fill: none;
    stroke: rgb(var(--accent));
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 6px rgba(var(--accent), 0.8));
    animation: sv-draw 6s var(--ease-io) infinite;
}

.sv-select {
    animation: sv-select 6s var(--ease-io) infinite;
}

.sv-select-box {
    fill: rgba(var(--accent), 0.06);
    stroke: rgb(var(--accent));
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    animation: sv-ants 0.8s linear infinite;
}

.sv-handle {
    fill: #fff;
    stroke: rgb(var(--accent));
    stroke-width: 1.5;
}

.sv-cursor-wrap {
    animation: sv-cursor 6s var(--ease-io) infinite;
}

.sv-cursor {
    fill: #fff;
    stroke: #0b0f18;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

@keyframes sv-shimmer {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@keyframes sv-draw {
    0% { stroke-dashoffset: 1; }
    40%, 70% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1; }
}

@keyframes sv-ants {
    to { stroke-dashoffset: -10; }
}

@keyframes sv-select {
    0%, 35% { transform: translate(0, 0); }
    45%, 80% { transform: translate(144px, 0); }
    90%, 100% { transform: translate(0, 0); }
}

@keyframes sv-cursor {
    0% { transform: translate(112px, 248px); }
    25%, 35% { transform: translate(200px, 168px); }
    45%, 80% { transform: translate(344px, 168px); }
    90% { transform: translate(200px, 168px); }
    100% { transform: translate(112px, 248px); }
}

/* web */
.sv-dot-r { fill: #ff5f57; }
.sv-dot-y { fill: #febc2e; }
.sv-dot-g { fill: #28c840; }
.sv-url { fill: rgba(255, 255, 255, 0.06); }

.sv-tok {
    fill: rgba(255, 255, 255, 0.22);
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: sv-type 6.5s var(--ease) infinite;
}

.sv-tok.sv-acc {
    fill: rgb(var(--accent));
}

.sv-c2 { animation-delay: 0.35s; }
.sv-c3 { animation-delay: 0.7s; }
.sv-c4 { animation-delay: 1.05s; }
.sv-c5 { animation-delay: 1.4s; }
.sv-c6 { animation-delay: 1.75s; }

.sv-caret {
    fill: rgb(var(--accent));
    animation: sv-blink 1s steps(1) infinite;
}

.sv-preview {
    animation: sv-float 5s ease-in-out infinite;
}

.sv-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: sv-pulse 2s ease-in-out infinite;
}

@keyframes sv-type {
    0% { transform: scaleX(0); }
    10%, 80% { transform: scaleX(1); }
    92%, 100% { transform: scaleX(0); }
}

@keyframes sv-blink {
    50% { opacity: 0; }
}

@keyframes sv-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes sv-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* mobile */
.sv-ring {
    fill: none;
    stroke: rgba(var(--accent), 0.3);
    stroke-dasharray: 3 7;
    transform-origin: 200px 150px;
    animation: spin 30s linear infinite;
}

.sv-ring-2 {
    stroke: rgba(var(--accent), 0.16);
    animation-direction: reverse;
    animation-duration: 40s;
}

.sv-app {
    fill: rgba(255, 255, 255, 0.1);
    transform-box: fill-box;
    transform-origin: center;
    animation: sv-pop 5s var(--ease-back) infinite;
}

.sv-a2, .sv-a6, .sv-a7 {
    fill: rgba(var(--accent), 0.85);
}

.sv-a2 { animation-delay: 0.08s; }
.sv-a3 { animation-delay: 0.16s; }
.sv-a4 { animation-delay: 0.24s; }
.sv-a5 { animation-delay: 0.32s; }
.sv-a6 { animation-delay: 0.4s; }
.sv-a7 { animation-delay: 0.48s; }
.sv-a8 { animation-delay: 0.56s; }
.sv-a9 { animation-delay: 0.64s; }

.sv-notify {
    animation: sv-notify 5s var(--ease) infinite;
}

.sv-tap {
    fill: rgba(var(--accent), 0.4);
    transform-box: fill-box;
    transform-origin: center;
    animation: sv-tap 2.4s ease-out infinite;
}

@keyframes sv-pop {
    0% { transform: scale(0); }
    12%, 82% { transform: scale(1); }
    94%, 100% { transform: scale(0); }
}

@keyframes sv-notify {
    0%, 22% { transform: translateY(-16px); opacity: 0; }
    32%, 76% { transform: translateY(0); opacity: 1; }
    88%, 100% { transform: translateY(-16px); opacity: 0; }
}

@keyframes sv-tap {
    0% { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* game */
.sv-stars circle {
    fill: #fff;
    animation: sv-twinkle 2.6s ease-in-out infinite;
}

.sv-stars circle:nth-child(2n) { animation-delay: 0.8s; }
.sv-stars circle:nth-child(3n) { animation-delay: 1.6s; }

.sv-hud {
    fill: rgba(255, 255, 255, 0.75);
    font: 500 12px var(--font-mono);
    letter-spacing: 0.12em;
}

.sv-ground {
    fill: rgba(var(--accent), 0.08);
}

.sv-platform {
    fill: rgba(var(--accent), 0.55);
}

.sv-coin {
    transform-box: fill-box;
    transform-origin: center;
    animation: sv-coin 1.3s ease-in-out infinite;
}

.sv-coin circle {
    fill: #fcd069;
    stroke: #c99316;
    stroke-width: 2;
}

.sv-coin-2 { animation-delay: 0.3s; }
.sv-coin-3 { animation-delay: 0.6s; }

.sv-player {
    fill: rgb(var(--accent));
    filter: drop-shadow(0 0 8px rgba(var(--accent), 0.8));
}

.sv-player-track {
    animation: sv-run 5s ease-in-out infinite;
}

.sv-enemy {
    fill: #f06a92;
    animation: sv-patrol 2.2s ease-in-out infinite alternate;
}

@keyframes sv-twinkle {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

@keyframes sv-coin {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.15); }
}

@keyframes sv-run {
    0% { transform: translate(0, 0); opacity: 1; }
    10% { transform: translate(40px, 0); }
    18% { transform: translate(60px, -80px); }
    26%, 34% { transform: translate(84px, -46px); }
    44% { transform: translate(140px, -128px); }
    52%, 60% { transform: translate(190px, -86px); }
    70% { transform: translate(232px, -110px); }
    80%, 88% { transform: translate(270px, 0); opacity: 1; }
    95%, 100% { transform: translate(270px, 0); opacity: 0; }
}

@keyframes sv-patrol {
    to { transform: translateX(-34px); }
}

/* ai */
.sv-links path {
    stroke: rgba(255, 255, 255, 0.09);
    stroke-width: 1;
}

.sv-signal {
    fill: none;
    stroke: rgb(var(--accent));
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 0.14 0.86;
    filter: drop-shadow(0 0 5px rgba(var(--accent), 0.9));
    animation: sv-signal 2.8s linear infinite;
}

.sv-s2 { animation-delay: 0.7s; }
.sv-s3 { animation-delay: 1.4s; }
.sv-s4 { animation-delay: 2.1s; }

.sv-node {
    fill: #0f1522;
    stroke: rgb(var(--accent));
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: sv-node 2.4s ease-in-out infinite;
    animation-delay: calc(var(--n) * 0.17s);
}

@keyframes sv-signal {
    from { stroke-dashoffset: 0.14; }
    to { stroke-dashoffset: -0.86; }
}

@keyframes sv-node {
    0%, 100% { transform: scale(1); fill: #0f1522; }
    50% { transform: scale(1.2); fill: rgba(var(--accent), 0.45); }
}

/* Playable illustrations (app.js initServiceVisuals). The stage leans after
   the pointer and .sv-z layers drift by their --z depth; .is-live is set
   while the pointer is over a picture and pauses its loop. */
.stage-screen {
    transition: transform 0.7s var(--ease);
}

.stage-visual:not(.is-active) {
    pointer-events: none;
}

.sv-z {
    translate: calc(var(--px, 0) * var(--z, 0) * 6px) calc(var(--py, 0) * var(--z, 0) * 4px);
    transition: translate 0.8s var(--ease);
}

/* design: selection follows the hovered block, a click fills it */
.sv-select,
.sv-cursor-wrap {
    transition: opacity 0.3s;
}

.sv-design.is-live .sv-select {
    animation: none;
}

.sv-design.is-live:not(.has-pick) .sv-select,
.sv-design.is-live .sv-cursor-wrap {
    opacity: 0;
}

.sv-select-box,
.sv-handle {
    transition: x 0.35s var(--ease), y 0.35s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease), fill 0.3s;
}

.sv-design [data-sv-hot] {
    transition: fill 0.35s, opacity 0.35s;
}

.sv-design.is-live .sv-block {
    animation: none;
    opacity: 0.8;
}

.sv-design .sv-block.is-hot {
    fill: rgba(255, 255, 255, 0.17);
    opacity: 1;
}

.sv-design .sv-block.is-filled {
    fill: rgba(var(--accent), 0.6);
    opacity: 1;
}

.sv-design .sv-b6.is-filled {
    fill: #fff;
}

.sv-design.is-stamp .sv-handle {
    fill: rgb(var(--accent));
}

/* web: hovered line lights, the caret follows, a click runs it */
.sv-web.is-live .sv-tok {
    animation: none;
}

.sv-row .sv-tok {
    transition: fill 0.3s, filter 0.3s;
}

.sv-row.is-hot .sv-tok {
    fill: rgba(255, 255, 255, 0.5);
}

.sv-row.is-hot .sv-tok.sv-acc {
    fill: rgb(var(--accent));
    filter: drop-shadow(0 0 5px rgba(var(--accent), 0.8));
}

.sv-caret {
    transition: translate 0.35s var(--ease);
}

.sv-web .sv-preview .sv-panel-strong {
    transition: stroke 0.4s, filter 0.4s;
}

.sv-web.is-run .sv-preview .sv-panel-strong {
    stroke: rgb(var(--accent));
    filter: drop-shadow(0 0 16px rgba(var(--accent), 0.55));
}

.sv-web.is-run .sv-pulse {
    animation: sv-run-press 0.9s var(--ease-back);
}

.sv-web.is-run .sv-tok.sv-acc {
    animation: sv-run-flash 0.9s ease both;
}

@keyframes sv-run-press {
    30% { transform: scale(0.86); }
    60% { transform: scale(1.14); }
}

@keyframes sv-run-flash {
    30% { fill: #fff; }
}

/* mobile: apps grow under the pointer, a tap ripples and notifies */
.sv-mobile.is-live .sv-app {
    animation: none;
}

.sv-app {
    transition: scale 0.4s var(--ease-back), fill 0.3s;
}

.sv-app.is-hot {
    scale: 1.16;
}

.sv-mobile.is-live .sv-app.is-pressed {
    animation: sv-press 0.45s var(--ease-back);
}

.sv-mobile.is-live .sv-tap {
    animation: none;
    opacity: 0;
}

.sv-mobile.is-live.is-tap .sv-tap {
    animation: sv-tap 0.7s ease-out;
}

.sv-mobile.is-live .sv-notify {
    animation: none;
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.4s, transform 0.6s var(--ease-back);
}

.sv-mobile.is-live.is-notify .sv-notify {
    opacity: 1;
    transform: none;
}

@keyframes sv-press {
    35% { transform: scale(0.82); }
    70% { transform: scale(1.2); }
}

/* game: the runner is steered by the pointer and jumps on click */
.sv-game.is-live .sv-player-track {
    animation: none;
}

.sv-game .sv-coin.is-taken {
    animation: sv-coin-take 0.45s ease-out forwards;
}

.sv-hud {
    transition: fill 0.3s;
}

.sv-game.is-score .sv-hud {
    fill: rgb(var(--accent));
}

@keyframes sv-coin-take {
    to { transform: translateY(-16px) scale(1.6); opacity: 0; }
}

/* ai: the hovered node lights its links; a click pulses outwards */
.sv-links path {
    transition: stroke 0.3s, stroke-width 0.3s;
}

.sv-links path.is-hot {
    stroke: rgba(var(--accent), 0.55);
    stroke-width: 1.6;
}

.sv-node {
    transition: fill 0.3s, scale 0.4s var(--ease-back);
}

.sv-node.is-near {
    animation: none;
    fill: rgba(var(--accent), 0.3);
}

.sv-node.is-hot {
    animation: none;
    fill: rgb(var(--accent));
    scale: 1.25;
}

.sv-links path.is-fire,
.sv-links path.is-fire-back {
    stroke: rgb(var(--accent));
    stroke-width: 2.4;
    stroke-dasharray: 0.3 0.7;
    filter: drop-shadow(0 0 5px rgba(var(--accent), 0.9));
    animation: sv-fire 0.7s linear both;
}

.sv-links path.is-fire-back {
    animation-direction: reverse;
}

.sv-ai .sv-node.is-flash {
    animation: sv-flash 0.6s ease-out;
}

@keyframes sv-fire {
    from { stroke-dashoffset: 0.3; }
    to { stroke-dashoffset: -1; }
}

@keyframes sv-flash {
    0% { fill: #fff; scale: 1.5; }
}

/* ---------- projects carousel ---------- */
.projects-section {
    background:
        radial-gradient(60% 50% at 80% 30%, rgba(var(--blue-rgb), 0.08), transparent 70%),
        var(--bg);
}

.project-track {
    --track-gutter: max(24px, calc((100% - 1200px) / 2));
    display: flex;
    gap: 22px;
    /* The bottom padding leaves room for a hovered card's shadow (the
       scroller clips anything outside it); the negative margin keeps the
       controls where they were. */
    padding: 12px var(--track-gutter) 76px;
    margin-bottom: -54px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: var(--track-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    cursor: grab;
    user-select: none;
}

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

.project-track.is-static {
    overflow-x: hidden;
    cursor: auto;
}

.project-track.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.project-track.dragging .project-card {
    pointer-events: none;
}

.project-card {
    position: relative;
    isolation: isolate;
    flex: 0 0 min(760px, 100vw - 64px);
    aspect-ratio: 16 / 9.4;
    overflow: hidden;
    border-radius: 28px;
    background: var(--surface);
    scroll-snap-align: start;
    -webkit-user-drag: none;
    transition: transform 0.7s var(--ease), box-shadow 0.5s;
}

html.js .project-track:not(.is-in) .project-card {
    opacity: 0;
}

/* Cards are scroll-snap targets, so the entrance must not move their boxes
   (Chrome would cache the shifted snap positions). Clip + inner zoom only. */
html.js .project-track.is-in .project-card {
    animation: card-in 1.3s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 120ms);
}

html.js .project-track.is-in .project-thumb-media {
    animation: card-media-in 1.8s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 120ms);
}

@keyframes card-in {
    from {
        opacity: 0;
        clip-path: inset(0 0 0 35% round 28px);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 28px);
    }
}

@keyframes card-media-in {
    from {
        scale: 1.3;
        filter: blur(10px);
    }
}

.project-thumb-media,
.insight-thumb,
.detail-media {
    view-transition-class: media;
}

.project-thumb-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.project-thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 1.2s var(--ease);
}

.project-card:hover .project-thumb-media img {
    transform: scale(1.1);
}

.project-thumb-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 8, 15, 0.1) 0%, rgba(5, 8, 15, 0) 30%, rgba(5, 8, 15, 0.6) 64%, rgba(5, 8, 15, 0.94) 100%);
    pointer-events: none;
}

.project-content {
    position: absolute;
    left: 28px;
    right: 26px;
    bottom: 26px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    transition: transform 0.7s var(--ease);
}

.project-card:hover .project-content {
    transform: translateY(-4px);
}

.project-content h3 {
    margin-top: 12px;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.project-meta {
    color: #b9c1cf;
    font-size: 13px;
}

.project-category {
    --label-rgb: 107, 226, 250;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    padding: 6px 12px 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(8, 11, 18, 0.62);
    color: #f2f5fa;
    font: 500 9.5px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}

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

.project-category.raspberry { --label-rgb: 240, 106, 146; }
.project-category.cyan { --label-rgb: 107, 226, 250; }
.project-category.purple { --label-rgb: 209, 150, 248; }
.project-category.green { --label-rgb: 103, 233, 177; }
.project-category.amber { --label-rgb: 252, 208, 105; }
.project-category.blue { --label-rgb: 90, 160, 250; }

.track-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
}

.project-track.is-static + .container .track-footer {
    display: none;
}

.track-btn {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    cursor: pointer;
    transition:
        background-color 0.3s,
        border-color 0.3s,
        transform 0.5s var(--ease);
}

.track-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.5s var(--ease);
}

.track-btn:hover {
    border-color: transparent;
    background: var(--blue);
}

.track-btn[data-track-prev]:hover svg {
    transform: translateX(-3px);
}

.track-btn[data-track-next]:hover svg {
    transform: translateX(3px);
}

.track-btn:active {
    transform: scale(0.9);
}

.track-progress {
    position: relative;
    flex: 1;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.track-progress span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    border-radius: 2px;
    background: var(--grad);
    box-shadow: 0 0 10px rgba(var(--blue-rgb), 0.8);
}

/* ---------- cards (insights + listings) ---------- */
.insights-section {
    background: var(--bg);
}

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

/* All insights: four smaller cards a row (three below 1180px; the shared
   insight-grid rules take it to two and one column further down). */
.insight-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.insight-grid--four .card-title {
    font-size: 18px;
    line-height: 1.3;
}

.insight-grid--four [data-card="insight"] .card-body {
    padding: 16px 10px 6px;
}

@media (max-width: 1180px) {
    .insight-grid--four {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.insight-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: linear-gradient(180deg, #0d121c, #0a0e16);
    color: inherit;
    transition:
        transform 0.7s var(--ease),
        border-color 0.4s,
        box-shadow 0.6s;
}

.insight-card:hover {
    border-color: rgba(var(--blue-rgb), 0.3);
    box-shadow: 0 40px 70px -40px rgba(var(--blue-rgb), 0.55);
    transform: translateY(-8px);
}

.insight-thumb {
    position: relative;
    flex: none;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-2);
}

.insight-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.insight-card:hover .insight-thumb img {
    transform: scale(1.08);
}

/* Insight and project listing cards hover like the CTA: the side under the
   pointer dips (press tilt, app.js) and a blue glow follows it behind the
   copy; no lift and no lit outline. */
[data-press-card]:hover {
    z-index: 2;
    border-color: var(--line);
    box-shadow: 0 40px 80px -50px rgba(var(--blue-rgb), 0.6);
    transform: none;
}

/* The hovered card's shadow falls over the row below it, so the card stays
   on top until the shadow has faded out. */
[data-press-card] {
    transition:
        transform 0.7s var(--ease),
        border-color 0.4s,
        box-shadow 0.6s,
        z-index 0s 0.6s;
}

[data-press-card]:hover {
    transition-delay: 0s;
}

[data-press-card]::before {
    z-index: -1;
    background: radial-gradient(540px circle at var(--sx) var(--sy), rgba(29, 107, 255, 0.22), transparent 60%);
}

[data-press-card]::after {
    display: none;
}

.content-type-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(4, 8, 18, 0.62);
    color: #eef2ff;
    font: 500 9.5px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 24px 24px;
}

.card-body .eyebrow,
.card-body .project-index-category {
    align-self: flex-start;
}

.card-title {
    margin: 14px 0 10px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.03em;
    transition: color 0.3s;
}

.insight-card:hover .card-title {
    color: #9cc6ff;
}

.read-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--dim);
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Home insights as a bento: one feature card beside up to three side cards. */
.insight-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.insight-bento > * {
    grid-column: span 5;
    flex-direction: row;
}

.insight-bento > :first-child {
    grid-column: span 7;
    grid-row: span 2;
    flex-direction: column;
}

.insight-bento > :not(:first-child) .insight-thumb {
    flex: 0 0 42%;
    aspect-ratio: auto;
}


.insight-bento > :not(:first-child) .card-title {
    font-size: 19px;
}

.insight-bento > :first-child .insight-thumb {
    aspect-ratio: 16 / 9;
}

.insight-bento > :first-child .card-body {
    padding: 28px 30px 30px;
}

.insight-bento > :first-child .card-title {
    font-size: clamp(24px, 2.3vw, 32px);
}

.insight-bento > :only-child,
.insight-bento > :first-child:nth-last-child(2),
.insight-bento > :first-child:nth-last-child(2) ~ * {
    grid-column: span 6;
    grid-row: auto;
    flex-direction: column;
}

.insight-bento > :only-child {
    grid-column: 1 / -1;
}

.insight-bento > :first-child:nth-last-child(2) ~ * .insight-thumb {
    flex: none;
    aspect-ratio: 16 / 9;
}

/* Four insights: the feature spans the height of three slimmer side cards. */
.insight-bento > :first-child:nth-last-child(n + 4) {
    grid-row: span 3;
}

.insight-bento > :first-child:nth-last-child(n + 4) ~ * .insight-thumb {
    flex-basis: 40%;
}

.insight-bento > :first-child:nth-last-child(n + 4) ~ * .card-body {
    padding: 16px 20px 18px;
}

.insight-bento > :first-child:nth-last-child(n + 4) ~ * .card-title {
    display: -webkit-box;
    margin: 10px 0 8px;
    overflow: hidden;
    font-size: 21px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Project cards (All projects, related projects): full bleed, like the home
   carousel, close to the 16:9 shape of the covers. The picture fills the card and the label and name sit on a
   dark shade at its foot; the pointer's blue glow tints the picture. */
[data-card="project"] {
    justify-content: flex-end;
    aspect-ratio: 16 / 9.6;
    background: var(--surface);
}

[data-card="project"] .insight-thumb {
    position: absolute;
    inset: 0;
    z-index: -2;
    aspect-ratio: auto;
}

[data-card="project"] .insight-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 8, 15, 0) 0%, rgba(5, 8, 15, 0) 45%, rgba(5, 8, 15, 0.55) 72%, rgba(5, 8, 15, 0.92) 100%);
    pointer-events: none;
}

[data-card="project"] .thumbnail-placeholder {
    padding-bottom: 18%;
}

[data-card="project"]::before {
    z-index: -1;
    mix-blend-mode: screen;
}

[data-card="project"] .card-body {
    flex: none;
    padding: 22px 24px 22px;
    transition: transform 0.7s var(--ease);
}

[data-card="project"]:hover .card-body {
    transform: translateY(-4px);
}

[data-card="project"] .card-title,
.project-content h3 {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 2px 10px rgba(0, 0, 0, 0.65),
        0 6px 32px rgba(0, 0, 0, 0.75);
}

[data-card="project"] .card-title {
    margin: 12px 0 0;
    color: #fff;
    font-size: clamp(22px, 2vw, 27px);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

/* Same label as the home carousel: a dark glass pill with white text and
   the category colour only in its ringed dot. */
[data-card="project"] .project-index-category {
    gap: 8px;
    padding: 6px 12px 6px 10px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(8, 11, 18, 0.62);
    color: #f2f5fa;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}

[data-card="project"] .project-index-category::before {
    width: 6px;
    height: 6px;
    background: rgb(var(--label-rgb, 107, 226, 250));
    box-shadow: 0 0 0 3px rgba(var(--label-rgb, 107, 226, 250), 0.22);
}

.related-grid [data-card="project"] .card-title {
    font-size: 22px;
}

/* Insight cards: the picture sits in a glass frame with a calm line of
   details under the title. */
[data-card="insight"] {
    padding: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), #0a0e16;
}

[data-card="insight"] .insight-thumb {
    border-radius: 17px;
    isolation: isolate;
}

[data-card="insight"] .content-type-badge {
    top: 12px;
    left: 12px;
}

[data-card="insight"] .card-body,
.insight-bento > [data-card="insight"]:first-child .card-body,
.insight-bento > :first-child:nth-last-child(n + 4) ~ [data-card="insight"] .card-body {
    padding: 18px 14px 8px;
}

.insight-bento > [data-card="insight"]:first-child .card-body {
    padding: 24px 18px 12px;
}

.insight-bento > [data-card="insight"]:not(:first-child) .card-body {
    padding-left: 20px;
}

[data-card="insight"] .read-meta {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

[data-card="insight"] .card-title + .read-meta {
    margin-top: auto;
}

.project-index-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    padding: 6px 11px 6px 9px;
    border: 1px solid rgba(var(--label-rgb, 107, 226, 250), 0.4);
    border-radius: 999px;
    background: rgba(var(--label-rgb, 107, 226, 250), 0.1);
    color: rgb(var(--label-rgb, 107, 226, 250));
    font: 500 9.5px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.project-index-category::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.project-index-category.raspberry { --label-rgb: 240, 106, 146; }
.project-index-category.cyan { --label-rgb: 107, 226, 250; }
.project-index-category.purple { --label-rgb: 209, 150, 248; }
.project-index-category.green { --label-rgb: 103, 233, 177; }
.project-index-category.amber { --label-rgb: 252, 208, 105; }
.project-index-category.blue { --label-rgb: 90, 160, 250; }

.thumbnail-placeholder {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    padding: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 120%, rgba(var(--blue-rgb), 0.35), transparent 60%),
        linear-gradient(135deg, #080e1a 0%, #101b32 52%, #07101f 100%);
    color: #8fa3c4;
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.thumbnail-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

.thumbnail-placeholder > * {
    position: relative;
}

.thumbnail-placeholder-mark {
    width: 44px;
    height: auto;
    opacity: 0.55;
    transition: transform 0.8s var(--ease-back), opacity 0.4s;
}

.insight-card:hover .thumbnail-placeholder-mark,
.project-card:hover .thumbnail-placeholder-mark {
    opacity: 0.85;
    transform: scale(1.12) rotate(-6deg);
}

.project-card .thumbnail-placeholder {
    position: absolute;
    inset: 0;
}

/* Skeleton shimmer while a lazy card image is still downloading. */
img.is-loading {
    background: linear-gradient(100deg, var(--surface-2) 30%, #1a2236 50%, var(--surface-2) 70%) 0 0 / 300% 100%;
    animation: skeleton 1.3s linear infinite;
}

img.is-loaded {
    animation: img-in 0.9s var(--ease) both;
}

@keyframes skeleton {
    to { background-position: -150% 0; }
}

@keyframes img-in {
    from {
        opacity: 0;
        filter: blur(12px);
    }
}
/* ---------- listing pages ---------- */
.page-hero,
.detail-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.page-hero {
    padding: clamp(150px, 17vw, 210px) 0 clamp(56px, 6vw, 84px);
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.page-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 0%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse 80% 90% at 70% 0%, #000 10%, transparent 70%);
    animation: grid-drift-lg 30s linear infinite;
}

.aurora--page {
    opacity: 0.7;
}

.aurora--page span:nth-child(1) {
    left: auto;
    right: -20%;
    top: -60%;
    bottom: auto;
}

.aurora--page span:nth-child(2) {
    left: -20%;
    right: auto;
    bottom: -50%;
}

/* Detail pages: one soft blue light from above, centred behind the
   title, with two deep blue pools at the sides; no cyan haze, nothing
   clipped hard against the top corner, and a long fade into the page. */
.detail-hero .page-hero-bg {
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
}

.detail-hero .aurora--page {
    opacity: 1;
}

.detail-hero .aurora--page span:nth-child(1) {
    inset: -70% auto auto 50%;
    width: 96vmax;
    height: 52vmax;
    margin-left: -48vmax;
    background: radial-gradient(closest-side, rgba(29, 107, 255, 0.5), rgba(29, 107, 255, 0.16) 52%, transparent);
    animation: aurora-top 22s ease-in-out infinite alternate;
}

.detail-hero .aurora--page span:nth-child(2) {
    inset: -10% -26% auto auto;
    width: 60vmax;
    height: 42vmax;
    background: radial-gradient(closest-side, rgba(var(--royal-rgb), 0.2), rgba(var(--royal-rgb), 0.05) 55%, transparent);
}

.detail-hero .aurora--page span:nth-child(3) {
    inset: -10% auto auto -26%;
    width: 60vmax;
    height: 42vmax;
    background: radial-gradient(closest-side, rgba(29, 107, 255, 0.2), rgba(29, 107, 255, 0.05) 55%, transparent);
}

.detail-hero .page-hero-grid {
    -webkit-mask-image: radial-gradient(ellipse 70% 85% at 50% 0%, #000 8%, transparent 68%);
    mask-image: radial-gradient(ellipse 70% 85% at 50% 0%, #000 8%, transparent 68%);
}

@keyframes aurora-top {
    to { transform: translate3d(0, 8%, 0) scale(1.08); }
}

.page-title {
    margin-top: 20px;
    font-size: clamp(44px, 7vw, 104px);
    font-weight: 600;
    line-height: 0.96;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.page-lede {
    margin-top: 28px;
    color: var(--text-soft);
    font-size: 16.5px;
    line-height: 1.7;
}

.listing {
    padding: 8px 0 clamp(96px, 10vw, 150px);
}

.project-filters {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 30px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.025);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.project-filters label {
    display: grid;
    gap: 9px;
    color: var(--dim);
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.project-search {
    flex: 1;
}

.project-category-filter {
    position: relative;
    min-width: 220px;
}

.project-category-filter::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 22px;
    width: 7px;
    height: 7px;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(45deg);
    pointer-events: none;
    transition: transform 0.4s var(--ease);
}

.project-category-filter:focus-within::after {
    transform: translateY(3px) rotate(225deg);
}

.field-shell {
    position: relative;
    display: block;
}

.field-shell svg {
    position: absolute;
    top: 50%;
    left: 17px;
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 0.3s;
}

.field-shell:focus-within svg {
    color: var(--blue-2);
}

.project-filters input,
.project-filters select {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: 15px;
    background: rgba(5, 7, 12, 0.65);
    color: var(--text);
    font: 500 14px var(--font-sans);
    letter-spacing: normal;
    text-transform: none;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.project-filters .field-shell input {
    padding-left: 48px;
}

.project-filters select {
    padding-right: 44px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.project-filters select option {
    background: #0b0f18;
}

.project-filters input:hover,
.project-filters select:hover {
    border-color: rgba(255, 255, 255, 0.24);
}

.project-filters input:focus,
.project-filters select:focus {
    outline: none;
    border-color: rgba(var(--blue-rgb), 0.8);
    background: rgba(5, 7, 12, 0.9);
    box-shadow: 0 0 0 4px rgba(var(--blue-rgb), 0.18);
}

.results-meta {
    margin-bottom: 20px;
    color: var(--dim);
    font: 500 11.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.results-meta span {
    color: var(--text);
}

.project-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 60px;
}

.page-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 46px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 600;
    transition:
        background-color 0.3s,
        border-color 0.3s,
        color 0.3s,
        transform 0.5s var(--ease);
}

.page-control svg {
    width: 16px;
    height: 16px;
}

a.page-control:hover {
    border-color: rgba(var(--blue-rgb), 0.6);
    background: rgba(var(--blue-rgb), 0.1);
    color: var(--text);
    transform: translateY(-2px);
}

.page-control.current {
    border-color: transparent;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(var(--blue-rgb), 0.8);
}

.page-control.disabled {
    opacity: 0.35;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 72px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: 26px;
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--blue-rgb), 0.1), transparent 60%);
    text-align: center;
}

.empty-state-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border: 1px solid rgba(var(--blue-rgb), 0.4);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(var(--blue-rgb), 0.28), rgba(var(--blue-rgb), 0.06));
    color: #8dbbff;
    animation: sv-float 4s ease-in-out infinite;
}

.empty-state h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.empty-state p {
    max-width: 380px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.empty-state .button {
    margin-top: 8px;
}

/* ---------- detail pages ---------- */
.detail-hero {
    padding: clamp(140px, 15vw, 190px) 0 36px;
}

.detail-article {
    width: min(960px, 100% - 48px);
    margin-inline: auto;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 34px;
    padding: 8px 16px 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.back-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.5s var(--ease);
}

.back-link:hover {
    border-color: rgba(var(--blue-rgb), 0.6);
    background: rgba(var(--blue-rgb), 0.1);
    color: #fff;
}

.back-link:hover svg {
    transform: translateX(-4px);
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.detail-tag-plain {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 6px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text-soft);
    font: 500 9.5px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.detail-title {
    margin-top: 24px;
    font-size: clamp(38px, 5.6vw, 72px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.detail-lede {
    margin-top: 24px;
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1.65;
}

.detail-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 36px;
    padding: 18px 0;
    border-block: 1px solid var(--line);
}

.detail-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Name, then date and read time on the same line. */
.detail-author-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
}

.detail-author-meta::before {
    content: "\00b7";
    margin-right: 10px;
    opacity: 0.6;
}

.detail-author-name {
    font-size: 14.5px;
    font-weight: 600;
}

.detail-author-meta {
    color: var(--muted);
    font-size: 12.5px;
}

.detail-meta-dot {
    margin: 0 8px;
    opacity: 0.6;
}

.detail-share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-share-label {
    margin-right: 4px;
    color: var(--dim);
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.detail-share-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--text-soft);
    font-size: 13px;
    cursor: pointer;
    transition:
        transform 0.6s var(--ease),
        background-color 0.3s,
        border-color 0.3s,
        color 0.3s;
}

.detail-share-btn:hover {
    border-color: transparent;
    background: var(--blue);
    color: #fff;
}

.detail-share-btn.copied {
    border-color: transparent;
    background: #18b26b;
    color: #fff;
}

.detail-section {
    padding: 28px 0 clamp(60px, 7vw, 100px);
}

.detail-media {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 56px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--surface);
}

.detail-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    will-change: transform;
}

.detail-media .thumbnail-placeholder {
    width: min(960px, 100vw - 48px);
    height: 410px;
}

/* Reading: one comfortable measure (about 70 characters a line) that starts
   on the hero's left edge, with the headings listed in a sticky side
   column on wide screens. */
.detail-reading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.detail-body {
    max-width: 710px;
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1.78;
    overflow-wrap: break-word;
    text-wrap: pretty;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
}

.detail-body > * {
    margin: 0;
}

.detail-body > * + * {
    margin-top: 1.3em;
}

/* The opening paragraph eases the reader in. */
.detail-body > p:first-child {
    color: var(--text);
    font-size: 1.14em;
    line-height: 1.68;
    letter-spacing: -0.008em;
}

.detail-body h1,
.detail-body h2,
.detail-body h3 {
    position: relative;
    color: var(--text);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.03em;
    text-wrap: balance;
    scroll-margin-top: 110px;
}

.detail-body > :is(h1, h2, h3) {
    margin-top: 2.2em;
}

.detail-body > :is(h1, h2, h3) + * {
    margin-top: 0.75em;
}

.detail-body h1 { font-size: clamp(27px, 2.6vw, 33px); }
.detail-body h2 { font-size: clamp(24px, 2.2vw, 29px); }
.detail-body h3 { font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.02em; }

/* A section link sits in the left margin while a heading is hovered. */
.heading-anchor {
    position: absolute;
    top: 50%;
    left: -36px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--muted);
    opacity: 0;
    translate: 4px -50%;
    transition: opacity 0.3s, translate 0.4s var(--ease), color 0.3s, background-color 0.3s;
}

.heading-anchor svg {
    width: 15px;
    height: 15px;
}

.detail-body :is(h1, h2, h3):hover .heading-anchor,
.heading-anchor:focus-visible {
    opacity: 1;
    translate: 0 -50%;
}

.heading-anchor:hover {
    background: rgba(var(--blue-rgb), 0.16);
    color: #fff;
}

.detail-body a:not(.heading-anchor) {
    color: #9cc4ff;
    text-decoration: underline;
    text-decoration-color: rgba(var(--blue-rgb), 0.55);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 0.3s, text-decoration-color 0.3s;
}

.detail-body a:not(.heading-anchor):hover {
    color: #fff;
    text-decoration-color: currentColor;
}

.detail-body strong,
.detail-body b {
    color: var(--text);
    font-weight: 600;
}

.detail-body ul,
.detail-body ol {
    padding-left: 1.35em;
}

.detail-body ul { list-style: disc; }
.detail-body ol { list-style: decimal; }

.detail-body li {
    padding-left: 0.35em;
}

.detail-body li + li {
    margin-top: 0.55em;
}

.detail-body li::marker {
    color: var(--blue-2);
    font-weight: 600;
}

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

/* Quotes read as a pull quote: larger, brighter, on a lit blue rule. */
.detail-body blockquote {
    position: relative;
    margin-block: 1.9em;
    padding: 4px 0 4px 28px;
    color: var(--text);
    font-size: 1.28em;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.018em;
}

.detail-body blockquote::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--blue));
    box-shadow: 0 0 18px rgba(var(--blue-rgb), 0.55);
}

.detail-body > blockquote + * {
    margin-top: 0;
}

.detail-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.detail-body p:has(> img:only-child),
.detail-body > img {
    margin-block: 2em;
}

html.js .detail-body img {
    cursor: zoom-in;
}

.detail-body .ql-align-left img { margin-inline: 0 auto; }
.detail-body .ql-align-right img { margin-inline: auto 0; }
.detail-body .ql-align-center { text-align: center; }
.detail-body .ql-align-right { text-align: right; }

.detail-body .ql-video {
    display: block;
    width: 100%;
    height: auto;
    margin-block: 2em;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 16px;
}

.detail-body pre {
    overflow-x: auto;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font: 14px/1.65 var(--font-mono);
}

.detail-body :not(pre) > code {
    padding: 0.14em 0.42em;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font: 0.86em var(--font-mono);
}

.detail-body hr {
    height: 1px;
    margin-block: 2.6em;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.detail-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    line-height: 1.55;
}

.detail-body :is(th, td) {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.detail-body th {
    color: var(--text);
    font-weight: 600;
}

.page-detail ::selection {
    background: rgba(var(--blue-rgb), 0.45);
    color: #fff;
}

/* Side contents: the section being read is lit, and a short blue marker
   glides along the rule to it. */
.detail-toc {
    position: sticky;
    top: 118px;
    display: none;
}

.detail-toc-label {
    margin-bottom: 14px;
    color: var(--dim);
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.detail-toc-nav {
    position: relative;
    border-left: 1px solid var(--line);
}

.detail-toc-nav ul {
    display: grid;
    gap: 2px;
}

.detail-toc-marker {
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: var(--toc-h, 0px);
    border-radius: 2px;
    background: linear-gradient(180deg, var(--cyan), var(--blue));
    box-shadow: 0 0 12px rgba(var(--blue-rgb), 0.7);
    opacity: 0;
    translate: 0 var(--toc-y, 0px);
    transition: translate 0.5s var(--ease), height 0.5s var(--ease), opacity 0.3s;
}

.detail-toc-nav.has-active .detail-toc-marker {
    opacity: 1;
}

.detail-toc-link {
    display: block;
    padding: 7px 0 7px 16px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
    text-wrap: pretty;
    transition: color 0.3s;
}

.detail-toc-link:hover {
    color: var(--text-soft);
}

.detail-toc-link.is-active {
    color: #fff;
}

@media (min-width: 1100px) {
    .detail-reading.has-toc {
        grid-template-columns: minmax(0, 710px) 200px;
        justify-content: space-between;
        column-gap: 48px;
    }

    .detail-reading.has-toc .detail-toc {
        display: block;
    }
}

/* Image zoom */
.lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: clamp(16px, 4vw, 48px);
    border: 0;
    background: transparent;
    cursor: zoom-out;
}

.lightbox[open] {
    display: grid;
    place-items: center;
}

.lightbox::backdrop {
    background: rgba(3, 6, 14, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: lightbox-fade 0.35s ease both;
}

.lightbox img {
    max-width: 100%;
    max-height: calc(100dvh - 2 * clamp(16px, 4vw, 48px));
    border-radius: 14px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    animation: lightbox-zoom 0.45s var(--ease) both;
}

.lightbox.is-closing::backdrop {
    animation: lightbox-fade 0.25s ease reverse both;
}

.lightbox.is-closing img {
    animation: lightbox-zoom 0.25s ease reverse both;
}

@keyframes lightbox-fade {
    from { opacity: 0; }
}

@keyframes lightbox-zoom {
    from { opacity: 0; scale: 0.94; }
}

/* End of an insight: its tags and a second chance to share. */
.detail-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.detail-end > .detail-share {
    margin-left: auto;
}

.related-section {
    padding: clamp(70px, 9vw, 120px) 0 clamp(90px, 10vw, 140px);
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
}

.related-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

.related-header .section-title {
    margin: 0;
    font-size: clamp(32px, 4vw, 56px);
}

.related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.related-grid .card-title {
    font-size: 18px;
}

/* More insights: four related cards a row, like the insights page (two
   rows of two below 1180px, one column from 860px as before). */
.related-grid.insight-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 1180px) {
    .related-grid.insight-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- reveal on scroll ---------- */
html.js [data-reveal]:not(.is-in) {
    opacity: 0;
}

html.js [data-reveal].is-in {
    animation: rv-up 1.15s var(--ease) both;
    animation-delay: calc(var(--rd, 0) * 90ms);
}

html.js [data-reveal="scale"].is-in {
    animation-name: rv-scale;
}

html.js [data-reveal="clip"].is-in {
    animation-name: rv-clip;
    animation-duration: 1.5s;
}

html.js [data-reveal="clip"].is-in img {
    animation: rv-zoom 1.8s var(--ease) both;
}

@keyframes rv-up {
    from {
        opacity: 0;
        translate: 0 50px;
    }
}

@keyframes rv-scale {
    from {
        opacity: 0;
        scale: 0.8;
    }
}

@keyframes rv-clip {
    from {
        opacity: 0;
        clip-path: inset(16% 10% 16% 10% round 26px);
    }
    20% {
        opacity: 1;
    }
    to {
        clip-path: inset(0 0 0 0 round 26px);
    }
}

@keyframes rv-zoom {
    from { scale: 1.25; }
}

/* Safety net from boot.js: if app.js never ran, show everything. */
html.reveal-all [data-reveal],
html.reveal-all .project-track .project-card {
    opacity: 1 !important;
    transform: none !important;
}

html.reveal-all .hero-line[data-chars],
html.reveal-all [data-split] .w-i {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .pillar-copy {
        padding-inline: 22px;
    }
}

@media (max-width: 960px) {
    .section-head {
        grid-template-columns: 1fr;
    }

    .section-head {
        gap: 22px;
    }

    .insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .insight-bento > *,
    .insight-bento > :first-child:nth-last-child(2) ~ * {
        grid-column: span 6;
        flex-direction: column;
    }

    .insight-bento > :first-child {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .insight-bento > :not(:first-child) .insight-thumb {
        flex: none;
        aspect-ratio: 16 / 10;
    }

    /* The feature goes full width on top; three side cards sit in one row
       under it. The bento keeps its 12 columns here (the plain insight
       grid drops to two). */
    .insight-bento {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .insight-bento > :first-child:nth-last-child(n + 4) {
        grid-row: auto;
    }

    .insight-bento > :first-child:nth-last-child(n + 4) ~ * {
        grid-column: span 4;
    }

    /* Services: the sticky stage gives way to an accordion. */
    .story {
        display: block;
    }

    .story-stage,
    .story-rail {
        display: none;
    }

    .story-list {
        display: grid;
        gap: 12px;
        padding-left: 0;
    }

    .story-step {
        min-height: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
        opacity: 1;
        filter: none;
        transition: border-color 0.4s, background-color 0.4s;
    }

    .story-step::before {
        display: none;
    }

    .story-step.is-open {
        border-color: rgba(var(--accent), 0.35);
        background:
            radial-gradient(90% 60% at 0% 0%, rgba(var(--accent), 0.12), transparent 60%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
    }

    .story-step .story-name,
    .story-step.is-active .story-name {
        background: none;
        color: var(--text);
    }

    .story-toggle {
        align-items: center;
        gap: 14px;
        padding: 20px;
    }

    .story-name {
        font-size: clamp(21px, 5.6vw, 30px);
    }

    .story-plus {
        position: relative;
        display: block;
        flex: none;
        width: 36px;
        height: 36px;
        margin-left: auto;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        transition: transform 0.5s var(--ease), background-color 0.3s, border-color 0.3s;
    }

    .story-plus::before,
    .story-plus::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 12px;
        height: 1.6px;
        margin: -0.8px 0 0 -6px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 0.5s var(--ease);
    }

    .story-plus::after {
        transform: rotate(90deg);
    }

    .story-step.is-open .story-plus {
        border-color: transparent;
        background: rgb(var(--accent));
        color: #0a0d16;
        transform: rotate(180deg);
    }

    .story-step.is-open .story-plus::after {
        transform: rotate(0deg);
    }

    .story-panel {
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.6s var(--ease);
    }

    .story-step.is-open .story-panel {
        grid-template-rows: 1fr;
    }

    .story-panel-inner {
        overflow: hidden;
        padding: 0 20px;
    }

    .story-panel-inner > :last-child {
        margin-bottom: 24px;
    }

    .story-visual-inline {
        position: relative;
        display: grid;
        place-items: center;
        aspect-ratio: 16 / 10;
        margin-bottom: 20px;
        background: radial-gradient(closest-side, rgba(var(--accent), 0.2), transparent);
    }

    .story-visual-inline .sv {
        width: auto;
        height: 92%;
    }

    .story-desc {
        margin-top: 0;
        font-size: 15px;
    }

    .story-step:not(.is-open) .story-panel-inner > * {
        opacity: 0;
        transform: translateY(10px);
    }

    .story-panel-inner > * {
        transition: opacity 0.5s, transform 0.6s var(--ease);
    }
}

@media (max-width: 860px) {
    .heading-anchor {
        display: none;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .nav-pill {
        display: none;
    }

    .menu-button {
        display: grid;
    }

    .palette-trigger {
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
    }

    .palette-trigger-label {
        display: none;
    }

    .palette-trigger-icon {
        width: 17px;
        height: 17px;
    }

    /* No inline links to make room for: the bar keeps its size when it
       turns to glass. */
    .header-inner,
    .site-header.is-scrolled .header-inner {
        height: 60px;
        padding-left: 18px;
    }

    .brand-logo {
        width: 100px;
    }

    /* About stacks: pillars become one column (no column parallax), the
       process sits under its copy. */
    .about-intro,
    .about-process {
        grid-template-columns: 1fr;
    }

    .about-statement {
        padding-top: 0;
    }

    .about-pillars {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-inline: auto;
    }

    .pillar-shell {
        transform: none !important;
    }

    .project-filters {
        flex-wrap: wrap;
    }

    .project-search,
    .project-category-filter {
        flex: 1 1 100%;
        min-width: 0;
    }

    .project-track {
        --track-gutter: 24px;
    }

    .palette {
        margin-top: 72px;
    }
}

@media (max-width: 720px) {
    .process-node {
        width: 64px;
        height: 64px;
    }

    .process-node svg {
        width: 22px;
        height: 22px;
    }

    .process-line {
        left: 32px;
        right: 32px;
        top: 31px;
    }

    /* The outer labels hug the edges so long names stay on screen. */
    .process-name {
        font-size: 10.5px;
        letter-spacing: 0.1em;
    }

    .process-step {
        width: auto;
        min-width: 64px;
    }

    .process-step:first-child {
        justify-items: start;
    }

    .process-step:last-child {
        justify-items: end;
    }
}

@media (max-width: 640px) {
    .container,
    .detail-article {
        width: calc(100% - 32px);
    }

    .site-header {
        padding: 10px 0;
    }

    .header-inner,
    .site-header.is-scrolled .header-inner {
        width: calc(100% - 20px);
        gap: 12px;
    }

    .mobile-menu {
        padding: 80px 10px 10px;
    }

    .nav-actions {
        gap: 8px;
    }

    .hero {
        padding: 130px 0 150px;
    }

    .hero-title {
        font-size: clamp(38px, 11.6vw, 64px);
    }

    .hero {
        --bleed: 24vh;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 300px;
        margin-inline: auto;
    }

    .section-title,
    .display-title {
        font-size: clamp(36px, 10.5vw, 48px);
    }

    .insight-grid,
    .related-grid,
    .related-grid.insight-grid--four,
    .insight-bento {
        grid-template-columns: 1fr;
    }

    .insight-bento > *,
    .insight-bento > :first-child,
    .insight-bento > :first-child:nth-last-child(2) ~ *,
    .insight-bento > :first-child:nth-last-child(n + 4) ~ * {
        grid-column: 1;
    }

    /* One column: the feature and the side cards become the same card as
       on the insights page (16:10 picture, same padding and title). The
       section prefix outranks the bento's desktop sizing rules. */
    .insights-section .insight-bento > [data-card="insight"]:nth-child(n) {
        flex-direction: column;
    }

    .insights-section .insight-bento > [data-card="insight"]:nth-child(n) .insight-thumb {
        flex: none;
        aspect-ratio: 16 / 10;
    }

    .insights-section .insight-bento > [data-card="insight"]:nth-child(n) .card-body {
        padding: 18px 14px 8px;
    }

    .insights-section .insight-bento > [data-card="insight"]:nth-child(n) .card-title {
        display: block;
        margin: 14px 0 10px;
        overflow: visible;
        font-size: 21px;
        line-height: 1.3;
        -webkit-line-clamp: unset;
    }

    .project-track {
        --track-gutter: 16px;
        gap: 14px;
    }

    .project-card {
        flex-basis: calc(100vw - 40px);
        aspect-ratio: 4 / 3.6;
        border-radius: 22px;
    }

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

    .project-content h3 {
        margin-top: 8px;
        font-size: 24px;
    }

    .track-footer {
        gap: 12px;
    }

    .track-btn {
        width: 42px;
        height: 42px;
    }

    .page-title {
        font-size: clamp(40px, 11vw, 56px);
    }

    .detail-byline {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-media .thumbnail-placeholder {
        height: 240px;
    }

    .detail-body {
        font-size: 17px;
        line-height: 1.74;
    }

    .detail-end {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-end > .detail-share {
        margin-left: 0;
    }

    .related-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .toast-region {
        bottom: 16px;
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .sv *,
    .grain,
    .aurora span,
    .pillar-visual * {
        animation: none !important;
    }

    .story-step {
        opacity: 1;
        filter: none;
    }

    ::view-transition-old(*),
    ::view-transition-new(*),
    ::view-transition-group(*) {
        animation: none !important;
    }
}

/* late additions: split-word wrapper and error toasts */
.hero-line .word {
    display: inline-block;
    white-space: nowrap;
}

.toast.is-error .toast-icon {
    background: #e5484d;
}


/* =========================================================================
   Contact CTA (an About-style card) and footer
   ========================================================================= */

.cta {
    position: relative;
    padding: clamp(80px, 9vw, 140px) 0 clamp(72px, 8vw, 120px);
}

/* A card with a soft pointer light (shared spotlight rules under "about")
   that presses under the cursor on hover. */
.cta-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(36px, 5.5vw, 76px);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(90% 120% at 0% 100%, rgba(29, 107, 255, 0.3), transparent 60%),
        radial-gradient(60% 90% at 100% 0%, rgba(111, 214, 255, 0.14), transparent 60%),
        linear-gradient(160deg, #0b1122, #060912 70%);
    transition: transform 0.7s var(--ease), box-shadow 0.5s;
}

.cta-card-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* A drifting line grid; around the pointer its lines light up. */
.cta-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 75% 85% at 72% 50%, #000 15%, transparent 75%);
    mask-image: radial-gradient(ellipse 75% 85% at 72% 50%, #000 15%, transparent 75%);
    animation: grid-drift 24s linear infinite;
}

.cta-grid--lit {
    background-image:
        linear-gradient(rgba(130, 200, 255, 0.55) 1px, transparent 1px),
        linear-gradient(90deg, rgba(130, 200, 255, 0.55) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(240px circle at var(--sx) var(--sy), #000, transparent 70%);
    mask-image: radial-gradient(240px circle at var(--sx) var(--sy), #000, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s;
}

@keyframes grid-drift {
    to { background-position: 64px 64px, 64px 64px; }
}

.cta-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(540px circle at var(--sx) var(--sy), rgba(29, 107, 255, 0.22), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s;
}

.cta-card:hover .cta-grid--lit,
.cta-card:hover .cta-glow {
    opacity: 1;
}

.cta-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    align-items: end;
    gap: clamp(32px, 5vw, 72px);
}

.cta .eyebrow {
    color: #a8caff;
}

.cta-title {
    margin-top: 20px;
    font-size: clamp(40px, 5.2vw, 76px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.cta-note {
    max-width: 420px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.cta-actions {
    display: grid;
    justify-items: start;
    gap: 28px;
}

/* ---------- footer ---------- */
/* Simple, as it was originally: logo, copyright and social icons, under
   a lit divider (a blue hairline brightest in the middle with a soft pool
   of light hanging below it). */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 34px 0;
    background: var(--bg);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91, 155, 255, 0.55) 50%, transparent);
}

.site-footer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -260px;
    z-index: -1;
    width: min(900px, 120%);
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(29, 107, 255, 0.18), transparent);
    translate: -50% 0;
    pointer-events: none;
}

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

.footer-logo {
    width: 110px;
    height: auto;
}

.footer-copyright {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* Small icon buttons. On hover a blue disc swells from the centre and the
   icon lifts. */
.footer-socials {
    display: flex;
    justify-self: end;
    gap: 10px;
}

.footer-social {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    color: var(--text-soft);
    transition:
        color 0.3s,
        border-color 0.3s,
        box-shadow 0.4s,
        translate 0.5s var(--ease-back);
}

.footer-social::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle, #4f9bff, #1d6bff 70%);
    opacity: 0;
    scale: 0.2;
    transition: opacity 0.3s, scale 0.5s var(--ease);
}

.footer-social i {
    font-size: 14px;
    line-height: 1;
    transition: scale 0.5s var(--ease-back);
}

.footer-social:hover,
.footer-social:focus-visible {
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 26px -12px rgba(var(--blue-rgb), 0.9);
    translate: 0 -3px;
}

.footer-social:hover::before,
.footer-social:focus-visible::before {
    opacity: 1;
    scale: 1;
}

.footer-social:hover i,
.footer-social:focus-visible i {
    scale: 1.12;
}

@media (max-width: 960px) {
    .cta-body {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

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

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