/* ═════════════════════════════════════════════════════════════════════
   D A S T Y A R   —   Main Stylesheet
   Platform: drsapp.ir
   Version: 2.0 (Clean rebuild)
   ═════════════════════════════════════════════════════════════════════

   فهرست مطالب:
   ─────────────────────────────────────────────
   ۰۱. متغیرهای ریشه (CSS Variables)
   ۰۲. ریست و پایه
   ۰۳. کانتینر
   ۰۴. تایپوگرافی عمومی
   ۰۵. سیستم موج هوشمند
   ۰۶. دکمه‌ها
   ۰۷. هدر (دسکتاپ)
   ۰۸. هیرو (Hero Section)
   ۰۹. تصویرسازی شبکه‌ای (Hero Network Image)
   ۱۰. سکشن‌های عمومی
   ۱۱. گرید امکانات
   ۱۲. Marquee (اسکرول افقی بی‌نهایت دسکتاپ)
   ۱۳. خدمات
   ۱۴. مشتریان (Trusted)
   ۱۵. تعرفه‌ها (Plans)
   ۱۶. سوالات متداول (FAQ)
   ۱۷. Final CTA
   ۱۸. فوتر
   ۱۹. صفحات فرعی (Page Hero)
   ۲۰. محتوای غنی (Rich Content)
   ۲۱. صفحه تماس
   ۲۲. نمونه کارها (Portfolio)
   ۲۳. هدر موبایل + منو
   ۲۴. اسکرول افقی موبایل
   ۲۵. اینماد
   ۲۶. ریسپانسیو عمومی
   ۲۷. Accessibility
   ═════════════════════════════════════════════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════════
   ۰۱. متغیرهای ریشه — رنگ‌ها، فونت‌ها، ابعاد
   ═════════════════════════════════════════════════════════════════════ */
:root{
  /* ─── برند اصلی ─── */
  --primary:         #00a695;
  --primary-dark:    #009885;
  --primary-deep:    #006445;
  --primary-deepest: #012a25;

  /* ─── رنگ‌های تأکیدی ─── */
  --gold:            #FFBB00;
  --gold-dark:       #C88F00;
  --gold-deep:       #FE8903;
  --coral:           #EF4D30;

  /* ─── خنثی ─── */
  --cream:           #f7f3ee;
  --cream-2:         #f5f0eb;
  --white:           #ffffff;
  --dark:            #0a1815;
  --dark-card:       #424242;
  --border:          #e6e6e6;

  /* ─── متن ─── */
  --text-strong:     #222222;
  --text-body:       #333333;
  --text-muted:      #6B6B80;
  --text-soft:       #555555;

  /* ─── فونت‌ها ─── */
  --font-display:    'Shabnam', Tahoma, sans-serif;
  --font-body:       'Vazirmatn', Tahoma, sans-serif;

  /* ─── ابعاد ─── */
  --radius:          22px;
  --radius-lg:       30px;
  --transition:      .3s cubic-bezier(.4,0,.2,1);
  --container:       1280px;
}


/* ═════════════════════════════════════════════════════════════════════
   ۰۲. ریست و پایه
   ═════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  background:var(--white);
  color:var(--text-body);
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; transition:var(--transition); }
ul{ list-style:none; }
button{ font-family:inherit; border:none; cursor:pointer; outline:none; background:none; }
img,svg{ max-width:100%; display:block; }


/* ═════════════════════════════════════════════════════════════════════
   ۰۳. کانتینر
   ═════════════════════════════════════════════════════════════════════ */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}


/* ═════════════════════════════════════════════════════════════════════
   ۰۴. تایپوگرافی عمومی — تفکیک فونت Display و Body
   ═════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.page-hero__title,
.plan-name,
.plan-price-num,
.feature-tile-title,
.marquee-card-title,
.service-card h3,
.contact-info__title,
.contact-form__title,
.footer-brand,
.nav-logo,
.hero-network__core-name,
.portfolio-card__title,
.portfolio-gallery__title,
.related-portfolio__title,
.empty-state__title,
.rich-content h1,
.rich-content h2,
.rich-content h3,
.final-cta h2,
.trusted-item{
  font-family:var(--font-display);
}

p,
.hero-subtitle,
.section-subtitle,
.feature-tile-desc,
.marquee-card-desc,
.service-card p,
.plan-tagline,
.plan-feature,
.faq-content,
.contact-info__desc,
.contact-form__desc,
.rich-content p,
.rich-content li,
.portfolio-card__desc,
.footer-desc,
.footer-col ul a,
.footer-contact,
.footer-bottom,
.portfolio-meta,
.hero-perk,
.contact-item__value,
.contact-item__label,
.form-input,
.form-group label,
.alert{
  font-family:var(--font-body);
}

.btn,
.nav-menu a,
.nav-contact,
.plan-cta,
.breadcrumb,
.portfolio-filter,
.pagination__link,
.portfolio-link,
.contact-form__submit{
  font-family:var(--font-display);
}


/* ═════════════════════════════════════════════════════════════════════
   ۰۵. سیستم موج هوشمند (Smart Wave System)
   ─────────────────────────────────────────────────────────────────────
   قوانین:
     ۱) موج رنگش را از color والد می‌گیرد (currentColor)
     ۲) هر موج هم‌رنگ سکشن مجاورش می‌شود
     ۳) نسخه‌های دسکتاپ/موبایل جدا
     ۴) انیمیشن شناور ملایم
   ═════════════════════════════════════════════════════════════════════ */
.wave{
  position:absolute;
  left:0;
  width:100%;
  line-height:0;
  pointer-events:none;
  z-index:3;
}
.wave svg{ display:block; width:100%; height:auto; }
.wave--top   { top:-1px; }
.wave--bottom{ bottom:-1px; }

.wave__layer{
  position:absolute;
  left:0;
  width:100%;
  line-height:0;
  pointer-events:none;
}
.wave__layer svg{ display:block; width:100%; height:auto; }

.wave--mobile  { display:none; }
.wave--desktop { display:block; }

.wave--float svg{ animation:wave-float 8s ease-in-out infinite; }

@keyframes wave-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-4px); }
}


/* ═════════════════════════════════════════════════════════════════════
   ۰۶. دکمه‌ها — Adalo 3D Pill Style
   ═════════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:700;
  padding:14px 28px;
  border-radius:999px;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
  border:none;
}

/* ─── دکمه اصلی (تیل) ─── */
.btn-primary{
  color:#fff;
  background:var(--primary);
  background-image:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 45%,transparent 100%);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:
    0 4px var(--primary-dark),
    inset 0 1px 1px rgba(255,255,255,.4),
    0 0 20px rgba(0,166,149,.25);
}
.btn-primary:hover{
  transform:translateY(2px);
  box-shadow:0 2px var(--primary-dark),inset 0 1px 1px rgba(255,255,255,.4),0 0 30px rgba(0,166,149,.45);
}
.btn-primary:active{
  transform:translateY(4px);
  box-shadow:0 0 var(--primary-dark),inset 0 2px 3px rgba(0,0,0,.15);
}

