.brand-preloader {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
    pointer-events: none;
}
.intro-pending .brand-preloader {
    display: flex;
    animation: preloader-exit .18s ease .65s forwards;
}
.preloader-brand {
    display: grid;
    justify-items: center;
    gap: .65rem;
    color: var(--ink);
}
.preloader-brand .logo-mark {
    width: 66px;
    font-size: 1.65rem;
    animation: brand-arrive .45s cubic-bezier(.2,.7,.2,1) both;
}
.preloader-brand strong {
    font-size: 1.25rem;
}
.preloader-brand small {
    color: var(--body);
    font-size: .65rem;
    letter-spacing: .16em;
}
.preloader-line {
    width: 150px;
    height: 2px;
    overflow: hidden;
    background: #e5edf4;
}
.preloader-line::after {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--blue);
    transform-origin: left;
    animation: brand-progress .55s ease both;
    content: "";
}
.swarm-layer {
    position: fixed;
    inset: 0;
    z-index: 12;
    overflow: hidden;
    pointer-events: none;
}
.swarm-cursor {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: start;
    gap: 3px;
    color: var(--cursor-color);
    opacity: 0;
    will-change: transform;
}
.swarm-cursor svg {
    width: 19px;
    height: 23px;
    fill: currentColor;
    stroke: white;
    stroke-width: 1.3;
}
.swarm-cursor span {
    margin-top: 18px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--cursor-color);
    color: white;
    font: 600 10px/1.5 "Segoe UI", sans-serif;
    white-space: nowrap;
}
.swarm-building {
    animation: swarm-reveal .42s cubic-bezier(.15,.75,.3,1) both;
}
.swarm-skip {
    position: fixed;
    right: 15px;
    bottom: 18px;
    z-index: 13;
    padding: .35rem .65rem;
    border: 1px solid #bccddc;
    border-radius: 20px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 3px 12px #10294715;
    font: 600 .75rem/1.6 "Segoe UI", sans-serif;
    cursor: pointer;
}
@keyframes swarm-reveal {
    from { clip-path: inset(0 100% 0 0); opacity: .1; }
    to { clip-path: inset(0); opacity: 1; }
}
@keyframes brand-arrive {
    from { opacity: 0; transform: translateY(7px) scale(.93); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes brand-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes preloader-exit {
    to { opacity: 0; visibility: hidden; }
}
@media (max-width: 940px) {
    .swarm-skip { bottom: calc(75px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .intro-pending .brand-preloader { display: none; }
    .swarm-building { animation: none; }
}



.swarm-outline {
    position: absolute;
    display: none;
    border: 1px solid var(--cursor-color);
    color: var(--cursor-color);
    text-align: right;
    padding: 2px;
    font: 650 9px/1.3 "Segoe UI", sans-serif;
}
.swarm-outline.is-drawing {
    display: block;
    animation: swarm-outline-draw .46s ease-out both;
}
.swarm-wipe .swarm-layer::before {
    position: absolute;
    inset: 0;
    background: white;
    animation: swarm-canvas-wipe .32s ease-out forwards;
    content: "";
}
@keyframes swarm-outline-draw {
    0% { clip-path: inset(0 100% 100% 0); opacity: .75; }
    75% { clip-path: inset(0); opacity: .6; }
    100% { clip-path: inset(0); opacity: 0; }
}
@keyframes swarm-canvas-wipe {
    from { opacity: 1; }
    to { opacity: 0; }
}