*{box-sizing:border-box} :root{--bg:#0f1724;--card:#0b1220;--muted:#94a3b8;--accent:#7c3aed;--glass:rgba(255,255,255,0.04)}html,body{height:100%}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.5;background:linear-gradient(180deg,#071024 0%, #071a2a 60%);color:#e6eef8;min-height:100vh}a{color:var(--accent);text-decoration:none}img{max-width:100%;display:block;border-radius:8px}
.container{max-width:1100px;margin:0 auto;padding:28px}
.nav{position:sticky;top:0;backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(10,14,22,0.6), rgba(10,14,22,0.2));border-bottom:1px solid rgba(255,255,255,0.03);z-index:40}
.nav .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;letter-spacing:-0.5px}
.logo .dot{color:var(--accent);margin-left:6px}
nav a{margin-left:18px;color:var(--muted)}nav a.cta{background:linear-gradient(90deg,#7c3aed,#06b6d4);padding:8px 12px;border-radius:8px;color:white}
.hero{padding:60px 0}
.hero-inner{display:flex;gap:32px;align-items:center}
.hero-left{flex:1}
.title{font-size:42px;margin:0 0 12px}
.title .accent{background:linear-gradient(90deg,#7c3aed,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);margin:0 0 18px}
.btn{display:inline-block;padding:12px 18px;background:linear-gradient(90deg,#7c3aed,#06b6d4);border-radius:10px;color:white;margin-right:10px}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}
.hero-right{width:250px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03)}
.mockup img{height:240px;object-fit:cover;border-radius:10px}
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.section-title{font-size:28px;margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.experience{padding:18px;background:var(--card);border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.experience h3{margin:0 0 6px}
.experience .muted{font-size:13px;color:var(--muted);margin-bottom:12px}
.project img{height:150px;object-fit:cover}
.project .meta{margin-top:10px}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.footer{padding:26px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}
.particles-bg{position:fixed;inset:0;z-index:0}
main{position:relative;z-index:10}
.hero-inner, .grid, .dash-grid{position:relative}
@media (max-width:800px){.hero-inner{flex-direction:column}.hero-right{width:100%}.dash-grid{grid-template-columns:1fr}}
/* subtle card hover */
.experience:hover,.project:hover,.card:hover{transform:translateY(-6px);transition:transform 240ms cubic-bezier(.2,.9,.3,1)}
/* highlight before headings */
.section-title::before{content:"";display:block;width:48px;height:4px;border-radius:4px;background:linear-gradient(90deg,#7c3aed,#06b6d4);margin-bottom:12px}

/* KPI Section Styles */
.kpi-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.kpi-item {
  text-align: center;
  flex: 1;
  min-width: 200px;
}

.kpi-item h3 {
  margin: 10px 0 5px;
  font-size: 18px;
  color: white;
}

.star {
  position: relative;
  width: 7rem;
  height: 7rem;
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: glow 2s ease-in-out infinite alternate;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  color: white;
  font-weight: bold;
  z-index: 1;
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px #fff;
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #7c3aed, 0 0 40px #7c3aed;
  }
}

/* Keywords styles */
.keywords {
  margin-top: 12px;
}

.keyword {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 12px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.05);
}