:root {
    --bg: #0b1220;
    --ink: #0f172a;
    --muted: #5b6475;
    --accent: #2563eb;
    --accent2: #06b6d4;
    --line: #e5e7eb;
    --soft: #f5f7fb
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.6;
    background: #fff
}

a {
    color: var(--accent);
    text-decoration: none
}

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px
}

header.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(11, 18, 32, .92);
    backdrop-filter: blur(8px)
}

header.nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px
}

.logo {
    color: #fff;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: .5px
}

.logo span {
    color: var(--accent2)
}

nav a {
    color: #cbd5e1;
    margin-left: 24px;
    font-size: .95rem
}

nav a:hover {
    color: #fff
}

.hero {
    background: radial-gradient(1200px 500px at 80% -10%, rgba(6, 182, 212, .35), transparent), linear-gradient(160deg, #0b1220 0%, #14223f 100%);
    color: #fff;
    padding: 110px 0 120px
}

.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.1;
    max-width: 780px;
    font-weight: 800
}

.hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero p {
    margin-top: 22px;
    max-width: 620px;
    color: #cbd5e1;
    font-size: 1.15rem
}

.btns {
    margin-top: 36px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: 10px;
    font-weight: 600
}

.btn.primary {
    background: var(--accent);
    color: #fff
}

.btn.ghost {
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff
}

section {
    padding: 90px 0
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .78rem;
    color: var(--accent);
    font-weight: 700
}

h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    margin: 8px 0 18px;
    line-height: 1.2
}

.lead {
    color: var(--muted);
    max-width: 720px;
    font-size: 1.08rem
}

.about-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: start
}

.facts {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px
}

.facts dt {
    font-size: .8rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 14px
}

.facts dt:first-child {
    margin-top: 0
}

.facts dd {
    font-weight: 600
}

.bg-soft {
    background: var(--soft)
}

.cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 40px
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    display: flex;
    flex-direction: column
}

.card .tag {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--accent);
    background: #eff6ff;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
    align-self: flex-start
}

.card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px
}

.card p {
    color: var(--muted);
    margin-bottom: 12px
}

.card a.more {
    margin-top: auto;
    font-weight: 600
}

.svc {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px
}

.svc div {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px
}

.svc .ic {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin-bottom: 14px
}

.svc h4 {
    font-size: 1.08rem;
    margin-bottom: 6px
}

.svc p {
    color: var(--muted);
    font-size: .96rem
}

.ph {
    background: #fef3c7;
    color: #92400e;
    padding: 0 4px;
    border-radius: 4px;
    font-weight: 600
}

.contact {
    background: var(--bg);
    color: #e2e8f0
}

.contact h2 {
    color: #fff
}

.contact .lead {
    color: #94a3b8
}

.cgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px
}

.cgrid h4 {
    color: #fff;
    margin-bottom: 8px;
    font-size: 1rem
}

.cgrid p {
    color: #cbd5e1;
    font-size: .96rem
}

footer {
    background: #070c16;
    color: #64748b;
    font-size: .85rem;
    padding: 24px 0
}

footer .wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px
}

.hero {
    position: relative;
    overflow: hidden
}

.hero .wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center
}

.hero-art svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible
}

.float {
    animation: float 6s ease-in-out infinite
}

.float.b {
    animation-duration: 8s;
    animation-delay: -2s
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

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

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

@keyframes pulse {

    0%,
    100% {
        opacity: .55;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.35)
    }
}

.dash {
    stroke-dasharray: 4 6;
    animation: dash 14s linear infinite
}

@keyframes dash {
    to {
        stroke-dashoffset: -200
    }
}

.stats {
    display: flex;
    gap: 36px;
    margin-top: 44px;
    flex-wrap: wrap
}

