:root{
  --bg1: #0f222a;
  --gradient-start: #5751d3;
  --gradient-mid: lab(100% 0.01 -0.01 / 0.108);
  --gradient-end: #ffffff0a;
  --card-bg: rgba(103, 164, 255, 0.492);
  --muted: rgba(69, 124, 192, 0.903);
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:hsla(213, 81%, 30%, 0.732);
  background:
    linear-gradient(180deg,rgb(187, 232, 254) 0%, rgb(138, 216, 255) 100%);
  padding:32px 16px;
}

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

/* Header / Navbar */
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}

/* ------------------
   Logo: এখানে মূল পরিবর্তন:
   - img এলিমেন্টকে প্রদর্শন করবো যদি masudranam.png থাকে
   - নইলে logo-fallback দেখবে (যেটা আগের gradient স্টাইলকে ধরে রাখে)
   ------------------ */
.logo{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;position:relative;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover;display:block}
.logo-fallback{position:absolute;inset:0;display:grid;place-items:center;width: px;}

/* Desktop nav */
nav.desktop{display:flex;gap:18px;align-items:center}
nav.desktop a{color:inherit;text-decoration:none;padding:8px 12px;border-radius:8px;transition:all .22s ease;font-weight:600;opacity:.95}
nav.desktop a:hover{transform:translateY(-2px);background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));box-shadow: 0 6px 18px rgb(34, 237, 255);}

/* CTA (মূল গ্রেডিয়েন্ট + শ্যাডো) — আগের মতোই রাখা হয়েছে */
.cta{
  background:linear-gradient(90deg,var(--gradient-mid),var(--gradient-end));
  color:white;padding:10px 14px;border-radius:10px;
  box-shadow: 0 2px 10px rgba(2, 2, 2, 0.237);
  text-decoration:none;font-weight:700;
  display:inline-flex;gap:10px;align-items:center;
}
.cta.secondary{
  background:transparent;border:1px solid rgba(255, 255, 255, 0.268);font-weight:600;color:inherit;
}
.cta.small{padding:8px 12px;font-size:0.95rem;border-radius:8px}

/* Hamburger (তুমি বলেছিলে এটা নষ্ট হয়েছে — তাই মূল স্টাইল ফিরিয়ে দেয়া হয়েছে) */
.hamburger{
  display:none;width:46px;height:46px;border-radius:10px;background:var(--card-bg);
  border:1px solid rgba(255, 255, 255, 0.758);
  display:grid;place-items:center;cursor:pointer;
  backdrop-filter: blur(6px);
}

/* Hero */
.hero{display:flex;gap:28px;align-items:center;margin-bottom:28px;padding:22px;border-radius:14px;background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255, 255, 255, 0.097));border: 1px solid rgba(255,255,255,0.03);box-shadow: 0 10px 30px rgba(14, 31, 79, 0.179)}
.hero .left{flex:1;min-width:260px}
.hero h2{margin:0;font-size:1.6rem}
.hero p{margin:8px 0 16px;color:var(--muted)}

/* Profile image: hero */
.profile{width:96px;height:96px;border-radius:14px;overflow:hidden;background:linear-gradient(rgba(255, 255, 255, 0.019));display:grid;place-items:center;}
.profile img{width:100%;height:100%;object-fit:cover;display:block}
/* Sections */
section{margin-bottom:30px}
h3.section-title{margin:0 0 16px;font-size:1.15rem}

