/* ========== base ========== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --bg-1: #06070a;
  --bg-2: #0b1220;
  --card: #0f1724;
  --muted: #94a3b8;
  --accent-grad: linear-gradient(90deg,#6366f1,#7c3aed);
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,var(--bg-2),#000 60%);
  color:#eef2ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}

/* progress bar */
#progress{
  position:fixed;left:0;right:0;top:0;height:4px;z-index:9999;background:transparent;
}
#progress-bar{
  height:100%;width:0;background:linear-gradient(90deg,#7c3aed,#5eead4);
  box-shadow:0 0 12px rgba(124,58,237,0.45);
  transition:width 0.12s linear;
}

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

/* header */
.site-header{
  position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(6,7,10,0.6),rgba(6,7,10,0.35));
  backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:12px;align-items:center}
.logo-photo{width:48px;height:48px;border-radius:9999px;object-fit:cover;border:2px solid rgba(99,102,241,0.85)}
.brand-text .name{font-weight:600}
.brand-text .role{font-size:0.82rem;color:var(--muted)}

/* nav */
.nav { display:flex; align-items:center; gap:10px; }
.nav a{margin-left:8px;color:rgba(226,232,240,0.85);text-decoration:none;font-size:0.95rem}
.nav a:hover{color:#fff}
.btn{display:inline-block;padding:8px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.btn.gradient{background:var(--accent-grad);color:#fff;box-shadow:0 6px 18px rgba(99,102,241,0.12)}
.btn.outline{border:1px solid rgba(255,255,255,0.06);background:transparent}

/* small CV button in header */
.cv-header{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:36px;
  font-size:14px;
  border-radius:8px;
  background:rgba(255,255,255,0.03);
  color:#fff;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease;
  margin-left:8px;
  border:1px solid rgba(255,255,255,0.04);
}
.cv-header:hover{ transform:translateY(-4px); background:linear-gradient(90deg,#6366f1,#7c3aed); }

/* hero */
.hero{position:relative;overflow:hidden;padding:80px 0 40px}
.hero-bg{
  position:absolute;inset:0;background-image:radial-gradient(circle at 10% 20%, rgba(124,58,237,0.08), transparent 8%), radial-gradient(circle at 90% 80%, rgba(34,211,238,0.03), transparent 10%);
  transform:translateZ(0);pointer-events:none;
}
.hero-inner{display:flex;gap:40px;align-items:center;justify-content:space-between}
.hero-left{flex:1;max-width:64%}
.hero-right{flex:0 0 280px;display:flex;justify-content:center;align-items:center}

/* avatar frame */
.avatar-frame{width:220px;height:220px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));box-shadow:0 10px 40px rgba(2,6,23,0.6);display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.avatar-frame img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-frame:hover{transform:translateY(-8px) rotate(-1deg)}

/* hero text */
h1{font-size:2.05rem;margin:0 0 12px}
.lead{color:var(--muted);font-size:1.03rem;max-width:70%}
.hero-actions{margin-top:18px;display:flex;gap:12px}
.chips{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,0.03);padding:6px 10px;border-radius:999px;font-size:0.85rem;color:var(--muted)}

/* main grid */
.main-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;padding:40px 0}

/* content */
.content h2{margin-top:0;font-size:1.3rem}
.content p{color:var(--muted);line-height:1.6}
.card-grid{display:flex;gap:16px;margin-top:18px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.6);flex:1;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(2,6,23,0.7)}

/* projects */
.projects{margin-top:28px}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:12px}
.project-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s}
.project-card:hover{transform:translateY(-8px);box-shadow:0 18px 50px rgba(2,6,23,0.6)}
.tags{margin-top:12px;display:flex;gap:8px}
.tags span{background:rgba(99,102,241,0.12);color:#c7cbff;padding:6px 8px;border-radius:8px;font-size:0.78rem}

/* sidebar panels */
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);margin-bottom:16px}
.panel h3{margin-top:0}
.skill-list{list-style:none;padding-left:0;color:var(--muted);line-height:1.65}
.skill-list li::before{content:"•";color:#7c3aed;margin-right:8px}
.metrics{display:flex;gap:12px;margin-top:12px}
.metric{flex:1;background:rgba(255,255,255,0.02);padding:10px;border-radius:10px;text-align:center}
.metric .big{font-weight:700;font-size:1.4rem}
.available p{color:var(--muted);margin:6px 0 0}

/* contact */
.contact-links{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.contact-links a{display:inline-block;padding:10px;border-radius:8px;text-align:center;color:#fff;background:linear-gradient(90deg,#6366f1,#7c3aed);text-decoration:none}
.contact-links a:hover{transform:scale(1.03)}

/* cv download + resume preview */
.cv-download{margin-top:12px}
.cv-download .btn{padding:10px 16px;border-radius:10px}
.resume-preview{margin-top:12px;background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;color:var(--muted)}
.resume-preview ul{list-style:none;padding-left:0}
.resume-preview li{margin-bottom:8px}

/* footer */
.site-footer{padding:26px 0;border-top:1px solid rgba(255,255,255,0.02);text-align:center;color:var(--muted);margin-top:40px}

/* reveal animations (initial -> in-view) */
.reveal{opacity:0;transform:translateY(18px) scale(.995);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.12s}
.reveal.delay-2{transition-delay:.24s}

/* responsive */
@media (max-width: 980px){
  .hero-inner{flex-direction:column-reverse;gap:28px}
  .hero-left{max-width:100%}
  .lead{max-width:100%}
  .main-grid{grid-template-columns:1fr}
  .avatar-frame{width:180px;height:180px}
  .hero-right{order:0}
  .brand-text{display:none}
  .nav{display:none}
}

/* mobile smaller devices: avatar 160px and header CV button smaller */
@media (max-width: 480px) {
  .avatar-frame{width:160px;height:160px}
  .logo-photo{width:40px;height:40px}
  .cv-header{width:40px;height:34px;font-size:13px}
  .header-inner{padding:8px 0}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal, #progress-bar, .avatar-frame:hover, .project-card, .card{transition:none}
}