.stats b {
    display: block;
    font-size: 1.7rem;
    line-height: 1.1;
    background: linear-gradient(90deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.stats span {
    font-size: .78rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px
}

.card,
.svc div {
    transition: transform .25s, box-shadow .25s, border-color .25s
}

.card:hover,
.svc div:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(37, 99, 235, .35);
    border-color: #bfdbfe
}

.card {
    border-top: 3px solid var(--accent)
}

.card:nth-child(2) {
    border-top-color: var(--accent2)
}

.contact {
    background: radial-gradient(700px 320px at 90% 0, rgba(6, 182, 212, .22), transparent), var(--bg)
}

.cgrid {
    grid-template-columns: repeat(2, 1fr)
}

.cgrid>div {
    display: flex;
    gap: 16px;
    align-items: center;
    background: none;
    border: 0;
    padding: 0
}

.cgrid p {
    font-size: 1.05rem
}

.cgrid .ci {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0
}

.cgrid .ci svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media(max-width:860px) {

    .about-grid,
    .cards,
    .cgrid {
        grid-template-columns: 1fr
    }

    nav a {
        display: none
    }

    section {
        padding: 64px 0
    }

    .hero {
        padding: 80px 0 90px
    }

    .hero-art {
        max-width: 420px
    }
}

/* dark theme */
:root {
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --line: rgba(148, 163, 184, .16);
    --soft: #0e1830;
    --card: #111c35
}

body {
    background: #0b1220;
    color: var(--ink);
    overflow-x: hidden
}

section {
    position: relative
}

section+section::before,
footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .55) 30%, rgba(34, 211, 238, .55) 70%, transparent)
}

footer {
    position: relative
}

h2 {
    color: #fff;
    margin: 0;
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.1;
    font-weight: 800
}

.eyebrow {
    color: #22d3ee;
    font-size: 1.05rem;
    letter-spacing: 3px
}

.title {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 10px calc((100% - 100vw)/2) 18px 0
}

.title .rule {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: linear-gradient(90deg, #60a5fa, #22d3ee);
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform
}

.lead {
    color: var(--muted)
}

.facts,
.card,
.svc div {
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: none
}

.facts dt {
    color: var(--muted)
}

.facts dd {
    color: #fff
}

.bg-soft {
    background: var(--soft)
}

.card .tag {
    background: rgba(96, 165, 250, .14);
    color: #7dd3fc
}

.card h3,
.svc h4 {
    color: #fff
}

.card p,
.svc p {
    color: var(--muted)
}

.card a.more {
    color: #60a5fa
}

.card:hover,
.svc div:hover {
    border-color: rgba(96, 165, 250, .45);
    box-shadow: 0 18px 40px -18px rgba(34, 211, 238, .35)
}

.contact {
    background: radial-gradient(700px 320px at 90% 0, rgba(6, 182, 212, .18), transparent), #0b1220
}

@media(max-width:860px) {
    .title {
        gap: 14px
    }
}

.hero h1 {
    position: relative
}

.hero h1 em {
    transition: opacity 1s ease
}

.dots:not(.dots-done) .hero h1 em {
    opacity: 0
}

.dots-canvas {
    position: absolute;
    left: -24px;
    top: -24px;
    pointer-events: none;
    transition: opacity .9s ease
}

.dots-canvas.out {
    opacity: 0
}

/* hero: computer as background */
.hero .wrap {
    display: block
}

.hero .wrap>div:first-child {
    position: relative;
    z-index: 1;
    max-width: 640px
}

.hero-art {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: min(720px, 60vw);
    opacity: .22;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28%)
}

.ty {
    transform-box: fill-box;
    transform-origin: left center;
    animation: ty 7s ease-in-out infinite
}

@keyframes ty {
    0% {
        transform: scaleX(0);
        opacity: 0
    }

    12% {
        opacity: 1
    }

    35%,
    85% {
        transform: scaleX(1);
        opacity: 1
    }

    100% {
        transform: scaleX(1);
        opacity: 0
    }
}

.blink {
    animation: blink 1s steps(2) infinite
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

@media(max-width:860px) {
    .hero-art {
        position: relative;
        max-width: 520px;
        width: 100%;
        right: auto;
        top: auto;
        transform: none;
        margin: 36px auto 0;
        opacity: .4;
        -webkit-mask-image: none;
        mask-image: none
    }
}

.hero-art {
    perspective: 1400px
}

.hero-art svg {
    transform: rotateY(-30deg) rotateX(5deg) rotateZ(1deg);
    transform-origin: 60% 50%
}

.title {
    margin-right: 0;
    font-size: clamp(2.3rem, 5vw, 3.6rem)
}

.title h2 {
    font-size: 1em
}

.title .rule {
    height: .72em;
    border-radius: .1em
}

.eyebrow {
    font-size: .85rem;
    letter-spacing: 2.5px
}

.title .rule {
    transition: transform 1.1s cubic-bezier(.22, .8, .25, 1)
}

.title .rule.in {
    transform: scaleX(1)
}

.eyebrow {
    font-size: .72rem;
    letter-spacing: 2.5px
}

.lead {
    max-width: none
}

.svc {
    grid-template-columns: 1fr;
    gap: 18px
}

.svc>div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    row-gap: 4px;
    align-items: center;
    padding: 24px 28px
}

