/*
Theme Name: Synth Layout V2
Version: 1.8
*/

body{
margin:0;
background:#05070d;
color:#e6f1ff;
font-family:Arial,sans-serif;
display:flex;
}

/* SIDEBAR */
.sidebar{
width:90px;
background:#070b10;
height:100vh;
position:fixed;
left:0;
top:0;
display:flex;
flex-direction:column;
align-items:center;
padding-top:30px;
border-right:1px solid rgba(0,255,255,0.15);
}

.nav-item{position:relative;margin:22px 0;cursor:pointer}

.nav-item svg{
width:32px;
height:32px;
stroke:#8aa0b8;
fill:none;
stroke-width:1.8;
transition:.3s
}

.nav-item:hover svg{
stroke:#00ffe1;
transform:scale(1.2);
filter:drop-shadow(0 0 10px #00ffe1)
}

.nav-label{
position:absolute;
left:55px;
top:50%;
transform:translateY(-50%);
opacity:0;
font-size:12px;
color:#00ffe1;
transition:.3s
}

.nav-item:hover .nav-label{opacity:1;left:65px}

/* MAIN */
.main{margin-left:110px;width:100%}

.hero{
height:50vh;
display:flex;
align-items:center;
justify-content:center;
}

.hero h1{
font-size:60px;
color:#00ffe1;
text-shadow:0 0 20px #00ffe1;
}

.container{
max-width:1000px;
margin:60px auto;
padding:0 20px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

.card{
display:block;
padding:25px;
background:#0f1624;
border:1px solid rgba(0,255,255,0.15);
text-decoration:none;
color:inherit;
}