:root {
  --bg: #f5f5f5;
  --text: #111;
  --card-bg: #fff;
  --card-shadow: rgba(0,0,0,0.12);
  --primary: #1e90ff;
}
body.dark {
  --bg: #0f0f0f;
  --text: #f2f2f2;
  --card-bg: #1a1a1a;
  --card-shadow: rgba(255,255,255,0.1);
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .5s, color .5s;
  scroll-behavior: smooth;
}
header {
  position: relative;
  width: 100%;
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(135deg, #1e90ff, #6a5acd);
}
header::before, header::after {
  content: '';
  position: absolute;
  width: 180%;
  height: 180%;
  top: -40%;
  left: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotateMagic 15s linear infinite;
  z-index: 0;
}
header::after {
  animation-duration: 20s;
}
@keyframes rotateMagic {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.profile-container {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  z-index: 2;
}
.profile-photo {
  width:100%;
  height:100%;
  border-radius:50%;
  border:4px solid #fff;
  object-fit:cover;
  box-shadow: 0 0 25px rgba(30,144,255,0.7);
  animation: pulseGlow 2s infinite;
  position: relative;
  z-index: 3;
}
.visualizer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.bar {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 6px;
  height: 70px;
  background: #fff;
  transform-origin: bottom center;
  animation: spinBars 2s linear infinite;
  opacity: 0.9;
}
.bar:nth-child(1) { transform: rotate(0deg) translateY(-90px); animation-delay: 0s; }
.bar:nth-child(2) { transform: rotate(30deg) translateY(-90px); animation-delay: 0.1s; }
.bar:nth-child(3) { transform: rotate(60deg) translateY(-90px); animation-delay: 0.2s; }
.bar:nth-child(4) { transform: rotate(90deg) translateY(-90px); animation-delay: 0.3s; }
.bar:nth-child(5) { transform: rotate(120deg) translateY(-90px); animation-delay: 0.4s; }
.bar:nth-child(6) { transform: rotate(150deg) translateY(-90px); animation-delay: 0.5s; }
.bar:nth-child(7) { transform: rotate(180deg) translateY(-90px); animation-delay: 0.6s; }
.bar:nth-child(8) { transform: rotate(210deg) translateY(-90px); animation-delay: 0.7s; }
.bar:nth-child(9) { transform: rotate(240deg) translateY(-90px); animation-delay: 0.8s; }
.bar:nth-child(10) { transform: rotate(270deg) translateY(-90px); animation-delay: 0.9s; }
.bar:nth-child(11) { transform: rotate(300deg) translateY(-90px); animation-delay: 1s; }
.bar:nth-child(12) { transform: rotate(330deg) translateY(-90px); animation-delay: 1.1s; }
@keyframes spinBars {
  0%, 100% { height: 70px; background: rgba(255,255,255,0.7); }
  50% { height: 95px; background: rgba(30,144,255,0.9); }
}
header .content {
  position: relative;
  z-index: 3;
  margin-bottom: 40px;
}
header h1 { margin:10px 0 0 0; font-size:3rem; animation: fadeDown 1s ease; }
header p.subtitle { margin-top:.5rem; font-size:1.2rem; animation: fadeUp 1s ease; }
@keyframes fadeDown { from {opacity:0; transform: translateY(-10px);} to {opacity:1; transform: translateY(0);} }
@keyframes fadeUp { from {opacity:0; transform: translateY(10px);} to {opacity:1; transform: translateY(0);} }
@keyframes pulseGlow {
  0% { box-shadow: 0 0 20px rgba(30,144,255,0.5); }
  50% { box-shadow: 0 0 35px rgba(30,144,255,0.9); }
  100% { box-shadow: 0 0 20px rgba(30,144,255,0.5); }
}
.toggle-btn { position: fixed; top: 15px; right: 15px; background: var(--text); color: var(--bg); border: none; padding: .6rem 1rem; border-radius: 6px; cursor: pointer; font-size: .85rem; z-index: 100; }
nav { position: sticky; top: 0; background: var(--bg); padding: .7rem 1rem; box-shadow: 0 3px 10px var(--card-shadow); display: flex; justify-content: center; gap: 2rem; backdrop-filter: blur(6px); z-index: 99; }
nav a { color: var(--text); text-decoration: none; font-weight: bold; opacity: .8; transition: .2s; }
nav a:hover { opacity: 1; color: var(--primary); }
section { padding: 3rem 1rem; max-width: 1100px; margin: auto; }
h2 { margin-bottom: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.card { background: var(--card-bg); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px var(--card-shadow); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px var(--card-shadow); }
.card img { width: 100%; height: 170px; object-fit: cover; }
.card-content { padding: 1rem; }
.btn { padding: .6rem 1rem; background: var(--text); color: var(--bg); border-radius: 6px; text-decoration: none; display: inline-block; transition: background .2s ease; }
.btn:hover { background: var(--primary); color: #fff; }
.skills { display: flex; flex-wrap: wrap; gap: 1rem; }
.skill { flex: 1 1 150px; background: var(--card-bg); padding: .8rem; border-radius: 8px; box-shadow: 0 3px 10px var(--card-shadow); }
.skill-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; margin-top: .3rem; }
.skill-bar span { display: block; height: 100%; background: var(--primary); }
form { display:flex; flex-direction:column; gap:.8rem; max-width:500px; margin:auto; }
input, textarea { padding:.6rem; border-radius:6px; border:1px solid #ccc; width:100%; }
button.submit { padding:.6rem 1rem; background: var(--primary); border:none; color:#fff; border-radius:6px; cursor:pointer; }
footer { text-align:center; padding:2rem 1rem; opacity:.7; }
.social-icons a { font-size: 2rem; color: #fff; transition: transform .2s, color .2s; }
.social-icons a:hover { transform: scale(1.2); color: var(--primary); }