/* ===== Projects page — extends style.css tokens ===== */
:root{
  --bg:#0b1830;
  --panel:#0f1f3f;
  --panel-soft:#0d1c38;
  --panel-border:#22376260;
  --accent-1:#0aa2ff;
  --accent-2:#005eff;
  --accent-hover:#37b6ff;
  --text:#ffffff;
  --muted:#90a4c6;
  --mono:'JetBrains Mono',monospace;
}

/* override the fixed 100vh from style.css so the page can scroll */
body{height:auto;min-height:100vh;overflow-x:hidden}

body{
  font-family:'Inter',sans-serif;
  color:var(--text);
}

main{display:block}

/* ---------- active nav state ---------- */
.nav a.is-active{color:var(--accent-hover)}
.nav a.is-active::after{content:'';display:block;height:2px;margin-top:5px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));border-radius:2px}

/* ---------- hero ---------- */
.hero{
  padding:170px 0 70px;
  width:90%;max-width:1300px;margin:0 auto;
}
.eyebrow{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-hover);
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--accent-1);
  box-shadow:0 0 0 4px rgba(10,162,255,.18);
}
.hero h1{
  font-family:Poppins,sans-serif;
  font-weight:700;
  font-size:clamp(32px,5vw,52px);
  line-height:1.12;
  max-width:780px;
  margin-bottom:18px;
}
.hero h1 span{
  background:linear-gradient(90deg,var(--accent-1),var(--accent-hover));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{
  color:var(--muted);
  font-size:17px;
  max-width:560px;
  line-height:1.7;
}

/* ---------- project card grid ---------- */
.projects-grid{
  width:90%;max-width:1300px;margin:0 auto;
  display:grid;grid-template-columns:repeat(2,1fr);gap:26px;
  padding-bottom:30px;
}

.proj-card{
  position:relative;
  background:linear-gradient(160deg,var(--panel),var(--panel-soft));
  border:1px solid var(--panel-border);
  border-radius:20px;
  padding:0 0 28px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  --card-accent:var(--accent-1);
  --card-accent-2:var(--accent-2);
}
.proj-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--card-accent),var(--card-accent-2));
}
.proj-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--card-accent) 45%, transparent);
  box-shadow:0 18px 40px rgba(0,10,30,.45);
}
.proj-card:hover .proj-visual svg{transform:scale(1.04)}
.proj-card .view-link:focus-visible,
.nav a:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--card-accent, var(--accent-hover));
  outline-offset:3px;border-radius:4px;
}

.proj-visual{
  padding:14px 14px 0;
}
.proj-visual svg{
  display:block;width:100%;height:auto;border-radius:12px;
  transition:transform .4s ease;
}
.proj-card .proj-top,
.proj-card .proj-cat,
.proj-card h2,
.proj-card p.desc,
.proj-card .proj-stats,
.proj-card .tags,
.proj-card .view-link{
  padding-left:28px;padding-right:28px;
}
.proj-card--eq{--card-accent:#0aa2ff;--card-accent-2:#005eff}
.proj-card--sb{--card-accent:#22d3ee;--card-accent-2:#0aa2ff}
.proj-card--cy{--card-accent:#7c5cff;--card-accent-2:#0aa2ff}
.proj-card--xp{--card-accent:#22c55e;--card-accent-2:#0aa2ff}

.proj-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.proj-icon{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--card-accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--card-accent) 35%, transparent);
  color:var(--card-accent);
}
.proj-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.proj-code{font-family:var(--mono);font-size:11.5px;color:#5d7196;letter-spacing:.06em}
.proj-status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--card-accent);
}
.proj-status i{
  width:6px;height:6px;border-radius:50%;background:var(--card-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--card-accent) 25%, transparent);
}

.proj-cat{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--card-accent);margin-bottom:8px;display:block;
}
.proj-card h2{
  font-family:Poppins,sans-serif;font-weight:700;font-size:24px;margin-bottom:12px;
}
.proj-card p.desc{
  color:var(--muted);font-size:14.5px;line-height:1.65;margin-bottom:20px;flex:0 0 auto;
}

.proj-stats{
  display:flex;gap:22px;margin-bottom:20px;padding:14px 0;
  border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);
}
.proj-stats div{display:flex;flex-direction:column;gap:2px}
.proj-stats strong{font-family:Poppins,sans-serif;font-weight:700;font-size:15px;color:#fff}
.proj-stats span{font-size:11.5px;color:var(--muted)}

.proj-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.proj-card .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:#dce7f8;
  background:color-mix(in srgb, var(--card-accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--card-accent) 32%, transparent);
  padding:5px 11px;border-radius:20px;
}

.proj-card .view-link{
  margin-top:auto;
  color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
}
.proj-card .view-link svg{transition:transform .2s ease}
.proj-card .view-link:hover svg{transform:translateX(4px)}
.proj-card .view-link:hover{color:var(--card-accent)}

/* ---------- closing CTA ---------- */
.cta-band{
  width:90%;max-width:1300px;margin:40px auto 110px;
  background:linear-gradient(135deg,rgba(10,162,255,.12),rgba(0,94,255,.06));
  border:1px solid rgba(10,162,255,.22);
  border-radius:22px;
  padding:46px 44px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.cta-band h3{
  font-family:Poppins,sans-serif;font-weight:600;font-size:24px;max-width:420px;
}
.cta-band p{color:var(--muted);margin-top:6px;font-size:14.5px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .projects-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nav{display:none}
  .hero{padding:140px 0 50px}
  .projects-grid{grid-template-columns:1fr}
  .proj-card .proj-top,
  .proj-card .proj-cat,
  .proj-card h2,
  .proj-card p.desc,
  .proj-card .proj-stats,
  .proj-card .tags,
  .proj-card .view-link{padding-left:22px;padding-right:22px}
  .proj-visual{padding:12px 12px 0}
  .cta-band{padding:32px 26px}
}

@media (prefers-reduced-motion:reduce){
  .proj-card,.proj-card .proj-visual svg,.proj-card .view-link svg{transition:none}
  .proj-card:hover{transform:none}
}