:root {
  --bg-main:#0b0f14;
  --bg-section:#111827;
  --bg-card:#161d29;
  --text-main:#e5e7eb;
  --text-muted:#9ca3af;
  --accent:#38bdf8;
  --border:white;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Segoe UI,sans-serif}

body{background:var(--bg-main);color:var(--text-main);line-height:1.7}

.container{width:90%;max-width:1200px;margin:auto}
.section{padding:90px 0}
.bg-light{background:var(--bg-section)}

.section-title{font-size:38px;margin-bottom:18px}
.section-text{color:var(--text-muted);font-size:18px}

.header{position:fixed;width:100%;background:rgba(11,15,20,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:10}
.header .container{display:flex;justify-content:space-between;align-items:center;padding:16px 0}

.logo{font-size:24px;font-weight:700}
.logo span{color:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.6}}

nav a{margin-left:28px;color:var(--text-muted);text-decoration:none}
nav a:hover{color:var(--accent)}

.hero{min-height:100vh;display:flex;align-items:center;padding-top:120px}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px}
.hero-content h1{font-size:52px;margin-bottom:22px}
.hero-content p{font-size:19px;color:var(--text-muted)}
.hero-btns{margin-top:36px}

.btn{padding:14px 34px;border-radius:999px;text-decoration:none;font-weight:600;transition:.3s}
.primary{background:var(--accent);color:#001018}
.outline{border:1px solid var(--border);color:var(--text-main)}
.outline:hover{border-color:var(--accent);color:var(--accent)}

.code-box{background:#020617;padding:28px;border-radius:18px;border:1px solid var(--border)}

.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px}
.about-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.about-card{background:var(--bg-card);padding:22px;border-radius:16px;border:1px solid var(--border);font-weight:600}

.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.skill-card{background:var(--bg-card);padding:22px;border-radius:16px;border:1px solid var(--border);text-align:center}

.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.project-card{background:var(--bg-card);padding:26px;border-radius:18px;border:1px solid var(--border)}
.project-card a{color:var(--accent);font-weight:600;text-decoration:none}
.project-card p{margin-top:10px;color:var(--text-muted);font-size:15px}

.timeline-item{margin-bottom:40px}
.timeline-item span{color:var(--accent);font-size:14px;font-weight:600}

.contact-section{padding:110px 0;background:radial-gradient(circle at top,#0ea5e9,#020617);text-align:center}
.contact-actions{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.contact-btn{background:#fff;color:#020617}
.linkedin-btn{border:2px solid #fff;color:#fff}
.experience-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.experience-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.contact-section h2 {
  font-size: 42px;
  margin-bottom: 18px;
}

.contact-section p {
  margin-bottom: 50px; /* 👈 KEY FIX */
  font-size: 18px;
}

.contact-actions {
  margin-top: 0; /* remove earlier tight spacing */
}
.contact-actions .btn {
  min-width: 160px;
}

.exp-left span {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.exp-left h3 {
  margin: 10px 0 6px;
  font-size: 20px;
}

.exp-left .company {
  color: var(--text-muted);
  font-size: 15px;
}

.exp-right p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.product-card {
  background: var(--bg-card);
  padding: 28px;
  border-radius: 18px;
  border: 1px solid var(--border);
}

.product-card h3 {
  margin-bottom: 10px;
  font-size: 20px;
}


.product-card p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.product-card ul {
  margin-top: 12px;
  padding-left: 18px;
}

.product-card li {
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 6px;
}
.product-card a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.product-card a:hover {
  text-decoration: underline;
}
    
@media (max-width: 768px) {
  .experience-item {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.footer{text-align:center;padding:26px 0;background:#020617;color:var(--text-muted)}

@media(max-width:768px){
  .hero-grid,.about-grid{grid-template-columns:1fr}
  nav{display:none}
  .hero-content h1{font-size:38px}
}