*{
box-sizing:border-box;
}


body{

margin:0;

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

color:#111;

position:relative;

overflow-x:hidden;

background:white;

}



body::before{

content:"";

position:fixed;

top:-50px;

left:-50px;

width:calc(100% + 100px);

height:calc(100% + 100px);

background:url("gradient.jpg");

background-size:cover;

background-position:center;

filter:blur(35px);

opacity:.35;

z-index:-2;

}



body::after{

content:"";

position:fixed;

inset:0;

background:rgba(255,255,255,.55);

z-index:-1;

}





header{

padding:25px 8%;

}



.logo{

text-decoration:none;

color:#111;

cursor:pointer;

font-size:28px;

font-weight:700;

letter-spacing:-1px;

}



.logo:visited,
.logo:hover,
.logo:active{

color:#111;

}



.logo span{

color:#4f46e5;

}




main{

max-width:900px;

margin:auto;

padding:20px;

}




.hero{

text-align:center;

padding:70px 20px;

}




.hero h1{

font-size:55px;

letter-spacing:-2px;

line-height:1.05;

}




.hero p{

font-size:18px;

color:#555;

max-width:600px;

margin:auto;

}





.tool-box{

margin-top:45px;

padding:35px;

border-radius:20px;

background:rgba(255,255,255,.85);

backdrop-filter:blur(15px);

box-shadow:0 15px 40px rgba(0,0,0,.08);

}




input{

width:100%;

padding:18px;

font-size:18px;

border-radius:12px;

border:1px solid #ddd;

outline:none;

}




button{

width:100%;

margin-top:15px;

padding:18px;

border:none;

border-radius:12px;

background:#4f46e5;

color:white;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.2s;

}



button:hover{

transform:translateY(-2px);

}



.clear-btn{

background:#eee;

color:#333;

}





#results{

margin-top:30px;

padding:20px;

background:#f8f8f8;

border-radius:12px;

min-height:80px;

}




.word{

display:inline-block;

background:white;

padding:10px 15px;

margin:5px;

border-radius:10px;

box-shadow:0 3px 10px rgba(0,0,0,.05);

}





.ad-box{

height:90px;

border:1px solid #ddd;

margin:40px 0;

display:flex;

align-items:center;

justify-content:center;

color:#888;

background:rgba(255,255,255,.5);

}




.content{

padding:30px 20px;

color:#555;

line-height:1.7;

}



.content h2{

color:#111;

margin-top:50px;

}



.steps div{

background:white;

padding:15px;

margin:10px 0;

border-radius:12px;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}



.links{

display:grid;

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

gap:15px;

}



.links a{

padding:18px;

background:white;

border-radius:12px;

text-decoration:none;

color:#111;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}




.faq h3{

color:#111;

}




footer{

text-align:center;

padding:30px;

color:#888;

}



@media(max-width:600px){

.hero h1{

font-size:40px;

}


.tool-box{

padding:20px;

}

}