:root{
  --bg: #F6F5F1;
  --panel: #EFEDE6;
  --text: #1C1D20;
  --muted: #6B6D72;
  --accent: #2F5D50;
  --accent-soft: #E3E9E4;
  --line: #DBD8CF;
  --maxw: 1040px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Vazirmatn', sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:800; }

/* Header */
header{
  position:sticky; top:0; z-index:30;
  background:rgba(246,245,241,0.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo{ font-weight:700; font-size:1.05rem; }
nav ul{ list-style:none; display:flex; gap:28px; }
nav a{ font-size:0.92rem; color:var(--muted); transition:color .2s ease; }
nav a:hover{ color:var(--text); }
.nav-toggle{ display:none; }

/* Hero */
.hero{
  position:relative;
  padding:96px 0 88px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-inner{
  display:flex; align-items:center; justify-content:space-between; gap:48px;
  position:relative; z-index:2;
}
.hero-text{ flex:1; min-width:0; }
.blob{
  position:absolute; top:-160px; left:-120px;
  width:520px; height:520px; border-radius:50%;
  background:conic-gradient(from 90deg, var(--accent), var(--accent-soft), var(--bg), var(--accent));
  filter:blur(70px); opacity:0.35;
  animation:spin 40s linear infinite;
  z-index:1;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-avatar{
  width:180px; height:180px; flex-shrink:0; border-radius:50%;
  overflow:hidden; border:1px solid var(--line);
  background:var(--accent);
  perspective:600px;
}
.hero-avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .25s ease;
}
.hero-avatar img.is-placeholder{ object-fit:none; padding:52px; background:var(--accent); }

.hero .eyebrow{ color:var(--accent); font-weight:600; font-size:0.95rem; margin-bottom:18px; }
.hero h1{
  font-size:clamp(2.1rem, 4.6vw, 3.5rem); font-weight:800; letter-spacing:-0.01em;
  max-width:16ch; margin-bottom:22px;
}
.hero p{ color:var(--muted); font-size:clamp(1rem, 1.6vw, 1.15rem); max-width:52ch; margin-bottom:34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; padding:13px 26px; border-radius:3px;
  font-weight:600; font-size:0.95rem; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background:var(--text); color:var(--bg); }
.btn-primary:hover{ background:var(--accent); transform:translateY(-2px); }
.btn-outline{ border:1px solid var(--line); color:var(--text); }
.btn-outline:hover{ border-color:var(--text); transform:translateY(-2px); }

/* Section shell */
section{ padding:80px 0; border-bottom:1px solid var(--line); position:relative; }
section:last-of-type{ border-bottom:none; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:44px; gap:16px; flex-wrap:wrap; }
.section-head .count{ color:var(--muted); font-size:0.95rem; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .blob{ animation:none; }
}

/* About */
.about-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:64px; }
.about-grid p{ color:var(--muted); margin-bottom:16px; max-width:56ch; }
.facts{ list-style:none; }
.facts li{ display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); font-size:0.95rem; }
.facts li:last-child{ border-bottom:1px solid var(--line); }
.facts span:first-child{ color:var(--muted); }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.tag{ font-size:0.85rem; padding:6px 14px; background:var(--accent-soft); color:var(--accent); border-radius:3px; font-weight:600; }

/* Projects */
.project-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.project-card{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; transform-style:preserve-3d; will-change:transform;
  transition:transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{ box-shadow:0 18px 36px -22px rgba(28,29,32,0.35); }
.thumb{ aspect-ratio:16/10; background:var(--accent-soft); overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb img.is-placeholder{ object-fit:none; padding:44px; }
.project-body{ padding:22px; }
.project-body h3{ font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.project-body p{ color:var(--muted); font-size:0.92rem; margin-bottom:12px; }
.meta span{ font-size:0.8rem; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:3px; }
.project-links{ display:flex; gap:16px; margin-top:14px; }
.project-links a{ font-size:0.88rem; font-weight:600; border-bottom:1px solid var(--text); padding-bottom:2px; }
.thumb-hint{ margin-top:22px; color:var(--muted); font-size:0.85rem; }

/* Achievements */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:52px; }
.stat{ text-align:center; padding:28px 16px; background:var(--panel); border-radius:4px; }
.stat .num{ font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800; color:var(--accent); }
.stat .label{ color:var(--muted); font-size:0.9rem; margin-top:6px; }

.skills{ display:flex; flex-direction:column; gap:20px; margin-bottom:52px; }
.skill-head{ display:flex; justify-content:space-between; font-size:0.9rem; margin-bottom:8px; }
.skill-head span:last-child{ color:var(--muted); }
.skill-bar{ height:8px; border-radius:4px; background:var(--line); overflow:hidden; }
.skill-fill{ height:100%; width:0; background:var(--accent); border-radius:4px; transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.skill.in-view .skill-fill{ width:var(--w); }

.badges{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.badge{
  display:flex; flex-direction:column; padding:0; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  transform-style:preserve-3d; will-change:transform; transition:transform .2s ease, box-shadow .2s ease;
}
.badge:hover{ box-shadow:0 14px 28px -20px rgba(28,29,32,0.35); }
.badge-thumb{
  width:100%; aspect-ratio:4/3; background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.badge-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.badge-thumb img.is-placeholder{ width:auto; height:auto; object-fit:none; padding:0; }
.badge > div:last-child{ padding:16px 18px; }
.badge h4{ font-size:0.98rem; font-weight:700; margin-bottom:4px; }
.badge p{ color:var(--muted); font-size:0.87rem; }

/* Contact */
.contact{ text-align:center; }
.contact h2{ max-width:16ch; margin-inline:auto; margin-bottom:20px; }
.contact p{ color:var(--muted); margin-bottom:34px; }
.contact-links{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

.contact-icons{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:8px; }
.icon-link{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--muted); transition:color .2s ease, transform .2s ease;
}
.icon-link svg{ width:26px; height:26px; }
.icon-link span{ font-size:0.82rem; }
.icon-link:hover{ color:var(--accent); transform:translateY(-3px); }

footer{ padding:28px 0; text-align:center; color:var(--muted); font-size:0.85rem; }

@media (max-width:900px) and (min-width:761px){
  .project-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:760px){
  nav ul{
    position:fixed; inset:68px 0 0 0; background:var(--bg);
    flex-direction:column; padding:32px 24px; gap:4px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:all .2s ease; border-top:1px solid var(--line);
  }
  nav ul.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  nav ul li{ border-bottom:1px solid var(--line); }
  nav ul a{ display:block; padding:16px 4px; font-size:1rem; }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
  .nav-toggle span{ width:22px; height:2px; background:var(--text); }

  .hero-inner{ flex-direction:column-reverse; text-align:center; }
  .hero p{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero h1{ margin-inline:auto; }
  .blob{ opacity:0.22; }

  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .project-grid{ grid-template-columns:1fr; }
  .badges{ grid-template-columns:1fr; }
  .contact-icons{ gap:20px; }
}