/* ===========================
   RESET & BASE
=========================== */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg-main:#020617;
  --bg-section:#020617;
  --bg-card:#020617;
  --bg-hero-from:#0f172a;
  --bg-hero-to:#1e293b;
  --text-main:#e5e7eb;
  --text-dim:#9ca3af;
  --border-soft:rgba(148,163,184,.35);
  --accent-blue:#38bdf8;
  --accent-green:#22c55e;
  --accent-purple:#a855f7;
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  background:var(--bg-main);
  color:var(--text-main);
  line-height:1.6;
  cursor:none;
}

a{text-decoration:none;color:inherit}

.container{max-width:1120px;margin:0 auto;padding:0 1.4rem}

/* ===========================
   CUSTOM CURSOR
=========================== */
.cursor-dot{
  position:fixed;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid rgba(148,163,184,.8);
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:999;
  transform:translate(-999px,-999px);
  transition:transform .12s ease-out,width .15s,height .15s,border-color .15s;
}
/* cursor off only on blog pages */
body.blog-page .cursor-dot{
  display:none !important;
}

.cursor-hover{
  width:18px;
  height:18px;
  border-color:var(--accent-blue);
}

/* ===========================
   NAVBAR
=========================== */
header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(18px);
  background:linear-gradient(to bottom,rgba(15,23,42,.95),rgba(15,23,42,.80));
  border-bottom:1px solid rgba(15,23,42,.9);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 0;
}

/* dev branding */
.nav-left{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-family:ui-monospace,Menlo,Consolas;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.95rem;
  font-weight:700;
  background:linear-gradient(to right,var(--accent-blue),var(--accent-green));
  -webkit-background-clip:text;
  color:transparent;
}
.nav-left::before{
  content:"</>";
  font-size:.9rem;
  color:var(--accent-green);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:1.5rem;
  font-size:.9rem;
  color:#cbd5f5;
}
.nav-links a{
  position:relative;
  padding-bottom:2px;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(to right,var(--accent-blue),var(--accent-purple));
  transition:.22s;
}
.nav-links a:hover::after{width:100%}

.nav-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
}

/* theme button */
.nav-theme-btn{
  font-size:.8rem;
  padding:.45rem .9rem;
}

/* mobile toggle */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.5);
  background:rgba(15,23,42,.7);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:16px;
  margin:0 auto;
  background:#e5e7eb;
  border-radius:999px;
  transition:.22s;
}
.nav-toggle.open span:first-child{
  transform:translateY(3px) rotate(45deg);
}
.nav-toggle.open span:last-child{
  transform:translateY(-3px) rotate(-45deg);
}

.mobile-nav{
  display:none;
  flex-direction:column;
  background:#020617;
  border-top:1px solid rgba(15,23,42,.9);
  border-bottom:1px solid rgba(15,23,42,.9);
}
.mobile-nav a{
  padding:.8rem 1.4rem;
  border-top:1px solid rgba(15,23,42,.85);
}
.mobile-nav.open{display:flex}

/* ===========================
   HERO
=========================== */
section{padding:4.5rem 0}

#hero{
  position:relative;
  padding:5rem 0 4rem;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 0 0,rgba(56,189,248,.18),transparent 55%),
    radial-gradient(circle at 100% 0,rgba(168,85,247,.25),transparent 55%),
    radial-gradient(circle at 50% 110%,rgba(56,189,248,.16),transparent 55%);
  opacity:.95;
  pointer-events:none;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 10% 0,rgba(56,189,248,.18),transparent 60%);
  animation:heroGlow 12s ease-in-out infinite alternate;
  opacity:.9;
}
@keyframes heroGlow{
  0%{transform:translate(-4%,0) scale(1);}
  100%{transform:translate(4%,4%) scale(1.08);}
}

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:3rem;
  align-items:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:.3rem .8rem;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.5);
  background:rgba(15,23,42,.75);
  color:#7dd3fc;
  font-size:.78rem;
}
.badge-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent-green);
  margin-right:.35rem;
  box-shadow:0 0 12px rgba(34,197,94,.9);
}