.svc .ic {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    border: 0;
    padding: 0;
    width: 48px;
    height: 48px
}

.svc h4 {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    font-size: 1.25rem
}

.svc p {
    grid-row: 2;
    grid-column: 2
}

.eyebrow {
    font-size: .6rem;
    letter-spacing: 2px
}

.eyebrow {
    font-size: .72rem;
    letter-spacing: 2.5px
}

.title {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem)
}

#services .wrap {
    position: relative
}

.svc {
    max-width: 50%;
    gap: 14px;
    position: relative;
    z-index: 1
}

.svc>div {
    padding: 14px 18px;
    column-gap: 14px
}

.svc .ic {
    width: 38px;
    height: 38px;
    font-size: .9rem;
    border-radius: 9px
}

.svc h4 {
    font-size: 1.02rem
}

.svc p {
    font-size: .88rem
}

.svc-art {
    position: absolute;
    right: 0;
    top: 50%;
    width: 46%;
    transform: translateY(-35%);
    opacity: .2;
    pointer-events: none;
    z-index: 0
}

.svc-art svg {
    width: 100%;
    height: auto;
    display: block
}

@media(max-width:860px) {
    .svc {
        max-width: none
    }

    .svc-art {
        width: 90%;
        right: -20%;
        opacity: .1
    }
}

section,
footer {
    z-index: 1
}

.bg-soft {
    background: rgba(14, 24, 48, .55)
}

.contact {
    background: radial-gradient(700px 320px at 90% 0, rgba(6, 182, 212, .18), transparent)
}

/* light middle sections */
#about {
    background: #f1f5f9
}

#services {
    background: #fff
}

#projects {
    background: linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)), url(data:image/avif;base64,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) 60% center/cover no-repeat, #fbfcff
}

#about h2,
#projects h2,
#services h2 {
    color: #0f172a
}

#about .eyebrow,
#projects .eyebrow,
#services .eyebrow {
    color: #2563eb
}

#about .lead,
#projects .lead,
#services .lead {
    color: #5b6475
}

#about .facts {
    background: #f5f7fb;
    border: 1px solid #e2e8f0
}

#about .facts dt {
    color: #64748b
}

#about .facts dd {
    color: #0f172a
}

#projects .card,
#services .svc>div {
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04)
}

#projects .card {
    border-top: 3px solid var(--accent)
}

#projects .card:nth-child(2) {
    border-top-color: var(--accent2)
}

#projects .card h3,
#services .svc h4 {
    color: #0f172a
}

#projects .card p,
#services .svc p {
    color: #5b6475
}

#projects .card .tag {
    background: #eff6ff;
    color: #2563eb
}

#projects .card a.more {
    color: #2563eb
}

#projects .card:hover,
#services .svc>div:hover {
    border-color: #bfdbfe;
    box-shadow: 0 18px 40px -18px rgba(37, 99, 235, .35)
}

#projects .card:nth-child(2):hover {
    border-top-color: var(--accent2)
}

section+section::before {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .35) 30%, rgba(6, 182, 212, .35) 70%, transparent)
}

.contact {
    background: radial-gradient(700px 320px at 90% 0, rgba(6, 182, 212, .18), transparent), #0b1220
}