/* ─── دکمه طلایی ─── */
.btn-gold{
  color:#1a1a1a;
  background:var(--gold);
  background-image:linear-gradient(180deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.05) 45%,transparent 100%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:
    0 6px var(--gold-dark),
    inset 0 1px 1px rgba(255,255,255,.5),
    0 0 20px rgba(255,187,0,.35);
  padding:16px 36px;
  font-size:1rem;
}
.btn-gold:hover{
  transform:translateY(3px);
  box-shadow:0 3px var(--gold-dark),inset 0 1px 1px rgba(255,255,255,.5),0 0 40px rgba(255,187,0,.6);
}
.btn-gold:active{
  transform:translateY(6px);
  box-shadow:0 0 var(--gold-dark),inset 0 2px 3px rgba(0,0,0,.15);
}

/* ─── دکمه شفاف ─── */
.btn-ghost{
  color:var(--text-strong);
  background:transparent;
  border:2px solid var(--border);
  padding:12px 24px;
}
.btn-ghost:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:rgba(0,166,149,.05);
}

/* ─── دکمه حاشیه روشن (روی پس‌زمینه تیره) ─── */
.btn-outline-light{
  color:#fff;
  background:transparent;
  border:2px solid rgba(255,255,255,.4);
  padding:14px 28px;
  border-radius:14px;
}
.btn-outline-light:hover{
  border-color:#fff;
  background:rgba(255,255,255,.1);
}

/* ─── دکمه ناوبری ─── */
.btn-nav{ padding:12px 24px; height:46px; }


/* ═════════════════════════════════════════════════════════════════════
   ۰۷. هدر — دسکتاپ
   ═════════════════════════════════════════════════════════════════════ */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}

.nav-bar{
  display:flex;
  align-items:center;
  gap:24px;
  min-height:72px;
  position:relative;
}

/* ─── لوگو ─── */
.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.35rem;
  color:var(--primary);
  flex-shrink:0;
}
.nav-logo-mark{
  width:40px; height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  display:grid; place-items:center;
  color:#fff;
  font-size:1.15rem;
  font-weight:900;
  box-shadow:0 8px 20px -8px var(--primary);
}

/* ─── منوی دسکتاپ ─── */
.nav-menu{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
}
.nav-menu a{
  padding:10px 14px;
  font-size:.95rem;
  font-weight:600;
  color:var(--text-strong);
  border-radius:8px;
}
.nav-menu a:hover{ color:var(--primary); }

/* ─── اکشن‌ها ─── */
/* ─── اکشن‌ها ─── */
.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-inline-start:auto;
  flex-shrink:0;
}
.nav-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:.78rem;
  color:var(--text-muted);
  line-height:1.3;
}
.nav-contact strong{
  color:var(--text-strong);
  font-size:1rem;
  font-weight:800;
}
.nav-contact strong b{
  color:#EC0000;
  font-weight:800;
}
.nav-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:.78rem;
  color:var(--text-muted);
  line-height:1.3;
}
.nav-contact strong{ color:var(--text-strong); font-size:1rem; font-weight:800; }
.nav-contact strong b{ color:#EC0000; font-weight:800; }


/* ═════════════════════════════════════════════════════════════════════
   ۰۸. هیرو (Hero Section)
   ═════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  background:linear-gradient(180deg,#fafdfc 0%,var(--cream) 100%);
  padding:70px 0 140px;
  overflow:hidden;
}

/* ─── شبکه نقطه‌ای پس‌زمینه ─── */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(0,166,149,.1) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(0,166,149,.06) 1px, transparent 1.5px);
  background-size:32px 32px, 64px 64px;
  background-position:0 0, 16px 16px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events:none;
}

/* ─── هاله تیل بالا-چپ ─── */
.hero::after{
  content:"";
  position:absolute;
  top:-150px; left:-150px;
  width:600px; height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,166,149,.18), transparent 70%);
  filter:blur(60px);
  pointer-events:none;
}

/* ─── هاله طلایی پایین-راست ─── */
.hero-blob-gold{
  position:absolute;
  bottom:-100px; right:-100px;
  width:500px; height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,187,0,.2), transparent 70%);
  filter:blur(60px);
  pointer-events:none;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:50px;
  align-items:center;
  position:relative;
  z-index:2;
}

/* ─── Badge بالای عنوان ─── */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  background:rgba(0,166,149,.08);
  border:1px solid rgba(0,166,149,.18);
  border-radius:999px;
  color:var(--primary-deep);
  font-family:var(--font-display);
  font-size:.85rem;
  font-weight:700;
  margin-bottom:24px;
}
.hero-badge-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(0,166,149,.2);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ box-shadow:0 0 0 4px rgba(0,166,149,.2); }
  50%    { box-shadow:0 0 0 8px rgba(0,166,149,.05); }
}

/* ─── عنوان ─── */
.hero-title{
  font-size:2.75rem;
  font-weight:800;
  line-height:1.35;
  color:var(--text-strong);
  letter-spacing:-.5px;
  margin-bottom:20px;
}
.hero-title-accent{
  background-image:linear-gradient(180deg,var(--primary-deep),var(--primary));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ─── زیرعنوان ─── */
.hero-subtitle{
  font-size:1.05rem;
  line-height:1.9;
  color:var(--text-soft);
  max-width:560px;
  margin-bottom:32px;
}

/* ─── دکمه‌ها ─── */
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:32px;
}

/* ─── مزیت‌ها ─── */
.hero-perks{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
.hero-perk{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.88rem;
  color:var(--text-body);
  font-weight:600;
}
.hero-perk-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--primary);
  flex-shrink:0;
}


/* ═════════════════════════════════════════════════════════════════════
   ۰۹. تصویرسازی شبکه‌ای — Hero Network Image
   ─────────────────────────────────────────────────────────────────────
   نکته: aspect-ratio حذف شده تا در موبایل، تصویر به اندازه طبیعی
   خودش نمایش داده شود (نه کوچک و له‌شده).
   ═════════════════════════════════════════════════════════════════════ */
.hero-network{
  position:relative;
  width:100%;
  max-width:620px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ─── تصویر اصلی (AI generated) ─── */
.hero-network__image{
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
  border-radius:24px;
  filter:drop-shadow(0 30px 60px rgba(0,166,149,.18));
  animation:hero-network-float 6s ease-in-out infinite;
}
@keyframes hero-network-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-8px); }
}

