:root { color-scheme: dark; font-family: "Segoe UI", Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.splash-body { background: #020713; color: #f6fbff; }
.splash {
  position: relative; isolation: isolate; display: grid; width: 100vw; height: 100vh; height: 100dvh;
  min-height: 100%; overflow: hidden; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, rgba(19,78,140,.32), transparent 34%),
    radial-gradient(circle at 50% 110%, rgba(0,101,198,.18), transparent 42%),
    radial-gradient(ellipse at center, #07152d 0%, #030915 55%, #01040b 100%);
  transition: opacity 500ms ease, filter 500ms ease;
}
.splash:focus-visible { outline: 2px solid #8ccaff; outline-offset: -4px; }
.splash.is-leaving { opacity: 0; filter: blur(5px); pointer-events: none; }
.starfield, .space-haze { position: absolute; inset: 0; width: 100%; height: 100%; }
.starfield { z-index: -2; }
.space-haze { z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(67,159,255,.045) 48%, transparent 61%), radial-gradient(circle at center, transparent 34%, rgba(0,0,0,.52) 100%); }
.splash-content { display: flex; width: min(920px, 90vw); max-height: calc(100dvh - 7rem); padding: clamp(1rem, 3vh, 2.25rem) 1rem; align-items: center; flex-direction: column; justify-content: center; text-align: center; }
.logo-reveal { position: relative; width: min(420px, 78vw); overflow: hidden; animation: logo-reveal 1.6s cubic-bezier(.2,.75,.25,1) both; }
.company-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 12px rgba(78,164,255,.36)); }
.logo-beam { position: absolute; top: -35%; bottom: -35%; left: -42%; width: 25%; opacity: 0; transform: skewX(-16deg); background: linear-gradient(90deg, transparent, rgba(126,194,255,.42), #fff, rgba(126,194,255,.42), transparent); filter: blur(5px); mix-blend-mode: screen; animation: logo-scan 1.25s ease-in-out 1.25s 1 both; }
.title-group { margin-top: clamp(1.2rem, 3vh, 2.25rem); animation: content-in 1s ease-out .65s both; }
.company-name, .product-name, .version-badge, .skip-hint { margin: 0; text-transform: uppercase; letter-spacing: .28em; }
.company-name { color: #7ec2ff; font-size: clamp(.78rem, 1.2vw, .96rem); font-weight: 700; }
h1 { max-width: 900px; margin: .55rem 0 0; font-size: clamp(1.35rem, 3.1vw, 2.7rem); font-weight: 300; line-height: 1.2; letter-spacing: .025em; text-shadow: 0 0 25px rgba(82,164,255,.2); }
h1 span { display: block; margin-top: .25rem; color: #b9d7f2; font-size: .55em; font-weight: 400; letter-spacing: .09em; }
.product-name { margin-top: .85rem; color: #93a8bd; font-size: clamp(.7rem, 1.2vw, .9rem); }
.loading { display: flex; margin-top: clamp(1.35rem, 3vh, 2.5rem); align-items: center; gap: .8rem; color: #a9ccec; font-size: .72rem; font-weight: 600; letter-spacing: .22em; animation: content-in 1s ease-out 1s both; }
.spinner { width: 1.8rem; height: 1.8rem; border: 2px solid rgba(113,181,245,.18); border-top-color: #8ccaff; border-right-color: #258eea; border-radius: 50%; box-shadow: 0 0 12px rgba(45,147,238,.3); animation: spin 900ms linear infinite; }
.loading-dots::after { content: ""; animation: dots 1.4s steps(4,end) infinite; }
.version-badge { position: absolute; bottom: max(1.35rem, env(safe-area-inset-bottom)); left: 50%; width: max-content; max-width: 90vw; transform: translateX(-50%); color: #647b91; font-size: clamp(.58rem, 1.5vw, .72rem); letter-spacing: .12em; text-align: center; animation: content-in 1s ease-out 1.25s both; }
.skip-hint { position: absolute; right: max(1rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); color: rgba(137,170,201,.55); font-size: .55rem; letter-spacing: .12em; }
@keyframes logo-reveal { from { opacity: 0; transform: translateY(28px) scale(.92); filter: blur(14px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes logo-scan { 0% { left: -42%; opacity: 0; } 20%,75% { opacity: .9; } 100% { left: 118%; opacity: 0; } }
@keyframes content-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%,100% { content: "..."; } }
@media (max-width: 680px) { .splash-content { max-height: calc(100dvh - 5.25rem); padding-inline: .5rem; } .skip-hint { display: none; } .version-badge { bottom: max(1rem, env(safe-area-inset-bottom)); } }
@media (max-height: 600px) { .logo-reveal { width: min(330px, 60vw); } .title-group { margin-top: .75rem; } .loading { margin-top: 1rem; } .company-name, .product-name { font-size: .62rem; } .version-badge { bottom: .65rem; } }
@media (prefers-reduced-motion: reduce) {
  .logo-reveal, .title-group, .loading, .version-badge { animation: none; }
  .logo-beam { display: none; }
  .spinner { animation-duration: 2.5s; }
  .loading-dots::after { content: "..."; animation: none; }
  .splash { transition-duration: 100ms; }
}