/* ===== فونت‌ها ===== */
@font-face{font-family:YekanBakh;src:url(../fonts/YekanBakh-VF.ttf) format("truetype");font-weight:100 1000;font-display:swap}
@font-face{font-family:YekanBakhFaNum;src:url(../fonts/YekanBakhFaNum-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:YekanBakhFaNum;src:url(../fonts/YekanBakhFaNum-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:YekanBakhFaNum;src:url(../fonts/YekanBakhFaNum-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Meem;src:url(../fonts/Meem-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Meem;src:url(../fonts/Meem-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Meem;src:url(../fonts/Meem-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  --yellow:#FFCC26;
  --ink:#232323;
  --text:#43454D;
  --gray:#919191;
  --fa:YekanBakh,Tahoma,sans-serif;
  --fa-num:YekanBakhFaNum,YekanBakh,Tahoma,sans-serif;
  --title:Meem,YekanBakh,Tahoma,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* تا متن‌های پنل مدیریت برسند صفحه لحظه‌ای پنهان است؛ در هر حال بعد از ۱٫۶ ثانیه دیده می‌شود */
html.cms-wait body{opacity:0;animation:cms-show 0s 1.6s forwards}
@keyframes cms-show{to{opacity:1}}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font:400 18px/1.5 var(--fa);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:0;padding:0;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}
.ico{display:inline-flex;line-height:0}
.ico svg{display:block}
.container{max-width:1300px;margin:0 auto;position:relative}

/* ===== عنوان بخش‌ها و برچسب کج ===== */
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.sec-head h2{position:relative;font:700 44px/44px var(--title);color:var(--ink)}
.sec-head h3{margin-top:16px;font:400 20px/20px var(--fa);color:var(--gray)}
.sec-head.dark h2{color:#fff}
.tag{position:absolute;left:8px;top:-14px;transform:translate(-50%,-50%) rotate(-15deg);background:var(--yellow);color:var(--text);
  font:500 16px/24px var(--fa);padding:5px 8px;border-radius:10px;box-shadow:0 8px 19px -3px var(--yellow);white-space:nowrap;direction:ltr}
.tag.grad{background:linear-gradient(86deg,#FFBB71 14%,#9BF3FF 63%);color:#110F0F;box-shadow:0 8px 14px -6px #A1F0F7}

/* ===== نوار بالا ===== */
.topbar{height:60px;display:flex;align-items:center;justify-content:center;gap:4px;background:var(--yellow) url(../img/topbar-bg.png) 50% 50%/cover}
.topbar p{font:600 14px/21px var(--fa);color:var(--text)}
.topbar .sep{margin:0 4px}
.topbar a{display:flex;align-items:center;gap:5px;font:600 16px/24px var(--title);color:var(--text)}
.topbar a .ico{order:2}

/* ===== هدر ===== */
.mainbar{background:#000;height:90px}
.mainbar-in{max-width:1300px;height:100%;margin:0 auto;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:20px;color:#fff;font:400 20px/20px var(--fa);white-space:nowrap}
.menu{display:flex;align-items:center;gap:20px;min-width:688px;height:53px;margin-inline-start:37px;padding:0 32px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:32px}
.menu a{display:flex;align-items:center;gap:8px;white-space:nowrap;color:#fff;font:500 16px/24px var(--fa);transition:color .3s}
.menu a img{width:20px;height:20px}
.menu a:hover,.menu a.active{color:var(--yellow)}
.menu .chev svg{width:12px;height:24px}
.menu .chev path{fill:#fff}
.tools{display:flex;align-items:center;margin-inline-start:auto;margin-inline-end:-21px}
.mode{order:1;position:relative;flex-shrink:0;width:52px;height:28px;border-radius:16px;background:#404040;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);margin-inline-end:14px;transition:background .4s}
.mode .knob{position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:10px;background:#fff;display:grid;place-items:center;
  box-shadow:0 1px 1px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.08);transition:transform .3s}
.mode .knob svg{width:15px;height:15px}
.mode .moon{position:absolute;right:10px;top:8px}
.mode .moon svg{width:10px;height:10px}
.mode .moon path{fill:#fff}
.tool-btn{display:grid;place-items:center;height:24px;padding:0 15px;position:relative}
.tool-btn.search{order:2;border-left:1px solid rgba(255,255,255,.4);border-right:1px solid rgba(255,255,255,.4)}
.tool-btn.cart{order:3}
.tool-btn.search path{stroke:#fff}
.tool-btn.cart path{fill:#fff}
.btn-login{order:5;display:flex;align-items:center;gap:7px;width:165px;height:54px;padding:0 10px;border:4px solid #4F4E4E;border-radius:88px;
  background:linear-gradient(90deg,#FFD037 0%,#FFF27A 100%);box-shadow:0 7px 17px -6px var(--yellow);font:500 15px/22.5px var(--fa);color:var(--ink)}
.btn-login .circle{order:2;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-inline-start:auto}
.burger{display:none}

/* ===== هیرو ===== */
.hero{position:relative;z-index:2;height:500px;background:#232323 url(../img/hero-bg.png) 50% 100%/cover no-repeat;border-radius:0 0 50px 50px}
.hero-txt{width:600px;padding-top:108px;display:flex;flex-direction:column;align-items:flex-start}
.hero-pill{padding:14px 16px;border:2px solid rgba(255,255,255,.33);border-radius:100px}
.hero-pill .inner{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px 0 7px;border:1px solid rgba(255,204,38,.2);border-radius:100px;
  background:linear-gradient(275deg,rgba(255,204,38,.2) 0%,rgba(255,204,38,0) 57%);color:#fff;font:400 16px/24px var(--fa)}
.hero-pill svg{width:10px;height:10px;fill:var(--yellow)}
.hero h1{margin-top:22px;font:700 40px/40px var(--title);color:var(--yellow)}
.hero p{margin-top:36px;font:400 20px/28px var(--fa);color:#fff}
.hero p .dim{opacity:.5}
.btn-hero{margin-top:22px;display:flex;align-items:center;gap:12px;height:60px;padding:0 12px;border:4px solid #696868;border-radius:50px;
  background:linear-gradient(90deg,#FCB814 0%,#FDF997 100%);box-shadow:0 10px 30px 7px rgba(244,206,82,.2);font:600 14px/21px var(--fa);color:var(--text)}
.btn-hero:hover{background:linear-gradient(90deg,#FCB814 0%,#FCF714 100%)}
.btn-hero .circle{order:2;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 5px var(--yellow)}
.btn-hero path{stroke:var(--ink)}

/* ===== مزایا ===== */
.benefits{background:#F3F3F3;margin-top:-45px;height:325px;padding-top:45px}
.benefits .container{height:100%;display:flex;align-items:center;gap:29px}
.benefits-title{flex:0 0 277px;height:203px;display:flex;align-items:center;padding-inline-start:22px;background:url(../img/benefits-title-bg.png) 100% 50%/contain no-repeat}
.benefits-title h2{font:700 36px/54px var(--title);color:var(--text)}
.benefits-title em{font-style:normal;color:var(--yellow)}
.benefit-list{display:flex;gap:15px}
.benefit{width:318px;height:139px;border:1px solid rgba(227,226,221,.2);border-radius:20px;box-shadow:inset 0 0 1px 1px rgba(0,0,0,.05)}
.benefit-in{height:100%;display:flex;align-items:center;gap:14px;padding:0 12px;background:#fff;border:1px solid #fff;border-radius:20px;
  transition:border-color .35s ease,box-shadow .35s ease,background .35s ease}
.benefit:hover .benefit-in{border-color:var(--yellow);box-shadow:0 14px 30px -20px rgba(0,0,0,.28);background:#fff url(../img/benefit-box-hover-bg.png) 50% 50%/cover}
.benefit h3{font:500 14px/21px var(--fa);color:var(--ink);margin-bottom:8px}
.benefit p{width:229px;font:500 14px/21px var(--fa);color:rgba(61,64,67,.5)}

/* ===== آمار ===== */
.numbers{position:relative;z-index:3;height:290px;background:var(--yellow) url(../img/numbers-bg.png) 0 0/cover}
.numbers-img{position:absolute;inset-inline-end:0;top:-29px;width:664px;height:319px}
.numbers-txt{width:616px;padding-top:37px;color:var(--ink)}
.numbers-head{display:flex;align-items:center;gap:6px;height:32px;font:500 16px/24px var(--fa)}
.numbers-desc{margin-top:12px;font:400 14px/21px var(--fa)}
.counters{display:flex;gap:46px;margin-top:12px}
.counter{position:relative;width:120px;text-align:center}
.counter+.counter::before{content:"";position:absolute;inset-inline-start:-23px;top:35px;width:1px;height:40px;background:var(--ink)}
.counter .num{font:700 45px/67.5px var(--fa-num)}
.counter .lbl{margin-top:4.5px;font:600 15px/22.5px var(--fa-num)}

/* ===== خدمات ===== */
.services{height:1150px;padding-top:94px;background:#fff url(../img/services-bg.png) 50% 0 no-repeat}
.service-list{display:grid;grid-template-columns:repeat(3,minmax(0,440px));justify-content:center;row-gap:44px;margin-top:40px}
.service{display:flex;flex-direction:column;align-items:center;text-align:center}
.service img{width:96px;height:96px}
.service h4{margin-top:16px;font:600 18px/18px var(--fa);color:var(--ink)}
.service p{margin-top:8px;width:360px;font:400 16px/24px var(--fa);color:var(--gray)}
.services-img{margin-top:104px;display:flex;justify-content:center}
.services-img img{width:1024px;height:478px;will-change:transform}

/* ===== تاریخچه ===== */
.history{position:relative;z-index:2;margin-top:-100px;height:770px;padding-top:85px;background:#fff url(../img/history-bg.png) 50% 0 repeat}
.years{position:relative;width:915px;margin:16px auto 0;display:flex;justify-content:space-between}
.track{position:absolute;left:46px;top:62px;width:824px;height:4px;border-radius:9999px;background:#E0E0E7;overflow:hidden}
.track .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--yellow);transition:width .5s}
.year{position:relative;width:71px;height:40px;font:600 18px/27px var(--fa-num);color:var(--ink);background:no-repeat 0 0/contain}
.year.active{background-image:url(../img/timeline-year-bg.png)}
.year .dot{position:absolute;left:50%;top:54px;transform:translateX(-50%)}
.year .dot svg{width:22px;height:22px}
.year.done .dot g>path:nth-child(1){fill:var(--yellow)}
.tl-body{display:flex;justify-content:space-between;align-items:flex-start;padding:40px 24px 0}
.tl-txt{width:599px;height:421px;margin-top:28px;padding-top:50px;background:url(../img/timeline-item-bg.png) 0 0 no-repeat;transition:opacity .3s}
.tl-txt.fading{opacity:0}
.tl-txt{position:relative}
.tl-num{position:absolute;top:2px;inset-inline-start:79px;font:700 74px/74px var(--fa-num);color:rgba(114,114,114,.2)}
.tl-txt h3{font:600 24px/36px var(--title);color:var(--ink)}
.tl-sub{margin-top:30px;font:500 16px/24px var(--fa);color:var(--ink);opacity:.5}
.tl-txt p{margin-top:8px;min-height:96px;font:500 16px/24px var(--fa);color:var(--ink)}
.tl-nav{display:flex;margin-top:16px}
.tl-nav button{display:grid;place-items:center;border-radius:100px;transition:border-color .3s}
.nav-next{width:86px;height:45px;border:1px solid var(--ink)}
.nav-prev{width:46px;height:46px;border:1px solid rgba(62,62,63,.45)}
.tl-nav button:disabled{opacity:.5;cursor:default}
.tl-nav button:not(:disabled):hover{border-color:var(--yellow)}
.tl-nav button:not(:disabled):hover path{stroke:var(--yellow)}
.tl-nav path{transition:stroke .3s}
.tl-img{width:598px;height:433px}

/* ===== نمونه کارها ===== */
.portfolio{height:716px;padding-top:85px;background:#F3F3F3 url(../img/portfolio-bg.png) 0 0 repeat}
.tabs{display:flex;width:360px;height:56px;margin:32px auto 0;padding:7px 8px;border:1px solid rgba(14,12,12,0);border-radius:32px;background:rgba(61,64,67,.08)}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:32px;font:500 16px/24px var(--fa);color:#181304;transition:.3s}
.tab path{stroke:#181304;transition:stroke .3s}
.tab:hover,.tab.active{background:#181304;color:#fff;box-shadow:0 20px 18px 1px rgba(0,0,0,.3)}
.tab:hover path,.tab.active path{stroke:#fff}
.tab-panel{display:none;margin-top:40px}
.tab-panel.active{display:block}
.pf-item{height:363px;padding:16px;border-radius:30px;background:rgba(61,64,67,.03);transition:background .3s,box-shadow .3s}
.pf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pf-title{font:400 16px/24px var(--fa);color:var(--ink);height:48px;overflow:hidden;transition:color .3s}
.pf-arrows{display:flex;flex-shrink:0;margin-top:1px}
.pf-arrows button{display:grid;place-items:center;height:22px;border:1px solid var(--ink);border-radius:100px;transition:border-color .3s}
.pf-arrows .pf-next{width:42px}
.pf-arrows .pf-prev{width:22px;opacity:.7}
.pf-arrows svg{width:13px;height:13px}
.pf-meta{display:flex;justify-content:space-between;margin-top:8px;height:20px;font:500 12px/18px var(--fa)}
.pf-type{color:rgba(61,64,67,.5);transition:color .3s}
.pf-date{color:#000;font-family:var(--fa-num);transition:color .3s}
.pf-img{margin-top:5px;height:250px;border-radius:30px;overflow:hidden}
.pf-inner{height:100%}
.pf-inner .swiper-slide{background:50% 50%/cover no-repeat}
.pf-inner .swiper-pagination{bottom:15px!important;--swiper-pagination-color:#fff;--swiper-pagination-bullet-width:10px;--swiper-pagination-bullet-height:7px;
  --swiper-pagination-bullet-inactive-color:#6d6d6d;--swiper-pagination-bullet-inactive-opacity:.2;--swiper-pagination-bullet-horizontal-gap:2px}
.pf-item:hover{background:#181304;box-shadow:0 1px 1px rgba(61,64,67,0),0 1px 1px rgba(61,64,67,.01),0 2px 2px rgba(61,64,67,.02)}
.pf-item:hover .pf-title{color:var(--yellow)}
.pf-item:hover .pf-type,.pf-item:hover .pf-date{color:#fff}
.pf-item:hover .pf-arrows button{border-color:var(--yellow)}
.pf-item:hover .pf-arrows path{stroke:var(--yellow)}

/* ===== دیدگاه مشتریان ===== */
.testimonials{position:relative;height:869px;overflow:hidden;background:#111 url(../img/testimonials-bg.jpg) 50% 0 repeat}
.testimonials-in{height:100%;padding:24px 16px 60px;background:url(../img/testimonials-circles.png) 50% 24px no-repeat}
.testimonials .sec-head{margin-top:68px}
.tm-swiper{overflow:visible}
.tm-row1{margin-top:50px;transform:translateX(35px)}
.tm-row2{margin-top:30px;transform:translateX(-65px)}
.tm-swiper .swiper-slide{filter:blur(1px);transition:filter .3s}
.tm-swiper .swiper-slide-active{filter:none}
.tm-item{height:238px;padding:19px;background:#1a1a1a;border:1px solid #1a1a1a;border-radius:24px;transition:border-color .3s,box-shadow .3s}
.tm-item:hover{border-color:#FFBB71;box-shadow:0 18px 88px rgba(255,204,38,.18)}
.tm-who{display:flex;align-items:flex-start;gap:12px}
.tm-who img{width:60px;height:60px}
.tm-name{margin-top:5px;font:400 16px/24px var(--fa);color:#fff}
.tm-role{margin-top:8px;font:400 12px/18px var(--fa);color:rgba(255,255,255,.34)}
.tm-text{margin-top:20px;font:400 16px/24px var(--fa);color:#fff;height:120px;overflow:hidden}
.fade{position:absolute;top:-24px;bottom:-24px;z-index:3;pointer-events:none}
.fade-l{left:0;width:428px;background:linear-gradient(90deg,rgba(0,0,0,.77) 0%,rgba(0,0,0,0) 100%)}
.fade-r{right:0;width:440px;background:linear-gradient(270deg,rgba(0,0,0,.77) 0%,rgba(0,0,0,0) 100%)}
.pair-nav{position:relative;z-index:4;display:flex;justify-content:center;direction:ltr;margin-top:36px}
.testimonials .pair-nav{transform:translateX(-50px)}
.pair-nav button{display:grid;place-items:center;width:86px;height:45px;border:1px solid rgba(255,255,255,.45);border-radius:100px;transition:border-color .3s}
.pair-nav path{stroke:#fff;transition:stroke .3s}
.pair-nav button:hover{border-color:#FFBB71}
.pair-nav button:hover path{stroke:#FFBB71}

/* ===== مشتریان ===== */
.clients{position:relative;height:514px;padding-top:234px;overflow:hidden;background:#fff url(../img/clients-bg.png) 50% 50% repeat}
.client{position:absolute;left:calc(50% + var(--x));top:var(--y);padding:27px;border:1px solid rgba(209,213,219,.8);border-radius:24px}

/* ===== وبلاگ ===== */
.blog{height:787px;padding-top:24px;background:#111 url(../img/testimonials-bg.jpg) 50% 0 repeat}
.blog-in{height:703px;padding:10px;background:url(../img/blog-bg.png) 50% 0 no-repeat}
.blog .sec-head{margin-top:72px}
.blog-swiper{margin-top:40px}
.bl-item{height:410px;padding:18px;border-radius:30px;background:#1a1a1a;box-shadow:0 0 10px rgba(0,0,0,.5);transition:background .3s,box-shadow .3s}
.bl-item:hover{background:rgba(255,255,255,.1);box-shadow:0 0 20px #292929}
.bl-img{position:relative;height:250px;border-radius:32px;background:50% 50%/cover no-repeat}
.bl-chip{position:absolute;top:17px;inset-inline-start:13px;height:25px;padding:0 6px;border-radius:12px;background:rgba(255,255,255,.1);font:500 9px/25px var(--fa);color:#fff}
.bl-title{display:block;margin-top:20px;padding:0 8px;height:48px;overflow:hidden;font:500 16px/24px var(--fa);color:#fff}
.bl-excerpt{margin-top:16px;height:40px;overflow:hidden;font:400 14px/20px var(--fa);color:rgba(255,255,255,.5)}

/* ===== تماس ===== */
.contact{position:relative;height:659px;background:#F3F3F3 url(../img/contact-bg.png) 50% 50% repeat}
.contact::before{content:"";position:absolute;inset:0;background:url(../img/contact-overlay.png) 0 0 repeat;opacity:.4;pointer-events:none}
.contact .container{padding-top:90px}
.contact-card{position:relative;width:385px}
.contact-tab{width:240px;height:44px;margin-right:73px;border-radius:12px 12px 0 0;background:var(--yellow);box-shadow:inset 1px 1px 0 rgba(255,255,255,.08);
  text-align:center;font:600 16px/44px var(--title);color:var(--ink)}
.contact-box{display:flex;flex-direction:column;gap:12px;padding:14px 13px 17px;border-radius:12px;background:#181304}
.contact-box .row{display:flex;align-items:center;gap:8px;min-height:49px;padding:12px 18px;border-radius:12px;
  background:rgba(255,255,255,.08);box-shadow:inset 1px 1px 0 rgba(255,255,255,.08);font:400 16px/24px var(--fa);color:#fff}
.contact-box .row.tall{min-height:72px}
.contact-box .k{color:var(--yellow)}
.contact-foot{position:relative;display:flex;justify-content:center;gap:6px;width:224px;height:64px;margin:-5px 145px 0 0;padding-top:17px;
  border-radius:0 0 12px 12px;background:url(../img/contact-tab-bg.png) 50% 0 no-repeat;font:600 16px/24px var(--title);color:var(--yellow)}
.contact-foot::after{content:"";position:absolute;left:50%;bottom:15px;width:55px;height:3px;transform:translateX(-50%);background:var(--yellow)}

/* ===== فوتر ===== */
.site-footer{position:relative;z-index:2}
.footer-in{display:flow-root;background:var(--ink);padding-bottom:33px}
.banner,.cols{max-width:1234px;margin-left:auto;margin-right:auto}
.banner{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;height:204px;margin-top:-100px;padding-inline:240px 65px;border-radius:24px;
  background:rgba(0,0,0,.39) url(../img/footer-banner.png) 50% 50%/cover no-repeat}
.banner .t1{font:600 30px/45px var(--title);color:#fff}
.banner .t2{margin-top:5px;font:400 24px/36px var(--fa);color:#fff}
.banner-btn{display:flex;align-items:center;gap:10px;height:54px;padding:0 12px;border-radius:12px;background:var(--yellow);font:500 16px/22px var(--fa);color:var(--ink);transition:background .3s}
.banner-btn:hover{background:rgba(255,204,38,.9)}
.banner-btn .ico{order:2}
.cols{display:flex;justify-content:space-between;margin-top:30px;color:#fff}
.col.about{width:343px;background:url(../img/footer-about-bg.png) 22px 0 no-repeat}
.col.links{min-width:106px}
.col.links+.col.links{min-width:154px}
.col-head{white-space:nowrap}
.col.news{width:365px}
.about-head{position:relative;display:flex;align-items:center;gap:8px;height:32px;font:700 16px/24px var(--fa)}
.about-head::before{content:"";position:absolute;inset-inline-start:-6px;top:4px;width:2px;height:24px;background:var(--yellow)}
.about-head img{margin-inline-start:5px}
.about-txt{margin-top:6px;font:400 14px/21px var(--fa)}
.about-txt .dim{opacity:.5}
.chips{display:flex;flex-wrap:wrap;gap:7px 15px;margin-top:26px}
.chips a{height:26px;padding:0 14px;border-radius:50px;background:rgba(255,255,255,.06);font:400 10px/26px var(--fa)}
.chips a.chip-fr{background:linear-gradient(270deg,rgba(17,15,15,0) 0%,rgba(255,255,255,.06) 100%)}
.chips a.chip-fl{background:linear-gradient(90deg,rgba(17,15,15,0) 0%,rgba(255,255,255,.06) 100%)}
.col-head{display:flex;align-items:center;gap:3px;height:35px;margin-bottom:11px;font:600 16px/24px var(--title)}
.col-head.small{font-size:14px;line-height:21px;margin-bottom:8px}
.col.links a{display:block;margin-bottom:15px;font:400 14px/22px var(--fa);transition:color .3s}
.col.links a:hover{color:var(--yellow)}
.news-form{display:flex;align-items:center;height:48px;width:355px;padding-block:4px;padding-inline:16px 4px;border-radius:8px;background:#303030}
.news-form .mail{position:relative;margin-inline-end:16px}
.news-form .mail svg{width:22px;height:22px;fill:#fff}
.news-form .mail::after{content:"";position:absolute;inset-inline-end:-9px;top:5px;width:1px;height:12px;background:#ADADAD}
.news-form input{flex:1;min-width:0;height:40px;border:0;border-radius:10px;background:#303030;color:#fff;font:400 14px/21px var(--fa);outline:0}
.news-form input::placeholder{color:#8d8d8d}
.news-form button{width:67px;height:40px;border-radius:8px;background:var(--yellow);font:500 16px/16px var(--fa);color:var(--text)}
.news .col-head.small+.trust,.news-form+.col-head{margin-top:16px}
.trust{display:flex;gap:11px;margin-inline-start:15px}
.trust span{display:grid;place-items:center;width:77px;height:77px;border-radius:12px;background:#fff}
.trust img{width:53px;height:53px}
.bottom-bar{height:70px;background:var(--yellow)}
.bottom-in{max-width:1300px;height:100%;margin:0 auto;padding-inline-end:35px;display:flex;align-items:center;justify-content:space-between}
.go-top{position:relative;top:-11px;display:flex;flex-direction:column;align-items:center;gap:6px;width:140px;height:70px;margin-inline-start:-25px;padding-top:6px;
  background:url(../img/go-top-bg.png) 50% 0 no-repeat;font:400 14px/28px var(--fa);color:var(--ink)}
.bottom-in p{font:400 16px/24px var(--fa);color:var(--ink)}
.socials{display:flex;gap:22px}
.socials a{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:rgba(36,36,36,.15);transition:opacity .3s}
.socials a:hover{opacity:.9}
.socials svg{width:18px;height:18px;fill:#fff}

/* ===== حالت تاریک ===== */
html.theme-dark body{background:#141414}
html.theme-dark .mode .knob{transform:translateX(20px)}
html.theme-dark .benefits,html.theme-dark .portfolio,html.theme-dark .contact{background-color:#1b1b1b;background-blend-mode:multiply}
html.theme-dark .services,html.theme-dark .history,html.theme-dark .clients{background-color:#141414;background-blend-mode:multiply}
html.theme-dark .benefit-in{background-color:#262626;border-color:#262626}
html.theme-dark .benefit h3,html.theme-dark .benefits-title h2,html.theme-dark .sec-head h2,html.theme-dark .service h4,
html.theme-dark .tl-txt h3,html.theme-dark .tl-sub,html.theme-dark .tl-txt p,html.theme-dark .year,html.theme-dark .pf-title,html.theme-dark .pf-date,html.theme-dark .tab{color:#fff}
html.theme-dark .benefit p,html.theme-dark .pf-type{color:rgba(255,255,255,.5)}
html.theme-dark .pf-item{background:rgba(255,255,255,.05)}
html.theme-dark .tab path,html.theme-dark .pf-arrows path,html.theme-dark .tl-nav path{stroke:#fff}
html.theme-dark .pf-arrows button,html.theme-dark .nav-next{border-color:#fff}
html.theme-dark .tabs{background:rgba(255,255,255,.08)}
html.theme-dark .client{border-color:rgba(255,255,255,.15)}

/* ===== تبلت و موبایل ===== */
@media (max-width:1340px){
  .container,.mainbar-in{padding:0 20px}
  .tools{margin-inline-end:0}
  .menu{width:auto;min-width:0;gap:18px;padding:0 22px;margin-inline-start:24px}
  html[dir=ltr] .menu{gap:14px;padding:0 16px;margin-inline-start:16px}
  html[dir=ltr] .brand{gap:12px;font-size:17px}
  .benefits .container{gap:20px}
  .benefit-list{flex:1;min-width:0}
  .benefit{flex:1;width:auto;min-width:0}
  .benefit p{width:auto}
  .numbers-img{width:560px;height:auto}
  .tl-body{gap:30px;padding:40px 0 0}
  .tl-txt{flex:1;width:auto}
  .tl-img{width:46%;height:auto}
  .banner,.cols{margin-left:20px;margin-right:20px}
  .bottom-in{padding:0 20px}
  .go-top{margin-inline-start:0}
}
@media (max-width:1100px){
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:150px;right:16px;left:16px;width:auto;height:auto;padding:16px 20px;z-index:50;background:#111;border-radius:20px}
  .burger{display:flex;flex-direction:column;gap:5px;order:4;padding:0 14px}
  .burger i{width:22px;height:2px;background:#fff;border-radius:2px}
  .tools .tool-btn{display:none}
  .benefits{height:auto;padding-bottom:40px}
  .benefits .container{flex-direction:column;align-items:stretch}
  .benefits-title{flex:none;height:auto;padding:30px 20px 10px}
  .benefit-list{flex-direction:column}
  .benefit{height:auto}
  .benefit-in{padding:22px 16px}
  .numbers{height:auto;padding-bottom:40px}
  .numbers-img{display:none}
  .numbers-txt{width:auto}
  .counters{flex-wrap:wrap;gap:20px 30px}
  .services{height:auto;padding-bottom:140px}
  .service-list{grid-template-columns:1fr;gap:40px}
  .service p{width:auto;max-width:360px}
  .services-img{margin-top:60px}
  .services-img img{width:100%;height:auto}
  .history{height:auto;padding-bottom:60px}
  .years{width:100%}
  .track{left:35px;right:35px;width:auto}
  .tl-body{flex-direction:column}
  .tl-txt{height:auto;padding-bottom:20px;background-size:70% auto}
  .tl-img{width:100%}
  .portfolio,.testimonials,.blog{height:auto;padding-bottom:60px}
  .tm-row1,.tm-row2{transform:none}
  .fade{display:none}
  .blog-in{height:auto}
  .clients{height:auto;padding:80px 0}
  .client{display:none}
  .contact{height:auto;padding-bottom:180px}
  .contact-card{margin:0 auto}
  .banner{height:auto;flex-direction:column;align-items:flex-start;gap:20px;padding:30px}
  .banner .t1{font-size:22px;line-height:34px}
  .banner .t2{font-size:17px}
  .cols{flex-wrap:wrap;gap:30px}
  .col.about,.col.news{width:100%}
  .bottom-bar{height:auto}
  .bottom-in{flex-wrap:wrap;justify-content:center;gap:12px;padding:20px;text-align:center}
  .go-top{top:0}
}
@media (max-width:600px){
  .topbar{height:auto;padding:10px 16px;flex-wrap:wrap}
  .brand span{display:none}
  .btn-login{width:auto}
  .btn-login .txt{display:none}
  .hero{height:auto;padding-bottom:60px;background-position:30% 100%}
  .hero-txt{width:auto}
  .hero h1{font-size:30px;line-height:34px}
  .hero p{font-size:17px;line-height:26px}
  .sec-head h2{font-size:32px;line-height:36px}
  .sec-head h2 .tag{left:50%;top:-26px;font-size:14px}
  .years{overflow-x:auto;justify-content:flex-start;gap:16px;padding-bottom:30px}
  .year{flex:0 0 71px}
  .track{display:none}
  .tabs{width:100%}
  .tab{font-size:14px}
  .container{padding:0 16px}
  .contact-card{width:100%}
  .contact-tab{margin-right:auto;margin-left:auto}
  .contact-foot{margin:-5px auto 0}
  .news-form{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* ===== دکمهٔ شب و روز ===== */
.mode .knob{position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.15);
  transform:none;transition:transform .45s cubic-bezier(.5,1.6,.4,1),background .4s}
.mode .knob .ico,.mode .t-sun,.mode .t-moon{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .35s,transform .45s}
.mode .knob svg{width:14px;height:14px}
.mode .k-moon{opacity:0;transform:rotate(-120deg) scale(.4)}
.mode .k-moon path{fill:var(--yellow)}
.mode .t-sun,.mode .t-moon{left:auto;right:auto;width:20px;top:4px;bottom:4px}
.mode .t-moon{right:5px}
.mode .t-sun{left:5px;opacity:0}
.mode .t-moon svg{width:9px;height:10px}
.mode .t-moon path{fill:#fff}
.mode .t-sun svg{width:13px;height:13px}
.mode .t-sun path{fill:#232323}
html.theme-dark .mode{background:var(--yellow)}
html.theme-dark .mode .knob{transform:translateX(24px) rotate(360deg);background:#232323}
html.theme-dark .mode .k-sun{opacity:0;transform:rotate(120deg) scale(.4)}
html.theme-dark .mode .k-moon{opacity:1;transform:none}
html.theme-dark .mode .t-moon{opacity:0}
html.theme-dark .mode .t-sun{opacity:1}
/* هنگام عوض شدن حالت، رنگ‌ها نرم عوض می‌شوند */
html.theme-anim body,html.theme-anim body *:not(.mode):not(.mode *){transition:background-color .45s,color .45s,border-color .45s!important}

/* ===== دکمهٔ زبان ===== */
.lang-btn{order:0;flex-shrink:0;height:28px;min-width:40px;padding:0 10px;margin-inline-end:10px;border:1px solid rgba(255,255,255,.35);border-radius:14px;
  font:700 12.5px/26px YekanBakh,Tahoma,sans-serif;color:#fff;letter-spacing:.4px;transition:border-color .3s,color .3s}
.lang-btn:hover{border-color:var(--yellow);color:var(--yellow)}

/* ===== زیرمنوی خدمات ===== */
.has-sub{position:relative}
.submenu{position:absolute;top:calc(100% + 18px);inset-inline-start:-20px;z-index:50;min-width:250px;padding:10px;border-radius:18px;background:#111;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 50px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:9px 14px;border-radius:12px;font:500 14.5px/22px var(--fa);color:#eee;white-space:nowrap}
.submenu a:hover{background:#232323;color:var(--yellow)}

/* ===== لینک قیمت زیر هر خدمت ===== */
.svc-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 14px/22px var(--fa);color:#B98A00;transition:gap .25s,color .25s}
.svc-link svg{width:16px;height:16px}
.svc-link path{stroke:currentColor}
.svc-link:hover{color:var(--ink)}

/* ===== رفع ایرادهای حالت شب ===== */
html.theme-dark .benefit:hover .benefit-in{background:#2E2E2E;border-color:rgba(255,204,38,.5)}
html.theme-dark .benefit img{filter:invert(1) hue-rotate(180deg)}
html.theme-dark .service img{background:#F3F3F3;border-radius:24px;padding:8px}
html.theme-dark .service p{color:#A9AAB0}
html.theme-dark .svc-link{color:var(--yellow)}
html.theme-dark .svc-link:hover{color:#fff}
html.theme-dark .numbers-desc,html.theme-dark .numbers-head{color:var(--ink)}
html.theme-dark .tl-num{color:rgba(255,255,255,.12)}
html.theme-dark .tl-txt{background-blend-mode:normal}
html.theme-dark .tl-img{filter:brightness(.92)}
html.theme-dark .contact-box{box-shadow:0 0 0 1px rgba(255,255,255,.06)}

/* ===== حالت انگلیسی (چپ‌به‌راست) ===== */
html[dir=ltr]{--fa-num:YekanBakh,Tahoma,sans-serif}
html[dir=ltr] .topbar a .ico svg,html[dir=ltr] .btn-login .circle svg,html[dir=ltr] .btn-hero .circle svg,
html[dir=ltr] .banner-btn .ico svg,html[dir=ltr] .svc-link svg{transform:scaleX(-1)}
html[dir=ltr] .tag{left:auto;right:8px;transform:translate(50%,-50%) rotate(15deg)}
html[dir=ltr] .benefits-title{background-position:0 50%}
html[dir=ltr] .tm-row1,html[dir=ltr] .tm-row2{transform:none}
html[dir=ltr] .testimonials .pair-nav{transform:none}
html[dir=ltr] .contact-card{margin-left:auto}
html[dir=ltr] .hero h1,html[dir=ltr] .sec-head h2,html[dir=ltr] .benefits-title h2{letter-spacing:-.5px}
/* عکس‌های هیرو و بنر آینه می‌شوند تا متن روی بخش خالی بنشیند */
html[dir=ltr] .hero,html[dir=ltr] .banner{background-image:none}
html[dir=ltr] .hero::before,html[dir=ltr] .banner::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(../img/hero-bg.png) 50% 100%/cover no-repeat;transform:scaleX(-1)}
html[dir=ltr] .banner::before{background:url(../img/footer-banner.png) 50% 50%/cover no-repeat}
@media (max-width:600px){html[dir=ltr] .sec-head h2 .tag{left:50%;right:auto;transform:translate(-50%,-50%) rotate(-8deg)}}

/* متن‌های طولانی‌تر انگلیسی و متن فارسیِ بی‌ترجمه در حالت انگلیسی */
.btn-login{width:auto;min-width:165px;white-space:nowrap}
.tabs{width:max-content;min-width:360px;max-width:100%}
.tab{padding:0 18px;white-space:nowrap}
.news-form button{width:auto;min-width:67px;padding:0 12px}
html[dir=ltr] .tm-name,html[dir=ltr] .tm-role,html[dir=ltr] .tm-text,html[dir=ltr] .pf-title,html[dir=ltr] .bl-title,html[dir=ltr] .bl-excerpt,
html[dir=ltr] #tl-title,html[dir=ltr] #tl-sub,html[dir=ltr] #tl-text{unicode-bidi:plaintext;text-align:start}
@media (max-width:600px){.tabs{min-width:0;width:100%}.tab{padding:0 10px}}

/* عکس خدمت‌ها و گزینه‌های نوع کار همه‌جا گوشه‌گرد */
.service img,.svc-card img,.opt-in img{border-radius:24%;object-fit:cover}

/* ===== نوار مرحله‌های «مسیر همکاری»: کپسول شیشه‌ای با مرحلهٔ فعال زرد براق ===== */
.years{width:min(560px,100%);margin:22px auto 0;padding:6px;gap:6px;justify-content:space-between;overflow:visible!important;
  border:1px solid rgba(255,255,255,.7);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(243,243,246,.6));
  box-shadow:0 18px 40px -22px rgba(0,0,0,.35),inset 0 1px 0 #fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.years .track,.year .dot{display:none!important}
.year{flex:1 1 0!important;width:auto;height:46px;border-radius:999px;background:none!important;font:700 17px/46px var(--fa-num);color:#8a8b93;
  position:relative;overflow:hidden;isolation:isolate;transition:color .35s ease,background-color .35s ease,box-shadow .35s ease}
.year.done{color:var(--ink);background-color:rgba(255,204,38,.16)!important}
.year:hover{color:var(--ink)}
.year.active{color:#2b2100;background:linear-gradient(180deg,#FFE885 0%,#FFD23A 45%,#F7B500 100%)!important;
  box-shadow:0 10px 24px -8px rgba(247,181,0,.75),inset 0 1px 1px rgba(255,255,255,.95),inset 0 -2px 4px rgba(170,110,0,.25)}
/* برق شیشه‌ای روی مرحلهٔ فعال */
.year.active::before{content:"";position:absolute;inset:2px 6px 52% 6px;z-index:-1;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0))}
.year.active::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);animation:year-shine 1.1s ease .1s 1}
@keyframes year-shine{to{left:120%}}
html.theme-dark .years{border-color:rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 18px 40px -22px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
html.theme-dark .year{color:#9a9aa2}
html.theme-dark .year.done{color:#fff;background-color:rgba(255,204,38,.14)!important}
html.theme-dark .year.active{color:#2b2100}
@media (max-width:700px){
  .years{width:100%;padding:5px;gap:4px}
  .year{height:42px;font-size:15px;line-height:42px}
}
@media (prefers-reduced-motion:reduce){.year.active::after{animation:none}}

/* روی صفحه‌های باریک (گوشی) نوار اسکرول صفحه و بخش‌ها دیده نمی‌شود؛ اسکرول با لمس کار می‌کند */
@media (max-width:700px){
  html,body,*{scrollbar-width:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0}
}