/* Header interactions must always sit above animated page layers. */
.site-header {
    z-index: 100;
    isolation: isolate;
    pointer-events: auto;
}

.header-cv {
    grid-auto-flow: column;
    width: auto;
    gap: 7px;
    padding: 0 11px;
    font: .62rem var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .header-cv {
        width: auto;
        gap: 4px;
        padding: 0 7px;
        font-size: .5rem;
        letter-spacing: .03em;
    }

    .header-actions {
        gap: 4px;
    }

    .theme-toggle,
    .menu-toggle {
        width: 34px;
    }
}

@media (max-width: 360px) {
    .brand--nickname {
        min-width: 104px;
    }

    .brand-nickname {
        font-size: .58rem;
    }
}

/* Additional low-cost ambient forms use only compositor transforms. */
.ambient-shape--cube {
    top: 67%;
    left: 17%;
    width: 84px;
    height: 84px;
    border: 1px solid var(--line-strong);
    transform: rotateX(61deg) rotateZ(24deg);
    animation: ambient-cube-wander 23s ease-in-out infinite alternate;
}

.ambient-shape--panel {
    top: 22%;
    right: 20%;
    width: 126px;
    height: 64px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, transparent, var(--accent-soft));
    animation: ambient-panel-wander 26s ease-in-out infinite alternate;
}

.ambient-shape--spark {
    bottom: 23%;
    left: 42%;
    width: 13px;
    height: 13px;
    border: 1px solid var(--accent);
    box-shadow: 0 0 20px var(--accent-soft);
    animation: ambient-spark-wander 13s ease-in-out infinite alternate;
}

.ambient-shape--cross {
    top: 54%;
    left: 6%;
    width: 72px;
    height: 72px;
    border: 1px solid var(--line);
    animation: ambient-cross-wander 22s ease-in-out infinite alternate;
}

.ambient-shape--cross::before,
.ambient-shape--cross::after {
    position: absolute;
    top: 50%;
    left: 9px;
    width: 52px;
    height: 1px;
    background: var(--accent);
    content: '';
}

.ambient-shape--cross::after {
    transform: rotate(90deg);
}

.ambient-shape--grid {
    right: 35%;
    bottom: 8%;
    width: 112px;
    height: 112px;
    border: 1px solid var(--line);
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 25% 25%;
    animation: ambient-grid-wander 29s ease-in-out infinite alternate;
}

@keyframes ambient-cube-wander {
    to { transform: translate3d(78px, -64px, 130px) rotateX(139deg) rotateY(128deg) rotateZ(44deg); }
}

@keyframes ambient-panel-wander {
    to { transform: translate3d(-84px, 88px, 110px) rotateX(18deg) rotateY(-39deg) rotateZ(-22deg); }
}

@keyframes ambient-spark-wander {
    to { transform: translate3d(57px, -96px, 150px) rotate(145deg) scale(1.8); }
}

@keyframes ambient-cross-wander {
    to { transform: translate3d(92px, 55px, 94px) rotateX(43deg) rotateY(65deg) rotateZ(128deg); }
}

@keyframes ambient-grid-wander {
    to { transform: translate3d(-66px, -104px, 105px) rotateX(52deg) rotateY(-24deg) rotateZ(31deg); }
}

@media (max-width: 760px) {
    .ambient-shape--cube,
    .ambient-shape--panel,
    .ambient-shape--cross,
    .ambient-shape--grid {
        display: none;
    }
}

/* Dense visual clusters: each parent moves as one compositor layer. */
.ambient-shape {
    opacity: .13;
    scale: .3;
}