/* ─── خطوط SVG (نسخه قدیمی CSS-based — در صورت استفاده) ─── */
.hero-network__lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}
.hero-network__lines path{
  fill:none;
  stroke:url(#line-gradient);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:8 6;
  animation:line-flow 3s linear infinite;
}
.hero-network__lines path.pulse-line{
  stroke-dasharray:4 8;
  stroke-width:2.5;
  animation:line-flow 2s linear infinite;
}
@keyframes line-flow{
  to{ stroke-dashoffset:-28; }
}

/* ─── هسته مرکزی (نسخه قدیمی CSS-based) ─── */
.hero-network__core{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:160px; height:160px;
  border-radius:32px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.35) 0%,transparent 50%),
    linear-gradient(135deg,var(--primary),var(--primary-deep));
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:5;
  box-shadow:
    0 20px 60px -20px rgba(0,166,149,.7),
    0 0 0 8px rgba(0,166,149,.08),
    0 0 0 16px rgba(0,166,149,.04),
    0 0 80px rgba(0,166,149,.4);
  animation:core-glow 3s ease-in-out infinite;
}
@keyframes core-glow{
  0%,100%{
    box-shadow:
      0 20px 60px -20px rgba(0,166,149,.7),
      0 0 0 8px rgba(0,166,149,.08),
      0 0 0 16px rgba(0,166,149,.04),
      0 0 80px rgba(0,166,149,.4);
  }
  50%{
    box-shadow:
      0 20px 60px -20px rgba(0,166,149,.9),
      0 0 0 12px rgba(0,166,149,.12),
      0 0 0 24px rgba(0,166,149,.06),
      0 0 120px rgba(0,166,149,.6);
  }
}
.hero-network__core-logo{
  font-size:2rem;
  font-weight:900;
  line-height:1;
  margin-bottom:6px;
}
.hero-network__core-name{
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.5px;
}
.hero-network__core-caption{
  font-size:.65rem;
  opacity:.85;
  margin-top:4px;
  font-weight:600;
}

/* ─── کارت‌های ماهواره‌ای (نسخه قدیمی) ─── */
.hero-node{
  position:absolute;
  width:72px; height:72px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#f8f8f8 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  z-index:4;
  box-shadow:
    0 10px 24px -10px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.04),
    inset 0 1px 1px rgba(255,255,255,1);
  border:1px solid rgba(0,166,149,.1);
  animation:node-float 4s ease-in-out infinite;
  transition:transform .3s ease;
}
.hero-node:hover{
  transform:scale(1.12) !important;
  box-shadow:0 16px 32px -12px rgba(0,166,149,.4),0 4px 12px rgba(0,166,149,.15);
}
.hero-node svg{
  width:24px; height:24px;
  color:var(--primary);
  stroke-width:1.8;
}
.hero-node__label{
  font-family:var(--font-display);
  font-size:.55rem;
  font-weight:700;
  color:var(--text-muted);
  text-align:center;
  line-height:1.2;
}
.hero-node::after{
  content:"";
  position:absolute;
  bottom:-4px; left:50%;
  transform:translateX(-50%);
  width:38px; height:6px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,166,149,.55),transparent 70%);
  filter:blur(3px);
}
@keyframes node-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}

/* موقعیت ماهواره‌ها */
.hero-node--n1{ top:2%;   right:50%; transform:translateX(50%); animation-delay:0s; }
.hero-node--n2{ top:14%;  left:2%;                                animation-delay:.4s; }
.hero-node--n3{ top:14%;  right:2%;                               animation-delay:.8s; }
.hero-node--n4{ top:44%;  left:-3%;                               animation-delay:1.2s; }
.hero-node--n5{ top:44%;  right:-3%;                              animation-delay:1.6s; }
.hero-node--n6{ bottom:2%;  right:50%; transform:translateX(50%); animation-delay:2s; }
.hero-node--n7{ bottom:14%; left:2%;                              animation-delay:2.4s; }
.hero-node--n8{ bottom:14%; right:2%;                             animation-delay:2.8s; }


/* ═════════════════════════════════════════════════════════════════════
   ۱۰. سکشن‌های عمومی
   ═════════════════════════════════════════════════════════════════════ */
.section{
  padding:88px 0;
  position:relative;
}
.section-cream{ background:var(--cream); }
.section-white{ background:var(--white); }
.section-dark{ background:var(--text-strong); color:#fff; }

.section-head{
  max-width:780px;
  margin:0 auto 56px;
  text-align:center;
}
.section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  background:rgba(0,166,149,.08);
  border-radius:999px;
  color:var(--primary-deep);
  font-family:var(--font-display);
  font-size:.85rem;
  font-weight:700;
  margin-bottom:16px;
}
.section-title{
  font-size:2.25rem;
  font-weight:800;
  line-height:1.4;
  color:var(--text-strong);
  letter-spacing:-.5px;
  margin-bottom:16px;
}
.section-title-accent{
  background-image:linear-gradient(180deg,var(--primary-deep),var(--primary));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section-subtitle{
  font-size:1.05rem;
  color:var(--text-soft);
  line-height:1.9;
}


/* ═════════════════════════════════════════════════════════════════════
   ۱۱. گرید امکانات
   ═════════════════════════════════════════════════════════════════════ */
.features-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.feature-tile{
  background:#fff;
  border-radius:20px;
  padding:28px 22px;
  border:1px solid rgba(0,166,149,.08);
  box-shadow:0 1px 2px rgba(0,166,149,.04), 0 8px 24px rgba(0,166,149,.06);
  transition:all .35s cubic-bezier(.2,.8,.3,1);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.feature-tile::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--gold));
  opacity:0;
  transition:opacity .3s ease;
}
.feature-tile:hover{
  transform:translateY(-6px);
  box-shadow:0 4px 12px rgba(0,166,149,.08), 0 20px 48px rgba(0,166,149,.14);
}
.feature-tile:hover::before{ opacity:1; }

