:root{--ink:#08080a;--panel:#101014;--line:#23232b;--bone:#ecebe6;--mute:#8f8f9a;--gold:#ffc42e;--green:#3dff9a;--cyan:#5cc8d8}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font:400 1rem/1.85 "Vazirmatn",system-ui,sans-serif;animation:enter .6s ease both}
@keyframes enter{from{opacity:0}to{opacity:1}}
#rain{position:fixed;inset:0;width:100%;height:100%;opacity:.07;pointer-events:none}
main,.nav,.foot{position:relative;z-index:1}
a{color:var(--cyan);text-decoration:none;transition:color .2s}a:hover{color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:5.5rem 1.5rem}.narrow{max-width:680px}
h1,h2,h3{line-height:1.25;margin:0 0 .6rem}h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800}
.lead{color:var(--mute);max-width:62ch}small{color:var(--mute);font-family:"JetBrains Mono",monospace}
/* nav */
.nav{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.5rem;border-bottom:1px solid transparent;transition:.3s}
.nav.solid{background:rgba(8,8,10,.88);backdrop-filter:blur(10px);border-color:var(--line)}
.logo{font:800 1.1rem "JetBrains Mono",monospace;color:var(--bone);letter-spacing:.04em}.logo span{color:var(--green)}
.links{display:flex;gap:1.6rem;align-items:center}.links>a{color:var(--bone);font-size:.95rem;position:relative}
.links>a::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:1px;background:var(--gold);transform:scaleX(0);transition:.25s}.links>a:hover::after{transform:scaleX(1)}
.lang{display:flex}.lang a{font:600 .75rem "JetBrains Mono",monospace;padding:.2rem .6rem;border:1px solid var(--line);color:var(--mute)}.lang a[aria-current]{background:var(--gold);border-color:var(--gold);color:#111}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--bone);font-size:1.2rem;padding:.2rem .65rem}
/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;min-height:calc(100vh - 70px);padding-block:3rem}
.mark{font:800 clamp(3.4rem,10vw,7.2rem)/.95 "JetBrains Mono",monospace;letter-spacing:-.03em;margin:0 0 1.4rem;direction:ltr;text-align:start}
.mark b{display:block;font-weight:800;color:transparent;-webkit-text-stroke:1.5px var(--bone)}
.mark em{display:block;font-style:normal;color:var(--gold);text-shadow:0 0 44px rgba(255,196,46,.35)}
.roles{font:600 1.15rem "JetBrains Mono",monospace;color:var(--gold);direction:ltr;text-align:start;min-height:1.8em}
.roles::after{content:"▍";color:var(--green);animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.btn{display:inline-block;padding:.65rem 1.35rem;border:1px solid var(--line);color:var(--bone);background:transparent;font-weight:600;font-size:.95rem;font-family:inherit;cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--green);color:var(--green)}.btn.gold{background:var(--gold);border-color:var(--gold);color:#111}.btn.gold:hover{box-shadow:0 0 26px rgba(255,196,46,.45);color:#111}
.term{background:#050507;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(61,255,154,.07);direction:ltr;text-align:left}
.term .bar2{display:flex;align-items:center;gap:6px;padding:.6rem .9rem;border-bottom:1px solid var(--line);font:.75rem "JetBrains Mono",monospace;color:var(--mute)}
.bar2 i{width:10px;height:10px;border-radius:50%;background:var(--line)}.bar2 i:first-child{background:var(--gold)}.bar2 span{margin-inline-start:auto}
.term pre{margin:0;padding:1.1rem 1.2rem;min-height:290px;font:.88rem/1.8 "JetBrains Mono",monospace;color:#c9d1d9;white-space:pre-wrap}
.term .ok{color:var(--green)}.term .cmd{color:var(--gold)}.term .dim{color:var(--mute)}
/* split sections */
.split{display:grid;grid-template-columns:300px 1fr;gap:3rem;border-top:1px solid var(--line)}
.split .head{position:sticky;top:90px;align-self:start}.split .head h2{margin-bottom:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.card,.tile,.skill{position:relative;background:var(--panel);border:1px solid var(--line);padding:1.4rem;overflow:hidden;transition:border-color .25s}.card:hover,.tile:hover,.skill:hover{border-color:rgba(255,196,46,.5)}
.card::before,.tile::before,.skill::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,196,46,.14),transparent 70%);pointer-events:none}
.card:hover::before,.tile:hover::before,.skill:hover::before{opacity:1}
.card::after{content:"";position:absolute;top:0;inset-inline-start:0;width:18px;height:18px;border-top:2px solid var(--gold);border-inline-start:2px solid var(--gold)}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:1rem;filter:saturate(.85)}
.card h3 a{color:var(--bone)}.card h3 a:hover{color:var(--gold)}.card p{color:var(--mute);margin:.3rem 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.tile{text-align:center}.tile i{font-size:2.3rem}.tile h3{font-size:1rem;margin:.5rem 0 .2rem}.tile p{font-size:.8rem;color:var(--mute);margin:0 0 .6rem;line-height:1.5}
.meter{height:3px;background:var(--line)}.meter b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--green));transition:width 1.3s cubic-bezier(.2,.8,.2,1)}
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.skill h3{display:flex;justify-content:space-between;font-size:1rem}.skill p{font-size:.85rem;color:var(--mute);margin:.2rem 0 .7rem}
.cat{margin:2rem 0 .7rem;font:600 .85rem "JetBrains Mono",monospace;color:var(--cyan);direction:ltr;text-align:start}.cat:first-child{margin-top:0}
.tags span{display:inline-block;margin:.15rem;padding:0 .6rem;border:1px solid var(--line);font:.75rem "JetBrains Mono",monospace;color:var(--cyan)}
/* security */
.sec{background:linear-gradient(180deg,rgba(61,255,154,.03),transparent)}
.shield{width:44px;height:auto;color:var(--green);margin-bottom:1rem;filter:drop-shadow(0 0 10px rgba(61,255,154,.5))}
.list{columns:2;column-gap:2rem;margin:0;padding:1.1rem 1.2rem;list-style:none;font:.85rem/2 "JetBrains Mono",monospace;color:#c9d1d9}.list li::before{content:"[ok] ";color:var(--green)}
.scope{padding:1rem 1.2rem;border-bottom:1px solid var(--line);font:.85rem/1.8 "JetBrains Mono",monospace;color:var(--gold)}
/* timeline */
.timeline{list-style:none;margin:0;padding:0;border-inline-start:1px solid var(--line)}.timeline li{position:relative;padding:0 1.4rem 2rem}
.timeline li::before{content:"";position:absolute;inset-inline-start:-5px;top:.65rem;width:9px;height:9px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.ico{font-size:1.6rem}
/* forms & misc */
.filter{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.5rem}
input,select,textarea{width:100%;padding:.7rem .9rem;background:var(--panel);border:1px solid var(--line);color:var(--bone);font:inherit;border-radius:0}.filter input,.filter select{width:auto}
.form label{display:block;margin-bottom:1rem}.err{display:block;color:#ff6b6b;font-size:.85rem}.hp{position:absolute;left:-9999px}
.msg{max-width:1160px;margin:1rem auto 0;padding:.7rem 1rem;border:1px solid var(--line)}.msg.success{border-color:var(--green)}.msg.error{border-color:#ff6b6b}
.avatar{border-radius:50%;object-fit:cover;border:2px solid var(--gold);margin-bottom:1rem}.cover{width:100%;margin:1rem 0}
.foot{border-top:1px solid var(--line);padding-block:2.2rem;color:var(--mute);font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}.reveal.in{opacity:1;transform:none}
@media(max-width:860px){.hero,.split{grid-template-columns:1fr}.hero{min-height:auto}.split .head{position:static}.burger{display:block}.list{columns:1}
.links{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:flex-start;background:var(--ink);padding:1.2rem 1.5rem;border-bottom:1px solid var(--line)}.links.open{display:flex}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}#rain{display:none}}

/* ---- hand-drawn hero (from the supplied design) ---- */
.hand{font-family:"Caveat","Vazirmatn",cursive;font-weight:700}
.hi{display:inline-flex;align-items:flex-end;gap:.4rem;font-size:2.4rem;line-height:1;color:var(--gold);margin-bottom:.4rem}
.hi svg{width:34px;height:34px;color:var(--bone)}
.stagger>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.1s)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.bio{max-width:48ch;margin:1.3rem 0;padding:.4rem 1.1rem;border-inline-start:3px solid var(--gold);color:#d9d9e0;font-size:1.08rem;line-height:2.05;text-wrap:pretty;background:linear-gradient(90deg,rgba(255,196,46,.07),transparent)}[dir=rtl] .bio{background:linear-gradient(270deg,rgba(255,196,46,.07),transparent)}
.stackrow{display:flex;gap:1.6rem;margin:1.6rem 0 1rem;direction:ltr}
.stackrow span{display:flex;flex-direction:column;align-items:center;gap:.3rem;font-size:.8rem;color:var(--bone)}
.stackrow i{font-size:2.3rem;transition:transform .25s}.stackrow span:hover i{transform:translateY(-5px) scale(1.08)}
.slogan{display:inline-block;font-size:1.9rem;color:var(--gold);transform:rotate(-3deg);margin-top:.6rem;direction:ltr}
.slogan svg{display:block;width:100%;height:12px;margin-top:2px}
.slogan path,.hi path{stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.2s .9s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}
.portrait{position:relative;max-width:520px;justify-self:center;width:100%}
.portrait>img{display:block;width:100%;height:auto;transform:translate(calc(var(--tx,0)*10px),calc(var(--ty,0)*7px));transition:transform .2s ease-out}
.portrait .ph{position:absolute;aspect-ratio:1;border-radius:50%}
.note{position:absolute;inset-inline-end:-6%;top:2%;font-size:1.7rem;color:var(--bone);transform:rotate(-8deg);display:flex;align-items:center;gap:.5rem;direction:ltr;transition:transform .2s ease-out;translate:calc(var(--tx,0)*-14px) calc(var(--ty,0)*-10px)}
.note b{color:var(--gold);font:700 2rem "JetBrains Mono",monospace}
.checks{position:absolute;inset-inline-end:-10%;top:52%;list-style:none;margin:0;padding:0;font-size:1.55rem;transform:rotate(-7deg);direction:ltr;translate:calc(var(--tx,0)*-18px) calc(var(--ty,0)*-8px);transition:translate .2s ease-out}
.checks li{display:flex;align-items:center;gap:.6rem;margin:.25rem 0}.checks svg{width:22px;height:22px;color:var(--gold);flex:none}
.portrait .term.float{position:absolute;inset-inline-start:-8%;bottom:5%;width:min(310px,62%);background:rgba(5,5,7,.88);backdrop-filter:blur(6px)}
.float pre{min-height:150px;padding:.7rem .9rem;font-size:.7rem;line-height:1.6}.float .bar2{padding:.4rem .7rem;font-size:.65rem}
@media(max-width:860px){.note,.checks{display:none}.portrait .term.float{inset-inline-start:0;width:70%}.hi{font-size:2rem}}
.photo{display:block;max-width:320px;width:100%;height:auto;margin-bottom:1rem}

[dir=rtl] .mark,[dir=rtl] .roles{text-align:right}[dir=rtl] .stackrow{justify-content:flex-end}
.btn.sm{padding:.38rem 1rem;font-size:.85rem}.acts{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.more{margin-top:1.8rem}.empty{grid-column:1/-1;color:var(--mute);border:1px dashed var(--line);padding:1.6rem;margin:0}
.prose{max-width:64ch;color:#cfcfd6;line-height:2.05}.prose p{unicode-bidi:plaintext;margin:0 0 1rem}