/* hover: orange -> blue */
nav a {
    background-image: linear-gradient(90deg, #cbd5e1 0, #cbd5e1 50%, #a78bfa 50%, #2563eb 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: background-position .45s ease
}

nav a:hover {
    background-position: 100% 0
}

.btn {
    border: 1px solid transparent;
    transition: background-color .3s, border-color .3s
}

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

.btn span {
    background-image: linear-gradient(90deg, #fff 0, #fff 50%, #a78bfa 50%, #2563eb 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: background-position .45s ease
}

.btn:hover {
    border-color: #fff
}

.btn.primary:hover {
    background: transparent
}

.btn:hover span {
    background-position: 100% 0
}

nav a {
    background-image: linear-gradient(90deg, #a78bfa 0, #2563eb 50%, #fff 50%, #fff 100%);
    background-size: 200% 100%;
    background-position: 100% 0
}

nav a:hover {
    background-position: 0 0
}

.btn span,
.btn.primary span,
.btn.ghost span {
    background-image: linear-gradient(90deg, #a78bfa 0, #2563eb 50%, #fff 50%, #fff 100%);
    background-size: 200% 100%;
    background-position: 100% 0
}

.btn:hover span {
    background-position: 0 0
}

/* fixed page background image */
#services {
    background: #fff
}

#about {
    background: #f1f5f9
}

#projects {
    background: linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)), url(data:image/avif;base64,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) 60% center/cover no-repeat, #fbfcff
}

/* services wheel */
.wheel-wrap {
    display: grid;
    grid-template-columns: minmax(280px, 460px) 1fr;
    gap: 56px;
    align-items: center;
    margin-top: 48px
}

.wheel {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
    margin: 0 auto;
    transition: transform .9s cubic-bezier(.65, 0, .25, 1)
}

.wheel::before,
.wheel::after {
    content: "";
    position: absolute;
    border-radius: 50%
}

.wheel::before {
    inset: 12%;
    border: 2px dashed rgba(37, 99, 235, .35)
}

.wheel::after {
    inset: 30%;
    border: 1px solid rgba(37, 99, 235, .18);
    background: radial-gradient(circle, rgba(96, 165, 250, .28), rgba(96, 165, 250, 0) 70%)
}

.wnode {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    transition: transform .9s cubic-bezier(.65, 0, .25, 1)
}

.wnode span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.35rem;
    color: #6b7fb8;
    background: #e3e9fb;
    box-shadow: 0 0 0 10px rgba(227, 233, 251, .55);
    opacity: .8;
    transform: scale(.78);
    transition: transform .6s, background .6s, color .6s, box-shadow .6s, opacity .6s
}

.wnode[aria-selected=true] span {
    color: #fff;
    background: linear-gradient(135deg, #1e3a8a, #2563eb 60%, #06b6d4);
    box-shadow: 0 0 0 14px rgba(37, 99, 235, .14), 0 18px 36px -10px rgba(37, 99, 235, .55);
    opacity: 1;
    transform: scale(1.18)
}

.wnode:focus-visible span {
    outline: 2px solid #2563eb;
    outline-offset: 6px
}

.wpanel {
    display: grid;
    position: relative
}

.wcard {
    grid-area: 1/1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity .6s, transform .6s, visibility 0s .6s
}

.wcard.on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .7s .25s, transform .7s .25s, visibility 0s
}

.wnum {
    font-size: clamp(4.5rem, 9vw, 7rem);
    font-weight: 800;
    line-height: .9;
    color: transparent;
    -webkit-text-stroke: 2px #bfd0f5;
    letter-spacing: -2px
}

.wcard h3 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.15;
    color: #0f172a;
    margin: 6px 0 14px;
    font-weight: 800
}

.wcard h3 em {
    font-style: normal;
    background: linear-gradient(90deg, #8b5cf6, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.wcard p {
    color: #5b6475;
    font-size: 1.08rem;
    max-width: 560px
}

.pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px
}