.feature-tile-icon{
  width:64px; height:64px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  color:#fff;
  display:grid; place-items:center;
  margin:0 auto 18px;
  box-shadow:0 12px 24px -10px var(--primary);
}
.feature-tile-icon svg{ width:30px; height:30px; }
.feature-tile-icon.gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 12px 24px -10px var(--gold);
}
.feature-tile-icon.coral{
  background:linear-gradient(135deg,#FF7A5C,var(--coral));
  box-shadow:0 12px 24px -10px var(--coral);
}

.feature-tile-title{
  font-size:1.05rem;
  font-weight:800;
  color:var(--text-strong);
  margin-bottom:8px;
  line-height:1.5;
}
.feature-tile-desc{
  font-size:.85rem;
  color:var(--text-muted);
  line-height:1.75;
}


/* ═════════════════════════════════════════════════════════════════════
   ۱۲. Marquee — اسکرول افقی بی‌نهایت (دسکتاپ)
   ═════════════════════════════════════════════════════════════════════ */
.marquee-wrap{
  overflow:hidden;
  padding:20px 0 30px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  margin-top:48px;
}
.marquee{
  display:flex;
  gap:24px;
  width:max-content;
  padding-inline:24px;
  animation:marquee-scroll 55s linear infinite;
  will-change:transform;
}
.marquee:hover{ animation-play-state:paused; }
@keyframes marquee-scroll{
  0%  { transform:translateX(0); }
  100%{ transform:translateX(50%); }
}

.marquee-card{
  flex-shrink:0;
  width:300px;
  background:#fff;
  border-radius:22px;
  padding:26px 24px;
  border:1px solid rgba(0,166,149,.08);
  box-shadow:0 1px 2px rgba(0,166,149,.04), 0 8px 24px rgba(0,166,149,.06);
  transition:all .35s ease;
}
.marquee-card:hover{
  transform:translateY(-6px);
  box-shadow:0 4px 12px rgba(0,166,149,.1), 0 20px 48px rgba(0,166,149,.15);
}
.marquee-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.marquee-card-icon{
  width:44px; height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  color:#fff;
  display:grid; place-items:center;
  flex-shrink:0;
  box-shadow:0 8px 16px -6px var(--primary);
}
.marquee-card-icon svg{ width:22px; height:22px; }
.marquee-card-icon.gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 8px 16px -6px var(--gold);
}
.marquee-card-icon.coral{
  background:linear-gradient(135deg,#FF7A5C,var(--coral));
  box-shadow:0 8px 16px -6px var(--coral);
}

.marquee-card-title{
  font-size:1rem;
  font-weight:800;
  color:var(--text-strong);
  line-height:1.4;
}
.marquee-card-desc{
  font-size:.85rem;
  color:var(--text-muted);
  line-height:1.75;
  margin-bottom:14px;
}
.marquee-card-tag{
  display:inline-block;
  padding:4px 12px;
  background:rgba(0,166,149,.08);
  color:var(--primary-deep);
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:700;
  border-radius:999px;
}
.marquee-card-tag.gold{ background:rgba(255,187,0,.15); color:#9a6a00; }
.marquee-card-tag.coral{ background:rgba(239,77,48,.1); color:var(--coral); }


/* ═════════════════════════════════════════════════════════════════════
   ۱۳. خدمات (Services)
   ═════════════════════════════════════════════════════════════════════ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.service-card{
  background:#fff;
  border-radius:24px;
  padding:40px 32px;
  border:1px solid var(--border);
  transition:all .35s cubic-bezier(.2,.8,.3,1);
  text-align:right;
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:80px; height:80px;
  background:radial-gradient(circle at top right,rgba(0,166,149,.12),transparent 70%);
  pointer-events:none;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 4px 12px rgba(0,166,149,.06), 0 24px 60px rgba(0,166,149,.12);
}
.service-icon{
  width:72px; height:72px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  color:#fff;
  display:grid; place-items:center;
  margin-bottom:22px;
  box-shadow:0 16px 32px -12px var(--primary);
}
.service-icon svg{ width:34px; height:34px; }
.service-card h3{
  font-size:1.25rem;
  font-weight:800;
  color:var(--text-strong);
  margin-bottom:12px;
  line-height:1.5;
}
.service-card p{
  font-size:.9rem;
  color:var(--text-soft);
  line-height:1.85;
}


/* ═════════════════════════════════════════════════════════════════════
   ۱۴. مشتریان (Trusted)
   ═════════════════════════════════════════════════════════════════════ */
.trusted-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  margin-top:40px;
}
.trusted-item{
  background:#fff;
  border-radius:16px;
  padding:24px 16px;
  display:grid; place-items:center;
  min-height:90px;
  border:1px solid var(--border);
  transition:all .3s ease;
  font-weight:800;
  color:var(--text-strong);
  font-size:1rem;
}
.trusted-item:hover{
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-3px);
  box-shadow:0 12px 24px -12px rgba(0,166,149,.3);
}


/* ═════════════════════════════════════════════════════════════════════
   ۱۵. تعرفه‌ها (Plans)
   ═════════════════════════════════════════════════════════════════════ */
.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.plan-card{
  background:#fff;
  border-radius:28px;
  padding:40px 32px;
  border:2px solid var(--border);
  display:flex;
  flex-direction:column;
  transition:all .35s ease;
  position:relative;
}
.plan-card.featured{
  border-color:var(--primary);
  transform:scale(1.03);
  box-shadow:0 4px 12px rgba(0,166,149,.08), 0 30px 80px rgba(0,166,149,.18);
  z-index:2;
}
.plan-card.featured::before{
  content:"پرفروش‌ترین";
  position:absolute;
  top:-14px; right:50%;
  transform:translateX(50%);
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#1a1a1a;
  padding:6px 20px;
  border-radius:999px;
  font-family:var(--font-display);
  font-size:.75rem;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 16px -6px var(--gold);
}
.plan-head{
  text-align:center;
  padding-bottom:24px;
  border-bottom:1px dashed var(--border);
  margin-bottom:24px;
}
.plan-name{
  font-size:1.5rem;
  font-weight:900;
  color:var(--text-strong);
  margin-bottom:6px;
}
.plan-tagline{ font-size:.85rem; color:var(--text-muted); }
.plan-price{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  margin-top:20px;
}
.plan-price-num{
  font-size:2.5rem;
  font-weight:900;
  color:var(--text-strong);
  line-height:1;
  letter-spacing:-1px;
}
.plan-price-unit{
  font-size:.9rem;
  color:var(--text-muted);
  font-weight:600;
  padding-bottom:6px;
}
.plan-features{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  margin-bottom:28px;
}
.plan-feature{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.9rem;
  color:var(--text-body);
  line-height:1.6;
}
.plan-feature-check{
  flex-shrink:0;
  width:20px; height:20px;
  border-radius:6px;
  background:rgba(0,166,149,.12);
  color:var(--primary);
  display:grid; place-items:center;
  font-size:.75rem;
  font-weight:900;
  margin-top:4px;
}
.plan-card.featured .plan-feature-check{ background:var(--primary); color:#fff; }
.plan-cta{
  width:100%;
  padding:16px;
  border-radius:14px;
  font-weight:800;
  font-size:1rem;
  background:var(--cream);
  color:var(--text-strong);
  transition:all .2s ease;
  text-align:center;
  display:block;
}
.plan-cta:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 24px -8px var(--primary);
}
.plan-card.featured .plan-cta{
  background:var(--primary);
  color:#fff;
  box-shadow:0 4px var(--primary-dark), inset 0 1px 1px rgba(255,255,255,.3);
}
.plan-card.featured .plan-cta:hover{
  transform:translateY(2px);
  box-shadow:0 2px var(--primary-dark), inset 0 1px 1px rgba(255,255,255,.3);
}