.ambient-shape--orb { animation-duration: 4.2s; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
.ambient-shape--prism { animation-duration: 5.1s; animation-timing-function: cubic-bezier(.2, .9, .2, 1); }
.ambient-shape--ring { animation-duration: 6.4s; animation-timing-function: linear; }
.ambient-shape--cube { animation-duration: 4.7s; animation-timing-function: cubic-bezier(.8, 0, .2, 1); }
.ambient-shape--panel { animation-duration: 5.7s; animation-timing-function: cubic-bezier(.1, .8, .3, 1); }
.ambient-shape--spark { animation-duration: 2.1s; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
.ambient-shape--cross { animation-duration: 4.4s; animation-timing-function: cubic-bezier(.2, 1, .4, 1); }
.ambient-shape--grid { animation-duration: 6.1s; animation-timing-function: cubic-bezier(.8, .1, .1, .9); }

.ambient-cluster {
    position: absolute;
    display: block;
    opacity: .08;
    pointer-events: none;
    scale: .24;
    transform-style: preserve-3d;
    will-change: transform;
}

.ambient-cluster--wireframe { animation-duration: 6.8s; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
.ambient-cluster--scanner { animation-duration: 4.3s; animation-timing-function: cubic-bezier(.2, .9, .2, 1); }
.ambient-cluster--satellite { animation-duration: 7.1s; animation-timing-function: cubic-bezier(.8, 0, .2, 1); }
.ambient-cluster--circuit { animation-duration: 5.3s; animation-timing-function: cubic-bezier(.1, .8, .3, 1); }
.ambient-cluster--shards { animation-duration: 4.8s; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
.ambient-cluster--coordinates { animation-duration: 6.2s; animation-timing-function: cubic-bezier(.2, 1, .4, 1); }

.ambient-cluster::before,
.ambient-cluster::after {
    position: absolute;
    display: block;
    content: '';
}

.ambient-cluster--wireframe {
    top: 9%;
    right: 39%;
    width: 118px;
    height: 118px;
    border: 1px solid var(--line-strong);
    background-image: linear-gradient(30deg, transparent 48%, var(--accent) 49%, var(--accent) 50%, transparent 51%), linear-gradient(150deg, transparent 48%, var(--line-strong) 49%, var(--line-strong) 50%, transparent 51%);
    animation: ambient-wireframe-wander 31s ease-in-out infinite alternate;
}

.ambient-cluster--wireframe::before {
    inset: 19px;
    border: 1px solid var(--accent);
    transform: translateZ(27px) rotate(27deg);
}

.ambient-cluster--wireframe::after {
    top: 49%;
    left: -31px;
    width: 178px;
    border-top: 1px solid var(--line-strong);
    transform: rotate(-34deg);
}

.ambient-cluster--scanner {
    top: 34%;
    right: 14%;
    width: 92px;
    height: 92px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 11px, var(--line) 12px 13px);
    animation: ambient-scanner-wander 25s ease-in-out infinite alternate;
}

.ambient-cluster--scanner::before {
    top: 45px;
    left: 45px;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform-origin: left;
    animation: ambient-scanner-sweep 1.4s linear infinite;
}

.ambient-cluster--scanner::after {
    top: 40px;
    left: 40px;
    width: 10px;
    height: 10px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 18px var(--accent-soft);
}

.ambient-cluster--satellite {
    bottom: 30%;
    right: 4%;
    width: 132px;
    height: 54px;
    border: 1px solid var(--line-strong);
    background-image: linear-gradient(90deg, transparent 47%, var(--accent) 48% 52%, transparent 53%);
    animation: ambient-satellite-wander 33s ease-in-out infinite alternate;
}

.ambient-cluster--satellite::before {
    top: 15px;
    left: 51px;
    width: 30px;
    height: 22px;
    border: 1px solid var(--accent);
    transform: translateZ(24px) rotate(45deg);
}

.ambient-cluster--satellite::after {
    top: 26px;
    left: -28px;
    width: 188px;
    border-top: 1px dashed var(--line-strong);
}

.ambient-cluster--circuit {
    top: 63%;
    left: 29%;
    width: 142px;
    height: 96px;
    border: 1px solid var(--line);
    background-image: linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 36px, var(--line-strong) 36px 37px, transparent 37px), linear-gradient(var(--line-strong) 0 1px, transparent 1px 24px);
    background-size: 48px 100%, 100% 24px;
    animation: ambient-circuit-wander 35s ease-in-out infinite alternate;
}

.ambient-cluster--circuit::before {
    right: 18px;
    bottom: 17px;
    width: 11px;
    height: 11px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    box-shadow: -47px -24px 0 -1px var(--canvas), -47px -24px 0 0 var(--accent), -94px 0 0 -1px var(--canvas), -94px 0 0 0 var(--accent);
}

.ambient-cluster--circuit::after {
    top: -22px;
    right: 27px;
    width: 1px;
    height: 137px;
    background: var(--accent);
    opacity: .5;
}

.ambient-cluster--shards {
    bottom: 8%;
    left: 4%;
    width: 108px;
    height: 128px;
    border: 1px solid var(--line-strong);
    clip-path: polygon(50% 0, 100% 30%, 70% 100%, 12% 83%, 0 28%);
    background: linear-gradient(129deg, transparent 43%, var(--accent-soft) 44% 55%, transparent 56%);
    animation: ambient-shards-wander 28s ease-in-out infinite alternate;
}

.ambient-cluster--shards::before {
    inset: 20px;
    border: 1px solid var(--accent);
    clip-path: polygon(50% 0, 100% 42%, 66% 100%, 0 72%, 8% 22%);
    transform: translateZ(31px) rotate(21deg);
}

.ambient-cluster--shards::after {
    top: 42px;
    left: -31px;
    width: 171px;
    border-top: 1px solid var(--line);
    transform: rotate(63deg);
}

.ambient-cluster--coordinates {
    top: 78%;
    left: 54%;
    width: 76px;
    height: 76px;
    border: 1px solid var(--line-strong);
    background-image: radial-gradient(circle at 20% 20%, var(--accent) 0 2px, transparent 3px), radial-gradient(circle at 80% 25%, var(--accent) 0 2px, transparent 3px), radial-gradient(circle at 52% 76%, var(--accent) 0 2px, transparent 3px), linear-gradient(38deg, transparent 48%, var(--line-strong) 49% 50%, transparent 51%);
    animation: ambient-coordinates-wander 30s ease-in-out infinite alternate;
}

.ambient-cluster--coordinates::before {
    inset: 14px;
    border: 1px dashed var(--accent);
    transform: rotate(45deg) translateZ(17px);
}

.ambient-cluster--coordinates::after {
    top: 36px;
    left: -25px;
    width: 124px;
    border-top: 1px solid var(--line-strong);
}

@keyframes ambient-wireframe-wander {
    to { transform: translate3d(72px, 95px, 135px) rotateX(55deg) rotateY(77deg) rotateZ(41deg); }
}

@keyframes ambient-scanner-wander {
    to { transform: translate3d(-63px, 71px, 92px) rotateX(37deg) rotateY(-48deg); }
}

@keyframes ambient-scanner-sweep {
    to { transform: rotate(360deg); }
}

@keyframes ambient-satellite-wander {
    to { transform: translate3d(-103px, -82px, 125px) rotateX(62deg) rotateY(52deg) rotateZ(-29deg); }
}

@keyframes ambient-circuit-wander {
    to { transform: translate3d(103px, -68px, 115px) rotateX(48deg) rotateY(44deg) rotateZ(24deg); }
}

@keyframes ambient-shards-wander {
    to { transform: translate3d(96px, -91px, 142px) rotateX(72deg) rotateY(-38deg) rotateZ(58deg); }
}

@keyframes ambient-coordinates-wander {
    to { transform: translate3d(-70px, -103px, 105px) rotateX(61deg) rotateY(42deg) rotateZ(-73deg); }
}

@media (max-width: 760px) {
    .ambient-cluster {
        display: none;
    }

    .ambient-cluster--scanner {
        display: block;
        top: 49%;
        right: -26px;
        transform: scale(.66);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-cluster,
    .ambient-cluster--scanner::before {
        animation: none !important;
        will-change: auto;
    }
}

.work-ledger .section-heading > div {
    gap: 0;
}

.ledger-row--vault {
    grid-template-columns: minmax(0, 1fr) 35px;
}

@media (max-width: 760px) {
    .ledger-row--vault {
        grid-template-columns: minmax(0, 1fr) 25px;
    }
}

/* Blog conversion CTA */
.blog-whatsapp-cta {
    position: fixed;
    z-index: 90;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 56px;
    padding: 8px 16px 8px 8px;
    border: 1px solid rgba(95, 229, 143, .72);
    background: color-mix(in srgb, var(--surface-raised) 94%, #1fba5a);
    box-shadow: 0 16px 36px var(--shadow), 0 0 0 0 rgba(52, 211, 104, .34);
    color: var(--ink);
    transform: translateZ(0);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    animation: whatsapp-attention 3.8s ease-in-out 2s infinite;
}

.blog-whatsapp-cta:hover,
.blog-whatsapp-cta:focus-visible {
    border-color: #5fe58f;
    background: color-mix(in srgb, var(--surface-raised) 84%, #1fba5a);
    box-shadow: 0 18px 42px var(--shadow), 5px 5px 0 color-mix(in srgb, #5fe58f 38%, transparent);
    outline: 0;
    transform: translateY(-3px);
    animation-play-state: paused;
}

.blog-whatsapp-cta__icon {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #07130c;
    font-size: 1.35rem;
    box-shadow: 0 0 0 5px rgba(37, 211, 102, .12);
}

.blog-whatsapp-cta__copy {
    display: grid;
    gap: 2px;
    color: var(--muted-strong);
    font: .62rem/1.15 var(--mono);
    letter-spacing: .02em;
}

.blog-whatsapp-cta__copy strong {
    color: var(--ink);
    font: 700 .81rem var(--sans);
    letter-spacing: -.02em;
}

.blog-whatsapp-cta--rtl {
    right: auto;
    left: 24px;
    flex-direction: row-reverse;
    padding: 8px 8px 8px 16px;
    text-align: right;
}

@keyframes whatsapp-attention {
    0%, 82%, 100% { box-shadow: 0 16px 36px var(--shadow), 0 0 0 0 rgba(52, 211, 104, .3); }
    90% { box-shadow: 0 16px 36px var(--shadow), 0 0 0 10px rgba(52, 211, 104, 0); }
}

@media (max-width: 760px) {
    .blog-whatsapp-cta {
        right: 16px;
        bottom: 16px;
        min-height: 50px;
        padding-right: 13px;
    }

    .blog-whatsapp-cta--rtl {
        right: auto;
        left: 16px;
        padding: 8px 8px 8px 13px;
    }

    .blog-whatsapp-cta__icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        font-size: 1.18rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-whatsapp-cta {
        animation: none;
    }
}

/* Preserve the complete client image instead of cropping it to the card. */
.clients-carousel__face--front img {
    object-fit: contain;
    padding: 18px;
}

.clients-carousel__card:hover .clients-carousel__face--front img {
    transform: none;
}

/* Keep the ambient field as a faint, almost-hidden texture. */
.ambient-field {
    opacity: .72;
}

.ambient-shape--spark {
    opacity: .2;
    scale: .45;
}

.ambient-shape--prism,
.ambient-shape--cube,
.ambient-cluster--shards {
    rotate: 17deg;
}