.pills li {
    padding: 9px 18px;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    background: linear-gradient(90deg, #1e3a8a, #3b6fe0)
}

.wdots {
    display: flex;
    gap: 8px;
    margin-top: 30px;
    grid-area: 2/1
}

.wdots i {
    width: 28px;
    height: 5px;
    border-radius: 3px;
    background: #d3dcf3;
    transition: width .4s, background .4s
}

.wdots i.on {
    width: 56px;
    background: linear-gradient(90deg, #8b5cf6, #2563eb)
}

@media(max-width:860px) {
    .wheel-wrap {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .wheel {
        max-width: 330px
    }

    .wnode {
        width: 68px;
        height: 68px;
        margin: -34px 0 0 -34px
    }

    .wnode span {
        font-size: 1.1rem
    }
}

.pills li {
    background: linear-gradient(90deg, #60a5fa, #22d3ee);
    color: #0b1220
}

.wnode[aria-selected=true] span {
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
    color: #0b1220;
    box-shadow: 0 0 0 14px rgba(96, 165, 250, .2), 0 18px 36px -10px rgba(34, 211, 238, .55)
}

.wdots i.on {
    background: linear-gradient(90deg, #60a5fa, #22d3ee)
}

.title .rule {
    background: linear-gradient(90deg, #a78bfa, #2563eb)
}

#services {
    background: radial-gradient(900px 600px at 95% 0, rgba(167, 139, 250, .16), transparent 70%), radial-gradient(800px 600px at 0 100%, rgba(96, 165, 250, .16), transparent 70%), #fff
}

#projects .card a.more {
    display: inline-flex;
    align-self: flex-start;
    padding: 9px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #22d3ee);
    color: #0b1220;
    font-weight: 600;
    font-size: .92rem;
    transition: transform .3s, box-shadow .3s
}

#projects .card a.more:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 22px -10px rgba(34, 211, 238, .7)
}

.cgrid a {
    color: #e2e8f0;
    transition: color .3s
}

.cgrid a:hover {
    color: #22d3ee
}

.mapcard {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    min-height: 340px;
    background: #e9eefb
}

.mapcard iframe {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: 0;
    filter: grayscale(1) brightness(1.1);
    opacity: .32;
    pointer-events: none
}

.mapcard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(241, 245, 249, .55), rgba(241, 245, 249, 0) 38%, rgba(241, 245, 249, .75));
    pointer-events: none
}

.pin {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 46px;
    height: 46px;
    margin: -46px 0 0 -23px;
    z-index: 2
}

.pin svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 10px rgba(124, 92, 255, .35))
}

.pin i {
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: rgba(124, 92, 255, .5);
    animation: pinpulse 2.4s ease-out infinite
}

@keyframes pinpulse {
    0% {
        transform: scale(.6);
        opacity: .9
    }

    100% {
        transform: scale(4.5);
        opacity: 0
    }
}

.mapinfo {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, .25);
    display: flex;
    flex-direction: column;
    gap: 2px
}

.mapinfo strong {
    font-size: 1.15rem;
    color: #0f172a;
    letter-spacing: .3px
}

.mapinfo span {
    color: #334155;
    font-weight: 600
}

.mapinfo small {
    color: #64748b
}

/* map blended into background */
.mapcard {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
    min-height: 400px
}

.mapcard::after {
    display: none
}

.mapbg {
    position: absolute;
    inset: -40px;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 25%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 25%, transparent 100%)
}

.mapcard iframe {
    inset: auto;
    left: -80px;
    top: -80px;
    width: calc(100% + 160px);
    height: calc(100% + 160px);
    opacity: .38
}

.mapinfo {
    left: 0;
    right: 0;
    bottom: 6px;
    padding: 0;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    align-items: center;
    text-align: center;
    text-shadow: 0 0 12px #f1f5f9, 0 0 4px #f1f5f9
}

.osm {
    position: absolute;
    right: 4px;
    bottom: -26px;
    font-size: .62rem;
    color: #94a3b8;
    z-index: 2
}

.osm:hover {
    color: #475569
}

#projects .card a.more,
#projects .card a.more:hover {
    color: #fff
}

.pills li {
    background: #2563eb;
    color: #fff
}

.wnode[aria-selected=true] span {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 0 0 14px rgba(37, 99, 235, .16), 0 18px 36px -10px rgba(37, 99, 235, .55)
}

.wdots i.on {
    background: #2563eb
}

#projects .card a.more {
    background: #2563eb;
    color: #fff
}

/* projects: wide rows with monogram */
.cards {
    grid-template-columns: 1fr;
    gap: 24px
}

#projects .card,
#projects .card:nth-child(2) {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 36px;
    align-items: start;
    padding: 36px 40px;
    border: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    border-radius: 22px
}

#projects .card:hover,
#projects .card:nth-child(2):hover {
    transform: translateY(-4px);
    border-color: #2563eb;
    box-shadow: 0 22px 44px -22px rgba(37, 99, 235, .4)
}

.pside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center
}

.mono {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 0 0 10px rgba(37, 99, 235, .12), 0 0 0 22px rgba(37, 99, 235, .06), 0 18px 34px -12px rgba(37, 99, 235, .55)
}

#projects .card:nth-child(2) .mono {
    background: linear-gradient(135deg, #a78bfa, #2563eb)
}