/* ═════════════════════════════════════════════════════════════════════
   ۱۶. سوالات متداول (FAQ)
   ═════════════════════════════════════════════════════════════════════ */
.faq-list{
  max-width:860px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.faq-item{
  background:#fff;
  border-radius:18px;
  border:1px solid var(--border);
  overflow:hidden;
  transition:all .3s ease;
}
.faq-item[open]{
  border-color:var(--primary);
  box-shadow:0 12px 32px -12px rgba(0,166,149,.25);
}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 28px;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  color:var(--text-strong);
  list-style:none;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  flex-shrink:0;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(0,166,149,.1);
  color:var(--primary);
  display:grid; place-items:center;
  font-weight:900;
  font-size:1.15rem;
  transition:all .3s ease;
}
.faq-item[open] summary::after{
  content:"−";
  background:var(--primary);
  color:#fff;
  transform:rotate(180deg);
}
.faq-content{
  padding:0 28px 24px;
  color:var(--text-soft);
  font-size:.92rem;
  line-height:1.9;
}


/* ═════════════════════════════════════════════════════════════════════
   ۱۷. Final CTA
   ═════════════════════════════════════════════════════════════════════ */
.final-cta{
  position:relative;
  background:linear-gradient(180deg,#009885 0%,#012a25 100%);
  padding:120px 0 140px;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,.03) 10px,
    rgba(255,255,255,.03) 20px
  );
  pointer-events:none;
}
.final-cta-inner{
  position:relative;
  z-index:2;
  max-width:720px;
  margin:0 auto;
}
.final-cta h2{
  font-size:2.5rem;
  font-weight:800;
  line-height:1.4;
  margin-bottom:18px;
}
.final-cta p{
  font-size:1.05rem;
  color:rgba(255,255,255,.85);
  line-height:1.9;
  margin-bottom:40px;
}
.final-cta-buttons{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}


/* ═════════════════════════════════════════════════════════════════════
   ۱۸. فوتر
   ═════════════════════════════════════════════════════════════════════ */
.site-footer{
  position:relative;
  background:var(--dark);
  color:rgba(255,255,255,.7);
  padding:100px 0 32px;
}
.footer-content{
  padding-top:80px;
  position:relative;
  z-index:4;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.35rem;
  color:#fff;
  margin-bottom:18px;
}
.footer-brand-mark{
  width:38px; height:38px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  display:grid; place-items:center;
  color:#fff;
  font-size:1.1rem;
  font-weight:900;
}
.footer-desc{
  font-size:.9rem;
  line-height:1.9;
  color:rgba(255,255,255,.6);
  max-width:340px;
}
.footer-col h4{
  color:#fff;
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:800;
  margin-bottom:18px;
}
.footer-col ul{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-col ul a{
  font-size:.875rem;
  color:rgba(255,255,255,.65);
}
.footer-col ul a:hover{ color:var(--primary); }
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:.875rem;
}
.footer-contact-item{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-contact-icon{
  width:32px; height:32px;
  border-radius:8px;
  background:rgba(0,166,149,.15);
  color:var(--primary);
  display:grid; place-items:center;
  flex-shrink:0;
  font-size:.9rem;
}
.footer-bottom{
  padding-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  font-size:.85rem;
  color:rgba(255,255,255,.5);
}
.footer-socials{
  display:flex;
  gap:10px;
}
.footer-social{
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  display:grid; place-items:center;
  color:rgba(255,255,255,.7);
  font-size:.9rem;
  transition:all .2s ease;
}
.footer-social:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-3px);
}


/* ═════════════════════════════════════════════════════════════════════
   ۱۹. صفحات فرعی — Page Hero
   ═════════════════════════════════════════════════════════════════════ */
.page-hero{
  position:relative;
  background:linear-gradient(180deg,#fafdfc 0%,var(--cream) 100%);
  padding:80px 0 140px;
  text-align:center;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(0,166,149,.08) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(0,166,149,.05) 1px, transparent 1.5px);
  background-size:32px 32px, 64px 64px;
  pointer-events:none;
}
.page-hero__title{
  font-size:2.5rem;
  font-weight:900;
  line-height:1.35;
  color:var(--text-strong);
  margin-bottom:12px;
  position:relative;
  z-index:2;
}
.page-hero__subtitle{
  font-size:1.05rem;
  color:var(--text-soft);
  max-width:600px;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.page-hero--portfolio .page-hero__title{ font-size:2rem; }

/* ─── Breadcrumb ─── */
.breadcrumb{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:.85rem;
  color:var(--text-muted);
  margin-bottom:16px;
  position:relative;
  z-index:2;
}
.breadcrumb a{ color:var(--primary); }
.breadcrumb a:hover{ text-decoration:underline; }


/* ═════════════════════════════════════════════════════════════════════
   ۲۰. محتوای غنی (Rich Content from CKEditor)
   ═════════════════════════════════════════════════════════════════════ */
.rich-content{
  background:#fff;
  border-radius:24px;
  padding:48px 40px;
  border:1px solid var(--border);
  line-height:1.95;
  color:var(--text-body);
  font-size:1rem;
  max-width:920px;
  margin:0 auto;
}
.rich-content h1,
.rich-content h2,
.rich-content h3{
  color:var(--text-strong);
  font-weight:800;
  line-height:1.5;
  margin-top:32px;
  margin-bottom:14px;
}
.rich-content h1{ font-size:1.85rem; }
.rich-content h2{ font-size:1.5rem; }
.rich-content h3{ font-size:1.2rem; }
.rich-content p{ margin-bottom:18px; }
.rich-content ul,
.rich-content ol{ margin:16px 0; padding-right:24px; }
.rich-content li{ margin-bottom:8px; }
.rich-content ul li{ list-style:disc; }
.rich-content ol li{ list-style:decimal; }
.rich-content a{ color:var(--primary); text-decoration:underline; }
.rich-content blockquote{
  border-right:4px solid var(--primary);
  padding:16px 24px;
  background:rgba(0,166,149,.04);
  border-radius:8px;
  margin:20px 0;
  color:var(--text-soft);
}
.rich-content img{
  border-radius:16px;
  margin:20px auto;
  max-width:100%;
  height:auto;
}
.rich-content code{
  background:var(--cream);
  padding:2px 8px;
  border-radius:6px;
  font-family:monospace;
  font-size:.9em;
  direction:ltr;
  display:inline-block;
}
.rich-content table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0;
}
.rich-content table th,
.rich-content table td{
  padding:12px 16px;
  border:1px solid var(--border);
  text-align:right;
}
.rich-content table th{
  background:var(--cream);
  font-weight:700;
}


