/* Basic reset and layout */
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#0b74ff;
  --accent:#0b74ff;
  --card:#f8fafc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);line-height:1.4}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e6e9ee;background:#fff;position:sticky;top:0;z-index:10}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#eef2ff;border-radius:8px}
.logo-text{font-weight:700}

/* Nav */
.nav-links{display:flex;gap:14px;align-items:center}
.nav-links a{padding:8px 10px;border-radius:6px;color:var(--muted)}
.nav-links a.active{background:var(--card);color:var(--text);font-weight:600}

/* Buttons */
.btn{display:inline-block;padding:8px 14px;border-radius:8px;background:transparent;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff}
.btn.secondary{background:#fff;border:1px solid #d1d5db;color:var(--text)}

/* Hero */
.hero{padding:48px 20px;background:linear-gradient(180deg,#f8fafc,transparent)}
.hero-content{max-width:980px;margin:0 auto;text-align:left}
.subtitle{color:var(--muted);margin-top:8px}

/* Grids */
.skills-grid,.portfolio-grid,.services-grid,.payments-grid,.projects-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:16px}
.skill-card,.service-card,.portfolio-card,.payment-card,.project-card{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.project-image{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:10px}

/* Sections */
section{padding:28px 20px;max-width:1100px;margin:0 auto}
.centered{text-align:center;margin-top:18px}

/* Footer */
.site-footer{padding:20px;text-align:center;color:var(--muted);border-top:1px solid #e6e9ee;margin-top:30px}

/* Responsive */
@media (max-width:640px){
  .nav-links{gap:8px;font-size:14px}
  .hero{padding:28px 14px}
}