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

body{

font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont;

background:
radial-gradient(circle at 20% 20%,#1a2a4a,transparent),
radial-gradient(circle at 80% 30%,#1c1338,transparent),
#060b17;

color:white;

min-height:100vh;

display:flex;
justify-content:center;

padding:80px 20px;

}

.container{

width:1000px;
max-width:95%;

}

/* LOGO */

.logo{

font-size:42px;

font-weight:800;

letter-spacing:6px;

margin-bottom:30px;

background:linear-gradient(90deg,#4fc3ff,#9d7bff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

/* TITLES */

.title{

font-size:28px;

margin-bottom:10px;

}

.subtitle{

opacity:.7;

margin-bottom:30px;

line-height:1.6;

}

/* TEXTAREA */

textarea{

width:100%;
height:220px;

background:#0b1223;

border:1px solid rgba(255,255,255,.08);

border-radius:14px;

padding:20px;

color:white;

font-size:16px;

outline:none;

transition:.25s;

margin-bottom:30px;

}

textarea:focus{

border-color:#4fc3ff;

box-shadow:0 0 15px rgba(79,195,255,.4);

}

/* RESULTS GRID */

.results{

margin-top:10px;

display:grid;

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

gap:20px;

margin-bottom:60px;

}

.card{

background:#0c1426;

padding:30px;

border-radius:16px;

text-align:center;

border:1px solid rgba(255,255,255,.05);

transition:.25s;

}

.card:hover{

transform:translateY(-5px);

border-color:#4fc3ff;

box-shadow:0 10px 30px rgba(79,195,255,.25);

}

.number{

font-size:36px;

font-weight:700;

margin-bottom:6px;

}

.label{

opacity:.6;

font-size:14px;

}

/* PASSWORD BOX */

.password-box{

display:flex;

gap:10px;

margin-bottom:30px;

}

.password-box input{

flex:1;

padding:12px 14px;

border-radius:10px;

border:1px solid rgba(255,255,255,.08);

background:#0b1223;

color:white;

font-size:16px;

}

.password-box button{

padding:10px 18px;

}

/* CONTROLS */

.controls{

margin-bottom:40px;

}

.controls label{

display:block;

margin-bottom:6px;

opacity:.7;

}

.controls input[type="range"]{

width:100%;

margin-bottom:10px;

}

.options{

display:flex;

gap:20px;

margin:15px 0;

flex-wrap:wrap;

}

.options label{

display:flex;

align-items:center;

gap:6px;

opacity:.9;

}

/* BUTTON */

button{

background:linear-gradient(90deg,#4fc3ff,#9d7bff);

border:none;

padding:10px 16px;

border-radius:10px;

color:white;

cursor:pointer;

font-weight:600;

transition:.2s;

}

button:hover{

opacity:.9;

transform:translateY(-1px);

}

/* SEO SECTION */

.seo{

margin-top:60px;

padding-top:30px;

border-top:1px solid rgba(255,255,255,.06);

}

.seo p{

opacity:.7;

line-height:1.7;

}

/* TOOL GRID */

.tools-grid{

display:grid;

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

gap:20px;

}

.tool-card{

display:block;

padding:30px;

border-radius:16px;

background:#0c1426;

border:1px solid rgba(255,255,255,.06);

text-decoration:none;

color:white;

transition:.25s;

}

.tool-card:hover{

transform:translateY(-6px);

border-color:#9d7bff;

box-shadow:0 20px 40px rgba(157,123,255,.3);

}

.tool-card h3{

margin-bottom:10px;

font-size:20px;

}

.tool-card p{

opacity:.6;

font-size:14px;

}

/* MOBILE */

@media(max-width:700px){

.logo{

font-size:34px;

}

.title{

font-size:22px;

}

textarea{

height:180px;

}

}