/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:40px;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* =========================================================
   TOKENS — LIGHT (warm editorial paper)
   ========================================================= */
:root{
  --bg:#f5f0e7;
  --bg-2:#efe8db;
  --text:#1a1611;
  --muted:rgba(26,22,17,.64);
  --muted-2:rgba(26,22,17,.44);

  --a1:#bf5a34;
  --a2:#d99a3d;
  --a3:#6f8f6a;

  --grad:linear-gradient(135deg,#bf5a34 0%,#d99a3d 100%);
  --on-accent:#fff8ef;

  --glass-bg:rgba(255,255,255,.58);
  --glass-bd:rgba(26,22,17,.09);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.7);

  --shadow:0 26px 60px -28px rgba(70,45,25,.38);
  --shadow-soft:0 12px 30px -16px rgba(70,45,25,.28);

  --ctl-bg:rgba(255,255,255,.72);
  --ctl-bd:rgba(26,22,17,.09);
  --ctl-shadow:0 10px 30px -10px rgba(70,45,25,.3);

  --orb-a:#e8a97f; --orb-b:#e9c58a; --orb-c:#b8c7a8;
  --orb-a-op:.5; --orb-b-op:.5; --orb-c-op:.4;

  --grid-line:rgba(26,22,17,.045);
  --vignette:rgba(120,90,60,.10);
  --noise-op:.02;

  --glow:rgba(191,90,52,.10);
  --glow-blend:multiply;
  --glow-a:rgba(191,90,52,.28);
  --glow-b:rgba(217,154,61,.16);
  --contact-glow:rgba(217,154,61,.18);

  --sel-bg:rgba(191,90,52,.22);
  --sel-fg:#1a1611;

  --field-bg:rgba(255,255,255,.62);
  --field-focus-bg:#fff;

  --tile-bg:rgba(255,255,255,.52);
  --tile-bg-hover:#fff;
  --chip-bg:rgba(255,255,255,.6);
  --chip-bg-hover:#fff;

  --nav-hover:linear-gradient(135deg,rgba(191,90,52,.14),rgba(217,154,61,.10));

  --bar-bg:rgba(26,22,17,.08);
  --bar-glow:rgba(191,90,52,.45);
  --icon-bg:rgba(191,90,52,.10);
  --icon-bd:rgba(191,90,52,.18);
  --eyebrow-bg:rgba(191,90,52,.08);
  --eyebrow-bd:rgba(191,90,52,.20);
  --accent-line:rgba(191,90,52,.35);
  --accent-line-strong:rgba(191,90,52,.6);
  --accent-shadow:rgba(191,90,52,.55);
  --accent-shadow-hover:rgba(191,90,52,.75);
  --progress-glow:rgba(191,90,52,.5);

  --avatar-frame:linear-gradient(140deg,#bf5a34 0%,#c96f3c 40%,#d99a3d 100%);
  --avatar-ink:#fff6ea;
  --avatar-shadow:0 44px 90px -28px rgba(120,70,35,.55);

  --thumb-p1:linear-gradient(135deg,#7a3a1f,#bf5a34 50%,#e2a877);
  --thumb-p2:linear-gradient(135deg,#7a5a1f,#d99a3d 50%,#f0cd92);
  --thumb-p3:linear-gradient(135deg,#3d5a3f,#6f8f6a 50%,#b7c9aa);
  --thumb-p4:linear-gradient(135deg,#5a3242,#a86a86 50%,#dcb3c4);

  --project-overlay:linear-gradient(180deg,transparent 26%,rgba(30,18,12,.82));
  --project-title:#fff8ee;

  --footer-bd:rgba(26,22,17,.07);
  --ok:#3f7a4a;
  --err:#b83a3a;

  --radius:24px;
  --radius-sm:16px;
  --ease:cubic-bezier(.2,.8,.2,1);

  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
}

/* =========================================================
   TOKENS — DARK (neon night)
   ========================================================= */
html[data-theme="dark"]{
  --bg:#08070a;
  --bg-2:#0e0c10;
  --text:#f4ede0;
  --muted:rgba(244,237,224,.62);
  --muted-2:rgba(244,237,224,.4);

  --a1:#f5a524;
  --a2:#ef6c4d;
  --a3:#a78bfa;

  --grad:linear-gradient(135deg,#f5a524 0%,#ef6c4d 100%);
  --on-accent:#0a0806;

  --glass-bg:rgba(255,255,255,.035);
  --glass-bd:rgba(255,255,255,.08);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.06);

  --shadow:0 26px 60px -24px rgba(0,0,0,.85);
  --shadow-soft:0 14px 34px -16px rgba(0,0,0,.7);

  --ctl-bg:rgba(15,13,18,.72);
  --ctl-bd:rgba(255,255,255,.1);
  --ctl-shadow:0 10px 30px -10px rgba(0,0,0,.7);

  --orb-a:#f5a524; --orb-b:#ef6c4d; --orb-c:#a78bfa;
  --orb-a-op:.45; --orb-b-op:.35; --orb-c-op:.28;

  --grid-line:rgba(255,255,255,.03);
  --vignette:rgba(0,0,0,0);
  --noise-op:.025;

  --glow:rgba(245,165,36,.10);
  --glow-blend:screen;
  --glow-a:rgba(245,165,36,.35);
  --glow-b:rgba(239,108,77,.18);
  --contact-glow:rgba(245,165,36,.16);

  --sel-bg:rgba(245,165,36,.3);
  --sel-fg:#fff;

  --field-bg:rgba(255,255,255,.04);
  --field-focus-bg:rgba(245,165,36,.06);

  --tile-bg:rgba(255,255,255,.03);
  --tile-bg-hover:rgba(255,255,255,.06);
  --chip-bg:rgba(255,255,255,.04);
  --chip-bg-hover:rgba(245,165,36,.10);

  --nav-hover:linear-gradient(135deg,rgba(245,165,36,.16),rgba(239,108,77,.10));

  --bar-bg:rgba(255,255,255,.07);
  --bar-glow:rgba(245,165,36,.5);
  --icon-bg:rgba(245,165,36,.10);
  --icon-bd:rgba(245,165,36,.22);
  --eyebrow-bg:rgba(245,165,36,.08);
  --eyebrow-bd:rgba(245,165,36,.22);
  --accent-line:rgba(245,165,36,.35);
  --accent-line-strong:rgba(245,165,36,.6);
  --accent-shadow:rgba(245,165,36,.6);
  --accent-shadow-hover:rgba(239,108,77,.7);
  --progress-glow:rgba(245,165,36,.6);

  --avatar-frame:linear-gradient(140deg,#f5a524 0%,#e07b3c 45%,#ef6c4d 100%);
  --avatar-ink:#0a0806;
  --avatar-shadow:0 44px 90px -28px rgba(120,50,20,.6);

  --thumb-p1:linear-gradient(135deg,#7a3a1f,#f5a524 55%,#ef6c4d);
  --thumb-p2:linear-gradient(135deg,#5a2a1f,#ef6c4d 55%,#f5a524);
  --thumb-p3:linear-gradient(135deg,#3d2a5a,#a78bfa 55%,#ef6c4d);
  --thumb-p4:linear-gradient(135deg,#5a3a1f,#e07b3c 55%,#f5a524);

  --project-overlay:linear-gradient(180deg,transparent 26%,rgba(8,7,10,.88));
  --project-title:#fff4e6;

  --footer-bd:rgba(255,255,255,.05);
  --ok:#34d399;
  --err:#ef4444;
}

/* Persian font */
html[lang="fa"]{--serif:'Vazirmatn',sans-serif;--sans:'Vazirmatn',sans-serif}
html[lang="fa"] body{line-height:1.75}
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] .typed-line{line-height:1.5;letter-spacing:0}
html[lang="fa"] .hero h1 .grad-text,
html[lang="fa"] .typed{font-style:normal}
html[lang="fa"] .eyebrow,
html[lang="fa"] .badge,
html[lang="fa"] .project-cat,
html[lang="fa"] .detail-label,
html[lang="fa"] .brand small,
html[lang="fa"] .profile-card .role{letter-spacing:0}

/* =========================================================
   BASE
   ========================================================= */
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background-color .5s var(--ease),color .5s var(--ease);
}
h1,h2,h3{font-family:var(--serif);line-height:1.1;letter-spacing:-.02em;font-weight:600}
::selection{background:var(--sel-bg);color:var(--sel-fg)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--grad);border-radius:10px;border:2px solid var(--bg-2)}

/* =========================================================
   BACKGROUND
   ========================================================= */
.bg-layer{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{
  position:absolute;border-radius:50%;
  filter:blur(105px);
  will-change:transform;
  transition:transform .7s var(--ease),opacity .5s var(--ease);
}
.orb-a{width:560px;height:560px;top:-170px;left:-150px;
  background:radial-gradient(circle at 30% 30%,var(--orb-a),transparent 68%);
  opacity:var(--orb-a-op);
  animation:drift 20s ease-in-out infinite alternate}
.orb-b{width:640px;height:640px;bottom:-240px;right:-200px;
  background:radial-gradient(circle at 60% 40%,var(--orb-b),transparent 68%);
  opacity:var(--orb-b-op);
  animation:drift 24s ease-in-out infinite alternate-reverse}
.orb-c{width:460px;height:460px;top:42%;left:52%;
  background:radial-gradient(circle at 50% 50%,var(--orb-c),transparent 68%);
  opacity:var(--orb-c-op);
  animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(70px,-50px) scale(1.15)}
}
.grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse at center,#000 28%,transparent 77%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 28%,transparent 77%);
}
.bg-layer::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,transparent 40%,var(--vignette) 100%);
  transition:background .5s var(--ease);
}
.cursor-glow{
  position:fixed;top:0;left:0;width:560px;height:560px;
  margin-left:-280px;margin-top:-280px;border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 62%);
  pointer-events:none;z-index:1;
  mix-blend-mode:var(--glow-blend);
  transition:transform .25s var(--ease);
  will-change:transform;
}
@media (hover:none){.cursor-glow{display:none}}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:2;
  opacity:var(--noise-op);
  transition:opacity .5s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   GLASS
   ========================================================= */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-bd);
  box-shadow:var(--shadow),var(--glass-inset);
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.progress-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--grad);z-index:9999;
  box-shadow:0 0 12px var(--progress-glow);
  transition:width .1s linear;
}