.pbody {
    display: flex;
    flex-direction: column
}

#projects .card h3 {
    font-size: 1.9rem;
    letter-spacing: -.3px;
    margin-bottom: 12px
}

#projects .card .pills {
    margin: 6px 0 24px
}

#projects .card .pills li {
    font-size: .85rem;
    padding: 7px 15px
}

@media(max-width:860px) {

    #projects .card,
    #projects .card:nth-child(2) {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 24px
    }

    .pside {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left
    }

    .mono {
        width: 76px;
        height: 76px;
        font-size: 1.4rem
    }
}

#projects .card a.more {
    margin-top: 14px
}

/* projects: no monogram, category as subtitle */
#projects .card,
#projects .card:nth-child(2) {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 36px 40px
}

#projects .card h3 {
    margin-bottom: 6px
}

#projects .card .tag {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    background: none;
    padding: 0;
    margin: 0 0 16px;
    border-radius: 0;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: #64748b
}

#projects .card .tag::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: #2563eb
}

#projects .card:nth-child(2) .tag::before {
    background: linear-gradient(90deg, #a78bfa, #2563eb)
}

@media(max-width:860px) {

    #projects .card,
    #projects .card:nth-child(2) {
        padding: 28px 24px
    }
}

/* mobile nav */
.burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative
}

.burger i,
.burger i::before,
.burger i::after {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .3s, opacity .3s, top .3s
}

.burger i {
    top: 21px
}

.burger i::before,
.burger i::after {
    content: "";
    left: 0
}

.burger i::before {
    top: -7px
}

.burger i::after {
    top: 7px
}

header.nav.open .burger i {
    background: transparent
}

header.nav.open .burger i::before {
    top: 0;
    transform: rotate(45deg)
}

header.nav.open .burger i::after {
    top: 0;
    transform: rotate(-45deg)
}

@media(max-width:860px) {
    .burger {
        display: block;
        margin-right: -10px
    }

    header.nav nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 64px;
        flex-direction: column;
        background: #0b1220;
        padding: 6px 24px 16px;
        border-top: 1px solid rgba(255, 255, 255, .08)
    }

    header.nav.open nav {
        display: flex
    }

    nav a {
        display: block;
        margin: 0;
        padding: 14px 0;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    nav a:last-child {
        border-bottom: 0
    }
}

@media(max-width:860px) {
    html {
        scrollbar-width: none;
        overflow-x: hidden
    }

    html::-webkit-scrollbar {
        display: none
    }

    section {
        overflow-x: clip
    }

    .mapbg {
        inset: 0
    }

    .title {
        flex-direction: column;
        align-items: stretch;
        gap: 14px
    }

    .title .rule {
        flex: none;
        width: 100%;
        height: 8px;
        border-radius: 4px
    }

    .wheel {
        margin-bottom: 18px
    }
}

@media(max-width:860px) {
    .wheel {
        max-width: 250px
    }

    .wnode {
        width: 58px;
        height: 58px;
        margin: -29px 0 0 -29px
    }

    .wnode span {
        font-size: .95rem;
        box-shadow: 0 0 0 7px rgba(227, 233, 251, .55)
    }

    .wnode[aria-selected=true] span {
        box-shadow: 0 0 0 10px rgba(37, 99, 235, .16), 0 14px 28px -10px rgba(37, 99, 235, .55)
    }
}

.wdots {
    display: none
}

.about-grid {
    align-items: stretch
}

.mapcard {
    min-height: 240px
}

@media(max-width:860px) {
    .mapcard {
        min-height: 230px
    }
}
/* footer: three items, tax number highlighted subtly */
footer .wrap {
    justify-content: space-between;
    align-items: center;
    gap: 6px 24px
}

footer .wrap span:last-child {
    color: #94a3b8;
    letter-spacing: .3px
}

@media(max-width:860px) {
    footer .wrap {
        flex-direction: column;
        align-items: flex-start
    }
}

/* footer meta: tax number with the location below it */
footer .fmeta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px
}

footer .fmeta span {
    color: #64748b
}

footer .fmeta span:first-child {
    color: #94a3b8;
    letter-spacing: .3px
}

footer .wrap span:last-child {
    color: inherit;
    letter-spacing: normal
}

@media(max-width:860px) {
    footer .fmeta {
        align-items: flex-start
    }
}