/* ---------- Tokens ---------- */
:root{
  --bg: #10121a;
  --bg-soft: #14161f;
  --surface: #1b1e2b;
  --surface-hi: #232739;
  --border: #2a2f42;
  --text: #edeef4;
  --text-muted: #9198b0;
  --accent: #e7a33e;
  --accent-dark: #171207;
  --heat-0: #1c2030;
  --heat-1: #234331;
  --heat-2: #2f7247;
  --heat-3: #3fa25c;
  --heat-4: #5cd67c;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --max: 880px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-0.01em;}
p{margin:0;}
ul{list-style:none; margin:0; padding:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
section{padding:6rem 1.5rem; max-width:var(--max); margin:0 auto; position:relative;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
[data-editable]{ }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- Hero canvas backdrop ---------- */
#hero-canvas{
  position:absolute; top:0; left:0; width:100%; height:640px;
  z-index:0; opacity:0.55; pointer-events:none;
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.5rem;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(16,18,26,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav__mark{font-family:var(--mono); font-weight:600; font-size:1.05rem; letter-spacing:0.02em;}
.nav__links{display:flex; gap:2rem;}
.nav__links a{font-size:0.92rem; color:var(--text-muted); position:relative; padding-bottom:3px;}
.nav__links a:hover{color:var(--text);}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent);
  transition:right .25s ease;
}
.nav__links a:hover::after{right:0;}
.nav__toggle{
  display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav__toggle span{width:20px; height:2px; background:var(--text);}

/* ---------- Hero ---------- */
.hero{
  min-height:92vh; display:flex; align-items:center; padding-top:8rem; z-index:1;
}
.hero__inner{position:relative; z-index:1;}
.hero__avatar{
  width:72px; height:72px; border-radius:50%; border:2px solid var(--border);
  margin-bottom:1.75rem;
}
.hero__name{
  font-size:clamp(2.6rem, 7vw, 4.6rem);
  line-height:1.02;
  margin-bottom:1.1rem;
}
.hero__role{
  font-size:clamp(1.05rem, 2.2vw, 1.3rem);
  color:var(--text-muted);
  max-width:540px;
  margin-bottom:2.2rem;
}
.hero__cta{display:flex; gap:1rem; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.8rem 1.5rem; border-radius:999px; font-size:0.92rem; font-weight:600;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  border:1px solid transparent;
}
.btn--primary{background:var(--accent); color:var(--accent-dark);}
.btn--primary:hover{transform:translateY(-2px);}
.btn--ghost{border-color:var(--border); color:var(--text);}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}

/* ---------- About ---------- */
.about h2{font-size:1.9rem; margin-bottom:1.5rem;}
.about__text{color:var(--text-muted); max-width:60ch; font-size:1.02rem;}
.about__facts{
  margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  border-top:1px solid var(--border); padding-top:1.5rem;
}
.about__facts li{display:flex; flex-direction:column; gap:0.3rem;}
.about__facts span{font-size:0.78rem; color:var(--text-muted); text-transform:none;}
.about__facts b{font-weight:500; font-family:var(--serif); font-size:1.05rem;}

/* ---------- Dashboard (GitHub) ---------- */
.dash{max-width:1000px;}
.dash__head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem;}
.dash__head h2{font-size:1.9rem;}
.dash__note{font-family:var(--mono); font-size:0.8rem; color:var(--text-muted);}

.dash__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:2.5rem;
}
.stat{background:var(--surface); padding:1.4rem 1.2rem; display:flex; flex-direction:column; gap:0.3rem;}
.stat__num{font-family:var(--mono); font-size:1.7rem; font-weight:600; color:var(--accent);}
.stat__label{font-size:0.78rem; color:var(--text-muted);}

