/* --------- Tema --------- */
:root{
  --bg: #0f172a;          /* slate-900 */
  --bg-soft: #111827;     /* gray-900 */
  --panel: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.10);
  --text: #e5e7eb;        /* gray-200 */
  --muted: #9ca3af;       /* gray-400 */
  --accent: #60a5fa;      /* blue-400 */
  --accent-2: #7c3aed;    /* violet-600 */
}

/* --------- Base --------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(96,165,250,.18), transparent 60%),
    var(--bg);
}
h1,h2,h3{margin:0 0 .6rem}
h2{font-size:1.8rem}
p{margin:.5rem 0 1rem}

/* Containers & layout */
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.section{padding:3rem 0}
.small{font-size:.95rem}
.muted{color:var(--muted)}

/* --------- Topbar --------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(90deg, var(--bg-soft), #0b1222 50%, var(--bg-soft));
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(130%) blur(6px);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.brand{
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.3px;
  display:flex; align-items:center; gap:.25rem;
}
.brand .dot{color:var(--accent)}
.nav a{
  color:var(--muted); text-decoration:none; margin-left:1rem;
  padding:.35rem .55rem; border-radius:.45rem; transition:all .15s;
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.06) }
.nav a.active{ color:#fff; background: linear-gradient(90deg,var(--accent),var(--accent-2)) }

.menu-btn{
  display:none; background:none; border:0; color:#fff; font-size:1.4rem; cursor:pointer;
}

/* Mobile nav */
@media (max-width: 780px){
  .menu-btn{ display:block }
  .nav{
    display:none; position:absolute; top:60px; left:0; right:0;
    background:var(--bg-soft); border-bottom:1px solid var(--border);
    padding:.6rem 1rem;
  }
  .nav.open{ display:block }
  .nav a{ display:block; margin:.35rem 0 }
}

/* --------- Hero --------- */
.hero{ padding:3.5rem 0 1.5rem }
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr } }

.lead{ font-size:1.1rem; color:var(--muted) }

.grad{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.cta{ display:flex; gap:.75rem; margin-top:1rem }
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  padding:.65rem 1rem; border-radius:.6rem; border:1px solid var(--border);
  color:#fff; transition:transform .06s ease, background .15s;
}
.btn:hover{ transform:translateY(-1px) }
.btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-color:transparent }
.btn.ghost{ background:transparent }
.btn.small{ padding:.45rem .7rem; font-size:.95rem }

.photo-wrap{
  width:100%; max-width:340px; margin-inline:auto;
  background:linear-gradient(135deg, rgba(124,58,237,.25), rgba(96,165,250,.25));
  padding:6px; border-radius:22px;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}
.photo-wrap img{
  display:block; width:100%; height:auto; border-radius:18px;
}

/* --------- Cards & grids --------- */
.grid{ display:grid; gap:1rem }
.skills{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.projects{ grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (max-width: 780px){
  .skills{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .projects{ grid-template-columns: 1fr }
}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:1rem;
}
.project .actions{ display:flex; gap:.5rem; margin-top:.5rem }

/* --------- Footer --------- */
.footer{
  border-top:1px solid var(--border);
  padding:1.2rem 0; background:rgba(255,255,255,.02);
}