/* styles.css - modern responsive portfolio */

/* Theme variables */
:root{
  --bg:#0b1220;
  --card:#071227;
  --accent:#6ee7b7;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.02);
  --radius:14px;
  --maxwidth:1100px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:linear-gradient(180deg,#04121a 0%, #071022 100%); color:#e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.container{max-width:var(--maxwidth);margin:0 auto;padding:28px;}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.3));backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 28px}
.brand h1{margin:0;font-size:20px}
.brand .muted{color:var(--muted);font-size:13px;margin-top:2px}

/* menu */
.menu{display:flex;gap:18px}
.menu a{color:inherit;text-decoration:none;font-weight:600;opacity:0.9}
.hamburger{display:none;background:none;border:0;color:inherit;font-size:20px}

/* hero */
.hero{padding:48px 0;position:relative;overflow:hidden}
.hero-inner{display:flex;gap:24px;align-items:center}
.hero-left{flex:1}
.hero-right{width:320px}
.lead{color:var(--muted);line-height:1.5;margin-top:8px}
.accent{color:var(--accent)}

/* profile card */
.profile-card{padding:16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow: 0 10px 30px rgba(2,6,23,0.6)}
.profile-top{display:flex;gap:12px;align-items:center}
.initials{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,#1f2937,#111827);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
.name{font-weight:700}
.role{color:var(--muted);font-size:13px;margin-top:4px}
.stats{display:flex;gap:12px;list-style:none;padding:0;margin:12px 0 0}
.stats li{background:var(--glass);padding:8px;border-radius:10px;min-width:66px;text-align:center}

/* sections */
.section{margin-top:20px;padding:18px;border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));box-shadow: 0 8px 24px rgba(2,6,23,0.6)}

/* about grid */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}

/* tabs & projects */
.tabs{display:flex;gap:8px;margin-top:12px}
.tab{padding:8px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.03);cursor:pointer}
.tab.active{background:linear-gradient(90deg, rgba(110,231,183,0.12), rgba(110,231,183,0.06));border-color:rgba(110,231,183,0.18)}

.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.project-card{padding:14px;border-radius:10px;background:rgba(255,255,255,0.01)}
.project-actions{margin-top:12px;display:flex;gap:8px;align-items:center}
.file-slot{display:inline-block;padding:8px 10px;border-radius:8px;border:1px dashed rgba(255,255,255,0.04);cursor:pointer}
.file-slot input{display:none}

.project-controls{margin-top:12px;display:flex;gap:8px}
.btn{background:linear-gradient(90deg,var(--accent), #4fd8b0);color:#002; padding:8px 12px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit}

/* saved list */
.saved-list{margin-top:12px}
.saved-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;background:rgba(255,255,255,0.01);margin-bottom:8px}
.saved-meta{color:var(--muted);font-size:13px}

/* footer */
.site-footer{padding:20px 0;text-align:center;color:var(--muted);margin-top:28px;font-size:13px}

/* blobs */
.blobs{position:absolute;right:-120px;top:-120px;width:420px;height:420px;opacity:0.16;filter:blur(14px);transform:rotate(12deg)}

/* custom cursor */
#cursor{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);background:transparent;border:2px solid var(--accent);mix-blend-mode:screen;transition:transform .12s ease, width .12s ease, height .12s ease}

/* small screens */
@media (max-width:900px){
  .hero-inner{flex-direction:column}
  .hero-right{width:100%}
  .menu{display:none}
  .hamburger{display:block}
  .nav-inner{padding:10px 16px}
}