:root{
  --bg-void:#0a0912;
  --bg-deep:#120f1e;
  --bg-deep-2:#171325;
  --amber:#f2a65a;
  --amber-soft:rgba(242,166,90,0.14);
  --cyan:#5ec8d8;
  --text-warm:#f4efe6;
  --text-muted:#a49dae;
  --border-glow:rgba(242,166,90,0.16);
  --border-cyan:rgba(94,200,216,0.18);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ background:var(--bg-void); margin:0; padding:0; overflow-x:hidden; }

body{
  font-family:"Vazirmatn", sans-serif;
  color:var(--text-warm);
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(242,166,90,0.08), transparent 60%),
    radial-gradient(ellipse 700px 600px at 90% 20%, rgba(94,200,216,0.07), transparent 55%),
    var(--bg-void);
}

.container, .container-fluid{ background:transparent !important; }
a{ text-decoration:none; }

.label{
  font-family:"JetBrains Mono", monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--amber);
  text-transform:uppercase;
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- PAGE LOADER ---------- */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg-void);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  gap:.6rem;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader .loader-mark{
  font-family:"JetBrains Mono", monospace;
  color:var(--amber);
  font-size:.85rem;
  letter-spacing:.3em;
  opacity:0;
  animation:loaderIn .8s ease forwards;
}
#loader .loader-bar{
  width:120px; height:2px;
  background:rgba(255,255,255,0.08);
  border-radius:2px;
  overflow:hidden;
}
#loader .loader-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--amber), var(--cyan));
  animation:loaderBar 1.1s ease forwards .2s;
}
@keyframes loaderIn{ to{ opacity:1; } }
@keyframes loaderBar{ to{ width:100%; } }
#loader.hide{ opacity:0; visibility:hidden; }

/* ---------- LANG TOGGLE ---------- */
.lang-toggle{
  font-family:"JetBrains Mono", monospace;
  font-size:.72rem;
  letter-spacing:.05em;
  background:transparent;
  border:1px solid var(--border-cyan);
  color:var(--cyan);
  border-radius:8px;
  padding:.35rem .7rem;
  cursor:pointer;
  transition:all .2s ease;
  margin-inline-start:.75rem;
}
.lang-toggle:hover{ background:rgba(94,200,216,0.1); }

/* ---------- NAV ---------- */
.navbar{
  background:rgba(10,9,18,0.72) !important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-glow);
}
.navbar-brand{ font-weight:800; color:var(--text-warm) !important; font-size:1.05rem; }
.navbar-brand span{ color:var(--amber); }
.nav-link{ color:var(--text-muted) !important; font-weight:500; transition:color .2s ease; }
.nav-link:hover, .nav-link:focus-visible{ color:var(--text-warm) !important; }
.nav-link.studio-link{ color:var(--cyan) !important; }
.navbar-toggler{ border:1px solid var(--border-glow); background:transparent; }
.navbar-toggler:focus{ box-shadow:0 0 0 .15rem var(--amber-soft); }

/* mobile nav drawer (custom, not bootstrap collapse) */
@media (max-width: 991.98px){
  .navbar-collapse{
    position:fixed; top:64px; inset-inline:0;
    max-height:0; overflow:hidden; opacity:0;
    background:rgba(10,9,18,0.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border-glow);
    transition:max-height .35s ease, opacity .3s ease;
    display:block !important;
  }
  .navbar-collapse.nav-open{ max-height:480px; opacity:1; }
  .navbar-collapse .navbar-nav{ padding:.5rem 1.5rem 1.6rem; }
  .navbar-collapse .nav-item{ padding:.35rem 0; }
}

/* ---------- HERO ---------- */
.hero{ position:relative; padding-top:130px; min-height:96vh; }
.hero-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero-particles span{
  position:absolute; bottom:-10%; width:4px; height:4px; border-radius:50%;
  background:var(--amber); opacity:.55;
  filter:drop-shadow(0 0 6px var(--amber));
  animation:drift linear infinite;
}
.hero-particles span:nth-child(odd){ background:var(--cyan); filter:drop-shadow(0 0 6px var(--cyan)); }
@keyframes drift{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.6; } 90%{ opacity:.4; }
  100%{ transform:translateY(-110vh) translateX(var(--drift-x, 20px)); opacity:0; }
}
.hero-content{ position:relative; z-index:1; }
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--amber); }
.hero h1{ font-weight:900; line-height:1.25; letter-spacing:-.01em; color:var(--text-warm); }
.hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg, var(--amber), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead-text{ color:var(--text-muted); font-size:1.08rem; max-width:520px; }