/* =========================================================
   FLOATING CONTROLS (theme + language)
   ========================================================= */
.controls{
  position:fixed;top:18px;right:18px;z-index:500;
  display:flex;gap:8px;align-items:center;
}
.ctl-group{
  display:flex;gap:2px;padding:4px;border-radius:100px;
  background:var(--ctl-bg);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--ctl-bd);
  box-shadow:var(--ctl-shadow),inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.ctl-group button{
  padding:7px 13px;border-radius:100px;
  font-size:12.5px;font-weight:600;
  color:var(--muted);transition:all .25s var(--ease);
  min-width:40px;letter-spacing:.04em;font-family:var(--sans);
  display:grid;place-items:center;
}
.ctl-group button i{font-size:14px}
.ctl-group button[data-lang="fa"]{font-family:'Vazirmatn',sans-serif;letter-spacing:0;font-size:13px}
.ctl-group button:hover{color:var(--text)}
.ctl-group button.active{
  background:var(--grad);color:var(--on-accent);
  box-shadow:0 4px 14px -4px var(--accent-shadow);
}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;top:0;left:0;bottom:0;width:292px;
  padding:24px;z-index:100;transition:transform .45s var(--ease);
}
.header-inner{
  height:100%;border-radius:28px;padding:28px 18px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.header-inner::before{
  content:'';position:absolute;top:-40%;left:-40%;width:180%;height:180%;
  background:conic-gradient(from 0deg,rgba(191,90,52,.10),transparent 30%,rgba(217,154,61,.10),transparent 60%);
  animation:spin 16s linear infinite;pointer-events:none;
}
html[data-theme="dark"] .header-inner::before{
  background:conic-gradient(from 0deg,rgba(245,165,36,.10),transparent 30%,rgba(239,108,77,.10),transparent 60%);
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand{position:relative;z-index:1;padding:0 8px 22px;border-bottom:1px solid var(--glass-bd);margin-bottom:18px}
.brand-logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.02em}
.brand-mark{
  width:42px;height:42px;border-radius:13px;background:var(--grad);
  display:grid;place-items:center;color:var(--on-accent);font-family:var(--serif);
  font-weight:700;font-size:16px;flex-shrink:0;
  box-shadow:0 10px 24px -8px var(--accent-shadow),inset 0 1px 0 rgba(255,255,255,.35);
}
.brand small{display:block;font-family:var(--sans);font-weight:500;font-size:10.5px;color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}

.nav{position:relative;z-index:1;flex:1}
.nav ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.nav a{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:14px;
  color:var(--muted);font-size:14.5px;font-weight:500;
  transition:all .3s var(--ease);position:relative;overflow:hidden;
}
.nav a i{font-size:17px;transition:transform .3s var(--ease)}
.nav a::before{
  content:'';position:absolute;inset:0;border-radius:14px;
  background:var(--nav-hover);
  opacity:0;transition:opacity .3s var(--ease);
}
.nav a:hover,.nav a.active{color:var(--text)}
.nav a:hover::before,.nav a.active::before{opacity:1}
.nav a:hover i,.nav a.active i{transform:scale(1.15) rotate(-4deg);color:var(--a1)}
.nav a span,.nav a i{position:relative;z-index:1}

.socials{position:relative;z-index:1;display:flex;gap:8px;justify-content:center;padding-top:20px;border-top:1px solid var(--glass-bd);flex-wrap:wrap}
.socials a{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:var(--muted);font-size:16px;transition:all .3s var(--ease);
  background:var(--chip-bg);border:1px solid var(--glass-bd);
}
.socials a:hover{
  color:var(--on-accent);background:var(--grad);transform:translateY(-4px) rotate(-6deg);
  border-color:transparent;
  box-shadow:0 14px 28px -10px var(--accent-shadow);
}

.header-toggle{
  position:fixed;top:18px;right:18px;z-index:200;
  width:48px;height:48px;border-radius:15px;display:none;place-items:center;
  font-size:22px;color:var(--text);
  background:var(--ctl-bg);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-bd);
  box-shadow:var(--shadow-soft);
}

