/* ===============================
   GLOBAL RESET
================================ */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

html{
  scroll-behavior: smooth;
  font-size: 112.5%; /* ≈ 18px base (150% feel at 100%) */
}


body{
  background:#0b0f19;
  color:#e5e7eb;
}

a{text-decoration:none}

/* ===============================
   NAVBAR
================================ */
nav{
  position:fixed;
  top:0;
  width:100%;
  background:rgba(11,15,25,.95);
  backdrop-filter:blur(10px);
  z-index:100;
  transition:transform .4s ease;
}

.nav{
  max-width:1400px;
  margin:auto;
  padding:16px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.nav h1 a{
  font-size:1.4rem;
  background:linear-gradient(135deg,#38bdf8,#22c55e);
  -webkit-background-clip:text;
  color:transparent;
}

.nav ul{
  list-style:none;
  display:flex;
  gap:30px;
}

.nav ul li a{
  color:#9ca3af;
  font-weight:500;
}

.nav ul li a:hover{
  color:#38bdf8;
}

/* ===============================
   HERO
================================ */
header{
  min-height:100vh;
  display:flex;
  align-items:center;
}

.hero{
  max-width:1400px;
  margin:auto;
  padding:140px 40px 80px;
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:80px;
}

.profile-pic{
  width: 200px;
  height:200px;
  border-radius:50%;
  border:4px solid #38bdf8;
  object-fit:cover;
  margin-bottom:20px;
}

.hero h2{
  font-size:3.4rem;
  line-height:1.2;
}

.hero h2 span{
  background:linear-gradient(135deg,#38bdf8,#22c55e);
  -webkit-background-clip:text;
  color:transparent;
}

.hero p{
  color:#9ca3af;
  margin-top:16px;
  min-height:26px; /* typewriter space */
}
.hero p{
  color:#9ca3af;
  margin-top:18px;
  font-size:1.15rem;
}


.cta{
  display:flex;
  gap:18px;
  margin-top:28px;
  flex-wrap:wrap;
}

.btn{
  padding:16px 36px;
  font-size:1.05rem;
  border-radius:28px;
  font-weight:600;
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;
  will-change:transform;
}

.btn-primary{
  background:linear-gradient(135deg,#38bdf8,#22c55e);
  color:#000;
}

.btn-outline{
  border:2px solid #38bdf8;
  color:#38bdf8;
}

.btn:hover{
  box-shadow:0 12px 25px rgba(56,189,248,.35);
}

/* ===============================
   HERO CARD / STATS
================================ */
.hero-card{
  background:radial-gradient(circle at top,#1f2937,#020617);
  border-radius:26px;
  padding:46px;
  box-shadow:0 0 70px rgba(56,189,248,.25);
  will-change:transform;
  transform-style:preserve-3d;
}

.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.stat{
  background:#111827;
  border-radius:18px;
  padding:22px;
  text-align:center;
  will-change:transform;
  transform-style:preserve-3d;
}

.stat h3{
  color:#38bdf8;
  font-size:2.1rem;
}

.stat p{
  font-size:1.05rem;
}


/* ===============================
   SECTIONS
================================ */
section{
  max-width:1200px;
  margin:auto;
  padding:90px 24px;
  scroll-margin-top:120px;
}

section h2{
  text-align:center;
  font-size:2.3rem;
  margin-bottom:40px;
}

/* ===============================
   SKILLS
================================ */
.skill-bar{
  width:100%;
  background:#020617;
  border-radius:20px;
  margin:10px 0 25px;
  overflow:hidden;
}

.skill{
  height:12px;
  border-radius:20px;
  background:linear-gradient(135deg,#38bdf8,#22c55e);
  transition:width 1.2s ease;
}

.skill.html{width:85%}
.skill.php{width:75%}
.skill.iot{width:80%}
.skill.sheets{width:85%}
.skill.obs{width:90%}

/* ===============================
   PROJECTS
================================ */
.projects{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:40px;
}

.project{
  background:#111827;
  padding:30px;
  border-radius:24px;
  will-change:transform;
  transform-style:preserve-3d;
  transition:box-shadow .4s ease;
}

.project:hover{
  box-shadow:0 30px 60px rgba(0,0,0,.45);
}

.project-img{
  width:100%;
  height:250px;
  object-fit:contain;
  background:#020617;
  padding:16px;
  border-radius:20px;
  margin-bottom:20px;
}

/* ===============================
   TECH ICONS
================================ */
.tech-icons{
  display:flex;
  gap:18px;
  margin:18px 0;
}

.tech-icons i{
  font-size:30px;
  color:#38bdf8;
  transition:.3s;
}

.tech-icons i:hover{
  color:#22c55e;
  transform:scale(1.2);
}

/* ===============================
   CONTACT
================================ */
.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

input,textarea{
  width:100%;
  padding:14px;
  background:#020617;
  border:1px solid #1f2937;
  border-radius:12px;
  color:#fff;
  margin-bottom:14px;
}

/* ===============================
   FOOTER
================================ */
footer{
  text-align:center;
  padding:40px 20px;
  color:#9ca3af;
}

/* ===============================
   SCROLL REVEAL (JS SUPPORT)
================================ */
.hero-card,
.project,
.stat{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s ease;
}


.show{
  opacity:1;
  transform:translateY(0);
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 900px) {

  /* ---------------- NAV ---------------- */
  nav{
    padding: 6px 0;
  }

  .nav{
    padding: 14px 20px;
  }

  .nav ul{
    display:none; /* keep clean for now */
  }

  /* ---------------- HERO ---------------- */
  header{
    min-height: auto;
  }

  .hero{
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 120px 20px 80px;
    text-align: center;
  }

  .profile-pic{
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
  }

  .hero h2{
    font-size: 2.4rem;
    line-height: 1.25;
  }

  .hero p{
    font-size: 1.05rem;
    max-width: 90%;
    margin: 14px auto 0;
  }

  /* ---------------- BUTTONS ---------------- */
  .cta{
    justify-content: center;
    gap: 14px;
  }

  .btn{
    width: 100%;
    max-width: 260px;
    padding: 16px 0;
    font-size: 1rem;
  }

  /* ---------------- HERO CARD ---------------- */
  .hero-card{
    padding: 32px;
    transform: none; /* avoid weird scaling on mobile */
  }

  .stats{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .stat{
    padding: 18px;
  }

  .stat h3{
    font-size: 1.6rem;
  }

  .stat p{
    font-size: .95rem;
  }

  /* ---------------- SECTIONS ---------------- */
  section{
    padding: 70px 18px;
  }

  section h2{
    font-size: 2rem;
    margin-bottom: 30px;
  }

  /* ---------------- SKILLS ---------------- */
  .skill-bar{
    height: 14px;
  }

  /* ---------------- PROJECTS ---------------- */
  .projects{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .project{
    padding: 24px;
  }

  .project-img{
    height: 180px;
  }

  /* ---------------- TECH ICONS ---------------- */
  .tech-icons{
    justify-content: center;
  }

  .tech-icons i{
    font-size: 26px;
  }

  /* ---------------- CONTACT ---------------- */
  .contact{
    grid-template-columns: 1fr;
  }

  footer{
    font-size: .9rem;
  }
}

/* ===============================
   PAGE LOADED STATE
================================ */
body.page-loaded{
  background-attachment: fixed;
}

.stat,
.project,
.hero-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- MOBILE MENU ---------- */
.menu-btn{
  display:none;
  width:28px;height:22px;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}
.menu-btn span{
  height:3px;width:100%;
  background:#38bdf8;border-radius:2px;
  transition:.3s;
}

/* open animation */
.menu-btn.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-btn.active span:nth-child(2){opacity:0}
.menu-btn.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media (max-width:900px){
  .menu-btn{display:flex}
  .nav ul{
    position:fixed;
    inset:70px 0 auto 0;
    background:#0b0f19;
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:30px 20px;
    transform:translateY(-120%);
    transition:.35s ease;
    z-index:99;
  }
  .nav ul.open{transform:translateY(0)}
}

/* Low-end devices */
.low-end .project,
.low-end .stat,
.low-end .hero-card{
  transform:none !important;
  transition:box-shadow .3s ease;
}

.low-end .btn{
  transform:none !important;
}

/* ===============================
   MOBILE ACTION BUTTON FIX
================================ */
@media (max-width: 900px){

  /* Generic action buttons */
  .project .btn,
  #creator .btn,
  #linkedin .btn,
  #contact .btn{
    width: auto;                 /* ❌ no full width */
    min-width: 200px;            /* consistent size */
    padding: 12px 20px;          /* compact height */
    font-size: 0.95rem;
    margin: 10px auto 0;         /* center */
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* Project card button alignment */
  .project{
    text-align: center;
  }

  /* GitHub + Live buttons spacing */
  .project .btn{
    margin-top: 14px;
  }

  /* Creator / LinkedIn section buttons */
  #creator .btn,
  #linkedin .btn{
    margin-top: 18px;
  }

  /* Contact section button */
  #contact .btn{
    margin-top: 20px;
  }
}
/* ================= CUSTOM SCROLLBAR ================= */

/* Scrollbar width */
::-webkit-scrollbar {
  width: 10px;
}

/* Scrollbar track (background) */
::-webkit-scrollbar-track {
  background: rgba(4, 5, 78, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#38bdf8, #22c55e);
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(76, 188, 223, 0.6);
}

/* Hover effect */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #22c55e, #38bdf8);
  box-shadow: 0 0 18px rgba(40, 155, 107, 0.9);
}

/* ===============================
   BLOG PAGE FIX
================================ */
.blog-page .project,
.blog-page section {
  opacity:1 !important;
  transform:none !important;
}