@font-face{font-family:'IRANYekanX';src:url('/fonts/IRANYekanXVF.woff2') format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:'Peyda';src:url('/fonts/peyda-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Peyda';src:url('/fonts/peyda-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Peyda';src:url('/fonts/peyda-bold.woff2') format('woff2');font-weight:700 900;font-display:swap}

:root{--ink:#172033;--muted:#6e7b90;--line:#e8edf5;--soft:#f6f8fb;--blue:#2f6fed;--blue-dark:#2459c7;--shadow:0 18px 48px rgba(31,55,91,.09);--container:min(1220px,calc(100% - 40px));}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:#fff;color:var(--ink);font-family:'IRANYekanX','Peyda',Tahoma,sans-serif;font-size:14px;line-height:1.9;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.container{width:var(--container);margin-inline:auto}

.topbar{height:72px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(14px);position:sticky;top:0;z-index:50}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#eef4ff;color:var(--blue);font:800 13px Arial,sans-serif;border:1px solid #dbe7ff}
.brand>span:last-child{display:flex;flex-direction:column;line-height:1.35}
.brand strong{font-family:'Peyda','IRANYekanX';font-size:15px;font-weight:700}
.brand small{font-size:9px;color:#8b97a8;margin-top:3px}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:11px;font-weight:600;color:#4c586b;transition:.2s}
.nav a:hover{color:var(--blue)}
.menu-btn{display:none;border:0;background:transparent;width:42px;height:42px;padding:0}
.menu-btn span{display:block;width:22px;height:2px;background:#263247;margin:5px auto;border-radius:4px;transition:.2s}

.hero{min-height:calc(100svh - 72px);display:flex;align-items:center;padding:34px 0 38px;background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:center;gap:56px}
.eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;background:#f1f5ff;color:var(--blue);font-size:9px;font-weight:700;margin-bottom:18px}
.hero h1{font-family:'Peyda','IRANYekanX';font-size:clamp(38px,4.2vw,60px);line-height:1.28;letter-spacing:-1.6px;margin:0 0 14px;font-weight:700;color:#101828}
.hero h2{font-family:'Peyda','IRANYekanX';font-size:clamp(18px,1.8vw,25px);line-height:1.75;margin:0 0 18px;font-weight:600;color:#3e4a5e;max-width:820px}
.hero-copy>p{max-width:760px;margin:0;color:#69768b;font-size:13px;line-height:2.15}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.btn{height:44px;border-radius:13px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;font-size:11px;font-weight:700;transition:.2s}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(47,111,237,.18)}
.btn.primary:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn.ghost{background:#fff;border-color:#dfe6ef;color:#344054}
.btn.ghost:hover{border-color:#cdd8e7;background:#fafcff}
.hero-mini{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;color:#718097;font-size:9px}
.hero-mini span{display:flex;align-items:center;gap:7px}
.hero-mini i{width:6px;height:6px;background:#70a0ff;border-radius:50%}
.hero-photo-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center}
.photo-ring{width:min(275px,24vw);aspect-ratio:1;border-radius:50%;padding:7px;border:1px solid #dfe8f6;background:linear-gradient(145deg,#fff,#eef4ff);box-shadow:0 24px 60px rgba(41,70,112,.14)}
.photo-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:#edf2f9}
.photo-note{margin-top:14px;text-align:center}
.photo-note strong{display:block;font-family:'Peyda';font-size:15px}
.photo-note span{display:block;font-size:9px;color:#8995a6;margin-top:2px}

.section{padding:58px 0}
.services,.projects-section{background:#f8fafc}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:30px}
.section-head>div{max-width:650px}
.section-kicker{display:block;color:var(--blue);font-size:9px;font-weight:700;margin-bottom:7px}
.section-head h2{font-family:'Peyda';font-size:clamp(27px,2.8vw,38px);line-height:1.5;letter-spacing:-.8px;margin:0;color:#182235}
.section-head>p{max-width:470px;margin:0;color:#7a8799;font-size:10px;line-height:2}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service-grid article{background:#fff;border:1px solid var(--line);border-radius:22px;padding:23px;min-height:165px;transition:.25s}
.service-grid article:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-grid article>span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#eef4ff;color:var(--blue);margin-bottom:19px}
.service-grid article svg{width:18px;height:18px}
.service-grid h3{font-family:'Peyda';font-size:17px;margin:0 0 8px}
.service-grid p{font-size:10px;color:#7b8798;line-height:2;margin:0}

.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.skill-card{border:1px solid var(--line);border-radius:18px;padding:18px 19px;background:#fff;transition:.2s}
.skill-card:hover{border-color:#d7e2f2;box-shadow:0 12px 30px rgba(32,55,87,.06)}
.skill-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.skill-top strong{font-family:'Peyda';font-size:15px}
.skill-top b{font:700 12px Arial,sans-serif;color:var(--blue)}
.skill-card p{font-size:9px;color:#8a96a7;margin:6px 0 14px}
.skill-line{height:6px;border-radius:99px;background:#edf1f6;overflow:hidden}
.skill-line i{display:block;height:100%;width:var(--level);background:linear-gradient(90deg,#2f6fed,#7cabff);border-radius:99px}

.projects-title-row{align-items:center}
.carousel-controls{display:flex;gap:8px;direction:ltr}
.carousel-btn{width:36px;height:36px;border-radius:11px;border:1px solid #dfe6ef;background:#fff;color:#344054;font-size:23px;line-height:1;display:grid;place-items:center;box-shadow:0 5px 15px rgba(31,55,91,.04)}
.carousel-btn:hover{color:var(--blue);border-color:#cbd9ee}
.project-viewport{position:relative;overflow:hidden;margin-inline:-2px;padding:2px}
.project-viewport::after{content:"";position:absolute;left:0;top:0;bottom:0;width:96px;pointer-events:none;background:linear-gradient(90deg,rgba(248,250,252,.92),rgba(248,250,252,.25),transparent);backdrop-filter:blur(1.8px);z-index:3}
.project-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:3px 0 15px;direction:rtl;scrollbar-width:thin;scrollbar-color:#cdd7e6 transparent}
.project-card{flex:0 0 36.5%;min-width:0;background:#fff;border:1px solid var(--line);border-radius:21px;overflow:hidden;scroll-snap-align:start;box-shadow:0 12px 34px rgba(31,55,91,.06);transition:.25s}
.project-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(31,55,91,.1)}
.project-image{aspect-ratio:16/7.2;background:#eef2f7;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.project-image img{width:100%;height:100%;object-fit:cover;transition:.3s}
.project-card:hover .project-image img{transform:scale(1.02)}
.project-body{padding:13px 14px 14px}
.project-body>span{font-size:8px;color:var(--blue);font-weight:700}
.project-body h3{font-family:'Peyda';font-size:14px;line-height:1.6;margin:4px 0 6px}
.project-body p{font-size:8.4px;color:#7b8798;line-height:1.8;margin:0 0 11px;min-height:30px}
.project-btn{height:34px;padding:0 13px;border-radius:11px;background:#f1f5ff;color:#275fcf;font-size:9px;font-weight:700;display:inline-flex;align-items:center;gap:7px}
.project-btn svg{width:13px;height:13px}
.project-btn:hover{background:#e8f0ff}
.project-btn.disabled{color:#657386;background:#f2f4f7;pointer-events:none}
.project-pending .project-image{filter:saturate(.75)}
.plant-art{position:absolute;inset:0;background:linear-gradient(135deg,#244b35,#173425);filter:blur(4px) brightness(.78);transform:scale(1.06)}
.plant-art i{position:absolute;width:110px;height:170px;background:linear-gradient(180deg,#6cb881,#2f6d46);border-radius:95px 95px 12px 95px;opacity:.85}
.plant-art i:nth-child(1){right:19%;top:13%;transform:rotate(-22deg)}
.plant-art i:nth-child(2){left:21%;top:12%;transform:rotate(24deg)}
.plant-art i:nth-child(3){right:43%;bottom:-7%;transform:rotate(5deg)}
.plant-art span{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px}
.pending-label{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:4px;background:rgba(16,33,24,.38);color:#fff}
.pending-label strong{font-family:'Peyda';font-size:20px}
.pending-label small{font-size:8px;opacity:.86}
.other-project{margin-top:13px;font-size:9px;color:#8a96a7;display:flex;gap:8px;align-items:center;justify-content:flex-start}
.other-project a{color:#3a65bb;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.other-project svg{width:12px;height:12px}

.collaboration{background:#fff}
.collab-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:start}
.collab-copy h2{font-family:'Peyda';font-size:34px;line-height:1.55;margin:3px 0 12px}
.collab-copy>p{font-size:10px;color:#7b8798;line-height:2.05;max-width:430px;margin:0}
.location-line{display:flex;align-items:flex-start;gap:9px;margin-top:22px;font-size:9px;color:#647086}
.location-line svg{width:17px;height:17px;color:var(--blue);margin-top:2px}
.collab-form{border:1px solid var(--line);background:#fff;border-radius:22px;padding:22px;box-shadow:0 16px 44px rgba(31,55,91,.06)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.collab-form label{display:block;margin-bottom:12px}
.collab-form label>span{display:block;font-size:9px;font-weight:700;color:#566176;margin-bottom:6px}
.collab-form input,.collab-form textarea,.collab-form select{width:100%;border:1px solid #e1e7ef;background:#fbfcfe;color:#273348;border-radius:12px;padding:10px 12px;outline:none;transition:.2s;font-size:10px}
.collab-form input,.collab-form select{height:42px}
.collab-form textarea{resize:vertical;min-height:105px}
.collab-form input:focus,.collab-form textarea:focus,.collab-form select:focus{border-color:#92b3ff;box-shadow:0 0 0 3px rgba(47,111,237,.08);background:#fff}
.submit-btn{width:100%;border:0;margin-top:2px}
.btn-loader{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.submit-btn.loading .btn-loader{display:inline-block}.submit-btn.loading svg{display:none}
.form-status{min-height:18px;text-align:center;font-size:9px;margin-top:7px}.form-status.ok{color:#14804a}.form-status.error{color:#c43e50}
.hp{position:absolute!important;left:-9999px!important;opacity:0!important;pointer-events:none!important}

.footer{border-top:1px solid var(--line);padding:24px 0;background:#fff}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-row>div{display:flex;flex-direction:column}.footer-row strong{font-family:'Peyda';font-size:13px}.footer-row span,.footer-row p{font-size:8px;color:#8c97a7;margin:0}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:980px){
  :root{--container:min(100% - 30px,880px)}
  .nav{gap:18px}.hero{min-height:auto;padding:52px 0}.hero-grid{grid-template-columns:1fr .72fr;gap:40px}.photo-ring{width:min(270px,32vw)}
  .section{padding:62px 0}.skills-grid{grid-template-columns:repeat(2,1fr)}.project-card{flex-basis:46%}.collab-grid{grid-template-columns:1fr;gap:30px}.collab-copy>p{max-width:620px}
}
@media(max-width:720px){
  :root{--container:calc(100% - 26px)}
  html{scroll-padding-top:78px}.topbar{height:66px}.brand-mark{width:38px;height:38px;border-radius:12px}.brand small{font-size:8px}.menu-btn{display:block}.nav{position:fixed;top:74px;right:13px;left:13px;display:grid;gap:2px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 22px 54px rgba(31,55,91,.14);opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s}.nav.open{opacity:1;transform:none;pointer-events:auto}.nav a{padding:10px;text-align:center;border-radius:10px}.menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-btn.active span:nth-child(2){opacity:0}.menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{min-height:auto;padding:34px 0 42px}.hero-grid{grid-template-columns:1fr;text-align:center;gap:26px}.hero-copy{order:2}.hero-photo-wrap{order:1}.photo-ring{width:190px}.hero h1{font-size:35px;letter-spacing:-1px}.hero h2{font-size:16px}.hero-copy>p{font-size:11px}.eyebrow{font-size:8px;margin-bottom:13px}.hero-actions,.hero-mini{justify-content:center}.hero-mini{font-size:8px;gap:11px}.photo-note strong{font-size:13px}.photo-note span{font-size:8px}
  .section{padding:54px 0}.section-head{display:block;margin-bottom:22px}.section-head>p{margin-top:10px;font-size:9px}.section-head h2{font-size:26px}.service-grid,.skills-grid{grid-template-columns:1fr}.service-grid article{min-height:auto;padding:20px}.service-grid article>span{margin-bottom:13px}.project-card{flex-basis:82%}.project-viewport::after{width:50px;backdrop-filter:blur(1px)}.carousel-controls{margin-top:12px}.project-body h3{font-size:15px}.project-body p{font-size:8.5px}.other-project{align-items:flex-start;flex-direction:column;gap:3px}
  .form-row{grid-template-columns:1fr}.collab-copy h2{font-size:28px}.collab-form{padding:17px}.footer-row{align-items:flex-start;flex-direction:column;gap:8px}
}
@media(max-width:420px){.hero h1{font-size:31px}.hero h2{font-size:14px}.photo-ring{width:170px}.project-card{flex-basis:88%}.section-head h2{font-size:24px}}


/* ===== نسخه 5: جمع‌وجورتر، تصویر گرد، مهارت‌های متحرک ===== */
.photo-ring{border-radius:50%!important;overflow:hidden;padding:6px}
.photo-ring img{border-radius:50%!important;object-position:center center}
.hero-extra{margin-top:9px!important;font-size:10px!important;color:#7f8a9b!important;line-height:2!important;max-width:720px!important}

.skills-grid{display:flex!important;flex-direction:column;gap:9px;max-width:920px;margin-inline:auto}
.skill-card{padding:13px 15px 14px;border-radius:15px;position:relative;overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease,border-color .2s,box-shadow .2s}
.skill-card.is-visible{opacity:1;transform:none}
.skill-top{align-items:center}
.skill-name-wrap{min-width:0}
.skill-name-wrap strong{font-family:'Peyda';font-size:14px}
.skill-name-wrap p{font-size:8.4px;color:#8a96a7;margin:2px 0 0;line-height:1.7}
.skill-value{display:flex;align-items:center;gap:8px;min-width:max-content}
.skill-value b{font:700 11px Arial,sans-serif;color:var(--blue)}
.skill-complete{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e9f8ef;color:#16864c;border:1px solid #c9edd7;box-shadow:0 5px 14px rgba(22,134,76,.1)}
.skill-complete svg{width:12px;height:12px;stroke-width:2.4}
.skill-line{height:7px;margin-top:10px;position:relative;border-radius:99px;background:#edf1f6;overflow:hidden}
.skill-line i{position:relative;display:block;height:100%;width:0;background:linear-gradient(90deg,#2f6fed 0%,#5d94ff 55%,#86b2ff 100%);border-radius:99px;box-shadow:0 0 16px rgba(47,111,237,.18);transition:width 1.45s cubic-bezier(.22,.82,.25,1);overflow:hidden}
.skill-card.is-visible .skill-line i{width:var(--level)}
.skill-line i::after{content:"";position:absolute;top:0;bottom:0;width:55px;right:-70px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:skewX(-18deg)}
.skill-card.is-visible .skill-line i::after{animation:skillShine 1.4s .55s ease-out forwards}
.skill-line i em{position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #4b84f5;transform:translate(-1px,-50%);box-shadow:0 0 0 3px rgba(75,132,245,.12)}
@keyframes skillShine{from{right:-70px}to{right:110%}}

.service-grid article{min-height:132px;padding:18px 19px;border-radius:18px}
.service-grid article>span{width:36px;height:36px;border-radius:11px;margin-bottom:12px}
.service-grid h3{font-size:15px;margin-bottom:5px}.service-grid p{font-size:9px;line-height:1.85}
.section-head{margin-bottom:22px}.section-head h2{font-size:clamp(24px,2.35vw,33px)}

.project-strip{gap:13px;padding-bottom:11px}
.project-card{border-radius:17px;box-shadow:0 8px 24px rgba(31,55,91,.05)}
.project-image img{object-fit:cover}
.project-body>span{font-size:7.5px}.project-btn{font-size:8.5px;border-radius:9px;padding:0 11px}
.pending-label strong{font-size:17px}.pending-label small{font-size:7.5px}
.carousel-btn{width:32px;height:32px;border-radius:9px;font-size:20px}

@media(max-width:980px){
  .photo-ring{width:min(235px,29vw)}
  .section{padding:50px 0}
  .project-card{flex-basis:42%}
}
@media(max-width:720px){
  .photo-ring{width:165px}
  .hero-extra{font-size:9.5px!important}
  .skill-card{padding:12px 13px}.skill-name-wrap strong{font-size:13px}.skill-name-wrap p{font-size:7.8px}.skill-line{height:6px}
  .project-card{flex-basis:76%}.project-image{aspect-ratio:16/8}.project-body{padding:12px}.project-body h3{font-size:13.5px}.project-body p{font-size:8px;min-height:0}
}
@media(max-width:420px){.photo-ring{width:150px}.project-card{flex-basis:82%}}
@media(prefers-reduced-motion:reduce){.skill-card{opacity:1;transform:none}.skill-line i{width:var(--level)!important;transition:none}.skill-line i::after{display:none}}