/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

/* BODY */

body{
background:linear-gradient(135deg,#0f172a,#1e293b);
color:#e2e8f0;
}

/* HEADER */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
background:#020617;
box-shadow:0 5px 20px rgba(0,0,0,0.4);
}

/* LOGO */

.logo{
font-size:20px;
font-weight:bold;
color:#f1f5f9;
}

/* NAVIGATION */

nav ul{
display:flex;
list-style:none;
gap:30px;
}

nav ul li{
list-style:none;
}

nav ul li a{
text-decoration:none;
color:#cbd5f5;
font-weight:500;
transition:0.2s;
}

nav ul li a:hover{
color:#60a5fa;
}

/* HERO */

.hero{
text-align:center;
padding:80px 20px;
background:linear-gradient(180deg,#1e293b,#0f172a);
}

.hero h1{
font-size:36px;
margin-bottom:10px;
}

.hero p{
color:#94a3b8;
}

/* GRID TOOLS */

.tools-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
padding:50px;
max-width:1100px;
margin:auto;
}

/* TOOL CARD */

.tool-card{
background:#1e293b;
padding:30px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
transition:0.25s;
}

.tool-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 40px rgba(0,0,0,0.7);
}

.tool-card h3{
margin-bottom:10px;
}

.tool-card p{
color:#94a3b8;
margin-bottom:12px;
}

/* LINKS */

.tool-card a{
color:#60a5fa;
text-decoration:none;
font-weight:bold;
}

.tool-card a:hover{
text-decoration:underline;
}

/* TOOL PAGES */

.tool-container{
max-width:500px;
margin:auto;
background:#1e293b;
padding:30px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.6);
margin-top:40px;
}

/* INPUTS */

textarea,input{
width:100%;
padding:10px;
margin-bottom:10px;
border-radius:6px;
border:1px solid #334155;
background:#020617;
color:white;
}

textarea{
height:120px;
}

/* BUTTON */

button{
background:#3b82f6;
border:none;
padding:10px 20px;
border-radius:6px;
color:white;
font-weight:bold;
cursor:pointer;
transition:0.2s;
}

button:hover{
background:#2563eb;
transform:scale(1.05);
}

/* RESULT BOX */

#result{
border:1px solid #334155;
padding:10px;
border-radius:6px;
background:#020617;
margin-bottom:10px;
}

/* QR */

#qrcode{
margin-top:20px;
}

/* FOOTER */

footer{
margin-top:80px;
text-align:center;
padding:20px;
background:#020617;
color:#94a3b8;
}