/* ============================================================
   SINIYOR // پرتفولیوی امنیت و برنامه‌نویسی
   Design tokens
   ============================================================ */
:root{
  --void:        #050303;   /* پس‌زمینه‌ی اصلی، تقریبا مشکی مطلق */
  --void-2:      #0d0505;   /* پس‌زمینه‌ی پنل‌ها */
  --panel:       #120707;   /* کارت‌ها */
  --line:        #2a0a0a;   /* خطوط جداکننده */
  --blood:       #b3001b;   /* قرمز عمیق - ثانویه */
  --neon:        #ff1740;   /* قرمز نئونی - اصلی */
  --neon-soft:   rgba(255, 23, 64, .35);
  --ember:       #ff5c3d;   /* نارنجی-قرمز، هشدار/هاور */
  --ghost:       #eae3e3;   /* متن اصلی */
  --dim:         #8a7676;   /* متن ثانویه */
  --mono:        'JetBrains Mono', monospace;
  --display:     'Vazirmatn', sans-serif;
  --radius:      2px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--void);
  color:var(--ghost);
  font-family:var(--display);
  direction:rtl;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* پس‌زمینه‌ی سه‌بعدی */
#bg-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* اسکن‌لاین ظریف روی کل صفحه برای حس مانیتور امنیتی */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,23,64,0.02) 0px,
    rgba(255,23,64,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}

.content{ position:relative; z-index:3; }

/* ---------------- Typography ---------------- */
h1,h2,h3{ font-weight:800; letter-spacing:-.01em; }
.mono{ font-family:var(--mono); direction:ltr; unicode-bidi:isolate; }

.eyebrow{
  font-family:var(--mono);
  direction:ltr;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--neon);
  text-shadow:0 0 8px var(--neon-soft);
}
.eyebrow::before{
  content:'';
  width:6px; height:6px;
  background:var(--neon);
  box-shadow:0 0 10px 2px var(--neon);
  border-radius:50%;
  animation:blink 1.6s infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------------- Nav ---------------- */
.nav{
  position:fixed;
  top:0; right:0; left:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 6vw;
  background:linear-gradient(to bottom, rgba(5,3,3,.92), rgba(5,3,3,0));
  backdrop-filter:blur(2px);
}
.brand{
  font-family:var(--mono);
  direction:ltr;
  font-weight:700;
  font-size:1.05rem;
  color:var(--ghost);
  letter-spacing:.04em;
}
.brand span{ color:var(--neon); }
.nav-links{
  display:flex;
  gap:2.2rem;
  list-style:none;
  font-size:.92rem;
}
.nav-links a{
  color:var(--dim);
  text-decoration:none;
  position:relative;
  transition:color .25s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--ghost); }
.nav-links a.active::after{
  content:'';
  position:absolute;
  right:0; left:0; bottom:-6px;
  height:2px;
  background:var(--neon);
  box-shadow:0 0 8px var(--neon);
}
.nav-cta{
  font-family:var(--mono);
  direction:ltr;
  font-size:.8rem;
  padding:.55em 1.1em;
  border:1px solid var(--neon);
  color:var(--neon);
  text-decoration:none;
  border-radius:var(--radius);
  transition:.25s ease;
}
.nav-cta:hover{ background:var(--neon); color:var(--void); box-shadow:0 0 20px var(--neon-soft); }

.burger{ display:none; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.8em;
  border-radius:var(--radius);
  font-weight:700;
  text-decoration:none;
  font-size:.95rem;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .2s ease, box-shadow .3s ease, background .3s ease;
}
.btn-primary{
  background:var(--neon);
  color:var(--void);
  box-shadow:0 0 25px -4px var(--neon-soft);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 40px -2px var(--neon-soft); }
.btn-ghost{
  border-color:var(--line);
  color:var(--ghost);
  background:rgba(255,255,255,.02);
}
.btn-ghost:hover{ border-color:var(--neon); color:var(--neon); }

/* ---------------- Hero ---------------- */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 6vw 60px;
  position:relative;
}
.terminal{
  font-family:var(--mono);
  direction:ltr;
  text-align:right;
  background:rgba(10,4,4,.55);
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px 20px;
  font-size:.82rem;
  color:var(--neon);
  max-width:520px;
  margin:0 auto 2.2rem;
  box-shadow:0 0 40px -12px var(--neon-soft);
  min-height:1.4em;
}
.terminal .cursor{
  display:inline-block;
  width:7px; height:1em;
  background:var(--neon);
  margin-inline-start:2px;
  vertical-align:-2px;
  animation:blink 1s steps(2) infinite;
}

.hero h1{
  font-size:clamp(2.4rem, 6vw, 5rem);
  line-height:1.05;
  color:var(--ghost);
}
.hero h1 .glow{
  color:var(--neon);
  text-shadow:0 0 20px var(--neon-soft), 0 0 60px var(--neon-soft);
}
.hero p.lead{
  max-width:640px;
  margin:1.4rem auto 2.4rem;
  color:var(--dim);
  font-size:1.08rem;
  line-height:1.9;
}
.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}

