:root{
  --primary:#1E3A8A;
  --secondary:#3B82F6;
  --accent:#F97316;
  --text:#111827;
  --muted:#4B5563;
  --bg:#F9FAFB;
}

/* Global Styles */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,#E0E7FF 0%,#F9FAFB 50%,#E0F2FE 100%);
  min-height:100vh;
  line-height:1.6;
}

/* Container */
.container{max-width:1100px;margin:auto;padding:20px}

/* Header */
.site-header{background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(0,0,0,0.05)}
.header-inner{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px}
.logo{background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;font-weight:700;border-radius:10px;padding:10px 14px}
.nav a{margin:0 10px;color:var(--muted);text-decoration:none;font-weight:500}
.nav a.btn.small{padding:8px 12px;border:1px solid var(--primary);border-radius:8px;color:var(--primary)}

/* Hero */
.hero{padding:60px 0}
.hero-grid{display:grid;grid-template-columns:1fr 350px;align-items:center;gap:30px}
.headline{font-family:Poppins,sans-serif;font-size:42px;color:var(--primary)}
.subheadline{font-size:20px;color:var(--muted);margin:8px 0}
.lead{color:var(--text);margin:12px 0 18px}
.cursor{color:var(--primary);font-weight:bold}
.hero-ctas .btn{margin-right:10px}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:600;text-decoration:none}
.btn.primary{background:var(--primary);color:white}
.btn.primary:hover{background:var(--secondary)}
.btn.outline{border:2px solid var(--accent);color:var(--accent)}
.btn.outline:hover{background:var(--accent);color:white}
.quick-links{margin-top:10px;font-size:14px}
.quick-links a{color:var(--primary);text-decoration:none}

/* Hero Image */
.hero-image.profile{
  border-radius:50%;
  width:260px;
  height:260px;
  object-fit:cover;
  display:block;
  margin:auto;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

/* Sections */
.section{padding:60px 0}
.section-title{font-family:Poppins,sans-serif;font-size:26px;margin-bottom:20px;color:var(--primary)}
.bg-light{background:rgba(255,255,255,0.6)}

/* Skills */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.skill-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.skill-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.skill-card h4 {
  margin: 10px 0 6px;
  color: var(--primary);
  font-family: Poppins, sans-serif;
}

.skill-card p {
  color: var(--muted);
  font-size: 14px;
}

.skill-icon {
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 8px;
}

/* Projects */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px; margin-bottom:5%}
.project-card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,0.05);transition:transform .2s}
.project-card:hover{transform:translateY(-5px)}
.project-thumb{width:100%;height:160px;object-fit:cover}
.project-body{padding:14px}
.project-body h5{color:var(--primary);margin-bottom:6px}
.meta{font-size:13px;color:var(--muted)}

/* Certifications */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 5%;
}

.cert-card {
  background: white;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform .2s;
}

.cert-card:hover {
  transform: translateY(-5px);
}

.cert-card h5 {
  color: var(--primary);
  margin: 8px 0 4px;
}

.cert-card p {
  color: var(--muted);
  font-size: 14px;
}

/* Certification Images */
.cert-image {
  width: 70%;
  height: 70%;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.cert-small-logo {
  width: 80px;
  height: auto;
  display: block;
  margin: 0 auto 10px auto;
}


/* Contact */
.contact-links a{color:var(--primary);text-decoration:none;font-weight:500}

/* Footer */
.site-footer{background:rgba(255,255,255,0.8);text-align:center;padding:14px 0;border-top:1px solid rgba(0,0,0,0.05);color:var(--muted)}

/* Responsive */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-image.profile{margin-top:20px}
}

/* FAQ Section */
.faq-intro {
  color: var(--muted);
  margin-bottom: 20px;
  font-size: 16px;
}

.faq-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question:hover {
  background: rgba(62, 91, 255, 0.06);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 18px;
  background: #f9f9f9;
}

.faq-answer p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  margin: 10px 0 16px;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 10px 18px;
}