.heatmap-outer{margin-bottom:3rem;}
.heatmap-scroll{overflow-x:auto; padding-bottom:0.5rem;}
.heatmap{
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(7, 10px); gap:3px; width:max-content;
}
.heatmap .cell{
  width:10px; height:10px; border-radius:2px; background:var(--heat-0);
  opacity:0; transform:scale(0.4); animation:pop .3s ease forwards;
}
@keyframes pop{to{opacity:1; transform:scale(1);}}
.heatmap .cell[data-level="1"]{background:var(--heat-1);}
.heatmap .cell[data-level="2"]{background:var(--heat-2);}
.heatmap .cell[data-level="3"]{background:var(--heat-3);}
.heatmap .cell[data-level="4"]{background:var(--heat-4);}
.heatmap__legend{display:flex; align-items:center; gap:5px; margin-top:0.7rem; font-size:0.75rem; color:var(--text-muted);}
.heatmap__legend .sq{width:10px; height:10px; border-radius:2px; background:var(--heat-0);}
.heatmap__legend .l1{background:var(--heat-1);}
.heatmap__legend .l2{background:var(--heat-2);}
.heatmap__legend .l3{background:var(--heat-3);}
.heatmap__legend .l4{background:var(--heat-4);}

.repo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:2rem;}
.repo-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.4rem;
  transition:border-color .2s ease, transform .2s ease;
}
.repo-card:hover{border-color:var(--accent); transform:translateY(-3px);}
.repo-card h3{font-family:var(--mono); font-size:0.98rem; font-weight:600; margin-bottom:0.5rem;}
.repo-card p{color:var(--text-muted); font-size:0.9rem; margin-bottom:1rem; min-height:2.6em;}
.repo-card__meta{display:flex; gap:1rem; font-size:0.78rem; color:var(--text-muted); font-family:var(--mono);}
.repo-skel{height:120px; background:var(--surface); border:1px solid var(--border); border-radius:14px; opacity:0.5;}

.link-more{font-size:0.9rem; color:var(--accent); border-bottom:1px solid transparent;}
.link-more:hover{border-color:var(--accent);}

/* ---------- LinkedIn ---------- */
.linkedin h2{font-size:1.9rem; margin-bottom:2rem;}
.linkedin__card{
  display:flex; gap:1.5rem; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:2rem; align-items:flex-start;
}
.linkedin__photo{
  width:64px; height:64px; border-radius:50%; background:var(--accent-soft, rgba(231,163,62,0.15));
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:600; flex-shrink:0; border:1px solid var(--border);
}
.linkedin__body h3{font-size:1.2rem; margin-bottom:0.4rem;}
.linkedin__headline{color:var(--text-muted); margin-bottom:1rem;}
.linkedin__points{margin-bottom:1.4rem; display:flex; flex-direction:column; gap:0.4rem;}
.linkedin__points li{font-size:0.92rem; padding-left:1rem; position:relative; color:var(--text-muted);}
.linkedin__points li::before{content:'—'; position:absolute; left:0; color:var(--accent);}

/* ---------- Contact ---------- */
.contact h2{font-size:1.9rem; margin-bottom:1rem;}
.contact p{color:var(--text-muted); margin-bottom:2rem;}
.contact__links{display:flex; gap:1.5rem; flex-wrap:wrap; font-family:var(--mono); font-size:0.92rem;}
.contact__links a{border-bottom:1px solid var(--border); padding-bottom:2px;}
.contact__links a:hover{border-color:var(--accent); color:var(--accent);}

.footer{padding:2.5rem 1.5rem 3rem; text-align:center; color:var(--text-muted); font-size:0.8rem;}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .nav__links{
    position:fixed; top:64px; left:0; right:0; background:var(--bg-soft); border-bottom:1px solid var(--border);
    flex-direction:column; gap:0; padding:0.5rem 1.5rem; transform:translateY(-130%); transition:transform .25s ease;
  }
  .nav__links.is-open{transform:translateY(0);}
  .nav__links a{padding:0.9rem 0; border-bottom:1px solid var(--border);}
  .nav__toggle{display:flex;}
  .about__facts{grid-template-columns:1fr;}
  .dash__stats{grid-template-columns:repeat(2,1fr);}
  .repo-grid{grid-template-columns:1fr;}
  .linkedin__card{flex-direction:column;}
  section{padding:4rem 1.25rem;}
}