/* =========================================================
   LAYOUT
   ========================================================= */
main{position:relative;z-index:3}
@media (min-width:1100px){main{margin-left:322px}}

@media (max-width:1099px){
  .header{transform:translateX(-110%)}
  .header.open{transform:translateX(0)}
  .header-toggle{display:grid}
  .controls{left:18px;right:auto}
}

/* =========================================================
   RTL
   ========================================================= */
[dir="rtl"] .header{left:auto;right:0}
@media (min-width:1100px){
  [dir="rtl"] main{margin-left:0;margin-right:322px}
}
@media (max-width:1099px){
  [dir="rtl"] .header{transform:translateX(110%)}
  [dir="rtl"] .header.open{transform:translateX(0)}
  [dir="rtl"] .header-toggle{left:18px;right:auto}
}
[dir="rtl"] .contact-links a:hover{transform:translateX(-4px)}
[dir="rtl"] .bar-fill{margin-left:auto}
[dir="rtl"] .contact-wrap::before{right:auto;left:-30%}

@media (min-width:1100px){
  [dir="rtl"] .controls{left:18px;right:auto}
}
@media (max-width:1099px){
  [dir="rtl"] .controls{right:18px;left:auto}
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding:92px 40px;position:relative}
@media (max-width:768px){.section{padding:70px 20px}}
.section-head{max-width:830px;margin:0 auto 58px;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:100px;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--a1);
  background:var(--eyebrow-bg);border:1px solid var(--eyebrow-bd);
  margin-bottom:22px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--a1);box-shadow:0 0 10px var(--a1)}
