/* ════════════════════════════════════════
   DESIGN TOKENS & RESET
════════════════════════════════════════ */
:root {
  --ink:        #07080f;
  --ink-2:      #0c0f1e;
  --ink-3:      #111625;
  --cyan:       #00d4e8;
  --violet:     #7c3aed;
  --grad:       linear-gradient(135deg, #00d4e8 0%, #7c3aed 100%);
  --text-1:     #e4e8f5;
  --text-2:     #8896b3;
  --text-3:     #3d4a63;
  --glass:      rgba(255,255,255,0.04);
  --glass-b:    rgba(255,255,255,0.08);
  --glow-c:     rgba(0,212,232,0.25);
  --font-head:  'Tiro Bangla', serif;
  --font-body:  'Hind Siliguri', sans-serif;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --radius:     18px;
  --nav-h:      80px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-body); background: var(--ink); color: var(--text-1);
  line-height: 1.85; overflow-x: hidden; cursor: none;
}
img { display:block; max-width:100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--font-body); }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--violet); border-radius:3px; }
::selection { background: rgba(0,212,232,0.25); color:#fff; }

/* ════════════════════════════════════════
   CUSTOM CURSOR & LOADER
════════════════════════════════════════ */
#cur-dot {
  position:fixed; top:0; left:0; width:10px; height:10px;
  background: var(--cyan); border-radius:50%;
  pointer-events:none; z-index:99999; transform:translate(-50%,-50%);
  transition: transform .08s linear, width .25s, height .25s; mix-blend-mode: difference;
}
#cur-ring {
  position:fixed; top:0; left:0; width:38px; height:38px;
  border:1.5px solid rgba(0,212,232,0.55); border-radius:50%; pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%); transition: border-color .3s;
}
body.cursor-big #cur-dot { width:18px; height:18px; }
body.cursor-big #cur-ring { border-color: rgba(0,212,232,.9); width:50px; height:50px; }

#loader {
  position:fixed; inset:0; background:var(--ink); z-index:99997;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
}
.loader-logo {
  font-family:var(--font-head); font-size:3.5rem; font-weight:700;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px var(--glow-c)); animation: pulse-logo 1.1s ease-in-out infinite alternate;
}
@keyframes pulse-logo { from{opacity:.4} to{opacity:1} }
.loader-bar-wrap { width:200px; height:3px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.loader-bar { height:100%; width:0%; background:var(--grad); border-radius:2px; animation:load-bar 1.6s var(--ease-out) forwards; }
@keyframes load-bar { to{width:100%} }

/* ════════════════════════════════════════
   UTILITIES
════════════════════════════════════════ */
.container { max-width:1180px; margin:0 auto; padding:0 2rem; width: 100%; }
.grad-text { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.sec { padding:110px 0; }
.sec-label {
  display:inline-block; font-size:.78rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--cyan); font-weight:600; margin-bottom:.8rem; padding:.3rem .9rem;
  border:1px solid rgba(0,212,232,.25); border-radius:30px; background:rgba(0,212,232,.05);
}
.sec-title { font-family:var(--font-head); font-size:clamp(2rem,4vw,3rem); line-height:1.25; margin-bottom:.6rem; }
.sec-sub { color:var(--text-2); font-size:1.05rem; margin-bottom:3.5rem; }
.reveal { opacity:0; transform:translateY(48px); }

/* ════════════════════════════════════════
   NEW FLOATING NAVIGATION BAR (BUG-FREE)
════════════════════════════════════════ */
#nav {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(100% - 40px);
  max-width: 1180px;
  height: 75px;
  z-index: 9999;
  background: rgba(7, 8, 15, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateZ(0); /* এটি ব্রাউজারের গ্লিচ ও অর্ধেক হওয়ার সমস্যা সমাধান করবে */
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
}

#nav.scrolled {
  top: 12px;
  background: rgba(7, 8, 15, 0.96);
  border-color: rgba(0, 212, 232, 0.25);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 212, 232, 0.1);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-logo {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px var(--glow-c));
  transition: filter 0.3s;
}

.nav-logo:hover {
  filter: drop-shadow(0 0 20px var(--glow-c));
}

.nav-links { display: flex; align-items: center; gap: 0.5rem; }

.nav-links a {
  color: var(--text-2);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  position: relative;
  transition: color 0.25s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--grad);
  transform: translateX(-50%);
  transition: width 0.3s var(--ease-out);
}

.nav-links a:hover, .nav-links a.active { color: var(--cyan); }
.nav-links a:hover::after, .nav-links a.active::after { width: 60%; }

.ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.ham span { display: block; width: 24px; height: 2px; background: var(--cyan); border-radius: 2px; transition: .3s; }
.ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Responsive For Navbar */
@media(max-width: 768px) {
  #nav {
    top: 12px;
    height: 65px;
    width: calc(100% - 24px);
    border-radius: 40px;
  }
  .ham { display: flex; }
  .nav-links {
    position: fixed;
    top: -12px;
    right: -12px;
    width: 280px;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: rgba(7, 8, 15, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-b);
    padding: 2rem;
    transform: translateX(110%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 0;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.15rem; }
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
#hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; }
#pCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-grid {
  position:absolute; inset:0; z-index:1;
  background-image: linear-gradient(rgba(0,212,232,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,232,.025) 1px, transparent 1px);
  background-size:55px 55px;
}
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.12; z-index:1; }
.orb-a { width:520px; height:520px; background:var(--cyan); top:-160px; right:-120px; }
.orb-b { width:420px; height:420px; background:var(--violet); bottom:-120px; left:-100px; }

.hero-body { position:relative; z-index:2; padding-top:var(--nav-h); }
.hero-greet { display:inline-flex; align-items:center; gap:.7rem; color:var(--cyan); font-size:.85rem; letter-spacing:3px; font-weight:600; opacity:0; margin-bottom:1rem;}
.hero-greet-line { width:40px; height:1px; background:var(--cyan); }
.hero-name { font-family:var(--font-head); font-size:clamp(2.4rem,6vw,5rem); margin-bottom:1rem; font-weight:700; opacity:0; }
.hero-type { font-size:clamp(1.1rem,2.5vw,1.6rem); color:var(--text-2); min-height:2.4rem; margin-bottom:1.5rem; opacity:0; }
#typed { color:var(--cyan); }
.caret { display:inline-block; width:2px; height:1.1em; background:var(--cyan); vertical-align:middle; margin-left:2px; animation:blink .7s step-end infinite; }
@keyframes blink { 50%{opacity:0} }

.hero-desc { max-width:570px; color:var(--text-2); font-size:1.05rem; margin-bottom:2.8rem; line-height:2; opacity:0; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; opacity:0; }

