/* Shared Darkiee tokens + selection/focus/scrollbar live in /assets/css/tokens.css */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  text-transform: capitalize;
  transition: all .2s linear;
}
html{
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body{
  font-family: 'Poppins', sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  transition: background 0.3s ease, color 0.3s ease;
}
section{
  padding: 2rem 9%;
}

/* Page-local aliases, all derived from the shared Darkiee tokens */
:root {
  --po: var(--brand-orange-light);
  --pp: var(--brand-purple);
  --pg-card-a: var(--c-surface);
  --pg-card-b: var(--c-surface-alt);
  --pg-glow1: rgba(247,127,3,0.16);
  --pg-glow2: rgba(139,92,246,0.18);
  --pg-glow3: rgba(139,92,246,0.10);
  --pg-thumb-bg: var(--c-surface-alt);
  --pg-thumb-fade: rgba(12,19,34,0.85);
  --pg-chip-bg: rgba(255,255,255,0.05);
  --pg-chip-bd: var(--c-border);
  --pg-btn-bg: rgba(255,255,255,0.06);
}
[data-theme="light"] {
  --pg-glow1: rgba(247,127,3,0.10);
  --pg-glow2: rgba(139,92,246,0.12);
  --pg-glow3: rgba(139,92,246,0.06);
  --pg-thumb-fade: rgba(255,255,255,0);
  --pg-chip-bg: var(--c-surface-alt);
  --pg-btn-bg: var(--c-surface-alt);
}

/* navbar starts */
header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.7rem 10%;
  height: 6.5rem;
  background: var(--c-nav);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
header.scrolled { box-shadow: var(--c-shadow-sm); }
header .logo{
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--c-text);
}
header .logo i {
  font-size: 2.2rem;
  color: var(--brand-orange-light);
}
header .logo:hover { color: var(--c-accent); }
header .navbar ul{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .navbar li{
  margin-left: 2.5rem;
}
header .navbar ul li a{
  font-size: 1.57rem;
  color: var(--c-text);
  font-weight: 600;
  letter-spacing: 0.04rem;
  /* constant padding + transparent underline so hover/active never shifts layout */
  padding: .5rem 0;
  border-bottom: .2rem solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
header .navbar ul li a.active,
header .navbar ul li a:hover{
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

#theme-toggle {
  background: transparent; border: 1.5px solid var(--c-border);
  border-radius: 50%; width: 3.6rem; height: 3.6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--c-text); font-size: 1.4rem;
  flex-shrink: 0; margin-left: 2rem; transition: all 0.3s ease;
}
#theme-toggle:hover {
  background: var(--c-accent-glow); border-color: var(--c-accent);
  color: var(--c-accent); transform: rotate(20deg) scale(1.05);
}
/* navbar ends */

/* hamburger icon starts */
#menu{
  font-size: 3rem;
  cursor: pointer;
  color: var(--c-text);
  display: none;
}
@media(max-width:768px){
  #menu{
      display: block;
  }
  header .navbar{
    position: fixed;
    top: 6.5rem; right: -120%;
    width: min(80vw, 30rem);
    height: calc(100vh - 6.5rem);
    height: calc(100dvh - 6.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    align-items: flex-start;
    background-color: #0a1020;
    z-index: 999;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  [data-theme="light"] header .navbar { background-color: #f8fafc; }
  header .navbar ul{
    flex-flow: column;
    padding: 1rem;
    width: 100%;
  }
  header .navbar ul li{
    text-align: center;
    width: 100%;
    margin: .6rem 0;
    border-radius: .5rem;
  }
  header .navbar ul li a{
    display: block;
    padding: 1rem 1.4rem;
    text-align: left;
    color: var(--c-text);
    font-size: 2rem;
    border-left: .4rem solid transparent;
    border-bottom: none;
  }
  header .navbar ul li a.active,
  header .navbar ul li a:hover{
    padding: 1rem 1.4rem;
    border-radius: .5rem;
    border-left: .4rem solid var(--c-accent);
    border-bottom: none;
    background-color: rgba(255,141,40,0.08);
  }
  .fa-times{
    transform: rotate(180deg);
  }
  header .navbar.nav-toggle{
    right: 0;
  }
}
/* hamburger icon ends */

/* ambient brand glow behind everything */
.proj-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 42rem at 12% 6%, var(--pg-glow1), transparent 60%),
    radial-gradient(58rem 42rem at 88% 18%, var(--pg-glow2), transparent 60%),
    radial-gradient(50rem 50rem at 50% 108%, var(--pg-glow3), transparent 60%);
}
.proj-hero, .projects-showcase { position: relative; z-index: 1; }

/* Hero */
.proj-hero { text-align: center; padding: 13rem 2rem 4rem; max-width: 82rem; margin: 0 auto; }
.proj-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem; font-size: 1.25rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent);
  background: rgba(247,127,3,0.1); border: 1px solid rgba(247,127,3,0.3);
  padding: .7rem 1.6rem; border-radius: var(--radius-pill); margin-bottom: 2.6rem;
}
.proj-hero h1 {
  font-size: clamp(3.6rem, 6vw, 6rem); font-weight: 800; line-height: 1.05;
  color: var(--c-text); margin: 0 0 2rem; letter-spacing: -0.02em;
}
.proj-hero h1 span {
  background: linear-gradient(100deg, var(--po), var(--pp));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.proj-hero .lead {
  font-size: 1.7rem; color: var(--c-muted); max-width: 64rem; margin: 0 auto 4.5rem;
  line-height: 1.7; text-transform: none; font-family: "Poppins", sans-serif;
}
.proj-hero .lead strong { color: var(--c-text); font-weight: 700; }
.proj-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.proj-stats div {
  min-width: 13.5rem; padding: 1.8rem 2rem; border-radius: 1.4rem;
  background: var(--c-surface); border: 1px solid var(--c-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.proj-stats strong {
  display: block; font-size: 2.8rem; font-weight: 800;
  background: var(--g-brand-diag);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.proj-stats span { font-size: 1.25rem; color: var(--c-muted); font-family: "Poppins", sans-serif; }

/* Grid + cards */
.projects-showcase { padding: 3rem 2rem 9rem; }
#projects-grid {
  display: grid; gap: 2.6rem; max-width: 1200px; margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr));
}
.proj-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--pg-card-a) 0%, var(--pg-card-b) 100%);
  border: 1px solid var(--c-border); border-radius: 1.8rem;
  box-shadow: var(--c-shadow-md);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.proj-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2; opacity: 0;
  background: var(--g-brand); transition: opacity .3s ease;
}
.proj-card:hover { transform: translateY(-8px); border-color: rgba(247,127,3,0.45);
  box-shadow: var(--c-shadow-lg); }