.section-head h2{font-size:clamp(30px,4.4vw,48px);font-weight:600}
.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-weight:600;font-size:14.5px;
  transition:all .35s var(--ease);position:relative;overflow:hidden;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
}
.btn-primary{
  background:var(--grad);color:var(--on-accent);
  box-shadow:0 16px 32px -14px var(--accent-shadow),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 42px -14px var(--accent-shadow-hover)}
.btn-ghost{
  background:var(--chip-bg);color:var(--text);
  border-color:var(--glass-bd);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft);
}
.btn-ghost:hover{background:var(--chip-bg-hover);border-color:var(--accent-line);transform:translateY(-3px);color:var(--a1)}
.btn i{font-size:16px}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{opacity:0;transform:translateY(46px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100vh;display:flex;align-items:center;
  padding:60px 40px;position:relative;overflow:hidden;
}
@media (max-width:768px){.hero{padding:110px 20px 70px}}
.hero-inner{
  max-width:1200px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;
}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr;gap:54px;text-align:center}}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 17px;border-radius:100px;font-size:12.5px;font-weight:500;
  color:var(--muted);margin-bottom:26px;
}
.badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 12px #34d399;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}

.hero h1{
  font-size:clamp(44px,7.2vw,80px);font-weight:600;
  letter-spacing:-.035em;margin-bottom:18px;
}
.hero h1 .grad-text{display:inline-block;font-style:italic;font-weight:500}
.typed-line{
  font-size:clamp(17px,2.3vw,22px);color:var(--muted);margin-bottom:22px;
  font-weight:500;min-height:1.4em;
}
.typed{color:var(--a1);font-weight:600;font-family:var(--serif);font-style:italic}
.cursor{
  display:inline-block;width:2px;height:1.05em;
  background:var(--a1);margin-inline-start:3px;vertical-align:-.16em;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.hero .desc{
  font-size:clamp(15px,1.7vw,16.5px);color:var(--muted);
  max-width:520px;margin-bottom:38px;line-height:1.8;
}
@media (max-width:900px){.hero .desc{margin-left:auto;margin-right:auto}}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:900px){.hero .cta{justify-content:center}}

/* 3D avatar */
.hero-visual{display:flex;justify-content:center;align-items:center}
.avatar-wrap{
  position:relative;width:380px;height:380px;
  transform-style:preserve-3d;perspective:1200px;
  transition:transform .4s var(--ease);
}
@media (max-width:500px){.avatar-wrap{width:300px;height:300px}}
.avatar-glow{
  position:absolute;inset:-34px;border-radius:50%;
  background:radial-gradient(circle,var(--glow-a),var(--glow-b) 42%,transparent 70%);
  filter:blur(46px);animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}
