/* Basic reset and layout */
:root{
  --bg: #ffffff;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #0f172a;
  --accent: #0ea5a4;
  --glass: rgba(15,23,42,0.04);
  --radius: 12px;
  --shadow: 0 6px 20px rgba(2,6,23,0.06);
}
[data-theme="dark"]{
  --bg: #071024;
  --card: #0b1320;
  --muted: #94a3b8;
  --text: #e6eef8;
  --accent: #22d3ee;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 6px 24px rgba(2,6,23,0.6);
}

*{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;
  transition:background .28s ease,color .28s ease;
}
.container{max-width:1100px;margin:0 auto;padding:2rem}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.logo{margin:0;font-weight:700}
.nav a{margin-left:1rem;color:var(--muted);text-decoration:none;font-weight:600}

.theme-toggle{
  background:var(--glass);
  color:var(--text);
  border:0;padding:.5rem;border-radius:10px;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;transition:transform .18s ease,background .18s ease, color .18s ease;
}
.theme-toggle:active{transform:scale(.96)}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* Hero */
.hero{padding:3rem 0;text-align:center}
.hero h2{font-size:1.8rem;margin:.2rem 0}
.lead{color:var(--muted);max-width:60ch;margin:0 auto}

/* Projects grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{background:var(--card);padding:1.25rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,0.03);transition:transform .28s cubic-bezier(.2,.9,.24,1),box-shadow .22s ease,opacity .36s ease;opacity:0;transform:translateY(10px);display:flex;flex-direction:column;justify-content:space-between;min-height:200px}
.card.in-view{opacity:1;transform:translateY(0)}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 34px rgba(2,6,23,0.12)}
.card h4{margin:0 0 .5rem}
.btn{display:inline-block;padding:.45rem .8rem;border-radius:8px;background:linear-gradient(90deg,var(--accent),#7c3aed);color:white;text-decoration:none;font-weight:600;align-self:flex-start;margin-top:0}

@media (max-width:640px){
  .card{min-height:0}
}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,0.04);padding:2rem 0;margin-top:3rem;color:var(--muted)}

/* Responsive */
@media (max-width:640px){
  .header-inner{padding:0 0}
  .container{padding:1rem}
  .nav{display:none}
}

/* Reduced motion preference */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}