:root {
  --bg: #f9f9f9;
  --text: #222;
  --primary: #007bff;
  --card: #fff;
  --shadow: rgba(0,0,0,0.1);
}
[data-theme="dark"] {
  --bg: #121212;
  --text: #f9f9f9;
  --primary: #4dabf7;
  --card: #1e1e1e;
  --shadow: rgba(0,0,0,0.6);
}
* {margin:0;padding:0;box-sizing:border-box;font-family:Arial, sans-serif;}
body {background:var(--bg);color:var(--text);transition:0.3s;}
header {display:flex;justify-content:space-between;align-items:center;
        padding:1rem 2rem;position:sticky;top:0;background:var(--bg);
        box-shadow:0 2px 8px var(--shadow);z-index:100;}
nav a {margin:0 1rem;text-decoration:none;color:var(--text);font-weight:bold;}
nav a.active, nav a:hover {color:var(--primary);}
.theme-toggle {cursor:pointer;font-size:1.2rem;}
section {padding:4rem 2rem;max-width:1000px;margin:auto;}
.hero {text-align:center;}
.hero img {width:120px;height:120px;border-radius:50%;margin-bottom:1rem;box-shadow:0 4px 12px var(--shadow);}
.projects {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;}
.card {background:var(--card);padding:1.5rem;border-radius:10px;box-shadow:0 4px 12px var(--shadow);transition:0.3s;}
.card:hover {transform:translateY(-5px);}
form {display:flex;flex-direction:column;gap:1rem;}
input,textarea {padding:0.8rem;border:1px solid #ccc;border-radius:5px;}
button {padding:0.8rem;border:none;background:var(--primary);color:white;font-weight:bold;
        border-radius:5px;cursor:pointer;transition:0.3s;}
button:hover {opacity:0.8;}
footer {text-align:center;padding:2rem;background:var(--card);margin-top:2rem;box-shadow:0 -2px 8px var(--shadow);}
.blog-list {display:grid;gap:1.5rem;}
.read-more {display:inline-block;margin-top:0.8rem;color:var(--primary);text-decoration:none;font-weight:bold;}
.read-more:hover {text-decoration:underline;}