.scroll-hint{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  direction:ltr;
  font-size:.7rem;
  color:var(--dim);
  letter-spacing:.2em;
  writing-mode:vertical-rl;
}

/* ---------------- Section shell ---------------- */
section{ padding:110px 6vw; position:relative; }
.section-head{ max-width:640px; margin-bottom:3.2rem; }
.section-head h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-top:.6rem; }
.section-head p{ color:var(--dim); margin-top:.9rem; line-height:1.85; }

.divider{
  height:1px;
  background:linear-gradient(to left, transparent, var(--line), transparent);
  margin:0 6vw;
}

/* ---------------- Grid cards (skills / stats) ---------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1.2rem;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.8rem;
  transition:border-color .3s ease, transform .3s ease;
}
.card:hover{ border-color:var(--blood); transform:translateY(-4px); }
.card .tag{
  font-family:var(--mono);
  direction:ltr;
  font-size:.7rem;
  color:var(--neon);
  letter-spacing:.12em;
}
.card h3{ margin-top:.7rem; font-size:1.15rem; }
.card p{ color:var(--dim); margin-top:.6rem; font-size:.92rem; line-height:1.8; }

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:2rem;
}
.stat{
  background:var(--void-2);
  padding:2rem 1rem;
  text-align:center;
}
.stat b{
  font-family:var(--mono);
  direction:ltr;
  display:block;
  font-size:2.2rem;
  color:var(--neon);
  text-shadow:0 0 18px var(--neon-soft);
}
.stat span{ color:var(--dim); font-size:.82rem; }

/* ---------------- Timeline (about page) ---------------- */
.timeline{ position:relative; padding-right:2.4rem; border-right:1px solid var(--line); }
.t-item{ position:relative; padding-bottom:2.6rem; }
.t-item:last-child{ padding-bottom:0; }
.t-item::before{
  content:'';
  position:absolute;
  right:-2.55rem;
  top:.3rem;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--void);
  border:2px solid var(--neon);
  box-shadow:0 0 12px var(--neon-soft);
}
.t-item .y{ font-family:var(--mono); direction:ltr; font-size:.78rem; color:var(--neon); }
.t-item h3{ margin-top:.4rem; font-size:1.1rem; }
.t-item p{ color:var(--dim); margin-top:.4rem; line-height:1.8; font-size:.94rem; }

/* ---------------- Telegram block ---------------- */
.telegram-block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  background:linear-gradient(135deg, rgba(255,23,64,.06), transparent 60%), var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:2.6rem 2.4rem;
}
.telegram-id{
  font-family:var(--mono);
  direction:ltr;
  font-size:1.25rem;
  color:var(--ghost);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.telegram-id small{ display:block; font-size:.7rem; color:var(--dim); letter-spacing:.1em; margin-bottom:.4em; }
.copy-note{ font-size:.72rem; color:var(--neon); opacity:0; transition:opacity .2s ease; margin-inline-start:.6em; }
.copy-note.show{ opacity:1; }

/* ---------------- Form (register) ---------------- */
.form-wrap{
  max-width:520px;
  margin:0 auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:2.6rem;
  box-shadow:0 0 60px -20px var(--neon-soft);
}
.field{ margin-bottom:1.3rem; text-align:right; }
.field label{
  display:block;
  font-size:.8rem;
  color:var(--dim);
  margin-bottom:.5em;
  font-family:var(--mono);
  direction:ltr;
  text-align:left;
}
.field input{
  width:100%;
  background:var(--void-2);
  border:1px solid var(--line);
  color:var(--ghost);
  padding:.85em 1em;
  border-radius:var(--radius);
  font-family:var(--display);
  font-size:.98rem;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field input:focus{ border-color:var(--neon); box-shadow:0 0 0 3px var(--neon-soft); }
.field .hint{ font-size:.72rem; color:var(--dim); margin-top:.4em; }
.submit-btn{ width:100%; justify-content:center; margin-top:.6rem; }
.form-msg{
  margin-top:1.2rem;
  font-size:.88rem;
  padding:.8em 1em;
  border-radius:var(--radius);
  display:none;
}
.form-msg.ok{ display:block; background:rgba(0,200,120,.08); color:#3ddc97; border:1px solid rgba(61,220,151,.3); }
.form-msg.err{ display:block; background:rgba(255,23,64,.08); color:var(--neon); border:1px solid var(--neon-soft); }

/* ---------------- Footer ---------------- */
footer{
  padding:3rem 6vw;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  color:var(--dim);
  font-size:.82rem;
}
footer a{ color:var(--dim); text-decoration:none; }
footer a:hover{ color:var(--neon); }

/* ---------------- Responsive ---------------- */
@media (max-width:760px){
  .nav-links{ display:none; }
  .telegram-block{ flex-direction:column; align-items:flex-start; }
}

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