.proj-card.featured { border-color: rgba(247,127,3,0.35); }
.proj-card.featured::before { opacity: 1; }
.proj-card.featured .proj-body h3 { font-size: 2.4rem; }
@media (min-width: 900px) {
  .proj-card.featured { grid-column: span 2; flex-direction: row; }
  .proj-card.featured .proj-thumb { flex: 1 1 52%; aspect-ratio: auto; min-height: 26rem; }
  .proj-card.featured .proj-body { flex: 1 1 48%; justify-content: center; }
}
.proj-card:hover::before { opacity: 1; }
.proj-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pg-thumb-bg); }
.proj-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--pg-thumb-fade)); }
.proj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.proj-card:hover .proj-thumb img { transform: scale(1.06); }
.proj-badge {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2; display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.15rem; font-weight: 700; color: #fff; padding: .5rem 1.1rem; border-radius: var(--radius-pill);
  background: rgba(8,12,22,0.72); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.proj-badge.live { color: #d1fadf; }
.live-dot { width: .8rem; height: .8rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pdot 1.8s infinite; }
@keyframes pdot { 70%, 100% { box-shadow: 0 0 0 .7rem rgba(74,222,128,0); } }
.proj-body { display: flex; flex-direction: column; gap: 1.1rem; padding: 2.2rem; flex: 1; }
.proj-tag {
  align-self: flex-start; font-size: 1.1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-accent); background: rgba(247,127,3,0.12); border: 1px solid rgba(247,127,3,0.28); padding: .45rem 1.1rem; border-radius: var(--radius-pill);
}
.proj-body h3 { font-size: 2.1rem; font-weight: 700; color: var(--c-text); margin: 0; line-height: 1.25; }
.proj-body p { font-size: 1.4rem; line-height: 1.65; color: var(--c-muted); margin: 0; font-family: "Poppins", sans-serif; text-transform: none; }
.proj-tech { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .2rem; }
.proj-tech span {
  font-size: 1.15rem; font-weight: 500; color: var(--c-muted); background: var(--pg-chip-bg);
  border: 1px solid var(--pg-chip-bd); padding: .4rem .9rem; border-radius: .7rem; font-family: "Poppins", sans-serif;
}
.proj-links { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.proj-btn {
  display: inline-flex; align-items: center; gap: .6rem; font-size: 1.35rem; font-weight: 600; text-decoration: none;
  padding: 1rem 1.8rem; border-radius: var(--radius-pill); color: var(--c-text); background: var(--pg-btn-bg);
  border: 1px solid var(--c-border-strong); transition: all .2s ease;
}
.proj-btn:hover { border-color: var(--c-accent); color: var(--c-accent); transform: translateY(-2px); }
.proj-btn.primary { background: var(--g-brand-diag); border: none; color: #fff; box-shadow: 0 6px 18px rgba(139,92,246,.35); }
.proj-btn.primary:hover { filter: brightness(1.08); }
.proj-empty { color: var(--c-muted); font-size: 1.6rem; text-align: center; }
.proj-empty a { color: var(--c-accent); }

/* footer CTAs */
.projects-showcase .sub { text-align: center; margin: 6rem auto 0; }
.github-cta-btn {
  display: inline-flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, #24292e, #0d1117);
  color: #fff; padding: 1.6rem 3.6rem; border-radius: var(--radius-pill); font-size: 1.7rem; font-weight: 700; text-decoration: none;
  transition: all .3s; box-shadow: 0 8px 25px rgba(0,0,0,.4); font-family: "Poppins", sans-serif; border: 1px solid rgba(255,255,255,0.12);
}
.github-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.55); color: #fff; }
.github-cta-btn i { font-size: 1.9rem; }
.back-link { display: inline-block; margin-top: 2.4rem; font-size: 1.5rem; color: var(--c-muted); text-decoration: none; transition: color .3s; font-family: "Poppins", sans-serif; }
.back-link:hover { color: var(--c-accent); }
.back-link i { margin-right: .5rem; }

@media (max-width: 768px) { .proj-hero { padding: 11rem 1.5rem 3rem; } }
@media (max-width: 480px) {
  html { font-size: 55%; }
  section { padding: 2rem; }
  #projects-grid { grid-template-columns: 1fr; }
  .proj-stats div { flex: 1; min-width: 12rem; }
}

/* scroll top starts */
#scroll-top{
  position: fixed;
  top: -140%;
  right: 2rem;
  padding: 1rem 1.5rem;
  font-size: 2rem;
  background: var(--g-brand-diag);
  color: #ffffff;
  border-radius: var(--radius-pill);
  transition: 1s linear;
  z-index: 1000;
}
#scroll-top.active{
  top: calc(100% - 12rem);
}
/* scroll top ends */