.hero-title{
  font-size:2.8rem;
  font-weight:700;
  line-height:1.15;
  margin:1.2rem 0 .6rem;
}
.hero-title span{
  background:linear-gradient(to right,var(--accent-blue),var(--accent-purple));
  -webkit-background-clip:text;
  color:transparent;
}
.hero-title-sub{
  font-size:2.1rem;
}
.hero-subtitle{
  color:#e5e7eb;
  max-width:34rem;
  font-size:.98rem;
  margin-bottom:2rem;
}

/* HERO BUTTONS */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.btn{
  padding:.7rem 1.4rem;
  border-radius:999px;
  font-size:.9rem;
  cursor:pointer;
  border:1px solid transparent;
  transition:.2s;
}
.btn-primary{
  background:linear-gradient(to right,var(--accent-blue),var(--accent-purple));
  color:#020617;
  font-weight:600;
}
.btn-primary:hover{
  transform:translateY(-1px);
  opacity:.96;
}
.btn-outline{
  border-color:rgba(148,163,184,.6);
  color:#e5e7eb;
  background:rgba(15,23,42,.6);
}
.btn-outline:hover{
  border-color:var(--accent-blue);
}

/* HERO AVATAR */
.hero-avatar-wrap{display:flex;justify-content:center}
.hero-avatar{
  position:relative;
  width:260px;
  height:260px;
  border-radius:30px;
  padding:4px;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));
  box-shadow:
    0 18px 55px rgba(15,23,42,.95),
    0 0 0 1px rgba(15,23,42,.9);
}
.hero-avatar-inner{
  width:100%;
  height:100%;
  border-radius:26px;
  overflow:hidden;
  background:#020617;
}
.hero-avatar-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-avatar-glow{
  position:absolute;
  inset:-18px;
  border-radius:40px;
  background:
    radial-gradient(circle at 0 0,rgba(56,189,248,.24),transparent 60%),
    radial-gradient(circle at 100% 30%,rgba(168,85,247,.26),transparent 60%);
  opacity:.65;
  filter:blur(16px);
  z-index:-1;
  animation:heroPulse 10s ease-in-out infinite alternate;
}
@keyframes heroPulse{
  0%{transform:scale(.98);opacity:.5}
  100%{transform:scale(1.05);opacity:.9}
}

/* ===========================
   SECTIONS
=========================== */
.section-header{
  text-align:center;
  margin-bottom:3rem;
}
.section-eyebrow{
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#818cf8;
}
.section-title{
  font-size:1.8rem;
  margin-top:.35rem;
}
.section-desc{
  max-width:36rem;
  margin:.4rem auto 0;
  color:var(--text-dim);
}

/* ABOUT */
.about-grid{
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:2rem;
}
.about-text p{margin-bottom:.9rem}
.about-list{
  list-style:none;
  color:#cbd5f5;
  font-size:.92rem;
}
.about-list li{margin-bottom:.45rem}

/* SKILLS */
.pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.pill{
  padding:.4rem .9rem;
  border-radius:.7rem;
  border:1px solid rgba(148,163,184,.5);
  background:#020617;
  font-size:.85rem;
}

/* PROJECTS & SERVICES CARDS */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.5rem;
}
.project-card{
  position:relative;
  background:#020617;
  border-radius:1rem;
  padding:1.4rem 1.4rem 1.3rem;
  border:1px solid rgba(148,163,184,.4);
  box-shadow:0 16px 40px rgba(15,23,42,.9);
  transition:transform .22s,box-shadow .22s,border-color .22s,background .22s;
}
.project-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent-blue);
  background:radial-gradient(circle at 0 0,rgba(56,189,248,.06),#020617);
}
.project-card-link{
  display:block;
  color:inherit;
}
.project-title{
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:.4rem;
}
.project-desc{
  font-size:.9rem;
  color:var(--text-dim);
  margin-bottom:.8rem;
}
.project-visit{
  font-size:.85rem;
  color:var(--accent-blue);
}
.project-thumb{
  width:100%;
  border-radius:.8rem;
  margin-bottom:.7rem;
}

/* BLOG meta */
.project-meta{
  font-size:.8rem;
  color:#9ca3af;
  margin-bottom:.3rem;
}

/* BLOG LIST */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.8rem;
  margin-top:2.5rem;
}