/* ═════════════════════════════════════════════════════════════════════
   ۲۱. صفحه تماس (Contact Page)
   ═════════════════════════════════════════════════════════════════════ */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:40px;
  align-items:flex-start;
}

.contact-info{
  background:#fff;
  border-radius:24px;
  padding:40px 32px;
  border:1px solid var(--border);
  position:sticky;
  top:100px;
}
.contact-info__title{
  font-size:1.5rem;
  font-weight:900;
  color:var(--text-strong);
  margin-bottom:10px;
}
.contact-info__desc{
  font-size:.92rem;
  color:var(--text-soft);
  line-height:1.9;
  margin-bottom:28px;
}
.contact-info__items{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.contact-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.contact-item__icon{
  width:44px; height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  color:#fff;
  display:grid; place-items:center;
  font-size:1.1rem;
  flex-shrink:0;
  box-shadow:0 8px 16px -6px var(--primary);
}
.contact-item__label{
  font-size:.75rem;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:2px;
}
.contact-item__value{
  font-size:.95rem;
  color:var(--text-strong);
  font-weight:700;
  line-height:1.5;
}
a.contact-item__value:hover{ color:var(--primary); }

.contact-form-wrap{
  background:#fff;
  border-radius:24px;
  padding:40px 32px;
  border:1px solid var(--border);
}
.contact-form__title{
  font-size:1.5rem;
  font-weight:900;
  color:var(--text-strong);
  margin-bottom:8px;
}
.contact-form__desc{
  font-size:.92rem;
  color:var(--text-soft);
  line-height:1.9;
  margin-bottom:28px;
}

/* ─── Alert ─── */
.alert{
  padding:14px 20px;
  border-radius:12px;
  margin-bottom:20px;
  font-family:var(--font-display);
  font-size:.92rem;
  font-weight:600;
  line-height:1.7;
}
.alert--success{
  background:rgba(0,166,149,.08);
  border:1px solid rgba(0,166,149,.25);
  color:var(--primary-deep);
}
.alert--error{
  background:rgba(239,77,48,.08);
  border:1px solid rgba(239,77,48,.25);
  color:var(--coral);
}

/* ─── Form ─── */
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group label{
  font-size:.85rem;
  font-weight:700;
  color:var(--text-strong);
}
.form-group .required{ color:var(--coral); }
.form-input{
  width:100%;
  padding:14px 18px;
  border-radius:12px;
  border:2px solid var(--border);
  background:var(--white);
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--text-body);
  transition:all .2s ease;
  line-height:1.6;
  resize:vertical;
}
.form-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(0,166,149,.1);
}
.form-input::placeholder{ color:var(--text-muted); }
textarea.form-input{ min-height:120px; font-family:var(--font-body); }
.form-error{
  font-size:.8rem;
  color:var(--coral);
  font-weight:600;
}
.contact-form__submit{
  align-self:flex-start;
  padding:16px 40px;
  font-size:1rem;
}


/* ═════════════════════════════════════════════════════════════════════
   ۲۲. نمونه کارها (Portfolio)
   ═════════════════════════════════════════════════════════════════════ */
.portfolio-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:48px;
}
.portfolio-filter{
  padding:10px 22px;
  border-radius:999px;
  background:#fff;
  border:2px solid var(--border);
  color:var(--text-strong);
  font-size:.88rem;
  font-weight:700;
  transition:all .2s ease;
}
.portfolio-filter:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.portfolio-filter.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 4px var(--primary-dark), inset 0 1px 1px rgba(255,255,255,.3);
}

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.portfolio-grid--compact{
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.portfolio-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:all .35s cubic-bezier(.2,.8,.3,1);
  display:flex;
  flex-direction:column;
}
.portfolio-card:hover{
  transform:translateY(-8px);
  box-shadow:0 4px 12px rgba(0,166,149,.08), 0 24px 60px rgba(0,166,149,.15);
  border-color:transparent;
}
.portfolio-card__image{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--cream);
}
.portfolio-card__image img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.portfolio-card:hover .portfolio-card__image img{ transform:scale(1.05); }
.portfolio-card__badge{
  position:absolute;
  top:14px; right:14px;
  padding:6px 14px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#1a1a1a;
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:800;
  border-radius:999px;
  box-shadow:0 6px 14px -4px var(--gold);
}
.portfolio-card__body{
  padding:24px 22px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.portfolio-card__title{
  font-size:1.15rem;
  font-weight:800;
  color:var(--text-strong);
  margin-bottom:6px;
  line-height:1.4;
}
.portfolio-card__client{
  font-size:.8rem;
  color:var(--primary);
  font-weight:600;
  margin-bottom:10px;
}
.portfolio-card__desc{
  font-size:.88rem;
  color:var(--text-muted);
  line-height:1.8;
  margin-bottom:16px;
  flex:1;
}
.portfolio-card__link{
  font-family:var(--font-display);
  font-size:.85rem;
  color:var(--primary);
  font-weight:700;
}

/* ─── Portfolio Detail ─── */
.portfolio-detail{
  background:#fff;
  border-radius:24px;
  padding:40px;
  border:1px solid var(--border);
  margin-bottom:40px;
}
.portfolio-detail__info{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  padding:20px 24px;
  background:var(--cream);
  border-radius:16px;
  margin-bottom:32px;
}
.portfolio-meta{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:.9rem;
}
.portfolio-meta__label{ color:var(--text-muted); font-weight:600; }
.portfolio-meta__value{ color:var(--text-strong); font-weight:800; }
.portfolio-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-right:auto;
}
.portfolio-link{
  padding:8px 16px;
  background:#fff;
  border:2px solid var(--border);
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  color:var(--text-strong);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.portfolio-link:hover{
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-2px);
}
.portfolio-detail__cover{
  border-radius:20px;
  overflow:hidden;
  margin-bottom:32px;
  background:var(--cream);
}
.portfolio-detail__cover img{ width:100%; height:auto; }
.portfolio-detail__content{ margin-bottom:32px; }

.portfolio-gallery{ margin-top:40px; }
.portfolio-gallery__title{
  font-size:1.35rem;
  font-weight:900;
  color:var(--text-strong);
  margin-bottom:20px;
}
.portfolio-gallery__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.portfolio-gallery__item{
  border-radius:16px;
  overflow:hidden;
  background:var(--cream);
  aspect-ratio:1/1;
}
.portfolio-gallery__item img{
  width:100%; height:100%;
  object-fit:cover;
}