.avatar-frame{
  position:absolute;inset:0;border-radius:50%;
  display:grid;place-items:center;
  overflow:hidden;transform:translateZ(40px);
  background:var(--avatar-frame);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    var(--avatar-shadow),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -30px 60px rgba(120,40,20,.25);
}
.avatar-face{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(84px,20vw,144px);
  color:var(--avatar-ink);letter-spacing:-.05em;
  text-shadow:0 6px 22px rgba(60,25,5,.35);
}
.ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--accent-line);
  transform-style:preserve-3d;
}
.ring-1{transform:rotateX(70deg) translateZ(20px) scale(1.12);animation:spinRing 13s linear infinite}
.ring-2{transform:rotateY(72deg) translateZ(20px) scale(1.20);animation:spinRing 17s linear infinite reverse}
@keyframes spinRing{to{transform:rotate3d(1,1,0,360deg) translateZ(20px) scale(1.15)}}

.chip{
  position:absolute;padding:9px 16px;border-radius:100px;
  font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px;
  white-space:nowrap;transform-style:preserve-3d;
  color:var(--text);box-shadow:var(--shadow-soft);
  animation:floatChip 5.5s ease-in-out infinite;
}
.chip i{font-size:14px;color:var(--a1)}
.chip-1{top:6%;right:-8%;transform:translateZ(80px);animation-delay:0s}
.chip-2{bottom:18%;left:-14%;transform:translateZ(70px);animation-delay:1.4s}
.chip-3{bottom:-2%;right:12%;transform:translateZ(90px);animation-delay:2.6s}
.chip-2 i{color:var(--a2)}
.chip-3 i{color:var(--a3)}
@keyframes floatChip{
  0%,100%{margin-top:0}
  50%{margin-top:-14px}
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:360px 1fr;gap:48px;align-items:start;
}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:36px}}

.profile-card{
  border-radius:var(--radius);padding:38px 28px;text-align:center;
  position:relative;overflow:hidden;transform-style:preserve-3d;
  transition:transform .45s var(--ease);
}
.profile-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad);
}
.profile-avatar{
  width:130px;height:130px;border-radius:50%;margin:0 auto 22px;
  display:grid;place-items:center;font-family:var(--serif);
  font-weight:700;font-size:46px;color:var(--avatar-ink);
  background:var(--grad);
  box-shadow:0 22px 44px -14px var(--accent-shadow),inset 0 2px 0 rgba(255,255,255,.28);
  position:relative;
}
.profile-avatar::after{
  content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px dashed var(--accent-line-strong);animation:spin 14s linear infinite;
}
.profile-card h3{font-size:23px;margin-bottom:6px}
.profile-card .role{font-size:13.5px;color:var(--a1);font-weight:600;margin-bottom:26px;letter-spacing:.04em}
.contact-links{display:flex;flex-direction:column;gap:10px}
.contact-links a{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-radius:12px;background:var(--chip-bg);
  border:1px solid var(--glass-bd);color:var(--muted);font-size:13.5px;
  transition:all .3s var(--ease);text-align:start;word-break:break-all;
}
.contact-links a:hover{
  background:var(--chip-bg-hover);border-color:var(--accent-line);
  color:var(--text);transform:translateX(4px);
}
.contact-links a i{font-size:16px;color:var(--a1);flex-shrink:0}

.about-body p{font-size:15.5px;color:var(--muted);line-height:1.9;margin-bottom:32px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:36px}
@media (max-width:600px){.detail-grid{grid-template-columns:1fr}}
.detail{
  padding:20px;border-radius:16px;
  background:var(--tile-bg);border:1px solid var(--glass-bd);
  transition:all .3s var(--ease);
}
.detail:hover{background:var(--tile-bg-hover);transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-soft)}
.detail-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted-2);margin-bottom:8px;font-weight:700;
}
.detail-value{font-size:13.5px;color:var(--text);font-weight:500;line-height:1.6}
.about-body .cta{display:flex;gap:14px;flex-wrap:wrap}

/* =========================================================
   SKILLS
   ========================================================= */
.skills-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
@media (max-width:1000px){.skills-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.skills-grid{grid-template-columns:1fr}}

.skill-card{
  border-radius:var(--radius);padding:34px 30px;
  position:relative;overflow:hidden;transform-style:preserve-3d;
  transition:transform .45s var(--ease);
}
.skill-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--a1),var(--a2),transparent);
  opacity:.7;
}
.skill-card h3{
  font-size:19px;margin-bottom:28px;
  display:flex;align-items:center;gap:11px;
}
.skill-card h3 i{
  font-size:17px;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;flex-shrink:0;
  background:var(--icon-bg);color:var(--a1);
  border:1px solid var(--icon-bd);
}