.scroll-cue { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--text-3); font-size:.72rem; letter-spacing:2px; }
.scroll-cue-line { width:1px; height:48px; background:linear-gradient(to bottom, var(--cyan), transparent); animation:drop 1.8s ease-in-out infinite; }
@keyframes drop { 0% { transform:scaleY(0); transform-origin:top; } 50% { transform:scaleY(1); transform-origin:top; } 51% { transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

.btn { display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 2.2rem; border-radius:50px; font-size:.9rem; font-weight:600; transition:.3s; cursor:none; }
.btn-fill { background:var(--grad); color:#fff; border:none; box-shadow:0 4px 24px var(--glow-c); }
.btn-fill:hover { transform:translateY(-4px); box-shadow:0 10px 36px var(--glow-c); }
.btn-ghost { background:transparent; color:var(--cyan); border:1.5px solid rgba(0,212,232,.5); }
.btn-ghost:hover { background:rgba(0,212,232,.08); transform:translateY(-4px); box-shadow:0 8px 28px var(--glow-c); }

/* ════════════════════════════════════════
   ABOUT, SKILLS, PROJECTS, HOBBIES, CONTACT
════════════════════════════════════════ */
/* About */
#about { background:var(--ink-2); position:relative; }
#about::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--grad); opacity:.35; }
.about-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:5rem; align-items:center; }
.about-card { border-radius:24px; padding:2.5rem; background:var(--glass); border:1px solid var(--glass-b); text-align:center; position:relative; overflow:hidden;}
.av-icon { font-size:5.5rem; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1rem; }
.av-name { font-family:var(--font-head); font-size:1.4rem; font-weight:700; color:#fff; }
.av-role { color:var(--text-3); font-size:.9rem; margin-top:.2rem; }
.about-text p { color:var(--text-2); margin-bottom:1.1rem; font-size:1rem; }
.hl { color:var(--cyan); font-weight:600; }

/* Skills */
#skills { background:var(--ink); }
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:2rem; }
.skill-card { background:var(--glass); border:1px solid var(--glass-b); border-radius:var(--radius); padding:2rem; transition:.35s; }
.skill-card:hover { border-color:rgba(0,212,232,.3); transform:translateY(-6px); box-shadow:0 22px 55px rgba(0,0,0,.35), 0 0 35px var(--glow-c); }
.skill-cat { display:flex; align-items:center; gap:.7rem; font-size:1rem; font-weight:600; color:var(--cyan); margin-bottom:1.8rem; }
.sk-item { margin-bottom:1.4rem; }
.sk-meta { display:flex; justify-content:space-between; margin-bottom:.5rem; font-size:.87rem; }
.sk-track { height:7px; background:rgba(255,255,255,.07); border-radius:4px; position:relative; }
.sk-fill { height:100%; background:var(--grad); border-radius:4px; width:0%; transition:width 1.6s; }

/* Projects */
#projects { background:var(--ink-2); }
.proj-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:2rem; }
.proj-card { background:var(--glass); border:1px solid var(--glass-b); border-radius:var(--radius); overflow:hidden; transition:.3s; }
.proj-card:hover { border-color:rgba(0,212,232,.35); box-shadow:0 28px 64px rgba(0,0,0,.45), 0 0 40px var(--glow-c); }
.proj-thumb { width:100%; height:200px; display:flex; align-items:center; justify-content:center; position:relative; }
.proj-thumb-1 { background:linear-gradient(135deg,rgba(0,212,232,.12),rgba(124,58,237,.1)); }
.proj-thumb-2 { background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(0,212,232,.08)); }
.proj-thumb i { font-size:4.5rem; opacity:.6; color:var(--cyan); }
.proj-body { padding:1.8rem; }
.proj-name { font-size:1.25rem; font-weight:600; margin-bottom:.7rem; }
.proj-desc { color:var(--text-2); font-size:.93rem; margin-bottom:1.3rem; }
.proj-tech { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.4rem; }
.tech-chip { padding:.2rem .7rem; font-size:.72rem; border-radius:6px; background:rgba(124,58,237,.12); color:#c4b5fd; border:1px solid rgba(124,58,237,.28); }

/* Hobbies */
#hobbies { background:var(--ink); }
.hob-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.8rem; }
.hob-card { background:var(--glass); border:1px solid var(--glass-b); border-radius:var(--radius); padding:2.5rem 1.8rem; text-align:center; transition:.3s; }
.hob-card:hover { transform:translateY(-12px); border-color:rgba(0,212,232,.45); box-shadow:0 24px 55px rgba(0,0,0,.35), 0 0 28px var(--glow-c); }
.hob-ico-wrap { width:76px; height:76px; margin:0 auto 1.5rem; background:rgba(0,212,232,.08); border-radius:18px; display:flex; align-items:center; justify-content:center; }

/* Contact */
#contact { background:var(--ink-2); }
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:4.5rem; align-items:start; }
.cinfo { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; color:var(--text-2); }
.cinfo-ico { width:42px; height:42px; background:rgba(0,212,232,.08); border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--cyan); }
.c-form { background:rgba(255,255,255,.04); border-radius:24px; padding:2.5rem; border:1px solid rgba(255,255,255,.09); }
.f-group { margin-bottom:1.4rem; }
.f-label { display:block; font-size:.83rem; color:var(--text-2); margin-bottom:.5rem; }
.f-inp, .f-area { width:100%; padding:1rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:12px; color:#fff; font-family:var(--font-body); outline:none; transition:.3s; }
.f-inp:focus, .f-area:focus { border-color:var(--cyan); }
.f-area { min-height:130px; resize:vertical; }
.f-btn { width:100%; padding:1rem; background:var(--grad); color:#fff; border:none; border-radius:12px; cursor:none; font-weight:600; transition:.3s; }
.f-btn:hover { box-shadow:0 10px 36px var(--glow-c); }
.f-msg { display:none; margin-top:1rem; padding:.8rem; border-radius:10px; text-align:center; font-size:.9rem; }
.f-msg.ok { background:rgba(0,255,127,.08); color:#4ade80; border:1px solid rgba(0,255,127,.25); }
.f-msg.err { background:rgba(255,80,80,.08); color:#f87171; border:1px solid rgba(255,80,80,.25); }

/* Footer */
footer { background:var(--ink); padding:3.5rem 0; text-align:center; border-top:1px solid rgba(255,255,255,.06); }
.foot-logo { font-family:var(--font-head); font-size:2.4rem; font-weight:700; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.foot-role { color:var(--text-2); margin-top:.5rem; margin-bottom:1.5rem; }

/* Responsive */
@media(max-width:900px){ .about-grid, .contact-grid { grid-template-columns:1fr; gap:3rem; } }
@media(max-width:640px){ body { cursor:auto; } #cur-dot, #cur-ring { display:none; } .sec { padding:80px 0; } .hob-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .hob-grid { grid-template-columns:1fr; } }