/* Basic reset and theme */
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#071022;--card:#071827;--muted:#9aa4b2;--accent:#6ee7b7;--accent-2:#6ec1ff;--glass:rgba(255,255,255,0.03)}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg) 0%, #061426 100%);color:#e6eef6;line-height:1.5;-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:28px}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,rgba(6,18,36,0.6),rgba(6,18,36,0.3));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.2rem;font-weight:700;letter-spacing:0.4px}
.nav-toggle{display:none;background:transparent;border:0;color:inherit;font-size:1.25rem}
.site-nav a{color:var(--muted);margin-left:18px;text-decoration:none;padding:8px;border-radius:8px;transition:all .18s ease}
.site-nav a:hover{color:var(--accent);transform:translateY(-1px)}

/* Hero */
.hero{padding:56px 0;background:linear-gradient(180deg,rgba(110,231,183,0.03),transparent);border-bottom:1px solid rgba(255,255,255,0.02)}
.hero h2{font-size:2rem;margin-bottom:6px}
.hero .lead{color:var(--muted);margin-top:10px;max-width:70%}
.socials a{display:inline-block;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));color:var(--accent);padding:8px 14px;border-radius:10px;margin-right:8px;text-decoration:none;border:1px solid rgba(255,255,255,0.03);transition:transform .16s ease,box-shadow .16s ease}
.socials a:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,0.4)}

/* Sections */
.about,.projects,.contact{padding:28px 0}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.project-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:transform .16s ease,box-shadow .16s ease}
.project-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.6)}
.project-card h4{margin-bottom:6px}
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#062024;padding:8px 12px;border-radius:10px;text-decoration:none;margin-top:8px;font-weight:600}
.btn.muted{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}
.site-footer{padding:22px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02);margin-top:20px}

/* Utilities */
.lead{font-size:1.05rem}

@media (max-width:920px){
  .hero .lead{max-width:100%}
}

@media (max-width:720px){
  .nav-toggle{display:inline-block}
  .site-nav{display:none;position:absolute;right:16px;top:64px;background:var(--card);padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
  .site-nav a{display:block;margin:8px 0}
}

/* Contact buttons on index */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.contact-btn{display:flex;align-items:center;justify-content:space-between;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);transition:transform .16s ease,box-shadow .16s ease}
.contact-btn .cb-left{font-weight:700}
.contact-btn .cb-right{color:var(--muted);font-size:0.95rem}
.contact-btn:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(2,6,23,0.55)}
.contact-btn.yt{border-left:6px solid #ff4b4b}
.contact-btn.tw{border-left:6px solid #6441a5}
.contact-btn.gh{border-left:6px solid #6cc644}

@media(max-width:520px){
  .contact-btn{padding:12px;font-size:0.95rem}
  .cb-right{display:none}
}