/* assets/css/styles.css */
:root{
  --bg:#0f1220; --panel:#151933; --text:#e6e9f5; --muted:#9aa3b2; --accent:#7c5cff; --accent-2:#22d3ee;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  background: radial-gradient(1200px 1200px at 100% 0, rgba(124,92,255,.15), transparent 60%), var(--bg);
  color:var(--text); line-height:1.6;
}
.container{width:min(1100px,92%); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(0deg, rgba(15,18,32,.5), rgba(15,18,32,.85));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.logo{color:var(--text); font-weight:800; letter-spacing:.3px; text-decoration:none; font-size:1.25rem}
.logo span{color:var(--accent)}
.site-header .container{display:flex; align-items:center; gap:1rem; padding:.9rem 0}
.nav{margin-left:auto; display:flex; gap:.8rem; align-items:center}
.nav a{color:var(--muted); text-decoration:none; padding:.55rem .8rem; border-radius:12px; transition:.2s; font-weight:600}
.nav a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.nav a.active{color:white; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:var(--shadow)}
.nav a.upload{border:1px solid rgba(124,92,255,.4); color:#cfc7ff}
.hamburger{display:none; background:none; border:0; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:#cbd5e1; margin:5px 0; transition:.2s}

.hero{padding:72px 0 36px}
.hero h1{font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0 0 10px}
.hero p{color:var(--muted); margin:0}
.hero .cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:.6rem; border-radius:14px; padding:.7rem 1rem; text-decoration:none; font-weight:700}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0d1a; box-shadow:var(--shadow)}
.btn.ghost{border:1px solid rgba(255,255,255,.1); color:var(--text)}

.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .grid.cols-3{grid-template-columns:1fr}
  .nav{display:none}
  .hamburger{display:block;margin-left:auto}
}
.card{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .3rem}
.muted{color:var(--muted)}

.section{padding:28px 0}
.section h2{font-size:1.4rem; margin:0 0 .4rem}
.kicker{color:#a5b4fc; font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.72rem}

.site-footer{border-top:1px solid rgba(255,255,255,.06); background:#0d1020; margin-top:40px}
.site-footer .container{padding:22px 0; text-align:center; color:var(--muted)}
form{display:grid; gap:10px}
input, textarea{background:#0d1125; color:var(--text); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.7rem .9rem; outline:0}
input:focus, textarea:focus{border-color: rgba(124,92,255,.7)}
label{font-size:.9rem; color:#cbd5e1}
.badge{display:inline-block; background:rgba(124,92,255,.15); border:1px solid rgba(124,92,255,.4); color:#e9e5ff; padding:.35rem .6rem; border-radius:999px; font-size:.78rem; font-weight:700}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.projects{margin-top:8px}
.project{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:14px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(255,255,255,.02)}
.project h4{margin:.1rem 0}
.small{font-size:.9rem}
.alert{padding:.7rem .9rem; border-radius:12px; background:#12283a; border:1px solid #1e3a5f; color:#cde9ff}
.success{background:#11391f; border-color:#1e5f34; color:#d1ffe1}
.error{background:#3a1212; border-color:#5f1e1e; color:#ffd1d1}