.svg-welcome-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease-in-out;
}

.svg-welcome-wrapper.hidden {
    opacity: 0;
    pointer-events: none;
}

.welcome-svg {
    width: 80%;
    height: auto;
}

/* Optional: prevent scroll while welcome screen is showing */
body.loading {
    overflow: hidden;
}

.svg-wrapper svg {
    width: 90%;
    height: auto;
}

svg .svg-elem-1 {
    stroke-dashoffset: 97.74028015136719px;
    stroke-dasharray: 97.74028015136719px;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 0s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 0.5s ease-out 0s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
}

svg .svg-elem-2 {
    stroke-dashoffset: 38.66134262084961px;
    stroke-dasharray: 38.66134262084961px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 0.12s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 0.5s ease-out 0.12s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-3 {
    stroke-dashoffset: 32px;
    stroke-dasharray: 32px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 0.24s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
    transition: stroke-dashoffset 0.5s ease-out 0.24s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-4 {
    stroke-dashoffset: 44.25212860107422px;
    stroke-dasharray: 44.25212860107422px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 0.36s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
    transition: stroke-dashoffset 0.5s ease-out 0.36s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-5 {
    stroke-dashoffset: 38.696739196777344px;
    stroke-dasharray: 38.696739196777344px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 0.48s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
    transition: stroke-dashoffset 0.5s ease-out 0.48s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-6 {
    stroke-dashoffset: 43.7657585144043px;
    stroke-dasharray: 43.7657585144043px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 0.6s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
    transition: stroke-dashoffset 0.5s ease-out 0.6s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-7 {
    stroke-dashoffset: 28.34375px;
    stroke-dasharray: 28.34375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 0.72s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
    transition: stroke-dashoffset 0.5s ease-out 0.72s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-8 {
    stroke-dashoffset: 21.09375px;
    stroke-dasharray: 21.09375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 0.84s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    transition: stroke-dashoffset 0.5s ease-out 0.84s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-8 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-9 {
    stroke-dashoffset: 33.90347671508789px;
    stroke-dasharray: 33.90347671508789px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 0.96s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
    transition: stroke-dashoffset 0.5s ease-out 0.96s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-9 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-10 {
    stroke-dashoffset: 44.25212860107422px;
    stroke-dasharray: 44.25212860107422px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 1.08s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
    transition: stroke-dashoffset 0.5s ease-out 1.08s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-11 {
    stroke-dashoffset: 47.59375px;
    stroke-dasharray: 47.59375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 1.2s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
    transition: stroke-dashoffset 0.5s ease-out 1.2s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-11 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-12 {
    stroke-dashoffset: 42.76410675048828px;
    stroke-dasharray: 42.76410675048828px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 1.3199999999999998s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
    transition: stroke-dashoffset 0.5s ease-out 1.3199999999999998s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-13 {
    stroke-dashoffset: 38.66134262084961px;
    stroke-dasharray: 38.66134262084961px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 1.44s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
    transition: stroke-dashoffset 0.5s ease-out 1.44s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-13 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-14 {
    stroke-dashoffset: 47.59375px;
    stroke-dasharray: 47.59375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 1.56s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
    transition: stroke-dashoffset 0.5s ease-out 1.56s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-14 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-15 {
    stroke-dashoffset: 42.76410675048828px;
    stroke-dasharray: 42.76410675048828px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 1.68s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
    transition: stroke-dashoffset 0.5s ease-out 1.68s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-15 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-16 {
    stroke-dashoffset: 45.7298583984375px;
    stroke-dasharray: 45.7298583984375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 1.7999999999999998s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
    transition: stroke-dashoffset 0.5s ease-out 1.7999999999999998s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
}

svg.active .svg-elem-16 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-17 {
    stroke-dashoffset: 48.126495361328125px;
    stroke-dasharray: 48.126495361328125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 1.92s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
    transition: stroke-dashoffset 0.5s ease-out 1.92s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
}

svg.active .svg-elem-17 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-18 {
    stroke-dashoffset: 42.76410675048828px;
    stroke-dasharray: 42.76410675048828px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 2.04s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
    transition: stroke-dashoffset 0.5s ease-out 2.04s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
}

svg.active .svg-elem-18 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-19 {
    stroke-dashoffset: 51.93564987182617px;
    stroke-dasharray: 51.93564987182617px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 2.16s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
    transition: stroke-dashoffset 0.5s ease-out 2.16s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}

svg.active .svg-elem-19 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-20 {
    stroke-dashoffset: 28.34375px;
    stroke-dasharray: 28.34375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 2.28s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
    transition: stroke-dashoffset 0.5s ease-out 2.28s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
}

svg.active .svg-elem-20 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-21 {
    stroke-dashoffset: 44.25212860107422px;
    stroke-dasharray: 44.25212860107422px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 2.4s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
    transition: stroke-dashoffset 0.5s ease-out 2.4s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
}

svg.active .svg-elem-21 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-22 {
    stroke-dashoffset: 67.68050384521484px;
    stroke-dasharray: 67.68050384521484px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 2.52s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
    transition: stroke-dashoffset 0.5s ease-out 2.52s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
}

svg.active .svg-elem-22 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-23 {
    stroke-dashoffset: 48.97126770019531px;
    stroke-dasharray: 48.97126770019531px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 2.6399999999999997s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
    transition: stroke-dashoffset 0.5s ease-out 2.6399999999999997s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
}

svg.active .svg-elem-23 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-24 {
    stroke-dashoffset: 36.0625px;
    stroke-dasharray: 36.0625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 2.76s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
    transition: stroke-dashoffset 0.5s ease-out 2.76s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
}

svg.active .svg-elem-24 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-25 {
    stroke-dashoffset: 36.0625px;
    stroke-dasharray: 36.0625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 2.88s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
    transition: stroke-dashoffset 0.5s ease-out 2.88s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
}

svg.active .svg-elem-25 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-26 {
    stroke-dashoffset: 21.09375px;
    stroke-dasharray: 21.09375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 3s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
    transition: stroke-dashoffset 0.5s ease-out 3s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
}

svg.active .svg-elem-26 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-27 {
    stroke-dashoffset: 38.41074752807617px;
    stroke-dasharray: 38.41074752807617px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 3.12s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
    transition: stroke-dashoffset 0.5s ease-out 3.12s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
}

svg.active .svg-elem-27 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-28 {
    stroke-dashoffset: 43.7657585144043px;
    stroke-dasharray: 43.7657585144043px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 3.2399999999999998s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
    transition: stroke-dashoffset 0.5s ease-out 3.2399999999999998s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
}

svg.active .svg-elem-28 {
    stroke-dashoffset: 0;
    fill: rgb(31, 33, 34);
}

svg .svg-elem-29 {
    stroke-dashoffset: 407.1327209472656px;
    stroke-dasharray: 407.1327209472656px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 3.36s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
    transition: stroke-dashoffset 0.5s ease-out 3.36s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
}

svg.active .svg-elem-29 {
    stroke-dashoffset: 0;
    fill: rgb(34, 34, 34);
}

svg .svg-elem-30 {
    stroke-dashoffset: 466.7363586425781px;
    stroke-dasharray: 466.7363586425781px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 0.5s ease-out 3.48s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7s;
    transition: stroke-dashoffset 0.5s ease-out 3.48s,
    fill 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7s;
}

svg.active .svg-elem-30 {
    stroke-dashoffset: 0;
    fill: rgb(0, 0, 0);
}