body{
margin:0;
font-family:Inter,Arial;
background:#08121c;
color:white;
text-align:center;
overflow-x:hidden;
}

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
}

.logo img{
height:28px;
}

nav a{
margin:0 15px;
color:#9bb3c9;
text-decoration:none;
}

.hero{
padding:120px 20px;
}

.hero h1{
font-size:60px;
font-weight:800;
}

.hero span{
color:#2AABEE;
}

.upload-box{
display:flex;
justify-content:center;
margin-top:40px;
}

.upload-area{
width:420px;
max-width:90%;
border:2px dashed #2AABEE;
border-radius:20px;
padding:40px;
cursor:pointer;
}

.upload-area input{
display:none;
}

.upload-icon{
font-size:40px;
}

.loading{
display:none;
flex-direction:column;
align-items:center;
margin-top:40px;
}

.scanner{
width:120px;
height:120px;
border-radius:50%;
border:4px solid #2AABEE;
border-top:4px solid transparent;
animation:spin 1s linear infinite;
}

@keyframes spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}

.result{
display:none;
margin-top:40px;
}

.tg-button{
display:inline-flex;
align-items:center;
gap:8px;
background:#2AABEE;
border:none;
padding:12px 24px;
border-radius:30px;
color:white;
cursor:pointer;
}

.examples{
padding:120px 20px;
text-align:center;
}

.examples-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:60px;

max-width:900px;
margin:auto;
margin-top:50px;

}

.example{
width:100%;
}

.examples{
padding:120px 20px;
text-align:center;
}

.examples-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:60px;

max-width:900px;
margin:auto;
margin-top:40px;

}

.compare{

position:relative;
width:100%;
height:420px;

border-radius:20px;
overflow:hidden;

}

.compare img{

position:absolute;
width:100%;
height:100%;

object-fit:cover;

top:0;
left:0;

}

.after{

clip-path:inset(0 50% 0 0);

animation:compareMove 6s infinite ease-in-out;

}

@keyframes compareMove{

0%{clip-path:inset(0 100% 0 0)}

50%{clip-path:inset(0 0% 0 0)}

100%{clip-path:inset(0 100% 0 0)}

}

.divider{

position:absolute;

top:0;
left:50%;

width:3px;
height:100%;

background:#2AABEE;

animation:dividerMove 6s infinite ease-in-out;

}

@keyframes dividerMove{

0%{left:0%}
50%{left:100%}
100%{left:0%}

}

footer{
margin-top:120px;
padding:40px;
border-top:1px solid #122435;
}

@media(max-width:768px){

.hero h1{
font-size:40px;
}

.examples-grid{
gap:40px;
}

}

.tg-btn{

display:inline-flex;
align-items:center;
gap:12px;

padding:14px 28px;

border-radius:40px;

background:linear-gradient(135deg,#2AABEE,#229ED9);

color:white;

text-decoration:none;

font-weight:600;

margin-top:20px;

box-shadow:0 10px 30px rgba(42,171,238,0.4);

transition:all .3s ease;

}

.tg-btn:hover{

transform:translateY(-3px);

box-shadow:0 15px 40px rgba(42,171,238,0.6);

}

.tg-btn svg{

width:22px;
height:22px;

}

.seo-footer{

margin-top:120px;

padding:60px 20px;

background:#081b2b;

border-top:1px solid #102a3c;

}

.footer-container{

max-width:900px;

margin:auto;

text-align:center;

}

.seo-footer h3{

margin-bottom:20px;

font-size:24px;

}

.seo-footer p{

margin-bottom:16px;

color:#9fb3c8;

line-height:1.7;

}

.tg-button{

display:inline-flex;

align-items:center;

gap:10px;

background:#2AABEE;

padding:14px 26px;

border-radius:30px;

text-decoration:none;

color:white;

margin-top:15px;

}

.tg-button{

display:inline-flex;
align-items:center;
justify-content:center;

gap:10px;

background:#2AABEE;

padding:14px 28px;

border-radius:40px;

text-decoration:none;

color:white;
font-weight:600;

margin-top:20px;

transition:.3s;

}

.tg-button:hover{

transform:translateY(-2px);
box-shadow:0 10px 30px rgba(42,171,238,0.5);

}

.tg-button svg{

width:20px;
height:20px;

flex-shrink:0;

}

.tg-button span{

color:white;
font-size:15px;

}