/* Cards */
.cards{display:grid;grid-template-columns: repeat(3,1fr);gap:16px}
.card{background:var(--card-bg); padding:18px;border-radius:12px;border:1px solid rgba(255, 255, 255, 0.84);transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .2s;cursor:pointer; position:relative; overflow:visible;}
.card:hover{ transform:translateY(-8px) scale(1.01); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.701) }
.card .year{font-size:0.9rem;opacity:0.9}
.card .inst{font-weight:700;margin-top:8px}
.card .gpa{margin-top:8px;font-weight:600;color:#e9f2ff}

/* Detail panel (অপ্রিবর্তিত) */
.detail-panel{position:fixed;top:50%;transform:translateY(-50%);width:min(860px,92%);max-width:900px;padding:20px;border-radius:14px;background:linear-gradient(180deg, rgb(41, 213, 219), rgb(32, 183, 233));border:1px solid rgb(255, 255, 255);box-shadow: 0 30px 80px rgba(55, 95, 204, 0.8);display:flex;gap:18px;align-items:flex-start;z-index:1200;opacity:0;pointer-events:none;}
.detail-panel.show{opacity:1;pointer-events:auto}
.detail-panel .close-btn{position:absolute;right:14px;top:14px;border:none;background:none;color:rgba(255,255,255,0.75);cursor:pointer;font-weight:700;font-size:18px}
.detail-panel.slide-from-left{left:4%; transform: translate(-12%, -50%); transition:transform .45s cubic-bezier(.2,.9,.25,1), opacity .33s;}
.detail-panel.slide-from-left.show{ transform: translate(0%, -50%); }
.detail-panel.slide-from-right{right:4%; left:auto; transform: translate(12%, -50%); transition:transform .45s cubic-bezier(.2,.9,.25,1), opacity .33s;}
.detail-panel.slide-from-right.show{ transform: translate(0%, -50%); }

/* Progress bars (Diploma) */
.progress-row{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.prog{background: rgba(255,255,255,0.03); border-radius:12px; padding:8px; display:flex;align-items:center;gap:12px;}
.prog .label{width:150px;font-weight:600}
.bar{flex:1;background:rgba(255,255,255,0.02);height:14px;border-radius:10px;overflow:hidden}
.bar > i{display:block;height:100%; width:0%; border-radius:10px; background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end)); transition:width .9s cubic-bezier(.16,.84,.48,1);}
.pct{min-width:44px;text-align:right;font-weight:700}

/* Diploma progress section: collapsed behavior */
.progress-section{
  overflow:hidden;
  transition: max-height 0.6s cubic-bezier(.2,.9,.2,1), opacity 0.35s ease, padding 0.35s ease, margin 0.35s ease;
  max-height: 1200px;
  opacity: 1;
  padding: 18px;
  margin-top: 12px;
  border-radius:12px;
  border:1px solid rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(31, 182, 220, 0.641), rgba(9, 188, 253, 0.608));
}
.progress-section.collapsed{
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

/* Skills */
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.skill{background:var(--card-bg);padding:12px;border-radius:10px;text-align:center}
.skill .name{font-weight:700;margin-top:8px;font-size:0.9rem}

/* Drawer (mobile) kept same as original */
.drawer-backdrop{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:flex-start;padding:24px;background:rgba(2,6,23,0.45);backdrop-filter: blur(6px);}
.drawer{width:320px;max-width:92%;height:100%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,0.03);transform:translateX(-110%); transition:transform .36s cubic-bezier(.2,.9,.2,1);}
.drawer.show{ transform:translateX(0) }
.drawer a{display:block;padding:12px 8px;border-radius:8px;text-decoration:none;color:inherit;font-weight:700}
.drawer .close-d{margin-bottom:8px;display:flex;justify-content:flex-end}
.drawer-close-btn{background:none;border:none;color:rgba(255,255,255,0.8);font-weight:700;cursor:pointer}

/* Responsive */
@media (max-width:980px){
  .cards{ grid-template-columns: repeat(2,1fr) }
  nav.desktop{display:none}
  .hamburger{display:grid}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  .hero{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .cards{ grid-template-columns:1fr }
  .skills-grid{grid-template-columns:1fr}
  .profile{width:84px;height:84px}
}

/* Fade-in utility */
.fade-in{opacity:0; transform: translateY(18px); transition:all .6s cubic-bezier(.16,.84,.48,1)}
.fade-in.visible{opacity:1; transform:none}