.btn-amber{
  background:var(--amber); color:#160e05; border:none; font-weight:700;
  padding:.7rem 1.6rem; border-radius:10px;
  transition:transform .2s ease, box-shadow .2s ease;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-amber:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -8px rgba(242,166,90,0.55); color:#160e05; }
.btn-ghost{
  border:1px solid var(--border-cyan); color:var(--cyan); font-weight:600;
  padding:.68rem 1.5rem; border-radius:10px; transition:all .2s ease;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-ghost:hover{ background:rgba(94,200,216,0.1); border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.btn-line{
  color:var(--text-muted); font-weight:600; padding:.68rem .4rem;
  border-bottom:1px solid transparent; transition:all .2s ease;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-line:hover{ color:var(--text-warm); border-color:var(--border-glow); }

.portrait-frame{
  position:relative; max-width:300px; margin-inline:auto; border-radius:20px; padding:10px;
  background:linear-gradient(160deg, rgba(242,166,90,0.16), rgba(94,200,216,0.1));
  border:1px solid var(--border-glow);
}
.portrait-frame img{ border-radius:14px; display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--bg-deep-2); }
.portrait-caption{ color:var(--text-muted); font-size:.82rem; margin-top:.9rem; }

/* ---------- SECTIONS ---------- */
section{ background:transparent !important; position:relative; }
.section-pad{ padding-block:5.5rem; }
.section-head{ margin-bottom:2.4rem; }
.section-head h2{ font-weight:800; color:var(--text-warm); font-size:1.9rem; margin-top:.4rem; }

.card-glass{
  background:rgba(255,255,255,0.025); border:1px solid var(--border-glow);
  border-radius:16px; backdrop-filter:blur(14px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height:100%; position:relative; overflow:hidden;
}
.card-glass:hover{ transform:translateY(-5px); border-color:rgba(242,166,90,0.4); box-shadow:0 16px 36px -14px rgba(242,166,90,0.25); }

.about-card p{ color:var(--text-muted); line-height:2; margin:0; }

.skill-card{ padding:1.8rem; }
.skill-icon{
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--amber-soft); color:var(--amber); font-size:1.05rem; margin-bottom:1rem;
}
.skill-card h5{ color:var(--text-warm); font-weight:700; }
.skill-card p{ color:var(--text-muted); margin:0; }

/* ---------- PROJECT TRAIL DOTS ---------- */
.trail-dot{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--amber); pointer-events:none; z-index:5;
  animation:trailFade .7s ease forwards;
}
@keyframes trailFade{ to{ opacity:0; transform:scale(2.4); } }

/* ---------- FEATURED PROJECT ---------- */
.project-featured{
  padding:0; border:1px solid var(--border-glow);
  display:grid; grid-template-columns:1fr 1fr;
  background:linear-gradient(135deg, rgba(242,166,90,0.05), rgba(94,200,216,0.03));
}
@media (max-width: 767px){ .project-featured{ grid-template-columns:1fr; } }

.project-art{
  position:relative; min-height:260px; overflow:hidden;
  background:radial-gradient(circle at 30% 30%, rgba(242,166,90,0.35), transparent 55%),
             radial-gradient(circle at 70% 70%, rgba(94,200,216,0.3), transparent 55%),
             var(--bg-deep-2);
}
.project-art::before, .project-art::after{
  content:""; position:absolute; border-radius:50%; filter:blur(2px);
}
.project-art::before{
  width:140px; height:140px; border:1px solid rgba(242,166,90,0.4);
  top:20%; left:15%; animation:orbit1 12s linear infinite;
}
.project-art::after{
  width:90px; height:90px; border:1px solid rgba(94,200,216,0.4);
  bottom:15%; right:20%; animation:orbit2 9s linear infinite;
}
@keyframes orbit1{ from{ transform:rotate(0deg) translateX(10px); } to{ transform:rotate(360deg) translateX(10px); } }
@keyframes orbit2{ from{ transform:rotate(0deg) translateX(-14px); } to{ transform:rotate(-360deg) translateX(-14px); } }
.project-art .art-caption{
  position:absolute; bottom:.8rem; inset-inline:.9rem;
  font-family:"JetBrains Mono", monospace; font-size:.66rem; letter-spacing:.08em;
  color:rgba(244,239,230,0.55);
}

.project-featured-body{ padding:2.2rem; }
.project-featured-body .label{ color:var(--amber); }
.project-featured-body h3{ color:var(--text-warm); font-weight:800; font-size:1.55rem; margin:.5rem 0 .8rem; }
.project-featured-body p{ color:var(--text-muted); margin-bottom:1.2rem; }
.tag{
  display:inline-block; font-family:"JetBrains Mono", monospace; font-size:.68rem;
  padding:.28rem .6rem; border-radius:6px; border:1px solid var(--border-cyan);
  color:var(--cyan); margin-left:.4rem; margin-bottom:.4rem;
}

.project-card{ padding:1.6rem; }
.project-card h5{ color:var(--text-warm); font-weight:700; margin-bottom:.5rem; }
.project-card p{ color:var(--text-muted); font-size:.92rem; margin:0; }

/* ---------- ARTICLES ---------- */
.article-card{ display:flex; flex-direction:column; height:100%; overflow:hidden; }
.article-cover{
  height:160px; position:relative; overflow:hidden;
  background:radial-gradient(circle at 30% 20%, rgba(242,166,90,0.3), transparent 60%),
             radial-gradient(circle at 75% 75%, rgba(94,200,216,0.25), transparent 55%),
             var(--bg-deep-2);
}
.article-cover img{ width:100%; height:100%; object-fit:cover; }
.article-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.article-date{ font-family:"JetBrains Mono", monospace; font-size:.68rem; color:var(--cyan); letter-spacing:.05em; }
.article-body h5{ color:var(--text-warm); font-weight:700; margin:0; font-size:1.02rem; }
.article-body p{ color:var(--text-muted); font-size:.86rem; margin:0; flex:1; }
.article-more{ font-size:.8rem; color:var(--amber); font-weight:600; margin-top:.3rem; }
a.article-card:hover{ color:inherit; }

/* ---------- ROADMAP ---------- */
.roadmap{ position:relative; }
.roadmap-line{
  position:relative;
  display:flex; flex-direction:column; gap:0;
}
.roadmap-item{
  display:grid; grid-template-columns:56px 1fr; gap:1.2rem;
  padding-bottom:2.2rem; position:relative;
}
.roadmap-item:last-child{ padding-bottom:0; }
.roadmap-marker{
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,0.03); border:1px solid var(--border-glow);
  display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono", monospace; font-weight:600; color:var(--amber);
  position:relative; z-index:1; flex-shrink:0;
}
.roadmap-item:not(:last-child)::before{
  content:"";
  position:absolute;
  top:56px; bottom:-2.2rem;
  right:27px;
  width:1px;
  background:linear-gradient(var(--border-glow), var(--border-cyan));
}
html[dir="ltr"] .roadmap-item:not(:last-child)::before{ right:auto; left:27px; }
.roadmap-body{ padding-top:.6rem; }
.roadmap-body h5{ color:var(--text-warm); font-weight:700; margin-bottom:.35rem; }
.roadmap-body p{ color:var(--text-muted); margin:0; font-size:.94rem; }

/* ---------- CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
@media (max-width: 767px){ .contact-grid{ grid-template-columns:repeat(2, 1fr); } }
.contact-chip{ display:flex; flex-direction:column; align-items:center; gap:.7rem; padding:1.6rem 1rem; text-align:center; color:var(--text-warm); }
.contact-chip i{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.04); border:1px solid var(--border-glow); font-size:1.2rem;
  color:var(--amber); transition:all .25s ease;
}
.contact-chip:hover i{ background:var(--amber); color:#160e05; transform:scale(1.08); }
.contact-chip .chip-label{ font-size:.78rem; color:var(--text-muted); }
.contact-chip .chip-value{ font-size:.88rem; font-weight:600; word-break:break-word; }

/* ---------- FOOTER ---------- */
footer{ background:transparent !important; border-top:1px solid var(--border-glow); padding-block:2.2rem; }
.footer-links{ display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; align-items:center; }
.footer-links a{ color:var(--text-muted); font-size:1.05rem; transition:color .2s ease; }
.footer-links a:hover{ color:var(--amber); }
.footer-cv{
  font-family:"JetBrains Mono", monospace; font-size:.72rem; color:var(--cyan);
  border:1px solid var(--border-cyan); border-radius:8px; padding:.4rem .8rem;
}
.footer-cv:hover{ background:rgba(94,200,216,0.1); }
footer .copyright{ color:var(--text-muted); font-size:.8rem; margin-top:1rem; }

/* ---------- REVEAL ---------- */
.fade-up{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.show{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .fade-up{ opacity:1; transform:none; transition:none; }
  .hero-particles{ display:none; }
  .project-art::before, .project-art::after{ animation:none; }
  .card-glass:hover, .btn-amber:hover, .btn-ghost:hover{ transform:none; }
  #loader{ display:none; }
}

@media (max-width: 767px){
  .section-pad{ padding-block:3.5rem; }
  .hero{ min-height:auto; padding-bottom:3rem; }
  .hero h1{ font-size:2rem; }
}