/* Professional Portfolio — New Theme (CSS only update) */

:root{
  --bg:#f8f9fb;
  --card:#ffffff;
  --muted:#5a6a85;
  --accent:#ff6b6b;
  --accent-secondary:#ffd93d;
  --glass: rgba(0,0,0,0.04);
  --max-width:1100px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, sans-serif;
  background:linear-gradient(180deg,var(--bg),#e9edf3 120%);
  color:#1c1f26;
  line-height:1.6;
  padding:32px 20px;
  display:flex;
  justify-content:center;
}
.container{width:100%;max-width:var(--max-width)}

/* Header */
header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-secondary));display:grid;place-items:center;font-weight:800;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.1)}
.name{font-weight:700;color:#222}
.subtitle{font-size:12px;color:var(--muted)}
nav{display:flex;gap:14px;align-items:center}
nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;font-size:14px}
nav a:hover{color:#000;background:var(--glass)}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent-secondary));color:#fff;padding:9px 14px;border-radius:10px;font-weight:700;text-decoration:none}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:center;margin-bottom:36px;background:#fff;padding:28px;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.08)}
.intro h1{font-size:clamp(26px,4.2vw,40px);margin:0 0 10px;color:#111}
.lead{color:var(--muted);margin:0 0 18px;font-size:15px}
.actions{display:flex;gap:12px}
.btn{border:1px solid rgba(0,0,0,0.08);padding:10px 14px;border-radius:10px;text-decoration:none;color:#111;font-weight:700;background:#fff;transition:0.2s}
.btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.secondary{background:transparent;color:var(--muted)}

.profile-card{background:#fafafa;border-radius:14px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.avatar{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-secondary));display:grid;place-items:center;font-weight:800;font-size:36px;color:#fff}
.meta{text-align:center}
.place{color:var(--muted);font-size:14px}

/* Sections */
section{margin-bottom:28px}
h2{margin:0 0 16px;font-size:22px;color:#222}
.grid{display:grid;gap:18px}

/* Projects */
.projects{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 6px 20px rgba(0,0,0,0.06)}
.card h3{margin:0 0 8px;color:#111}
.card p{margin:0;color:var(--muted);font-size:14px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{font-size:12px;padding:6px 8px;border-radius:999px;background:rgba(0,0,0,0.04);color:var(--muted)}

/* Skills */
.skills{grid-template-columns:repeat(2,1fr)}
.skill{display:flex;flex-direction:column;gap:8px}
.skill-head{display:flex;justify-content:space-between;align-items:center;color:#111}
.bar{height:10px;background:rgba(0,0,0,0.06);border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-secondary))}

/* Contact */
.contact-grid{grid-template-columns:1fr 380px}
form{display:flex;flex-direction:column;gap:10px}
input,textarea{background:#fff;border:1px solid rgba(0,0,0,0.08);padding:10px;border-radius:10px;color:#111;font-size:14px}
textarea{min-height:120px;resize:vertical}
.form-actions{display:flex;gap:10px;margin-top:8px}
.contact-list{list-style:none;padding:0;margin:12px 0;color:var(--muted)}
.socials{display:flex;gap:8px;margin-top:8px}

/* Footer */
footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;padding:12px 8px}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .projects{grid-template-columns:repeat(2,1fr)}
  .skills{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{padding:18px}
  .projects{grid-template-columns:1fr}
  nav{display:none}
  header{align-items:flex-start;flex-direction:column;gap:12px}
  .avatar{width:100px;height:100px}
}