*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:#111;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

/* 500x500 Splash */
.splash-container{
  width:500px;
  height:500px;
  border-radius:24px;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  position:relative;

  /* LOGO COLOR GRADIENT */
  background:linear-gradient(
      135deg,
      #1e3c8f 0%,
      #2d5aa8 45%,
      #d91e18 100%
  );

  box-shadow:0 18px 45px rgba(0,0,0,.45);
}

/* floating background circles */

.bg-decoration{
  position:absolute;
  border-radius:50%;
  opacity:.12;
  background:white;
  animation:float 6s ease-in-out infinite;
}

.bg-decoration-1{
  width:130px;
  height:130px;
  top:-30px;
  left:-40px;
}

.bg-decoration-2{
  width:95px;
  height:95px;
  bottom:20px;
  right:-25px;
}

.bg-decoration-3{
  width:110px;
  height:110px;
  top:60%;
  right:8%;
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(14px)}
}

/* content */

.splash-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:5;
}

/* logo */

.logo-wrapper{
  margin-bottom:20px;
}

.logo-glow{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.logo-glow::before{
  content:'';
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%);
  animation:pulse 2s infinite;
}

.logo{
  width:90px;
  height:90px;
  z-index:2;
  filter:drop-shadow(0 8px 15px rgba(0,0,0,.3));
}

@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.35}
  50%{transform:scale(1.15);opacity:.1}
}

/* branding */

.branding{
  text-align:center;
  color:white;
  margin-bottom:30px;
}

.app-name{
  font-size:28px;
  font-weight:800;
  letter-spacing:1px;
}

.tagline{
  font-size:14px;
  margin-top:4px;
  opacity:.95;
}

.subtitle{
  font-size:11px;
  margin-top:6px;
  letter-spacing:1px;
  opacity:.8;
}

/* loader */

.loader{
  display:flex;
  gap:6px;
  margin-bottom:6px;
}

.loader-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:white;
  animation:bounce 1.4s infinite ease-in-out;
}

.loader-dot:nth-child(2){animation-delay:-0.2s}
.loader-dot:nth-child(3){animation-delay:-0.4s}

@keyframes bounce{
  0%,80%,100%{transform:scale(.7);opacity:.6}
  40%{transform:scale(1.2);opacity:1}
}

.loading-text{
  font-size:11px;
  color:white;
  opacity:.9;
}

/* footer */

.splash-footer{
  position:absolute;
  bottom:16px;
}

.footer-text{
  font-size:10px;
  color:rgba(255,255,255,.75);
  letter-spacing:1px;
}