.related-portfolio{ margin-top:60px; }
.related-portfolio__title{
  font-size:1.5rem;
  font-weight:900;
  color:var(--text-strong);
  text-align:center;
  margin-bottom:32px;
}

/* ─── Empty State ─── */
.empty-state{
  text-align:center;
  padding:80px 20px;
  background:#fff;
  border-radius:24px;
  border:1px solid var(--border);
}
.empty-state__icon{ font-size:4rem; margin-bottom:20px; }
.empty-state__title{
  font-size:1.5rem;
  font-weight:900;
  color:var(--text-strong);
  margin-bottom:10px;
}
.empty-state__desc{ color:var(--text-muted); font-size:.95rem; }

/* ─── Pagination ─── */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:48px;
}
.pagination__link{
  padding:12px 24px;
  border-radius:12px;
  background:#fff;
  border:2px solid var(--border);
  color:var(--text-strong);
  font-weight:700;
  font-size:.9rem;
  transition:all .2s ease;
}
.pagination__link:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.pagination__info{
  font-size:.85rem;
  color:var(--text-muted);
  font-weight:600;
}


/* ═════════════════════════════════════════════════════════════════════
   ۲۳. هدر موبایل + منو
   ═════════════════════════════════════════════════════════════════════ */
.mobile-menu-toggle,
.mobile-menu,
.mobile-menu-overlay{ display:none; }

.mobile-menu-toggle{
  width:44px; height:44px;
  padding:11px 10px;
  border-radius:12px;
  background:transparent;
  border:2px solid var(--border);
  cursor:pointer;
  flex-direction:column;
  justify-content:space-between;
  transition:all .25s ease;
}
.mobile-menu-toggle span{
  display:block;
  width:100%; height:2.5px;
  background:var(--text-strong);
  border-radius:2px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.mobile-menu-toggle:hover{ border-color:var(--primary); }
.mobile-menu-toggle:hover span{ background:var(--primary); }
.mobile-menu-toggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.mobile-menu-toggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-menu{
  position:fixed;
  top:0; right:-100%;
  width:85%; max-width:360px;
  height:100vh;
  background:var(--white);
  z-index:2001;
  display:flex;
  flex-direction:column;
  transition:right .38s cubic-bezier(.4,0,.2,1);
  box-shadow:-20px 0 60px rgba(0,0,0,.18);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu.is-open{ right:0; display:flex; }

.mobile-menu__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.mobile-menu__header .nav-logo{ font-size:1.15rem; }
.mobile-menu__header .nav-logo-mark{ width:36px; height:36px; font-size:1rem; }

.mobile-menu__close{
  width:36px; height:36px;
  border-radius:10px;
  background:var(--cream);
  color:var(--text-strong);
  font-size:1.5rem; line-height:1;
  display:grid; place-items:center;
  transition:all .2s ease;
  font-family:Arial, sans-serif;
}
.mobile-menu__close:hover{
  background:rgba(239,77,48,.1);
  color:var(--coral);
}

.mobile-menu__nav{
  flex:1;
  padding:14px 14px 0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mobile-menu__nav a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border-radius:14px;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:700;
  color:var(--text-strong);
  transition:all .2s ease;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus{
  background:rgba(0,166,149,.07);
  color:var(--primary);
  transform:translateX(-3px);
}
.mobile-menu__icon{
  width:36px; height:36px;
  border-radius:10px;
  background:rgba(0,166,149,.1);
  color:var(--primary);
  display:grid; place-items:center;
  font-size:1.1rem;
  flex-shrink:0;
  transition:all .2s ease;
}
.mobile-menu__nav a:hover .mobile-menu__icon{
  background:var(--primary);
  color:#fff;
}

.mobile-menu__footer{
  padding:22px;
  border-top:1px solid var(--border);
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--cream);
  flex-shrink:0;
}
.mobile-menu__phone{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  background:#fff;
  border-radius:12px;
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:700;
  color:var(--text-strong);
  border:1px solid var(--border);
  transition:all .2s ease;
}
.mobile-menu__phone:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.mobile-menu__cta{ width:100%; padding:16px; font-size:1rem; }

.mobile-menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,24,21,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:2000;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  display:block;
}
.mobile-menu-overlay.is-open{ opacity:1; visibility:visible; }


/* ═════════════════════════════════════════════════════════════════════
   ۲۴. اسکرول افقی موبایل — ۴ سکشن
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  .features-grid,
  .services-grid,
  .trusted-grid,
  .plans-grid{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:14px !important;

    overflow-x:auto !important;
    overflow-y:visible !important;

    scroll-snap-type:x mandatory;
    scroll-padding-inline-start:22px;
    scroll-padding-inline-end:22px;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
    -ms-overflow-style:none;

    padding:6px 22px 24px !important;
    margin-inline:-22px !important;

    width:calc(100% + 44px) !important;
    max-width:none !important;
  }

  .features-grid::-webkit-scrollbar,
  .services-grid::-webkit-scrollbar,
  .trusted-grid::-webkit-scrollbar,
  .plans-grid::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  .feature-tile,
  .service-card,
  .trusted-item,
  .plan-card{
    flex:0 0 auto !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .feature-tile{
    width:220px !important;
    max-width:220px !important;
    padding:24px 20px !important;
  }
  .service-card{
    width:300px !important;
    max-width:300px !important;
    padding:32px 26px !important;
  }
  .trusted-item{
    width:140px !important;
    max-width:140px !important;
    min-height:80px !important;
    padding:18px 14px !important;
  }
  .plan-card{
    width:300px !important;
    max-width:300px !important;
    padding:32px 26px !important;
  }
  .plan-card.featured{ transform:none !important; }

  .features-grid,
  .trusted-grid{ align-items:stretch !important; }
  .plans-grid{
    padding-top:30px !important;
    align-items:stretch !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   ۲۵. اینماد (ENAMAD)
   ═════════════════════════════════════════════════════════════════════ */
.footer-enamad{
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer-enamad a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  transition:all .3s ease;
}
.footer-enamad a:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--primary);
  transform:translateY(-3px);
  box-shadow:0 10px 24px -8px rgba(0,166,149,.5);
}
.footer-enamad img{
  display:block;
  width:90px;
  height:auto;
  filter:brightness(1.08);
}

/* ─── نسخه دسکتاپ — زیر ساعات کاری ─── */
.footer-enamad--desktop{
  margin-top:22px;
  padding-top:22px;
  border-top:1px dashed rgba(255,255,255,.1);
  justify-content:flex-start;
}

/* ─── نسخه موبایل — پیش‌فرض مخفی ─── */
.footer-enamad--mobile{ display:none; }


