:root {
  --color-bg: #050505;
  --color-surface: #111111;
  --color-text: #fafafa;
  --color-muted: #737373;
  --color-accent: #d946ef;
  --color-accent-soft: #701a75;
  --font-heading: 'Consolas', 'Courier New', monospace;
  --font-body: 'Segoe UI', system-ui, sans-serif;
  --radius-md: 4px;
  --shadow-soft: 0 0 20px rgba(217, 70, 239, 0.3);
}

* { margin:0; padding:0; box-sizing:border-box; }

html,body { height:100%; background-color:var(--color-bg); color:var(--color-text); font-family:var(--font-body); line-height:1.6; }

body { display:flex; flex-direction:column; min-height:100vh; }

header.hero {
  background: linear-gradient(135deg, var(--color-bg) 0%, #18181b 50%, var(--color-accent-soft) 100%);
  color:var(--color-text);
  text-align:center;
  padding:4rem 2rem;
  position:relative;
  overflow:hidden;
  animation: fade-in 1s ease-out;
}
header.hero h1 {
  font-family:var(--font-heading);
  font-size:2.8rem;
  margin-bottom:0.5rem;
}
header.hero p {
  font-size:1.2rem;
  color:var(--color-muted);
  margin-bottom:1.5rem;
}
header.hero .btn {
  display:inline-block;
  background:var(--color-accent);
  color:#fff;
  padding:0.75rem 1.5rem;
  border-radius:var(--radius-md);
  text-decoration:none;
  font-weight:600;
  transition:background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
header.hero .btn:hover {
  background:#b832dd;
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
}

main { flex:1; padding:2rem; }

.gallery h2, .bio h2, .contact h2 {
  font-family:var(--font-heading);
  margin-bottom:1rem;
  color:var(--color-accent);
}
.photo-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1rem;
  margin-top:1rem;
}
.photo-item {
  background:var(--color-surface);
  border:2px solid var(--color-accent-soft);
  border-radius:var(--radius-md);
  padding:1rem;
  text-align:center;
  color:var(--color-muted);
  transition:transform 0.2s ease, border-color 0.3s ease;
}
.photo-item:hover {
  transform:scale(1.03);
  border-color:var(--color-accent);
}
.bio p, .contact p { margin-bottom:1rem; }
.contact a { color:var(--color-accent); text-decoration:none; }
.contact a:hover { text-decoration:underline; }

footer {
  text-align:center;
  padding:1.5rem;
  font-size:0.9rem;
  color:var(--color-muted);
  border-top:1px solid var(--color-muted);
  margin-top:auto;
}

/* Animations */
@keyframes fade-in {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

/* Additional micro-interactions */
a { color:var(--color-accent); text-decoration:none; }
a:hover { text-decoration:underline; }