/* Loading screen with the logo — shown once per visit, while the first page loads */
.ld { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(900px 520px at 50% 42%, #FFFFFF 0%, #F3F6FD 55%, #E6ECFA 100%); transition: opacity .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s; }
.ld-in { position: relative; display: grid; justify-items: center; gap: 30px; }
.ld-mark { position: relative; display: grid; place-items: center; width: 240px; height: 240px; }
.ld-mark::before, .ld-mark::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(47, 84, 184, .18); animation: ld-ring 2.4s cubic-bezier(.2, .8, .2, 1) infinite; }
.ld-mark::after { animation-delay: 1.2s; }
.ld-mark img { position: relative; width: 190px; height: auto; opacity: 0; transform: translateY(14px) scale(.94); animation: ld-logo .9s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.ld-bar { position: relative; width: 168px; height: 3px; border-radius: 3px; background: #DCE4F5; overflow: hidden; opacity: 0; animation: ld-fade .5s ease .5s forwards; }
.ld-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #213A82, #2F54B8 55%, #5B80E0); transform: translateX(-100%); animation: ld-fill 1.6s cubic-bezier(.45, 0, .2, 1) .5s forwards; }
.ld-tag { font-family: 'Outfit', system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #4B5768; opacity: 0; animation: ld-fade .6s ease .7s forwards; }
.ld.done { opacity: 0; visibility: hidden; }
.ld.done .ld-in { transform: translateY(-14px) scale(.98); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
html.ld-skip .ld { display: none; }
html.ld-on, html.ld-on body { overflow: hidden; }
@keyframes ld-logo { to { opacity: 1; transform: none; } }
@keyframes ld-fade { to { opacity: 1; } }
@keyframes ld-fill { to { transform: translateX(0); } }
@keyframes ld-ring { 0% { transform: scale(.55); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@media (max-width: 600px) { .ld-mark { width: 190px; height: 190px; } .ld-mark img { width: 150px; } }
@media (prefers-reduced-motion: reduce) {
  .ld-mark::before, .ld-mark::after { display: none; }
  .ld-mark img, .ld-bar, .ld-tag { animation: none; opacity: 1; transform: none; }
  .ld-bar i { animation: none; transform: none; }
}