.blog-card{
  display:block;
  background:#020617;
  padding:1.6rem;
  border-radius:1rem;
  border:1px solid rgba(148,163,184,.3);
  box-shadow:0 16px 40px rgba(15,23,42,.9);
  transition:transform .22s,box-shadow .22s,border-color .22s,background .22s;
}

.blog-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent-blue);
  background:radial-gradient(circle at 0 0,rgba(56,189,248,.06),#020617);
}

.blog-card-title{
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:.4rem;
}

.blog-card-date{
  font-size:.85rem;
  color:#9ca3af;
  margin-bottom:.8rem;
}

.blog-card-excerpt{
  font-size:.9rem;
  color:var(--text-dim);
  margin-bottom:1rem;
}

.blog-card-read{
  font-size:.85rem;
  color:var(--accent-blue);
}


/* SERVICES small tweak */
.service-card{
  min-height:160px;
}

/* CONTACT */
.contact-card{
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:2rem;
  padding:2rem;
  border-radius:1.1rem;
  background:#020617;
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 16px 40px rgba(15,23,42,.9);
}
.contact-card a{color:var(--accent-blue)}
.admin-form{
  display:flex;
  flex-direction:column;
}

/* INPUTS */
.admin-form input,
.admin-form textarea{
  background:#020617;
  border-radius:.6rem;
  border:1px solid rgba(148,163,184,.5);
  padding:.55rem .75rem;
  color:#e5e7eb;
  font-size:.9rem;
}

/* FOOTER */
footer{
  text-align:center;
  padding:2rem 0;
  border-top:1px solid rgba(15,23,42,.9);
  color:#6b7280;
}

/* ==========================
   ADMIN PAGES
========================== */

.admin-body{background:#020617;color:#e5e7eb}

/* ADD THIS FIX */
.admin-body,
.admin-body *{
    cursor:auto !important;
}

/* ==========================
   ADMIN PAGES
========================== */

/* Admin এ cursor normal */
.admin-body,
.admin-body *{
  cursor:auto !important;
}

.admin-body{
  background:#020617;
  color:#e5e7eb;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  min-height:100vh;
}

/* Top bar */
.admin-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
  border-bottom:1px solid rgba(15,23,42,.9);
  background:#020617;
  position:sticky;
  top:0;
  z-index:30;
}
.admin-topbar h1{
  font-size:1.1rem;
  font-weight:600;
}

/* Layout */
.admin-wrapper{
  max-width:980px;
  margin:2rem auto;
  padding:0 1rem 3rem;
}

/* Card */
.admin-section{
  margin-bottom:1.6rem;
  padding:1.6rem 1.5rem;
  border-radius:1rem;
  background:#020617;
  border:1px solid rgba(148,163,184,.4);
  box-shadow:0 18px 50px rgba(15,23,42,.9);
}
.admin-section h2{
  font-size:1.1rem;
  margin-bottom:1rem;
}
.admin-section h3{
  font-size:.95rem;
  margin:1.3rem 0 .6rem;
  color:#e5e7eb;
}

.admin-separator{
  border:none;
  border-top:1px solid rgba(148,163,184,.3);
  margin:1.5rem 0;
}