/* ═════════════════════════════════════════════════════════════════════
   ۲۶. ریسپانسیو عمومی
   ─────────────────────────────────────────────────────────────────────
   نکته: قوانین موبایل هدر و اینماد بالا اومدن (بخش‌های ۲۳ و ۲۵)
   اینجا فقط قوانین کلی صفحه رو داریم.
   ═════════════════════════════════════════════════════════════════════ */

/* ─── تبلت (≤1024px) ─── */
@media (max-width:1024px){
  .hero-title{ font-size:2.25rem; }
  .section-title{ font-size:1.85rem; }
  .features-grid{ grid-template-columns:repeat(3,1fr); }
  .plans-grid{ grid-template-columns:repeat(2,1fr); }
  .plan-card.featured{ transform:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-network{ max-width:520px; }
  .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
  .portfolio-grid--compact{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; gap:24px; }
  .contact-info{ position:static; }

  /* نمایش منوی همبرگری در تبلت */
  .mobile-menu-toggle{ display:flex; }
  .nav-bar{ gap:14px; }
}

/* ─── موبایل (≤768px) ─── */
@media (max-width:768px){
  /* هدر موبایل */
  .nav-menu,
  .nav-contact{ display:none !important; }

  .nav-bar{
    min-height:60px;
    gap:12px;
    align-items:center;
  }

  .nav-logo{
    font-size:1.1rem;
    gap:8px;
    flex-shrink:0;
  }
  .nav-logo-mark{
    width:34px;
    height:34px;
    font-size:1rem;
    border-radius:10px;
  }

  .nav-actions{
    margin-inline-start:auto;
    margin-inline-end:0;
    gap:8px;
    flex-shrink:0;
    display:flex;
    align-items:center;
  }

  .btn-nav{
    padding:9px 16px !important;
    height:38px !important;
    font-size:.82rem !important;
    min-width:auto;
  }

  .mobile-menu-toggle{
    display:flex !important;
    width:40px;
    height:40px;
    padding:11px 10px;
    flex-direction:column;
    justify-content:space-between;
    align-items:stretch;
  }
  .mobile-menu-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mobile-menu-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* هیرو */
  .hero{ padding:40px 0 100px; }
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-title{ font-size:1.85rem; }
  .hero-subtitle{ font-size:.95rem; }
  .hero-network{
    max-width:100%;
    width:100%;
    margin-top:20px;
    padding:0 4px;
  }
  .hero-network__image{
    border-radius:16px;
    filter:drop-shadow(0 10px 20px rgba(0,166,149,.1));
  }

  /* نسخه‌های CSS-based قدیمی */
  .hero-node{ width:60px; height:60px; border-radius:16px; }
  .hero-node svg{ width:20px; height:20px; }
  .hero-node__label{ font-size:.5rem; }
  .hero-network__core{ width:120px; height:120px; border-radius:24px; }
  .hero-network__core-logo{ font-size:1.5rem; }
  .hero-network__core-name{ font-size:.75rem; }
  .hero-network__core-caption{ font-size:.55rem; }

  /* سکشن‌ها */
  .section{ padding:64px 0; }
  .section-title{ font-size:1.6rem; }
  .section-head{ margin-bottom:40px; }

  /* Marquee */
  .marquee-card{ width:260px; padding:22px 18px; }

  /* موج‌ها */
  .wave--desktop{ display:none; }
  .wave--mobile{ display:block; }

  /* Final CTA */
  .final-cta h2{ font-size:1.85rem; }

  /* فوتر */
  .footer-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:32px 20px !important;
  }
  .footer-brand-block   { order:1; grid-column:1 / -1; }
  .footer-col--services { order:2; grid-column:1; }
  .footer-enamad--mobile{ order:3; grid-column:2; align-self:start; justify-content:flex-start; margin-top:38px; }
  .footer-col--links    { order:4; grid-column:1 / -1; }
  .footer-col--contact  { order:5; grid-column:1 / -1; }

  .footer-enamad--desktop{ display:none !important; }
  .footer-enamad--mobile{ display:flex !important; }
  .footer-enamad--mobile a{ padding:8px 10px; }
  .footer-enamad--mobile img{ width:80px; }

  .footer-bottom{ flex-direction:column; text-align:center; }

  /* صفحات فرعی */
  .page-hero{ padding:48px 0 110px; }
  .page-hero__title{ font-size:1.75rem; }
  .page-hero--portfolio .page-hero__title{ font-size:1.5rem; }
  .page-hero__subtitle{ font-size:.95rem; }

  .rich-content{ padding:32px 22px; border-radius:20px; }
  .rich-content h1{ font-size:1.5rem; }
  .rich-content h2{ font-size:1.25rem; }

  /* صفحه تماس */
  .contact-info,
  .contact-form-wrap{ padding:28px 22px; border-radius:20px; }
  .form-row{ grid-template-columns:1fr; }

  /* نمونه کارها */
  .portfolio-grid{ grid-template-columns:1fr; gap:18px; }
  .portfolio-grid--compact{ grid-template-columns:1fr; }
  .portfolio-detail{ padding:24px 18px; border-radius:20px; }
  .portfolio-detail__info{ flex-direction:column; gap:12px; }
  .portfolio-links{ width:100%; margin-right:0; }
  .portfolio-gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .portfolio-filter{ padding:8px 16px; font-size:.8rem; }
}

/* ─── موبایل کوچک (≤480px) ─── */
@media (max-width:480px){
  /* هدر فشرده‌تر */
  .btn-nav{
    padding:8px 14px !important;
    height:36px !important;
    font-size:.78rem !important;
  }
  .mobile-menu-toggle{
    width:36px;
    height:36px;
    padding:9px 8px;
  }
  .nav-logo-mark{
    width:30px;
    height:30px;
    font-size:.9rem;
  }

  /* هیرو */
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .btn{ width:100%; }

  /* Trusted */
  .trusted-grid{ grid-template-columns:repeat(2,1fr); }

  /* Portfolio */
  .portfolio-gallery__grid{ grid-template-columns:1fr; }
  .contact-form__submit{ width:100%; }
}

/* ─── دسکتاپ بزرگ (≥1025px) ─── */
@media (min-width:1025px){
  .mobile-menu-toggle,
  .mobile-menu,
  .mobile-menu-overlay{
    display:none !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   ۲۷. Accessibility — کاهش انیمیشن
   ═════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .marquee,
  .hero-node,
  .hero-network__lines path,
  .hero-network__core,
  .hero-node::after,
  .hero-network__image,
  .mobile-menu,
  .mobile-menu-overlay,
  .mobile-menu-toggle span,
  .mobile-menu__nav a,
  .wave--float svg{
    animation:none !important;
    transition:none !important;
  }
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}