/* =========================================================
   فونت وزیرمتن — میزبانی محلی (نه از گوگل‌فونتز)
   چون بازدیدکننده‌های سایت عمدتاً از ایرانن و دسترسی به سرورهای گوگل
   می‌تونه کند یا ناپایدار باشه، کل فونت (به‌صورت فایل واریبل، یعنی همه‌ی
   وزن‌ها تو یه فایل) همین‌جا تو خود قالب سرو می‌شه — بدون هیچ درخواستی
   به سرور خارجی. لایسنس: SIL Open Font License 1.1 (رایگان و آزاد).
   ========================================================= */
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Variable.woff2') format('woff2-variations'), url('../fonts/Vazirmatn-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   Webrasta — Design Tokens & Global Styles
   منبع: فایل‌های HTML مرجع (طراحی نهایی تایید‌شده)
   ========================================================= */
:root{
  --cream:#FBFBFB;
  --cream-2:#F7F4F0;
  --cream-2-rgb:247,244,240;
  --white:#FFFFFF;
  --ink:#1A1A1A;
  --ink-soft:#5A5A5A;
  --muted:#8A867D;
  --orange:#D4733A;
  --orange-rgb:212,115,58;
  --orange-deep:#B85F2C;
  --orange-tint:#F7E4D6;
  --teal:#3DC4A6;
  --teal-deep:#2FA089;
  --teal-tint:#DEF5EF;
  --line:#E8E5E0;
  --deep:#17140F; /* توکن مستقل از تم — همیشه تیره، برای عناصر تزئینی ثابت */
  --header-bg:rgba(248,244,238,.85);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --shadow:0 8px 20px rgba(23,21,18,0.06);
}
/* دارک‌مود: پالت تیره‌تر از قبل + بکگراند سکشن‌ها خیلی نزدیک به بکگراند پایه
   (کنتراست کمتر بین سکشن‌ها، حس یکپارچه‌تر و تیره‌تر) */
html[data-theme="dark"]{
  --cream:#0A0908;
  --cream-2:#111009;
  --cream-2-rgb:17,16,9;
  --white:#17150F;
  --ink:#F0EBE2;
  --ink-soft:#AFA898;
  --muted:#7C7568;
  --orange:#E0824A;
  --orange-rgb:224,130,74;
  --orange-deep:#C96B36;
  --orange-tint:rgba(224,130,74,.14);
  --teal:#4DD1B4;
  --teal-deep:#3AB89C;
  --teal-tint:rgba(77,209,180,.14);
  --line:#26221A;
  --header-bg:rgba(10,9,8,.82);
  --shadow:0 4px 16px rgba(0,0,0,.4);
}

