:root{
 --bg:#07080d;--panel:rgba(13,15,23,.68);--elev:rgba(255,255,255,.045);--elev2:rgba(255,255,255,.075);
 --line:rgba(255,255,255,.095);--text:#f7f8fb;--dim:rgba(247,248,251,.66);--faint:rgba(247,248,251,.38);
 --a:#a78bfa;--b:#67e8f9;--c:#fb7185;--r:22px;--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100dvh;background:var(--bg);color:var(--text);font-family:Vazirmatn,system-ui,sans-serif;line-height:1.65;overflow:hidden;-webkit-font-smoothing:antialiased}
button,a,input,textarea{font:inherit;-webkit-tap-highlight-color:transparent}button{border:0;background:none;color:inherit;cursor:pointer}a{text-decoration:none;color:inherit}h1,h2,h3,p{margin:0}.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lang-en{display:none}[data-lang=en] .lang-fa{display:none}[data-lang=en] .lang-en{display:inline}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.noise{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
.bg-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.23;animation:float 16s ease-in-out infinite alternate}.blob-a{width:55vmax;height:55vmax;background:var(--a);top:-28vmax;right:-18vmax}.blob-b{width:48vmax;height:48vmax;background:var(--b);bottom:-28vmax;left:-20vmax;animation-delay:-6s}.blob-c{width:35vmax;height:35vmax;background:var(--c);top:35vh;left:30vw;opacity:.12;animation-delay:-11s}.grid{position:absolute;inset:0;opacity:.11;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:55px 55px;mask-image:radial-gradient(circle at center,#000,transparent 75%)}.cursor-glow{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.16),transparent 65%);transform:translate(-50%,-50%);transition:opacity .3s}
@keyframes float{to{transform:translate(4vw,5vh) scale(1.12) rotate(12deg)}}@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(103,232,249,0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes enter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}@keyframes shine{from{background-position:200% 0}to{background-position:-200% 0}}
#app{position:relative;z-index:1;width:min(720px,100%);height:100dvh;margin:auto;padding:14px;display:flex;flex-direction:column;gap:11px}
.shell{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:28px;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 35px 90px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.09)}
.topbar{height:58px;flex:none;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}.brand{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--dim)}.status-dot{width:8px;height:8px;border-radius:50%;background:#67e8f9;box-shadow:0 0 16px #67e8f9;animation:pulse 2s infinite}.top-actions{margin-inline-start:auto;display:flex;gap:7px}.icon-btn,.lang-btn{height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--line);background:var(--elev);border-radius:999px;color:var(--dim);font-size:11px;font-weight:800;transition:.25s var(--ease)}.icon-btn:hover,.lang-btn:hover{transform:translateY(-2px);color:var(--text);background:var(--elev2)}.icon-btn .i{width:15px;height:15px}
.shell-body{flex:1;min-height:0;overflow:auto;padding:26px 22px 32px;scrollbar-width:none}.shell-body::-webkit-scrollbar{display:none}.view{display:none}.view.active{display:block;animation:enter .55s var(--ease)}
.hero{text-align:center;display:flex;align-items:center;flex-direction:column;padding:22px 0 26px}.avatar-wrap{position:relative;width:132px;height:132px;margin-bottom:17px;perspective:500px}.avatar-ring{position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,var(--b),var(--a),var(--c),var(--b));animation:spin 8s linear infinite}.avatar-ring:after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--bg)}.avatar-img,.avatar-fallback{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:50%;object-fit:cover;border:4px solid var(--bg);z-index:2;background:var(--elev2)}.avatar-fallback{display:none;align-items:center;justify-content:center;font-size:46px;font-weight:900}.no-img .avatar-img{display:none}.no-img .avatar-fallback{display:flex}.avatar-orbit{position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%;inset:-15px;animation:spin 10s linear infinite}.orbit-2{inset:8px;border-style:dashed;animation-direction:reverse;animation-duration:13s}
.eyebrow,.kicker{font-size:10px;letter-spacing:.16em;color:var(--a);font-weight:900}.hero-name{font-size:34px;line-height:1.2;font-weight:900;letter-spacing:-.03em;margin-top:7px}.hero-line{margin-top:8px;font-size:12px;font-weight:900;letter-spacing:.22em;background:linear-gradient(90deg,var(--b),var(--a),var(--c),var(--b));background-size:250% auto;-webkit-background-clip:text;color:transparent;animation:shine 5s linear infinite}.hero-loves{margin-top:12px;color:var(--dim);font-size:13px;display:flex;align-items:center;gap:7px}.hero-loves .i{color:var(--b)}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:26px}.mini-card{padding:14px;border:1px solid var(--line);background:var(--elev);border-radius:16px;position:relative;overflow:hidden;transition:.3s var(--ease)}.mini-card:before{content:"";position:absolute;width:80px;height:80px;border-radius:50%;background:var(--a);filter:blur(35px);opacity:.11;right:-25px;top:-25px}.mini-card:hover{transform:translateY(-5px) rotateX(2deg);border-color:rgba(167,139,250,.35)}.mini-num{display:block;color:var(--faint);font:700 9px monospace;margin-bottom:9px}.mini-card b{display:block;font-size:13px}.mini-card small{display:block;color:var(--dim);font-size:10px;margin-top:2px}
.panel,.skill-group{border:1px solid var(--line);background:var(--elev);border-radius:20px;padding:17px;position:relative;overflow:hidden}.panel:after,.skill-group:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.035),transparent 70%);transform:translateX(-100%);transition:transform .7s var(--ease)}.panel:hover:after,.skill-group:hover:after{transform:translateX(100%)}
.section-head{margin-bottom:13px}.section-head h2{font-size:19px;font-weight:900;margin-top:3px}.section-head p{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.8}.page-head{margin-bottom:22px}.prose{font-size:13.5px;color:var(--dim);line-height:2}
.skill-group{margin-top:13px}.group-title{display:flex;align-items:center;gap:10px;margin-bottom:12px}.group-title>span{font:800 10px monospace;color:var(--a);padding:4px 7px;border:1px solid rgba(167,139,250,.25);border-radius:7px}.group-title b{font-size:12px}.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.tool{min-width:0;display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);position:relative;overflow:hidden;transition:.3s var(--ease)}.tool:hover{transform:translateY(-4px) scale(1.015);border-color:color-mix(in srgb,var(--tc) 45%,transparent);box-shadow:0 15px 30px rgba(0,0,0,.12)}.tool-ic{grid-row:1/3;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--tc);background:color-mix(in srgb,var(--tc) 13%,transparent);border:1px solid color-mix(in srgb,var(--tc) 25%,transparent)}.tool b{font-size:12px;align-self:end}.tool small{font-size:9px;color:var(--faint)}
.projects{display:grid;gap:11px}.project{padding:17px;border:1px solid var(--line);background:var(--elev);border-radius:20px;transition:.35s var(--ease);position:relative;overflow:hidden}.project:hover{transform:translateY(-6px);border-color:rgba(103,232,249,.3);box-shadow:0 20px 40px rgba(0,0,0,.15)}.project-top{display:flex;justify-content:space-between;align-items:center}.project-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,rgba(103,232,249,.15),rgba(167,139,250,.15));color:var(--b);border:1px solid var(--line)}.project-index{font:800 10px monospace;color:var(--faint)}.project h3{font-size:16px;margin-top:14px}.project p{font-size:12px;line-height:1.8;color:var(--dim);margin-top:4px}.featured{background:linear-gradient(135deg,rgba(167,139,250,.08),var(--elev))}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.tags i{font-style:normal;font-size:9px;padding:4px 8px;border-radius:999px;color:var(--a);border:1px solid rgba(167,139,250,.22);background:rgba(167,139,250,.06)}
.timeline{position:relative}.timeline:before{content:"";position:absolute;top:12px;bottom:12px;right:15px;width:1px;background:linear-gradient(var(--a),transparent)}[dir=ltr] .timeline:before{right:auto;left:15px}.step{display:grid;grid-template-columns:34px 1fr;gap:13px;margin-bottom:10px;padding:12px;border:1px solid var(--line);background:var(--elev);border-radius:16px;position:relative;transition:.3s var(--ease)}.step:hover{transform:translateX(-4px);border-color:rgba(167,139,250,.3)}[dir=ltr] .step:hover{transform:translateX(4px)}.step-no{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--bg);border:1px solid rgba(167,139,250,.3);color:var(--a);font:800 9px monospace;z-index:1}.step h3{font-size:13px}.step p{font-size:11px;color:var(--dim);line-height:1.8;margin-top:2px}.quote{margin-top:15px;padding:18px;border-radius:18px;background:linear-gradient(135deg,rgba(103,232,249,.08),rgba(167,139,250,.08));border:1px solid var(--line);display:flex;gap:10px}.quote>span{font:900 30px Georgia;color:var(--a);line-height:.8}.quote p{font-size:12px;color:var(--dim);line-height:1.9}
.cards{display:flex;flex-direction:column;gap:9px}.card{display:flex;align-items:stretch;overflow:hidden;border:1px solid var(--line);background:var(--elev);border-radius:17px;transition:.3s var(--ease)}.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--bc) 45%,transparent)}.card[data-brand=tg]{--bc:#3ea6f0}.card[data-brand=ig]{--bc:#e1306c}.card[data-brand=mail]{--bc:#f5a524}.card-go{display:flex;align-items:center;gap:12px;flex:1;padding:12px 14px;min-width:0}.card-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;color:var(--bc);background:color-mix(in srgb,var(--bc) 12%,transparent);border:1px solid color-mix(in srgb,var(--bc) 25%,transparent)}.card-txt{min-width:0}.card-txt small{display:block;color:var(--faint);font-size:9px}.card-txt b{display:block;font-size:13px;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-copy{width:48px;border-inline-start:1px solid var(--line);display:grid;place-items:center;color:var(--dim)}.card-copy .ic-done{display:none;color:#5ee7a5}.card.copied .ic-copy{display:none}.card.copied .ic-done{display:block}.copy-toast{text-align:center;color:#5ee7a5;font-size:11px;margin:10px}.form-panel{margin-top:22px}.form{display:flex;flex-direction:column;gap:11px}.field{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--dim)}.field input,.field textarea{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.08);color:var(--text);border-radius:13px;padding:10px 12px;outline:0;resize:vertical;transition:.25s}.field input:focus,.field textarea:focus{border-color:rgba(167,139,250,.6);box-shadow:0 0 0 4px rgba(167,139,250,.08)}.send{min-height:43px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--a),#7c3aed);color:white;font-size:12px;font-weight:800;box-shadow:0 12px 30px rgba(124,58,237,.18);transition:.3s var(--ease)}.send:hover{transform:translateY(-3px);filter:brightness(1.08)}.send .ic-sent{display:none}.send[data-state=sent] .ic-send{display:none}.send[data-state=sent] .ic-sent{display:block}.form-status{font-size:11px;color:#fb7185;text-align:center}
.dock{position:relative;flex:none;width:100%;height:61px;display:grid;grid-template-columns:repeat(5,1fr);padding:5px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(22px);border-radius:19px;box-shadow:0 18px 40px rgba(0,0,0,.2);overflow:hidden}.dock-pill{position:absolute;top:5px;bottom:5px;right:0;border-radius:15px;background:linear-gradient(135deg,rgba(167,139,250,.22),rgba(103,232,249,.1));border:1px solid rgba(167,139,250,.25);transition:.5s var(--ease);pointer-events:none}.dock-item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--faint);font-size:9px;font-weight:800;transition:.25s var(--ease)}.dock-item .i{width:18px;height:18px}.dock-item:hover,.dock-item.active{color:var(--text);transform:translateY(-1px)}
.reveal{opacity:0;transform:translateY(14px)}.view.active .reveal{animation:enter .55s var(--ease) forwards}.view.active .reveal:nth-child(2){animation-delay:.06s}.view.active .reveal:nth-child(3){animation-delay:.12s}.view.active .reveal:nth-child(4){animation-delay:.18s}
[data-tilt]{transform-style:preserve-3d}
@media(min-width:650px){#app{padding:18px}.shell-body{padding:30px 30px 36px}.projects{grid-template-columns:repeat(2,1fr)}.project:last-child:nth-child(odd){grid-column:span 2}}
@media(max-width:430px){#app{padding:8px;gap:8px}.shell{border-radius:22px}.shell-body{padding:20px 15px 25px}.topbar{padding:0 12px}.hero-name{font-size:29px}.quick-grid{gap:6px}.mini-card{padding:11px 9px}.mini-card small{font-size:9px}.dock{height:57px}}