/* Forms */
.admin-form{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.admin-form label{
  font-size:.85rem;
  color:#9ca3af;
}
.admin-form input[type="text"],
.admin-form input[type="url"],
.admin-form input[type="file"],
.admin-form textarea{
  background:#020617;
  border-radius:.6rem;
  border:1px solid rgba(148,163,184,.5);
  padding:.55rem .75rem;
  color:#e5e7eb;
  font-size:.9rem;
}

/* Hero preview */
.admin-hero-row{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}
.admin-hero-preview{
  width:120px;
  height:120px;
  border-radius:1.1rem;
  overflow:hidden;
  background:#020617;
  flex-shrink:0;
  border:1px solid rgba(148,163,184,.35);
}
.admin-hero-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Lists (services, projects, blogs, messages) */
.admin-project-list{
  list-style:none;
  margin-top:.75rem;
}
.admin-project-list li{
  padding:.6rem 0;
  border-bottom:1px dashed rgba(148,163,184,.4);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.75rem;
  font-size:.9rem;
}
.admin-list-empty{
  border-bottom:none;
  font-size:.85rem;
  color:#9ca3af;
}
.admin-msg-body{
  font-size:.85rem;
  color:#cbd5f5;
}

/* Small button inside list */
.btn-small{
  padding:.25rem .6rem;
  font-size:.75rem;
}

/* Helper text */
.admin-help-text{
  font-size:.85rem;
  color:#9ca3af;
  margin-bottom:.5rem;
}


/* ===========================
   LIGHT THEME
=========================== */
body.light-theme{
  background:#f3f4f6;
  color:#0f172a;
  cursor:auto;
}
body.light-theme header{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(148,163,184,.35);
}
body.light-theme .project-card,
body.light-theme .contact-card,
body.light-theme .admin-section{
  background:#ffffff;
  color:#0f172a;
}
body.light-theme .project-desc,
body.light-theme .section-desc,
body.light-theme .about-list li{color:#475569}
body.light-theme footer{
  border-top-color:rgba(148,163,184,.4);
  color:#6b7280;
}
body.light-theme .cursor-dot{display:none}

/* ===========================
   SCROLL ANIMATION
=========================== */
[data-animate]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .45s ease-out,transform .45s ease-out;
}
.animate-in{
  opacity:1;
  transform:translateY(0);
}

/* ===========================
   RESPONSIVE
=========================== */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-avatar{margin-inline:auto}
  .about-grid{grid-template-columns:1fr}
  .contact-card{grid-template-columns:1fr}
}

@media(max-width:768px){
  .desktop-nav{display:none}
  .nav-toggle{display:flex}
  body.nav-open{overflow:hidden}
  #hero{padding-top:4rem}
  body{cursor:auto}
  .cursor-dot{display:none}
}

/* ========================================
   SOFT BUT VISIBLE FLOATING TECH
======================================== */
.floating-tech{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.floating-tech span{
  position:absolute;
  font-size:.8rem;
  font-weight:500;
  font-family:ui-monospace,Menlo,Consolas;
  letter-spacing:.02em;

  /* visible but soft */
  color:rgba(255,255,255,.22);
  text-shadow:0 0 10px rgba(15,23,42,.9);

  opacity:.45;
  user-select:none;
  white-space:nowrap;

  animation:floatTechSoft 20s ease-in-out infinite;
}

/* Positions */
.floating-tech span:nth-child(1){top:12%; left:8%;  animation-delay:-4s;}
.floating-tech span:nth-child(2){top:34%; left:4%;  animation-delay:-8s;}
.floating-tech span:nth-child(3){top:65%; left:10%; animation-delay:-6s;}
.floating-tech span:nth-child(4){top:82%; left:16%; animation-delay:-11s;}

.floating-tech span:nth-child(5){top:18%; right:10%; animation-delay:-5s;}
.floating-tech span:nth-child(6){top:36%; right:6%;  animation-delay:-9s;}
.floating-tech span:nth-child(7){top:63%; right:12%; animation-delay:-7s;}
.floating-tech span:nth-child(8){top:80%; right:18%; animation-delay:-12s;}

.floating-tech span:nth-child(9){top:14%; left:48%; animation-delay:-13s;}
.floating-tech span:nth-child(10){top:78%; left:50%; animation-delay:-14s;}

@keyframes floatTechSoft{
  0%{
    transform:translateY(0) translateX(0);
    opacity:.35;
  }
  50%{
    transform:translateY(-20px) translateX(15px);
    opacity:.7;
  }
  100%{
    transform:translateY(0) translateX(0);
    opacity:.35;
  }
}

/* PREMIUM NAV CTA BUTTON */
.nav-cta{
  padding:.55rem 1.2rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  color:#e2e8f0;

  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);
  transition:.25s ease;
  text-decoration:none;

  /* subtle gradient border */
  box-shadow:0 0 0 1px rgba(56,189,248,.18),
             0 0 30px rgba(56,189,248,.06);
}

.nav-cta:hover{
  color:white;
  border-color:rgba(56,189,248,.6);
  box-shadow:
      0 0 0 1px rgba(56,189,248,.5),
      0 0 18px rgba(56,189,248,.35);
  transform:translateY(-2px);
}