.skill-item{margin-bottom:24px}
.skill-item:last-child{margin-bottom:0}
.skill-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;gap:10px}
.skill-top h4{font-size:13.5px;font-weight:600;font-family:var(--sans);color:var(--text)}
.skill-pct{font-size:12px;color:var(--a1);font-weight:700;font-variant-numeric:tabular-nums}
.bar{
  height:7px;border-radius:100px;background:var(--bar-bg);
  overflow:hidden;position:relative;
}
.bar-fill{
  height:100%;width:0;border-radius:100px;
  background:var(--grad);
  transition:width 1.6s var(--ease);
  box-shadow:0 0 14px var(--bar-glow);
  position:relative;
}
.bar-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:shimmer 2.6s infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skill-note{
  font-size:12px;color:var(--muted-2);margin-top:8px;line-height:1.6;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s var(--ease),opacity .35s var(--ease),margin .35s var(--ease);
}
.skill-item:hover .skill-note{max-height:100px;opacity:1;margin-top:10px}

/* =========================================================
   PORTFOLIO
   ========================================================= */
.portfolio-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;
}
@media (max-width:760px){.portfolio-grid{grid-template-columns:1fr}}

.project{
  border-radius:var(--radius);overflow:hidden;position:relative;
  transform-style:preserve-3d;transition:transform .45s var(--ease);
  cursor:pointer;display:block;
}
.project-thumb{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.project-thumb::after{
  content:'';position:absolute;inset:0;
  background:var(--project-overlay);
  z-index:1;
}
.thumb-bg{
  position:absolute;inset:0;
  transition:transform .6s var(--ease),filter .6s var(--ease);
}
.project:hover .thumb-bg{transform:scale(1.08);filter:brightness(1.12)}
.thumb-icon{
  position:relative;z-index:2;font-size:62px;color:rgba(255,248,238,.92);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.45));
  transition:transform .5s var(--ease);
}
.project:hover .thumb-icon{transform:scale(1.15) translateZ(30px)}

.p1 .thumb-bg{background:var(--thumb-p1)}
.p2 .thumb-bg{background:var(--thumb-p2)}
.p3 .thumb-bg{background:var(--thumb-p3)}
.p4 .thumb-bg{background:var(--thumb-p4)}

