/* Minimal + professional stylesheet
   Blue-gray base with green accent */
:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#24313a;
  --muted:#6b7880;
  --bluegray:#2f4350;
  --accent:#2ecc71;
  --container-width:1100px;
  --radius:10px;
  --max-width-mobile:960px;
  --transition:200ms ease;
  font-synthesis: none;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Layout */
.container{max-width:var(--container-width);margin:0 auto;padding:40px 20px}
.nav{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));backdrop-filter: blur(4px);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,0.04)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:600;color:var(--bluegray);text-decoration:none;font-size:1.05rem}
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:6px;transition:var(--transition)}
.nav-links a:hover{color:var(--bluegray);background:rgba(47,67,80,0.03)}
.nav-toggle{display:none;background:none;border:0;font-size:1.2rem;padding:8px}

/* Hero */
.hero{padding:80px 0;background:transparent}
.hero-inner{text-align:left;padding:40px 20px;border-radius:12px}
.hero h1{font-size:2.1rem;margin:0 0 8px;color:var(--bluegray)}
.tagline{margin:0 0 18px;color:var(--muted);max-width:60ch}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--accent);color:white;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(46,204,113,0.12);transition:transform var(--transition)}
.btn:hover{transform:translateY(-2px)}

/* Sections */
h2{color:var(--bluegray);margin-top:0}
.preview{padding:36px 20px;margin-top:28px;background:transparent}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(31,45,50,0.05)}
.project-card{background:var(--card);padding:14px;border-radius:8px;border:1px solid rgba(0,0,0,0.03)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card{background:var(--card);padding:18px;border-radius:10px}
.muted{color:var(--muted)}

/* Footer */
.site-footer{padding:28px 0;margin-top:42px;border-top:1px solid rgba(0,0,0,0.04);background:transparent}
.site-footer p{margin:0;color:var(--muted);font-size:0.95rem}

/* Responsive */
@media (max-width:800px){
  .nav-links{display:none;flex-direction:column;background:var(--card);position:absolute;right:20px;top:64px;padding:12px;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.08)}
  .nav-toggle{display:block}
  .container{padding:28px 16px}
  .contact-grid{grid-template-columns:1fr}
}

/* Fade-in animations (used by scripts.js) */
.fade-up{opacity:0;transform:translateY(10px);transition:opacity 520ms ease, transform 520ms ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.link{display:inline-block;margin-top:12px;color:var(--bluegray);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}