*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',system-ui,-apple-system,sans-serif;
}

body{
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.splash-container{
text-align:center;
animation:fadeIn 1s ease-in;
}

@keyframes fadeIn{
from{
opacity:0;
transform:scale(0.9);
}
to{
opacity:1;
transform:scale(1);
}
}

.logo-container{
margin-bottom:40px;
animation:bounce 2s infinite;
}

@keyframes bounce{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-20px);
}
}

.logo-icon{
width:120px;
height:120px;
background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);
border-radius:30px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto;
box-shadow:0 20px 60px rgba(240,147,251,0.4);
}

.logo-icon svg{
width:64px;
height:64px;
color:white;
}

.app-title{
font-size:3rem;
font-weight:800;
margin-bottom:16px;
background:linear-gradient(135deg,#fff 0%,#e0e7ff 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
letter-spacing:-1px;
}

.app-subtitle{
font-size:1.2rem;
opacity:0.8;
margin-bottom:60px;
font-weight:500;
}

.loading-container{
margin-top:40px;
}

.loading-bar{
width:200px;
height:4px;
background:rgba(255,255,255,0.2);
border-radius:2px;
margin:0 auto;
overflow:hidden;
position:relative;
}

.loading-progress{
height:100%;
background:linear-gradient(90deg,#f093fb 0%,#f5576c 100%);
border-radius:2px;
animation:loading 2s ease-in-out infinite;
}

@keyframes loading{
0%{
width:0%;
left:0;
}
50%{
width:100%;
left:0;
}
100%{
width:0%;
left:100%;
}
}

.loading-text{
margin-top:20px;
font-size:0.9rem;
opacity:0.7;
letter-spacing:2px;
text-transform:uppercase;
}

.features{
display:flex;
justify-content:center;
gap:40px;
margin-top:60px;
}

.feature{
text-align:center;
opacity:0;
animation:slideIn 0.5s ease-in forwards;
}

.feature:nth-child(1){
animation-delay:0.3s;
}

.feature:nth-child(2){
animation-delay:0.6s;
}

.feature:nth-child(3){
animation-delay:0.9s;
}

@keyframes slideIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.feature-icon{
width:48px;
height:48px;
background:rgba(255,255,255,0.1);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 12px;
backdrop-filter:blur(10px);
}

.feature-icon svg{
width:24px;
height:24px;
color:white;
}

.feature-text{
font-size:0.85rem;
opacity:0.8;
font-weight:500;
}

.progress-ring{
position:absolute;
width:200px;
height:200px;
}

.progress-ring-circle{
transition:stroke-dashoffset 0.5s;
transform:rotate(-90deg);
transform-origin:50% 50%;
}