.project-info{
  position:absolute;bottom:0;left:0;right:0;padding:26px;
  z-index:3;transform:translateY(8px);
  transition:transform .4s var(--ease);
}
.project:hover .project-info{transform:translateY(0)}
.project-cat{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;margin-bottom:12px;
}
.project h3{font-size:19px;margin-bottom:10px;color:var(--project-title);font-weight:600;font-family:var(--serif)}
.project-links{
  display:flex;gap:10px;opacity:0;transform:translateY(10px);
  transition:all .4s var(--ease) .05s;
}
.project:hover .project-links{opacity:1;transform:translateY(0)}
.project-links a{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px);color:#fff;font-size:15px;
  transition:all .3s var(--ease);
}
.project-links a:hover{background:var(--grad);color:var(--on-accent);transform:translateY(-3px);border-color:transparent}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-wrap{
  max-width:820px;margin:0 auto;
  border-radius:30px;padding:52px;
  position:relative;overflow:hidden;
}
@media (max-width:600px){.contact-wrap{padding:34px 22px}}
.contact-wrap::before{
  content:'';position:absolute;top:-50%;right:-30%;width:80%;height:200%;
  background:radial-gradient(circle,var(--contact-glow),transparent 60%);
  pointer-events:none;
}
.contact-wrap h3{font-size:27px;margin-bottom:8px;position:relative}
.contact-wrap p{color:var(--muted);margin-bottom:34px;position:relative;font-size:15px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.field{
  width:100%;padding:15px 18px;border-radius:14px;
  background:var(--field-bg);border:1px solid var(--glass-bd);
  color:var(--text);font-size:14px;font-family:inherit;
  transition:all .3s var(--ease);position:relative;
}
.field::placeholder{color:var(--muted-2)}
.field:focus{
  outline:none;border-color:var(--accent-line-strong);background:var(--field-focus-bg);
  box-shadow:0 0 0 4px var(--eyebrow-bg);
}
textarea.field{resize:vertical;min-height:140px;margin-bottom:22px}
.contact-wrap .btn{width:100%;justify-content:center}
.form-msg{margin-top:16px;font-size:14px;text-align:center;display:none;font-weight:500}
.form-msg.ok{display:block;color:var(--ok)}
.form-msg.err{display:block;color:var(--err)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:relative;z-index:3;
  text-align:center;padding:48px 20px 38px;
  border-top:1px solid var(--footer-bd);
  color:var(--muted-2);font-size:13px;
}
.footer .grad-text{font-weight:600}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:500px){
  .hero h1{font-size:42px}
  .section-head h2{font-size:28px}
  .project-info{padding:20px}
  .chip{font-size:11px;padding:7px 12px}
}
@media (max-width:400px){
  .controls{gap:6px}
  .ctl-group{padding:3px}
  .ctl-group button{padding:6px 9px;min-width:34px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* =========================================================
   INLINE EDITING + LANGUAGE LINKS
   ========================================================= */
.ctl-group a{
  display:grid;place-items:center;padding:7px 13px;border-radius:100px;
  min-width:40px;color:var(--muted);font-size:12.5px;font-weight:600;
  letter-spacing:.04em;transition:all .25s var(--ease);
}
.ctl-group a[data-lang="fa"]{font-family:'Vazirmatn',sans-serif;letter-spacing:0;font-size:13px}
.ctl-group a:hover{color:var(--text)}
.ctl-group a.active{background:var(--grad);color:var(--on-accent);box-shadow:0 4px 14px -4px var(--accent-shadow)}
#editToggle{min-width:40px}
#editToggle.active{background:var(--grad);color:var(--on-accent);box-shadow:0 4px 14px -4px var(--accent-shadow)}
body.edit-on [data-edit]{outline:1px dashed var(--a1);outline-offset:3px;border-radius:4px;cursor:text}
body.edit-on [data-edit]:hover{outline-color:var(--a2);background:var(--eyebrow-bg)}
body.edit-on [data-edit][contenteditable="true"]{outline:2px solid var(--a1);outline-offset:3px;background:var(--field-focus-bg);cursor:text}
body.edit-on [data-item]{position:relative}
.edit-del{
  display:none;position:absolute;top:8px;inset-inline-end:8px;z-index:20;
  width:30px;height:30px;border-radius:50%;place-items:center;
  color:#fff;background:#b83a3a;border:1px solid rgba(255,255,255,.35);
  font:700 20px/1 var(--sans);box-shadow:0 5px 16px rgba(0,0,0,.22)
}
body.edit-on .edit-del{display:grid}
.edit-add{display:none;margin:16px auto 0;padding:10px 16px;border-radius:100px;border:1px dashed var(--accent-line-strong);color:var(--a1);font:600 13px var(--sans);background:var(--eyebrow-bg);cursor:pointer;transition:all .25s var(--ease)}
body.edit-on .edit-add{display:block}
.edit-add:hover{background:var(--nav-hover);transform:translateY(-2px)}
.edit-status{position:fixed;bottom:18px;inset-inline-end:18px;z-index:10000;padding:10px 16px;border-radius:12px;background:var(--ctl-bg);border:1px solid var(--ctl-bd);box-shadow:var(--ctl-shadow);font-size:12px;color:var(--text);opacity:0;transform:translateY(8px);pointer-events:none;transition:all .2s ease}
.edit-status.show{opacity:1;transform:none}
.edit-status.error{color:var(--err)}
body.edit-on .project{cursor:default}
@media(max-width:1099px){.controls{flex-wrap:wrap}.controls .ctl-group{gap:1px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* =========================================================
   PROJECT CATEGORIES + GITHUB-LIKE NOTEBOOK PREVIEW
   ========================================================= */
.project-filters{
  max-width:1200px;margin:-18px auto 34px;display:flex;justify-content:center;
  align-items:center;gap:9px;flex-wrap:wrap;position:relative;z-index:4;
}
.project-filter-item{position:relative;display:inline-flex;align-items:center}
.project-filter{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;border-radius:100px;background:var(--chip-bg);
  border:1px solid var(--glass-bd);color:var(--muted);font:600 12.5px var(--sans);
  transition:all .25s var(--ease);cursor:pointer;
}
.project-filter:hover{color:var(--text);border-color:var(--accent-line);transform:translateY(-2px)}
.project-filter.active{background:var(--grad);border-color:transparent;color:var(--on-accent);box-shadow:0 8px 22px -10px var(--accent-shadow)}
.project-filter-item .edit-del{top:-7px;inset-inline-end:-7px;width:23px;height:23px;font-size:15px}
.project-item[hidden]{display:none!important}
.project-empty-state{grid-column:1/-1;text-align:center;color:var(--muted);padding:28px 12px;font-size:14px}
.project{width:100%;text-align:start;font:inherit}
button.project{appearance:none;-webkit-appearance:none}
.project-notebook{cursor:pointer}
.project-notebook .project-links span{display:grid;place-items:center}
.project-unlinked{cursor:default}

.notebook-modal{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .25s ease;isolation:isolate}
.notebook-modal.open{visibility:visible;opacity:1}
.notebook-backdrop{position:absolute;inset:0;background:rgba(8,7,10,.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.notebook-dialog{
  position:relative;z-index:1;width:min(1120px,100%);height:min(90vh,1000px);max-height:90vh;min-height:0;
  display:flex;flex-direction:column;border-radius:26px;overflow:hidden;
  background:var(--bg);border:1px solid var(--glass-bd);box-shadow:0 32px 100px rgba(0,0,0,.38);
  transform:translateY(16px) scale(.985);transition:transform .3s var(--ease);
}
.notebook-modal.open .notebook-dialog{transform:none}
.notebook-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 28px 20px;border-bottom:1px solid var(--glass-bd);background:var(--glass-bg)}
.notebook-dialog-heading{min-width:0}
.notebook-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--a1);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.notebook-dialog-head h2{font-size:clamp(20px,3vw,28px);line-height:1.25;overflow-wrap:anywhere}
.notebook-meta{color:var(--muted-2);font-size:12px;margin-top:8px}
.notebook-close{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:13px;background:var(--chip-bg);border:1px solid var(--glass-bd);color:var(--muted);transition:all .2s ease}
.notebook-close:hover{background:var(--grad);color:var(--on-accent);border-color:transparent;transform:rotate(5deg)}
.notebook-status{flex:0 0 auto;padding:22px 28px;color:var(--muted);font-size:14px}
.notebook-status[hidden]{display:none}
.notebook-status.error{color:var(--err)}
.notebook-cells{flex:1 1 auto;min-height:0;padding:22px 28px 32px;overflow:auto;overscroll-behavior:contain}
.notebook-cell{margin:0 0 22px;border:1px solid var(--glass-bd);border-radius:16px;overflow:hidden;background:var(--tile-bg)}
.notebook-cell-label,.notebook-output-label{padding:8px 14px;color:var(--muted-2);background:var(--chip-bg);border-bottom:1px solid var(--glass-bd);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.notebook-code,.notebook-output-text{margin:0;padding:17px 19px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;font:12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:var(--text);direction:ltr;text-align:left}
.notebook-code{background:rgba(20,18,17,.045)}
html[data-theme="dark"] .notebook-code{background:rgba(0,0,0,.28)}
.notebook-output{border-top:1px solid var(--glass-bd);background:var(--field-bg)}
.notebook-output-text{font-size:12px;color:var(--muted)}
.notebook-output-error{color:var(--err)}
.notebook-output-image{display:block;max-width:100%;height:auto;max-height:620px;object-fit:contain;margin:16px auto;border-radius:8px}
.notebook-markdown-content{padding:20px 22px;color:var(--text);font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.notebook-markdown-content h1,.notebook-markdown-content h2,.notebook-markdown-content h3{margin:1.1em 0 .55em}
.notebook-markdown-content h1{font-size:1.65em}.notebook-markdown-content h2{font-size:1.4em}.notebook-markdown-content h3{font-size:1.2em}
.notebook-markdown-content p{margin:.7em 0;color:var(--muted)}
.notebook-markdown-content ul,.notebook-markdown-content ol{padding-inline-start:24px;margin:.7em 0}
.notebook-markdown-content blockquote{border-inline-start:3px solid var(--a1);padding-inline-start:14px;color:var(--muted);margin:1em 0}
.notebook-markdown-content code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--chip-bg);border:1px solid var(--glass-bd);border-radius:5px;padding:2px 5px}
.notebook-markdown-content pre{direction:ltr;text-align:left;overflow:auto;padding:15px;border-radius:10px;background:var(--field-bg);border:1px solid var(--glass-bd)}
.notebook-markdown-content pre code{padding:0;border:0;background:none}
.notebook-markdown-content table{border-collapse:collapse;max-width:100%;display:block;overflow:auto}
.notebook-markdown-content th,.notebook-markdown-content td{padding:8px 11px;border:1px solid var(--glass-bd);text-align:start}
.notebook-markdown-content a{color:var(--a1);text-decoration:underline;text-underline-offset:3px}
.notebook-truncated-note{color:var(--muted-2);font-size:12px;text-align:center;padding:12px}
body.notebook-open{overflow:hidden}
[dir="rtl"] .notebook-dialog-head h2{text-align:right}
@media(max-width:700px){
  .notebook-modal{padding:10px}
  .notebook-dialog{height:94vh;max-height:94vh;border-radius:18px}
  .notebook-dialog-head{padding:18px 17px 15px;gap:12px}
  .notebook-cells{padding:15px 13px 22px}
  .notebook-status{padding:18px}
  .project-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:4px 2px 10px;scrollbar-width:thin}
  .project-filter{white-space:nowrap}
}

.notebook-output-rich{padding:14px 16px;max-width:100%;overflow:auto;color:var(--text);font-size:13px}
.notebook-output-rich table{border-collapse:collapse;min-width:60%;max-width:100%;display:block;overflow:auto}
.notebook-output-rich th,.notebook-output-rich td{padding:7px 10px;border:1px solid var(--glass-bd);text-align:start}
.notebook-output-rich th{background:var(--chip-bg);font-weight:700}
.notebook-output-rich img{max-width:100%;height:auto}