/* ============ RESET / BASE ============ */
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .p-card,
html[data-theme="dark"] .t-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .price-custom,
html[data-theme="dark"] .buy-box,
html[data-theme="dark"] .quick-start-box,
html[data-theme="dark"] .instructor-card,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .wb-support-panel,
html[data-theme="dark"] .lang-switch-menu,
html[data-theme="dark"] .contact-form-box,
html[data-theme="dark"] .honest-fit-col.fit-no,
html[data-theme="dark"] .project-meta,
html[data-theme="dark"] .svc-detail-icon,
html[data-theme="dark"] .value-card{
  border:1px solid var(--line);
}
html{transition:background .25s ease; scroll-behavior:smooth; overflow-x:hidden;}
body{transition:background .25s ease, color .25s ease;}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Vazirmatn', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  /* توجه: overflow-x روی body عمداً ست نشده — ست‌کردنش (حتی hidden) باعث می‌شه
     body به یه scroll container تبدیل بشه و هدر sticky از کار بیفته.
     جلوگیری از اسکرول افقی روی html انجام می‌شه که این مشکل رو نداره. */
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
section{padding:110px 0;}
#services{padding-top:36px;}
h1,h2,h3{font-weight:800; letter-spacing:-0.01em;}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--orange-tint); color:var(--orange-deep);
  font-size:13px; font-weight:700; padding:8px 18px 8px 16px;
  border-radius:999px; margin-bottom:20px;
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--orange); display:block;}
.eyebrow.teal{background:var(--teal-tint); color:var(--teal-deep);}
.eyebrow.teal i{background:var(--teal);}
.eyebrow-cta{background:rgba(212,115,58,.18); color:#E8A374;}
h2.headline{font-size:38px; line-height:1.55;}
h2.headline b{color:var(--orange); font-weight:800;}
.sub{color:var(--ink-soft); font-size:16.5px; max-width:600px;}
.center{text-align:center; margin-inline:auto;}
.row-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.ltr-text{direction:ltr; display:block;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:16px 32px; border-radius:999px;
  font-family:inherit; /* بدون این خط، مرورگرها فونت پیش‌فرض سیستم رو روی button/a.btn اعمال می‌کنن نه وزیرمتن */
  font-weight:700; font-size:15px; text-decoration:none;
  border:none; cursor:pointer; transition:.2s ease; white-space:nowrap;
}
.btn-orange{background:var(--orange); color:#fff; box-shadow:0 8px 16px rgba(242,112,58,.24);}
.btn-orange:hover{background:var(--orange-deep); transform:translateY(-2px);}
.btn-outline{background:transparent; color:var(--ink); border:1.5px solid var(--ink); box-shadow:none;}
.btn-outline:hover{background:var(--ink); color:var(--cream);}
.btn-ghost-light{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35);}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);}
.btn-contact-header{background:var(--teal); color:#fff; padding:11px 20px; font-size:13.5px;}
.btn-contact-header:hover{background:var(--teal-deep); color:#fff;}
.btn-full{width:100%; justify-content:center;}
.btn-sm{padding:11px 22px; font-size:13px;}

/* ============ NAV ============ */
header{
  position:sticky; top:0; z-index:50; background:var(--header-bg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  border-radius:0 0 40px 40px;
  box-shadow:0 4px 14px rgba(23,21,18,.04);
  transition:box-shadow .25s ease;
}
header.scrolled{box-shadow:0 6px 18px rgba(23,21,18,.07);}
.theme-toggle{
  width:42px; height:42px; border-radius:50%; background:var(--cream-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.theme-toggle svg{width:19px; height:19px; stroke:var(--ink);}
.theme-toggle .moon{display:none;}
html[data-theme="dark"] .theme-toggle .sun{display:none;}
html[data-theme="dark"] .theme-toggle .moon{display:block;}
header.scrolled{border-bottom-color:var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0;}
.nav-inner-relative{position:relative;}
@media(max-width:980px){
  .nav-inner{padding:26px 0 20px; min-height:80px; box-sizing:border-box;}
  .icon-btn-search{display:none;}
  .search-panel{display:none;}
}
.logo{display:flex; align-items:center; height:40px;}
.logo .dot{width:9px; height:9px; border-radius:50%; background:var(--orange); margin-left:8px;}
.logo-text-link{display:flex; align-items:center; font-size:20px; font-weight:800; height:100%;}
.logo .custom-logo-link{display:flex; align-items:center; height:100%;}
.logo .logo-light, .logo .logo-dark{display:flex; align-items:center; height:100%;}
.logo .logo-dark{display:none;}
html[data-theme="dark"] .logo .logo-light{display:none;}
html[data-theme="dark"] .logo .logo-dark{display:flex;}
.logo img.custom-logo{
  height:100% !important;
  width:auto !important;
  max-width:170px;
  object-fit:contain;
  display:block;
}
.links{display:flex; align-items:center; gap:34px; font-size:14.5px; font-weight:600; color:var(--ink-soft); list-style:none;}
.links a{transition:color .15s ease;}
.links a:hover{color:var(--orange);}
.links li.current-menu-item > a,
.links li.current_page_item > a,
.links li.current-menu-parent > a,
.links li.current_page_parent > a{
  color:var(--orange); font-weight:700;
  text-decoration:underline; text-decoration-color:var(--orange);
  text-underline-offset:6px; text-decoration-thickness:2px;
}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-cta .btn{padding:12px 26px; font-size:14px;}
@media(max-width:980px){
  .nav-cta{gap:10px;}
}

.icon-btn{
  width:40px; height:40px; border-radius:50%; background:var(--cream-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; padding:0;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.icon-btn:hover{transform:scale(1.08); background:var(--orange-tint); border-color:var(--orange);}
.icon-btn svg{width:18px; height:18px; stroke:var(--ink);}
.icon-btn.is-active{background:var(--orange); border-color:var(--orange);}
.icon-btn.is-active svg{stroke:#fff;}

.lang-switch{position:relative;}
.lang-switch-toggle{
  display:flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:999px;
  background:var(--cream-2); border:1px solid var(--line); cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--ink);
}
.lang-switch-toggle svg{stroke:var(--muted); transition:transform .2s ease;}
.lang-switch.is-open .lang-switch-toggle svg{transform:rotate(180deg);}
.lang-switch-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:120px;
  background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:6px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s ease; pointer-events:none;
}
.lang-switch.is-open .lang-switch-menu{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
.lang-switch-item{display:block; padding:9px 12px; border-radius:9px; font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none;}
.lang-switch-item:hover{background:var(--cream-2); color:var(--ink);}
.lang-switch-item.is-active{color:var(--orange-deep); background:var(--orange-tint);}

.icon-btn-search{flex-shrink:0;}

.search-panel{
  position:absolute; top:calc(100% + 10px); left:4px; right:auto; width:320px; max-width:calc(100vw - 40px);
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:10px;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.96); transform-origin:top left;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  pointer-events:none;
}
.search-panel.open{opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;}
.search-panel-form{display:flex; align-items:center; gap:10px; padding:6px 8px;}
.search-panel-form svg{width:18px; height:18px; stroke:var(--muted); flex-shrink:0;}
.search-panel-form input{flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:14.5px; color:var(--ink); padding:8px 0;}
.search-panel-form button{
  background:var(--orange); color:#fff; border:none; border-radius:10px; padding:9px 18px;
  font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; flex-shrink:0;
}

.mobile-search-form{
  display:flex; align-items:center; gap:10px; background:var(--cream-2); border-radius:12px; padding:11px 14px;
}
.mobile-search-form svg{width:17px; height:17px; stroke:var(--muted); flex-shrink:0;}
.mobile-search-form input{flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:14px; color:var(--ink);}

/* ============ HERO ============ */
.hero{padding:80px 0 24px; position:relative;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;}
.hero h1{font-size:52px; line-height:1.42; margin-bottom:24px;}
.hero h1 .hl{
  position:relative; display:inline-block;
  background:linear-gradient(90deg, var(--orange-deep), var(--orange), #FFC98A, var(--orange), var(--orange-deep));
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--orange);
  animation:webrastaHlShimmer 3.5s linear infinite, webrastaHlPulse 2.2s ease-in-out infinite;
}
@keyframes webrastaHlShimmer{
  to{background-position:-300% center;}
}
@keyframes webrastaHlPulse{
  0%, 100%{filter:drop-shadow(0 0 0 rgba(212,115,58,0));}
  50%{filter:drop-shadow(0 0 14px rgba(212,115,58,.45));}
}
.hero p.sub{margin-bottom:34px; font-size:17px;}
.hero-actions{display:flex; gap:10px; flex-wrap:nowrap;}
.hero-actions .btn{flex:1; justify-content:center; min-width:0; white-space:normal; text-align:center; padding:13px 22px; font-size:13.5px;}
@media(min-width:981px){
  .hero-actions .btn{flex:0 0 auto; padding:14px 26px;}
}
.hero-intro{font-size:19px; color:var(--ink); font-weight:500;}
.hero-intro b{color:var(--orange); font-weight:600;}

.visual{position:relative; height:520px;}
.hero-img{
  width:100%; height:100%;
  object-fit:cover;
}
.hero-img-placeholder{
  display:none; width:100%; height:100%; border-radius:var(--radius-xl);
  background:linear-gradient(135deg, var(--orange-tint), var(--teal-tint));
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
  overflow:hidden;
}
.hero-placeholder-art{width:70%; max-width:280px; height:auto;}
.hero-img-placeholder span{font-weight:700; font-size:13.5px; color:var(--ink-soft);}
.browser-mock{
  position:absolute; width:78%; top:10px; left:0; background:var(--white);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
  transform:rotate(-3deg);
}
.browser-mock.static{position:static; transform:none; width:100%;}
.browser-bar{display:flex; align-items:center; gap:6px; padding:14px 18px; border-bottom:1px solid var(--line);}
.browser-bar span{width:9px; height:9px; border-radius:50%; background:var(--line);}
.browser-bar span:nth-child(1){background:#D4733A;}
.browser-bar span:nth-child(2){background:#F2C53A;}
.browser-bar span:nth-child(3){background:#3DC4A6;}
.browser-body{padding:20px;}
.b-line{height:10px; border-radius:6px; background:var(--cream-2); margin-bottom:10px;}
.b-line.w-70{width:70%;} .b-line.w-60{width:60%;} .b-line.w-50{width:50%;}
.b-line.w-45{width:45%;} .b-line.w-40{width:40%;}
.b-blocks{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px;}
.b-blocks div{height:60px; border-radius:10px;}
.b-blocks div:nth-child(1){background:var(--orange-tint);}
.b-blocks div:nth-child(2){background:var(--teal-tint);}
.b-blocks div:nth-child(3){background:var(--cream-2);}

.id-card{
  position:absolute; width:280px; bottom:10px; right:10px; background:var(--deep);
  color:#fff; border-radius:20px; padding:24px; box-shadow:0 12px 26px rgba(23,21,18,.2);
  transform:rotate(4deg);
}
.id-card .top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px;}
.id-card .name{font-size:16px; font-weight:800;}
.id-card .role{font-size:12px; color:#C9C6C0; margin-top:4px;}
.gauge{width:58px; height:58px; border-radius:50%; flex-shrink:0; background:conic-gradient(var(--orange) 0% 98%, rgba(255,255,255,.15) 98% 100%); display:flex; align-items:center; justify-content:center;}
.gauge b{width:46px; height:46px; border-radius:50%; background:var(--deep); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;}
.id-card .bottom{display:flex; gap:8px; flex-wrap:wrap;}
.id-card .bottom span{background:rgba(255,255,255,.1); padding:7px 12px; border-radius:999px; font-size:11px; font-weight:600; color:#fff;}

.float-badge{
  position:absolute; top:36px; right:60px; background:var(--white); border-radius:16px;
  padding:12px 16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700;
}
.float-badge .ic{width:30px; height:30px; border-radius:50%; background:var(--teal-tint); display:flex; align-items:center; justify-content:center;}
.float-badge .ic svg{width:16px; height:16px; stroke:var(--teal-deep);}

/* ============ STATS STRIP ============ */
.stats-strip{padding:50px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.stat{text-align:center; position:relative;}
.stat:not(:last-child)::after{content:""; position:absolute; top:8px; bottom:8px; left:0; width:1px; background:var(--line);}
.stat b{
  font-size:40px; font-weight:500; display:block; margin-bottom:4px; letter-spacing:-0.02em;
  background:linear-gradient(135deg, var(--orange-deep), var(--orange));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--orange);
}
.stat span{font-size:13.5px; color:var(--muted); font-weight:600;}

/* ============ SERVICES / GENERIC CARD GRID ============ */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:56px;}
.svc-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.svc-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.svc-grid.no-margin{margin-top:0;}
.svc-card{background:var(--white); border-radius:var(--radius-lg); padding:34px 26px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease;}
.svc-card:hover{transform:translateY(-8px); box-shadow:0 20px 34px rgba(23,21,18,.1);}
.svc-card-link{display:block; text-decoration:none; color:inherit; cursor:pointer;}
.svc-card-more{display:inline-flex; align-items:center; gap:4px; margin-top:16px; font-size:13px; font-weight:700; color:var(--orange-deep);}
.svc-card.center-card{text-align:center; border-radius:32px;}
.svc-card.big-card{text-align:center; border-radius:40px; padding:50px 34px;}
.svc-card.row-card{display:flex; align-items:center; gap:16px; padding:24px;}
.svc-ic{width:54px; height:54px; border-radius:16px; background:var(--orange-tint); display:flex; align-items:center; justify-content:center; margin-bottom:22px; transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease;}
.svc-card:hover .svc-ic{transform:rotate(-8deg) scale(1.1); background:var(--orange);}
.svc-card:hover .svc-ic svg{stroke:#fff;}
.svc-ic.no-margin{margin:0;}
.svc-ic.center-ic{margin:0 auto 20px;}
.svc-ic.big-ic{margin:0 auto 22px; width:64px; height:64px; border-radius:20px;}
.svc-ic.small-ic{width:44px; height:44px; border-radius:12px;}
.svc-ic.teal-bg{background:var(--teal-tint);}
.svc-ic svg{width:26px; height:26px; stroke:var(--orange-deep); transition:stroke .25s ease;}
.svc-ic.teal-bg svg{stroke:var(--teal-deep);}
.svc-card h3{font-size:17px; margin-bottom:10px;}
.svc-card h3.lg{font-size:20px;}
.svc-card h3.sm{font-size:16px; margin-bottom:0; font-weight:600;}
.svc-card p{font-size:13.8px; color:var(--muted);}

/* ============ WHY US ============ */
.why-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px; margin-top:56px; align-items:stretch;}
.why-grid.equal{grid-template-columns:1fr 1fr; align-items:center;}
.why-grid.wide-left{grid-template-columns:1.6fr 1fr; align-items:start;}
.why-grid.contact-page-grid{grid-template-columns:1fr 1.2fr; align-items:start;}
.why-highlight{
  background:var(--teal); color:#fff; border-radius:var(--radius-xl); padding:44px 36px;
  display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.why-highlight::after{content:""; position:absolute; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.08); bottom:-100px; left:-60px;}
.why-highlight .big{font-size:56px; font-weight:800; position:relative;}
.why-highlight p{font-size:14.5px; color:rgba(255,255,255,.85); margin-top:14px; position:relative;}
.why-list{display:flex; flex-direction:column; gap:4px;}
.why-item{display:flex; gap:18px; padding:22px 4px; border-bottom:1px solid var(--line);}
.why-item:last-child{border-bottom:none;}
.why-ic{width:44px; height:44px; border-radius:12px; background:var(--orange-tint); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.why-item:hover .why-ic{transform:rotate(-8deg) scale(1.1);}
.why-ic svg{width:20px; height:20px; stroke:var(--orange-deep);}
.why-item h4{font-size:15.5px; margin-bottom:5px;}
.why-item p{font-size:13.5px; color:var(--muted);}

/* ============ PROCESS ============ */
.process-grid{margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); position:relative;}
.process-grid::before{
  content:""; position:absolute; top:34px; right:12.5%; left:12.5%; height:1px;
  background:repeating-linear-gradient(to left, var(--line) 0 10px, transparent 10px 18px); z-index:0;
}
.process-step{position:relative; z-index:1; text-align:center; padding:0 18px;}
.step-num{
  width:68px; height:68px; margin:0 auto 26px; border-radius:50%; background:var(--white);
  border:2px solid var(--orange); display:flex; align-items:center; justify-content:center;
  font-size:21px; font-weight:800; color:var(--orange);
}
.process-step:nth-child(even) .step-num{background:var(--orange); color:#fff;}
.process-step h3{font-size:17px; margin-bottom:10px;}
.process-step p{font-size:13.8px; color:var(--muted);}

/* ============ PORTFOLIO ============ */
.filters{
  display:flex; gap:10px; margin-top:30px; flex-wrap:nowrap;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:4px;
}
.filters::-webkit-scrollbar{display:none;}
.filters .filter-pill{flex-shrink:0;}
/* توجه: عمداً حتی تو حالت .centered هم wrap/center نمی‌کنیم — چون
   justify-content:center با overflow-x ترکیب بشه، شروع لیست (سمت راست تو
   RTL) موقع اسکرول ممکنه قابل‌دسترس نباشه. برای وسط‌چین‌بودن ظاهری وقتی
   پیل‌ها کم و جا می‌شن، از پدینگ کانتینر (wrap) استفاده می‌کنیم، نه فلکس. */
.filters.centered{justify-content:flex-start;}
.filter-pill{padding:10px 22px; border-radius:999px; font-size:13.5px; font-weight:600; background:var(--white); color:var(--muted); border:1px solid var(--line); cursor:pointer;}
.filter-pill.active{background:var(--ink); color:var(--cream); border-color:var(--ink);}
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px;}
.p-card{background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease;}
.p-card-link{display:block; text-decoration:none; color:inherit;}
.p-card:hover{transform:translateY(-8px); box-shadow:0 20px 34px rgba(23,21,18,.1);}
.p-shot{padding:14px; overflow:hidden;}
.p-bar{display:flex; gap:5px; padding:4px 0 12px;}
.p-bar span{width:7px; height:7px; border-radius:50%; background:var(--line);}
.p-screen{border-radius:10px; overflow:hidden;}
.p-screen .top{height:26px;}
.p-screen .content{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px;}
.p-screen .content div{height:34px; border-radius:6px; background:rgba(255,255,255,.55);}
.p-screen.has-image{aspect-ratio:1/1; height:auto; background-size:cover; background-position:center; transition:transform .4s ease;}
.p-card:hover .p-screen.has-image{transform:scale(1.06);}
/* اسکرول نرم تصویر شاخص بلند (اسکرین‌شات کامل سایت) موقع هاور/لمس —
   اول فقط بالای تصویر (عرض کامل کارت) دیده می‌شه، موقع هاور به‌آرومی تا
   ته تصویر اسکرول می‌شه. عمداً فقط با هاور/لمس خودِ عکس فعال می‌شه، نه
   کل کارت (مثلاً هاور روی دکمه‌ها نباید باعث اسکرول عکس بشه).
   زوم معمولی کارت‌های دیگه اینجا غیرفعاله چون با خود اسکرول تداخل داره. */
.p-screen.has-image.tall-scroll{
  background-position:center top;
  transition:background-position 5.5s ease;
}
.p-card:hover .p-screen.has-image.tall-scroll{
  transform:none; /* زوم عمومی کارت رو برای این نوع تصویر خاموش می‌کنیم */
}
.p-screen.has-image.tall-scroll:hover,
.p-screen.has-image.tall-scroll:active,
.p-screen.has-image.tall-scroll.is-touch-active{
  background-position:center bottom;
}
.p-body{padding:8px 22px 26px; position:relative;}
.showcase-card-actions{display:flex; gap:8px; flex-wrap:nowrap; margin-top:16px;}
.showcase-card-actions .btn{flex:1; justify-content:center; white-space:nowrap; padding:10px 8px; font-size:12.5px;}
.p-tag{display:inline-block; font-size:11.5px; font-weight:700; color:var(--orange-deep); background:var(--orange-tint); padding:5px 12px; border-radius:999px; margin-bottom:12px;}
.p-body h3{font-size:16.5px; margin-bottom:0;}
.p-body p{font-size:13.3px; color:var(--muted); margin-bottom:0;}
.p-link{font-size:13.3px; font-weight:700; text-decoration:none; display:inline-flex; gap:6px; align-items:center; color:var(--orange-deep);}

/* ============ TESTIMONIALS ============ */
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px;}
.t-card{background:var(--white); border-radius:var(--radius-lg); padding:32px 28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px;}
.stars{color:var(--orange); font-size:14px; letter-spacing:2px;}
.t-quote{font-size:14.3px; color:var(--ink); line-height:2;}
.t-person{display:flex; align-items:center; gap:12px; margin-top:auto;}
.t-avatar{width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;}
.t-avatar-photo{object-fit:cover; display:block;}
.t-name{font-size:13.8px; font-weight:700;}
.t-role{font-size:12px; color:var(--muted);}

/* ============ FAQ / CURRICULUM ============ */
.faq-wrap{max-width:780px; margin:56px auto 0;}
.faq-wrap.no-margin{margin:0 0 56px;}
.faq-item{background:var(--white); border-radius:var(--radius-md); margin-bottom:14px; box-shadow:var(--shadow); overflow:hidden;}
.faq-q{display:flex; align-items:center; justify-content:space-between; padding:22px 26px; cursor:pointer; font-weight:700; font-size:15.3px; gap:20px;}
.curriculum-item .faq-q{font-size:14.5px;}
.lesson-count{font-size:12px; color:var(--muted); font-weight:500; margin-right:auto; margin-left:14px;}
.faq-icon{width:30px; height:30px; border-radius:50%; background:var(--orange-tint); color:var(--orange-deep); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; transition:.25s ease;}
.faq-item.open .faq-icon{transform:rotate(45deg); background:var(--orange); color:#fff;}
.faq-a{
  max-height:0; overflow:hidden;
  padding:0 26px; font-size:13.8px; color:var(--muted); line-height:1.9;
  transition:max-height .5s cubic-bezier(.22,1,.36,1), padding-bottom .5s cubic-bezier(.22,1,.36,1);
}
.faq-item.open .faq-a{max-height:600px; padding-bottom:24px;}

/* ============ PRICING ============ */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; align-items:end;}
.price-custom{display:flex; flex-direction:column; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:36px; padding:40px 34px;}
.price-custom p{flex-grow:1; font-size:13.8px; color:var(--muted); margin-bottom:28px;}
.price-custom h3{font-size:19px; margin-bottom:16px;}
.price-card{background:var(--white); border:1px solid var(--line); border-radius:36px; padding:40px 34px;}
.price-card.featured{background:var(--orange); border-color:var(--orange); color:#fff; padding-top:52px; padding-bottom:52px; margin-top:-16px; box-shadow:0 12px 26px rgba(212,115,58,.22);}
.price-icon{width:56px; height:56px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center; justify-content:center; margin-bottom:26px;}
.price-card.featured .price-icon{background:rgba(255,255,255,.2);}
.price-icon svg{width:20px; height:20px; stroke:var(--ink);}
.price-card.featured .price-icon svg{stroke:#fff;}
.price-card h3{font-size:26px; margin-bottom:28px;}
.price-card ul{display:flex; flex-direction:column; gap:18px; margin-bottom:36px;}
.price-card li{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-soft);}
.price-card.featured li{color:rgba(255,255,255,.9);}
.price-check{width:24px; height:24px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.price-check svg{width:12px; height:12px; stroke:#fff;}
.price-card.featured .price-check{background:#fff;}
.price-card.featured .price-check svg{stroke:var(--orange);}
.price-amount{font-size:26px; font-weight:800;}
.price-amount span{font-size:13px; font-weight:500; color:var(--muted); margin-right:6px;}
.price-card.featured .price-amount span{color:rgba(255,255,255,.75);}

/* پلن قیمتی نوع دوم (صفحات داخلی) */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; align-items:start;}
.price-grid .price-card{border-radius:var(--radius-lg); padding:38px 30px; text-align:center; box-shadow:var(--shadow); border:none;}
.price-grid .price-card.featured{background:var(--ink); color:#fff; transform:translateY(-14px); margin-top:0; box-shadow:none;}
.price-grid .amount{font-size:34px; font-weight:800; margin:18px 0;}
.price-grid .amount span{font-size:13px; font-weight:500; color:var(--muted);}
.price-grid .price-card.featured .amount span{color:#B9B5AD;}
.price-grid .price-card ul{text-align:right; margin:26px 0; gap:12px;}
.price-grid .price-card li{font-size:13.5px; display:flex; gap:8px; align-items:flex-start;}
.price-grid .price-card li svg{width:18px; height:18px; stroke:var(--teal-deep); flex-shrink:0; margin-top:2px;}
.price-grid .price-card.featured li svg{stroke:var(--teal);}

/* ============ CONTACT ============ */
.contact-grid{grid-template-columns:1fr 1fr;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.contact-info-list{display:flex; flex-direction:column; gap:18px;}
.contact-info-row{display:flex; align-items:center; gap:14px;}
.contact-form-box{background:var(--cream-2); border-radius:var(--radius-lg); padding:32px;}
.contact-form-box.rounded-xl{border-radius:var(--radius-xl); padding:42px;}
.wb-input,
.wb-select,
.wb-textarea{
  padding:16px; border-radius:12px; border:1px solid var(--line); font-family:inherit;
  background:var(--white); color:var(--ink); width:100%;
}
.wb-textarea{resize:none;}
.wb-select{color:var(--muted);}
.mb-14{margin-bottom:14px;} .mb-16{margin-bottom:16px;} .mb-18{margin-bottom:18px;} .mb-20{margin-bottom:20px;}

/* فیلد ضدـاسپم — از دید کاربر واقعی مخفیه ولی از display:none که بعضی مرورگرها/ربات‌ها نادیده می‌گیرن استفاده نمی‌کنیم.
   نکته مهم: قبلاً از left:-9999px استفاده می‌شد که باعث می‌شد مرورگر یه فضای اسکرول افقی
   عظیم به چپ صفحه اضافه کنه و در موبایل باعث پیمایش افقی و فضای خالی بشه. این تکنیک
   استاندارد «visually-hidden» جایگزینش شده که این مشکل رو نداره. */
.wb-honeypot{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.wb-form-message{
  padding:14px 18px; border-radius:12px; font-size:13.5px; font-weight:600; margin-bottom:18px;
}
.wb-form-message.is-success{background:var(--teal-tint); color:var(--teal-deep);}
.wb-form-message.is-error{background:var(--orange-tint); color:var(--orange-deep);}
.wb-ajax-form{position:relative;}
.wb-ajax-form button[disabled]{opacity:.7; cursor:not-allowed;}

/* ============ MOBILE NAV ============ */
.hamburger{
  display:none; position:relative; flex-direction:column; justify-content:center;
  width:40px; height:40px; cursor:pointer; background:var(--cream-2); border:1px solid var(--line);
  border-radius:50%; padding:0; flex-shrink:0;
}
.hamburger span{
  display:block; height:2px; width:16px; margin:2px auto; background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.hamburger.is-active span:nth-child(1){transform:translateY(4px) rotate(45deg);}
.hamburger.is-active span:nth-child(2){opacity:0;}
.hamburger.is-active span:nth-child(3){transform:translateY(-4px) rotate(-45deg);}

.mobile-menu{
  display:flex; flex-direction:column; gap:16px;
  position:absolute; top:calc(100% + 12px); right:0; left:0;
  background:var(--white); border:1px solid var(--line);
  border-radius:28px; box-shadow:var(--shadow);
  padding:20px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0);}
.mobile-menu-links{display:flex; flex-direction:column; gap:4px; width:100%;}
.mobile-menu-links .links{display:flex; flex-direction:column; gap:4px; width:100%;}
.mobile-menu-links li{width:100%; list-style:none;}
.mobile-menu-links a{
  display:block; width:100%; padding:13px 16px; border-radius:12px;
  font-size:14.5px; font-weight:600; color:var(--ink-soft);
  text-decoration:none; transition:.15s ease;
}
.mobile-menu-links a:hover,
.mobile-menu-links a:active{background:var(--cream-2); color:var(--ink);}
.mobile-contact-wrap{width:100%; margin-top:4px; text-align:center;}
.mobile-contact-btn{
  display:inline-block; text-align:center; box-sizing:border-box;
  background:var(--teal); color:#fff; text-decoration:none;
  border-radius:999px; padding:9px 24px; font-size:12.5px; font-weight:700; font-family:inherit;
}
.mobile-contact-btn:hover, .mobile-contact-btn:active{background:var(--teal-deep); color:#fff;}

/* ============ FLOATING SUPPORT BUTTON ============ */
.wb-support-float{position:fixed; bottom:28px; right:28px; z-index:60; display:flex; flex-direction:column; align-items:flex-end;}
.wb-support-toggle{
  position:relative;
  width:56px; height:56px; border-radius:50%; background:var(--orange); color:#fff; border:none;
  box-shadow:0 8px 18px rgba(212,115,58,.3); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.2s ease; flex-shrink:0;
}
.wb-support-toggle:hover{background:var(--orange-deep); transform:translateY(-2px);}
.wb-support-toggle svg{width:24px; height:24px; position:absolute; stroke:#fff; fill:none;}
.wb-support-toggle .wb-ic-close{opacity:0; transform:rotate(-45deg);}
.wb-support-toggle .wb-ic-chat{opacity:1; transform:rotate(0);}
.wb-support-float.is-open .wb-support-toggle .wb-ic-chat{opacity:0; transform:rotate(45deg);}
.wb-support-float.is-open .wb-support-toggle .wb-ic-close{opacity:1; transform:rotate(0);}
.wb-support-panel{
  position:absolute; bottom:calc(100% + 12px); right:0;
  display:flex; flex-direction:column; gap:8px;
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.2s ease; pointer-events:none;
  min-width:210px;
}
.wb-support-float.is-open .wb-support-panel{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
.wb-support-item{
  display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; text-decoration:none; transition:.15s ease;
}
.wb-support-item:hover{background:var(--cream-2); color:var(--ink);}
.wb-support-ic{width:20px; height:20px; flex-shrink:0; display:flex;}
.wb-support-ic svg{width:100%; height:100%; stroke:var(--orange-deep); fill:none;}
@media(max-width:620px){
  .wb-support-float{bottom:18px; right:18px;}
  .wb-support-toggle{width:50px; height:50px;}
}

/* ============ SCROLL-REVEAL ANIMATION ============ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-delay-1.in-view{transition-delay:.08s;}
.reveal-delay-2.in-view{transition-delay:.16s;}
.reveal-delay-3.in-view{transition-delay:.24s;}
/* ============ SCROLL-REVEAL ANIMATION (خفن‌تر) ============ */
.reveal{opacity:0; transform:translateY(36px) scale(.96); filter:blur(4px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease;}
.reveal.in-view{opacity:1; transform:translateY(0) scale(1); filter:blur(0);}
.reveal-delay-1.in-view{transition-delay:.08s;}
.reveal-delay-2.in-view{transition-delay:.16s;}
.reveal-delay-3.in-view{transition-delay:.24s;}
/* استگر خودکار برای بچه‌های مستقیم گریدهای reveal (کارت‌ها یک‌به‌یک با تاخیر ظاهر می‌شن) */
.reveal.in-view > *{opacity:0; transform:translateY(18px); animation:webrastaStagger .6s cubic-bezier(.16,1,.3,1) forwards;}
.reveal.in-view > *:nth-child(1){animation-delay:.05s;}
.reveal.in-view > *:nth-child(2){animation-delay:.12s;}
.reveal.in-view > *:nth-child(3){animation-delay:.19s;}
.reveal.in-view > *:nth-child(4){animation-delay:.26s;}
.reveal.in-view > *:nth-child(5){animation-delay:.33s;}
.reveal.in-view > *:nth-child(6){animation-delay:.40s;}
.reveal.in-view > *:nth-child(n+7){animation-delay:.46s;}
@keyframes webrastaStagger{
  to{opacity:1; transform:translateY(0);}
}
/* توجه: قبلاً اینجا انیمیشن reveal روی prefers-reduced-motion غیرفعال می‌شد؛
   طبق درخواست صریح حذف شد تا همیشه اجرا بشه. */

/* ============ دکمه گرادیانت متحرک (مثل موج ملایم) — برای CTAهای مهم ============ */
.btn-wave{
  position:relative; overflow:hidden;
  background:linear-gradient(115deg, #E8935F 0%, var(--orange) 33%, #C2652E 66%, var(--orange-deep) 100%);
  background-size:180% 180%; color:#fff; border:none;
  animation:webrastaWave 3s ease-in-out infinite;
  will-change:background-position;
  box-shadow:0 8px 18px rgba(212,115,58,.24);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-wave.btn-wave-teal{
  background:linear-gradient(115deg, #6FD9C0 0%, var(--teal) 33%, #34AD93 66%, var(--teal-deep) 100%);
  box-shadow:0 8px 18px rgba(61,196,166,.24);
}

/* افکت درخشش عبوری — روی هاور (دسکتاپ) یا لمس/کلیک (موبایل) */
.btn-wave::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.55) 55%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.btn-wave:hover, .btn-wave:focus-visible, .btn-wave:active, .btn-wave.is-active-touch{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 22px rgba(212,115,58,.3);
}
.btn-wave.btn-wave-teal:hover, .btn-wave.btn-wave-teal:focus-visible, .btn-wave.btn-wave-teal:active, .btn-wave.btn-wave-teal.is-active-touch{
  box-shadow:0 10px 22px rgba(61,196,166,.3);
}
.btn-wave:hover::after, .btn-wave:focus-visible::after, .btn-wave:active::after, .btn-wave.is-active-touch::after{
  transform:translateX(120%);
}
@keyframes webrastaWave{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
/* توجه: قبلاً اینجا انیمیشن روی حالت prefers-reduced-motion غیرفعال می‌شد.
   این دقیقاً همون چیزی بود که باعث می‌شد بعضی‌ها (خصوصاً روی دسکتاپ، جایی که
   تنظیم «Reduce Motion» سیستم‌عامل رایج‌تر فعاله) انیمیشن رو نبینن. طبق درخواست،
   این opt-out حذف شد تا انیمیشن همیشه اجرا بشه. */

/* ============ اشکال گرادیانی شناور تزئینی (پس‌زمینه بخش CTA) ============ */
.wb-float-blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; z-index:0;
  animation:webrastaFloat 10s ease-in-out infinite;
}
.wb-blob-1{width:280px; height:280px; background:var(--orange); top:-60px; right:-40px;}
.wb-blob-2{width:220px; height:220px; background:var(--teal); bottom:-60px; left:-30px; animation-delay:2s;}
.wb-blob-faint{opacity:.15;}
.above-blobs{position:relative; z-index:1;}
.has-blobs{position:relative; overflow:hidden;}
/* گلس‌مورفیسم واقعی روی این سکشن‌های خاص: شیشه‌ی کدر، رنگ پایه‌ش رو کمی حفظ
   می‌کنه، و بکدراپ‌بلور داره تا هر چی پشتشه (نور برند + بکگراند شبکه‌ی نقطه‌ها)
   محو و کدر از زیرش رد بشه. کارت‌های داخل سکشن (svc-card و بقیه) دست‌نخورده و
   تخت می‌مونن — گلس فقط مال خود سکشنه. */
.glass-section{
  background:rgba(var(--cream-2-rgb), .58);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
}
@keyframes webrastaFloat{
  0%, 100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(20px,-24px) scale(1.08);}
}

/* ============ تضمین صریح (Guarantee Callout) ============ */
.guarantee-box{
  background:var(--deep); color:#fff; border-radius:var(--radius-xl); padding:44px 40px;
  display:flex; align-items:center; gap:28px; max-width:900px; margin:0 auto;
  position:relative; overflow:hidden;
}
.guarantee-icon{
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.guarantee-icon svg{width:28px; height:28px; stroke:var(--orange);}
.guarantee-box h3{font-size:19px; margin-bottom:8px; color:#fff;}
.guarantee-box p{font-size:14px; color:#C9C6C0; line-height:1.9;}
@media(max-width:620px){
  .guarantee-box{flex-direction:column; text-align:center; padding:34px 26px;}
}

/* ============ صادقانه بگیم (Honest Fit) ============ */
.honest-fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto;}
.honest-fit-col{border-radius:var(--radius-lg); padding:30px 26px;}
.honest-fit-col.fit-yes{background:var(--teal-tint);}
.honest-fit-col.fit-no{background:var(--cream-2);}
.honest-fit-col h4{font-size:15.5px; margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.honest-fit-col ul{display:flex; flex-direction:column; gap:12px;}
.honest-fit-col li{display:flex; align-items:flex-start; gap:8px; font-size:13.8px; color:var(--ink-soft); line-height:1.8;}
.honest-fit-col li svg{width:16px; height:16px; flex-shrink:0; margin-top:3px;}
.fit-yes li svg{stroke:var(--teal-deep);}
.fit-no li svg{stroke:var(--muted);}
@media(max-width:620px){
  .honest-fit-grid{grid-template-columns:1fr;}
}

/* ============ HERO TRUST ROW (صفحات اختصاصی خدمات) ============ */
.hero-trust-row{display:flex; gap:36px; justify-content:center; margin-top:32px; flex-wrap:wrap;}
.hero-trust-item{text-align:center;}
.hero-trust-item b{display:block; font-size:26px; font-weight:800; color:var(--orange);}
.hero-trust-item span{font-size:12.5px; color:var(--muted); font-weight:600;}

/* ============ نشانگر موس دایره‌ای ============ */
.wb-cursor-dot{
  position:fixed; top:0; left:0; width:28px; height:28px; margin:-14px 0 0 -14px;
  border-radius:50%; border:1.5px solid var(--orange);
  pointer-events:none; z-index:300;
  opacity:0; transform:translate(-100px,-100px);
  transition:opacity .2s ease, width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease, background .25s ease;
}
.wb-cursor-dot.is-visible{opacity:.9;}
.wb-cursor-dot.is-hover{
  width:44px; height:44px; margin:-22px 0 0 -22px;
  background:rgba(212,115,58,.12); border-color:var(--orange-deep);
}
@media(max-width:980px){
  .wb-cursor-dot{display:none;}
}
/* ============ QUICK START FORM (شروع سریع) ============ */
.quick-start-box{background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:28px; max-width:520px;}
.quick-start-box.centered{margin:0 auto;}
.quick-start-input-row{display:flex; gap:10px;}
.quick-start-input{
  flex:1; padding:16px 18px; border-radius:999px; border:1.5px solid var(--line);
  font-family:inherit; font-size:14.5px; background:var(--cream-2); color:var(--ink);
}
.quick-start-input:focus{outline:none; border-color:var(--orange);}
.quick-start-btn{flex-shrink:0; white-space:nowrap;}
.quick-start-badges{display:flex; flex-wrap:wrap; gap:14px; margin-top:16px;}
.quick-start-badges span{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); font-weight:600;}
.quick-start-badges svg{width:15px; height:15px; stroke:var(--teal-deep); flex-shrink:0;}
@media(max-width:620px){
  .quick-start-input-row{flex-direction:column;}
  .quick-start-btn{width:100%; justify-content:center;}
}

/* ============ CTA + FOOTER (dark block) ============ */
.dark-block{background:var(--deep); color:#fff;}
.cta-final{text-align:center; padding-bottom:70px; position:relative; overflow:hidden;}
.cta-final h2{color:#fff; font-size:36px; line-height:1.6;}
.cta-final p{color:#B9B5AD; max-width:480px; margin:16px auto 34px; font-size:15.5px;}
.cta-actions{display:flex; flex-direction:column; align-items:center; gap:12px;}
.cta-actions .btn{padding:13px 30px; font-size:14px;}
@media(min-width:621px){
  .cta-actions{flex-direction:row; justify-content:center;}
}

footer{padding-top:60px;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1);}
.foot-brand{font-size:20px; font-weight:800; display:flex; align-items:center; gap:8px; height:34px;}
.foot-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--orange);}
.foot-brand .foot-logo-img,
.foot-brand img.custom-logo{
  height:100%; width:auto; max-width:160px; object-fit:contain; display:block;
}
.foot-brand .custom-logo-link{display:flex; align-items:center; height:100%;}
.foot-desc{color:#9A968D; font-size:13.5px; max-width:280px; margin-top:14px;}
.foot-social{display:flex; gap:10px; margin-top:20px;}
.foot-social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:.2s ease;
}
.foot-social a:hover{background:var(--orange);}
.foot-social svg{width:17px; height:17px; stroke:#fff;}
.foot-col h4{font-size:14px; margin-bottom:18px; color:#fff;}
.foot-col a{display:block; color:#9A968D; font-size:13.5px; text-decoration:none; margin-bottom:11px;}
.foot-col a:hover{color:#fff;}
.foot-bottom{text-align:center; color:#7C786F; font-size:12.3px; padding:26px 0;}

/* ============ INNER PAGE HERO / BREADCRUMB ============ */
.page-hero{padding:70px 0 60px; text-align:center; position:relative;}
.page-hero h1{font-size:44px; line-height:1.5; margin-bottom:16px;}
.breadcrumb{font-size:13.5px; color:var(--muted); margin-bottom:18px;}
.breadcrumb a{color:var(--muted); text-decoration:none;}
.breadcrumb a:hover{color:var(--ink); text-decoration:underline;}
.breadcrumb b{color:var(--orange); font-weight:700;}

/* ============ SERVICE DETAIL ============ */
.svc-detail{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; padding:80px 0; border-bottom:1px solid var(--line);}
.svc-detail:last-child{border-bottom:none;}
.svc-detail:nth-child(even){grid-template-columns:1.1fr 0.9fr;}
.svc-detail:nth-child(even) .svc-detail-text{order:2;}
.svc-detail-icon{width:100%; aspect-ratio:1.3; background:var(--cream-2); border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center;}
.svc-detail-icon .ic-wrap{width:120px; height:120px; border-radius:32px; background:var(--white); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;}
.svc-detail-icon svg{width:56px; height:56px; stroke:var(--orange-deep);}
.svc-detail h2{font-size:30px; margin-bottom:16px;}
.svc-detail ul{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.svc-detail li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-soft);}
.svc-detail li svg{width:20px; height:20px; stroke:var(--teal-deep); flex-shrink:0; margin-top:2px;}

/* ============ TEAM ============ */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:56px;}
.team-card{background:var(--white); border-radius:var(--radius-lg); padding:30px 22px; text-align:center; box-shadow:var(--shadow);}
.team-avatar{width:88px; height:88px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px; color:#fff;}
.team-avatar.sm{width:76px; height:76px; margin:0; flex-shrink:0;}
.team-card h4{font-size:15.5px; margin-bottom:4px;}
.team-card span{font-size:12.5px; color:var(--muted);}

/* ============ VALUES ============ */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px;}
.value-num{font-size:14px; font-weight:800; color:var(--orange); margin-bottom:14px;}
.value-card h3{font-size:18px; margin-bottom:10px;}

/* ============ PROJECT SINGLE ============ */
.project-hero-shot{
  width:100%;
  max-width:600px;
  aspect-ratio:1 / 1;
  margin:40px auto 60px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.project-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.project-meta{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:32px; background:var(--cream-2); border-radius:var(--radius-lg); margin-bottom:56px;}
.project-meta.project-meta-3col{grid-template-columns:repeat(3,1fr);}
.project-meta div{text-align:center;}
.project-meta span{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
.project-meta b{font-size:15px;}
.project-links-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:56px;}
.project-description{max-width:820px; margin:0 auto 40px;}
.project-gallery{max-width:1000px; margin:0 auto;}
.project-gallery-grid{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:20px;}
.project-gallery-item{
  display:block; flex:0 1 calc(50% - 10px); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .2s ease;
  border:none; padding:0; background:none; cursor:pointer; font:inherit;
}
.project-gallery-item:hover{transform:translateY(-4px);}
.project-gallery-item img{width:100%; height:auto; display:block;}

/* ============ لایت‌باکس پیش‌نمایش تصویر ============ */
.wb-lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(10,9,7,.92);
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.wb-lightbox.open{opacity:1; visibility:visible;}
.wb-lightbox img{max-width:90vw; max-height:85vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); display:block;}
.wb-lightbox-close{
  position:absolute; top:24px; left:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.wb-lightbox-close svg{width:20px; height:20px; stroke:#fff;}
@media(max-width:620px){
  .wb-lightbox{padding:20px;}
  .wb-lightbox-close{top:14px; left:14px; width:38px; height:38px;}
}
@media(max-width:620px){
  .project-gallery-item{flex-basis:100%;}
}

/* ============ PRODUCT HERO (course / plugin) ============ */
.product-hero{padding:70px 0 0;}
.product-hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.product-hero h1{font-size:36px; line-height:1.5; margin-bottom:16px;}
.product-meta-row{display:flex; align-items:center; gap:18px; margin:18px 0 26px; flex-wrap:wrap;}
.product-meta-row .stars{color:var(--orange); font-size:14px;}
.product-meta-row span{font-size:13.5px; color:var(--muted);}

.video-mock{
  position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:16/10; background:linear-gradient(135deg,var(--ink),#3A362E);
  display:flex; align-items:center; justify-content:center;
}
.video-mock.orange-gradient{background:linear-gradient(135deg,var(--orange),var(--orange-deep));}
.play-btn{width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.15); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.video-mock.orange-gradient .play-btn{background:rgba(255,255,255,.2);}
.play-btn .inner{width:56px; height:56px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center;}
.video-mock.orange-gradient .play-btn .inner{background:#fff;}
.play-btn svg{width:20px; height:20px; fill:#fff;}
.video-mock.orange-gradient .play-btn svg{fill:var(--orange);}

/* ============ BUY BOX ============ */
.buy-box{background:var(--white); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow); position:sticky; top:100px;}
.license-badge{display:inline-block; font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--teal-tint); color:var(--teal-deep); margin-bottom:14px;}
.buy-price{display:flex; align-items:baseline; gap:8px; margin-bottom:6px;}
.buy-price b{font-size:30px; font-weight:800;}
.buy-price span{font-size:13px; color:var(--muted);}
.buy-old-price{font-size:14px; color:var(--muted); text-decoration:line-through; margin-bottom:18px;}
.buy-box .btn{width:100%; justify-content:center; margin-top:10px;}
.buy-features{margin-top:22px; display:flex; flex-direction:column; gap:12px;}
.buy-features li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft);}
.buy-features li svg{width:17px; height:17px; stroke:var(--teal-deep); flex-shrink:0;}
.buy-sub{font-size:13px;}

/* ============ INSTRUCTOR ============ */
.instructor-card{display:flex; align-items:center; gap:22px; background:var(--cream-2); border-radius:var(--radius-lg); padding:30px;}
.instructor-card h4{font-size:16.5px; margin-bottom:6px;}
.instructor-card p{font-size:13.5px; color:var(--muted);}

/* ============ GALLERY ============ */
.gallery-grid{display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-top:40px;}
.gallery-side{display:flex; flex-direction:column; gap:16px;}
.gallery-side .browser-mock{flex:1;}

/* ============ CHANGELOG ============ */
.changelog-item{display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--line);}
.changelog-item:last-child{border-bottom:none;}
.changelog-ver{font-size:13px; font-weight:800; color:var(--orange); white-space:nowrap; min-width:70px;}
.changelog-item p{font-size:13.8px; color:var(--ink-soft);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:980px){
  .primary-nav, .nav-cta > a.btn-contact-header, .icon-btn-search{display:none;}
  .hero-grid, .why-grid.equal, .product-hero-grid{grid-template-columns:1fr; gap:50px;}
  .hero-grid .visual{order:-1;}
  .visual{height:400px; max-width:560px; margin:0 auto;}
  .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:26px;}
  .stat:nth-child(2)::after{display:none;}
  .svc-grid, .svc-grid.cols-3, .svc-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .why-grid, .why-grid.wide-left, .why-grid.contact-page-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:repeat(2,1fr); row-gap:48px;}
  .process-grid::before{display:none;}
  .portfolio-grid, .test-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:1fr; max-width:420px; margin-inline:auto;}
  .price-card.featured{margin-top:0;}
  .contact-grid{grid-template-columns:1fr;}
  .svc-detail{grid-template-columns:1fr !important;}
  .svc-detail:nth-child(even) .svc-detail-text{order:0;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .values-grid, .price-grid{grid-template-columns:1fr;}
  .project-meta, .project-meta.project-meta-3col{grid-template-columns:repeat(2,1fr);}
  .price-grid .price-card.featured{transform:none;}
  .buy-box{position:static;}
  .gallery-grid{grid-template-columns:1fr;}
  .hamburger{display:flex;}
}
@media(max-width:620px){
  section{padding:72px 0;}
  .hero h1{font-size:34px;}
  h2.headline{font-size:27px;}
  .svc-grid, .svc-grid.cols-3, .svc-grid.cols-4, .process-grid, .portfolio-grid, .test-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{flex-direction:column;}
  .row-head{flex-direction:column; align-items:flex-start;}
  .form-row{grid-template-columns:1fr;}
  .hero-actions .btn{padding:12px 18px; font-size:13px;}
}
@media(max-width:480px){
  .wrap{padding:0 20px;}
  .visual{height:360px;}
  .hero-actions .btn{padding:11px 12px; font-size:12px; gap:4px;}
}

/* =========================================================
   نور برند بالای صفحه (Ambient Glow) — ثابت به بالای ویوپورت،
   ملایم و مینیمال، پشت همه محتوا
   ========================================================= */
.wb-ambient-glow{
  position:fixed;
  top:-42vh;
  right:50%;
  transform:translateX(50%);
  width:min(2000px, 220vw);
  height:88vh;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(closest-side, rgba(var(--orange-rgb),.16), rgba(var(--orange-rgb),.07) 40%, rgba(var(--orange-rgb),.02) 70%, transparent 85%);
  filter:blur(70px);
  opacity:.85;
}
html[data-theme="dark"] .wb-ambient-glow{
  background:radial-gradient(closest-side, rgba(var(--orange-rgb),.14), rgba(var(--orange-rgb),.055) 40%, rgba(var(--orange-rgb),.015) 70%, transparent 85%);
  opacity:.95;
}
/* محتوای واقعی سایت باید بالای نور بشینه */
#wb-ajax-content, .dark-block{ position:relative; z-index:1; }

/* توجه: کارت‌ها (svc-card، p-card، faq-item، price-card و...) عمداً همون
   بکگراند تخت/کدر خودشون رو حفظ می‌کنن — قرار نیست شفاف یا شیشه‌ای باشن.
   گلس‌مورفیسم فقط روی سکشن‌های .glass-section پیاده‌شده (پایین‌تر). */

/* =========================================================
   بکگراند شبکه‌ی نقطه‌های متصل (حس تکنولوژی) — نازک، مینیمال، رنگ برند.
   خود ترسیم (نقطه‌ها + خط‌های اتصال + واکنش به موس/لمس) با canvas و JS انجام
   می‌شه؛ اینجا فقط جای‌گیری و ابعاد بومَش رو مشخص می‌کنیم.
   ========================================================= */
.wb-dna-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
}


/* =========================================================
   باکس چت شناور دوره‌ای («مشاوره رایگان!»)
   ========================================================= */
.wb-chat-bubble{
  position:absolute;
  bottom:calc(100% + 10px);
  right:0;
  background:var(--ink);
  color:var(--cream);
  padding:12px 18px;
  border-radius:16px 16px 4px 16px;
  font-size:13.5px;
  font-weight:700;
  white-space:nowrap;
  text-align:right;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  opacity:0;
  transform:translateY(8px) scale(.92);
  transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.wb-chat-bubble.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.wb-chat-bubble::after{
  content:"";
  position:absolute;
  bottom:-6px; right:16px;
  width:12px; height:12px;
  background:var(--ink);
  transform:rotate(45deg);
  border-radius:2px;
}

/* =========================================================
   انتقال محتوا هنگام ناوبری ایجکسی
   ========================================================= */
#wb-ajax-content{
  transition:opacity .22s ease;
}
#wb-ajax-content.wb-ajax-fading{
  opacity:0;
}
.wb-ajax-progress{
  position:fixed; top:0; right:0; left:0; height:3px; z-index:9999;
  background:var(--orange);
  transform-origin:right;
  transform:scaleX(0);
  transition:transform .25s ease, opacity .3s ease;
  opacity:0;
}
.wb-ajax-progress.is-active{opacity:1;}

/* =========================================================
   آیکن سرویس به‌صورت تصویر SVG آپلودی (رنگ‌آمیزی خودکار روشن/تیره)
   ========================================================= */
.svc-ic-img{
  width:200px; height:200px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.svc-ic-img img{
  width:100%; height:100%; object-fit:contain; display:block;
  /* عکس‌ها با رنگ طبیعی خودشون نشون داده می‌شن — بدون فیلتر روشن/تیره */
}
/* هاور کارت‌های خدمات: خود کارت کمی بالا میاد، آیکن (تصویر ۲۰۰×۲۰۰) کمی
   بزرگ و چرخیده می‌شه */
.svc-card:hover .svc-ic-img{
  transform:scale(1.06) rotate(-3deg);
}
.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;
}

/* =========================================================
   بلاگ — جستجو، متای کارت، فهرست مطالب، تایپوگرافی محتوا،
   تگ‌ها، اشتراک‌گذاری، باکس نویسنده، نظرات
   ========================================================= */

/* جستجو */
.blog-search{
  max-width:480px; margin:30px auto 0; position:relative;
  display:flex; align-items:center;
}
.blog-search-input{
  width:100%; padding:15px 52px 15px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  font-family:inherit; font-size:14px;
}
.blog-search-btn{
  position:absolute; right:6px; width:38px; height:38px; border-radius:50%;
  background:var(--orange); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.blog-search-btn svg{width:17px; height:17px; stroke:#fff;}

/* متای کارت آرشیو */
.blog-card-meta{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:10px;}

/* متای هدر مقاله */
.blog-meta-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:22px; font-size:13.5px; color:var(--muted); flex-wrap:wrap;
}
.blog-meta-row img{border-radius:50%; width:32px; height:32px;}

/* چیدمان تک‌ستونه‌ی محتوا */
.blog-content-col{max-width:780px; margin:0 auto;}

/* باکس نکات کلیدی */
.blog-key-points{
  background:var(--orange-tint); border-radius:var(--radius-lg); padding:24px 26px; margin-bottom:26px;
  border-inline-start:4px solid var(--orange);
}
.blog-box-title{font-size:15px; font-weight:800; margin:0;}
.blog-key-points ul{list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:10px;}
.blog-key-points li{font-size:14.5px; color:var(--ink-soft); display:flex; gap:10px; align-items:flex-start; line-height:1.8;}
.blog-key-points li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:9px;}

/* فهرست مطالب — باکس تاشو، بالای محتوا */
.blog-toc{background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:26px; overflow:hidden;}
.blog-toc-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:right;
}
.blog-toc-toggle svg{width:18px; height:18px; stroke:var(--muted); transition:transform .25s ease; flex-shrink:0;}
.blog-toc.is-open .blog-toc-toggle svg{transform:rotate(180deg);}
.blog-toc-body{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.blog-toc.is-open .blog-toc-body{max-height:600px;}
.blog-toc-body ul{list-style:none; padding:0 22px 20px; display:flex; flex-direction:column; gap:10px;}
.blog-toc-body a{font-size:13.5px; color:var(--ink-soft); text-decoration:none; line-height:1.6; display:block;}
.blog-toc-body a:hover{color:var(--orange);}
.blog-toc-body li.toc-h3{padding-right:16px; font-size:12.8px;}

/* بکگراند محتوای مقاله — کارت، نه خالی */
.entry-content-wrap{
  background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow);
  padding:40px 42px; margin-bottom:26px;
}
@media(max-width:620px){ .entry-content-wrap{padding:26px 20px;} }

/* تایپوگرافی محتوای مقاله */
.entry-content{font-size:16px; line-height:2.1; color:var(--ink);}
.entry-content > *:first-child{margin-top:0;}
.entry-content p{margin-bottom:22px;}
.entry-content h2{font-size:26px; font-weight:800; margin:44px 0 18px; scroll-margin-top:100px;}
.entry-content h3{font-size:20px; font-weight:700; margin:34px 0 14px; scroll-margin-top:100px;}
.entry-content h4{font-size:17px; font-weight:700; margin:26px 0 12px;}
.entry-content ul, .entry-content ol{margin:0 0 22px; padding-inline-start:26px; display:flex; flex-direction:column; gap:8px;}
.entry-content li{font-size:15.5px; color:var(--ink-soft);}
.entry-content a{color:var(--orange-deep); text-decoration:underline; text-underline-offset:3px;}
.entry-content img{max-width:100%; height:auto; border-radius:var(--radius-md); margin:12px 0;}
/* نقل‌قول با هویت برند وبراستا: علامت نقل‌قول بزرگ + رنگ برند */
.entry-content blockquote{
  position:relative; background:var(--cream-2); border-radius:var(--radius-md);
  padding:28px 30px 26px; margin:30px 0; font-size:16.5px; color:var(--ink); font-weight:600;
  line-height:1.9; border-inline-start:4px solid var(--orange);
}
.entry-content blockquote::before{
  content:"”"; position:absolute; top:6px; inset-inline-start:22px; font-size:52px; font-weight:800;
  color:var(--orange); opacity:.35; line-height:1; font-family:Georgia, serif;
}
.entry-content blockquote p{margin-bottom:0; padding-inline-start:38px;}
.entry-content code{background:var(--cream-2); padding:2px 7px; border-radius:6px; font-size:13.5px; direction:ltr; display:inline-block;}
.entry-content pre{background:var(--ink); color:#fff; padding:18px; border-radius:var(--radius-md); overflow-x:auto; margin:22px 0; direction:ltr; text-align:left;}
.entry-content pre code{background:none; padding:0; color:inherit;}
.entry-content table{width:100%; border-collapse:collapse; margin:22px 0; font-size:14px;}
.entry-content th, .entry-content td{padding:10px 14px; border:1px solid var(--line); text-align:right;}
.entry-content hr{border:none; border-top:1px solid var(--line); margin:32px 0;}

/* ناوبری مقاله‌ی قبلی/بعدی */
.blog-prev-next{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:36px 0;}
.blog-nav-card{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px 22px;
  text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:transform .2s ease;
}
.blog-nav-card:hover{transform:translateY(-4px);}
.blog-nav-next{text-align:left;}
.blog-nav-label{font-size:12px; font-weight:700; color:var(--orange-deep);}
.blog-nav-title{font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.7;}
@media(max-width:620px){ .blog-prev-next{grid-template-columns:1fr;} .blog-nav-next{text-align:right;} }

/* تگ‌ها */
.blog-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px;}

/* اشتراک‌گذاری */
.blog-share{display:flex; align-items:center; gap:10px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line);}
.blog-share-label{font-size:13px; font-weight:700; color:var(--muted); margin-left:4px;}
.blog-share-btn{
  width:38px; height:38px; border-radius:50%; background:var(--cream-2); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s ease; text-decoration:none;
}
.blog-share-btn:hover{background:var(--orange); }
.blog-share-btn svg{width:16px; height:16px; stroke:var(--ink-soft); transition:.15s ease;}
.blog-share-btn:hover svg{stroke:#fff;}
.blog-share-btn.is-copied svg{stroke:var(--teal-deep);}

/* نظرات */
.blog-comments{padding:70px 0;}
.blog-comment-list{list-style:none; display:flex; flex-direction:column; gap:20px; margin-bottom:36px;}
.blog-comment-list .children{list-style:none; margin-top:20px; padding-inline-start:34px; display:flex; flex-direction:column; gap:20px;}
.blog-comment-list .comment-body{background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:22px;}
.blog-comment-list .comment-author{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-weight:700; font-size:14px;}
.blog-comment-list .comment-author img{border-radius:50%;}
.blog-comment-list .comment-meta{font-size:12px; color:var(--muted); margin-bottom:10px;}
.blog-comment-list .comment-meta a{color:inherit; text-decoration:none;}
.blog-comment-list p{font-size:14.5px; color:var(--ink-soft); line-height:1.9;}
#respond input[type="text"], #respond input[type="email"], #respond textarea{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--white); color:var(--ink); font-family:inherit; font-size:14px; margin-bottom:14px; resize:vertical;
}
#respond .comment-form-author, #respond .comment-form-email{display:inline-block; width:calc(50% - 7px);}
#respond .comment-form-author{margin-left:14px;}
@media(max-width:620px){
  #respond .comment-form-author, #respond .comment-form-email{width:100%; margin-left:0;}
}