/* ==========================================================================
   دفتر وکالت دادآور — شیوه‌نامهٔ بصری
   مفهوم: «سند و مُهر» — کاغذ رسمی، مرکّب سرمه‌ای، مُهر لاکی
   ========================================================================== */

/* --- فونت‌ها ---------------------------------------------------------------
   برای هاست ایرانی توصیه می‌شود فونت‌ها را دانلود و داخل assets/fonts قرار
   دهید و آدرس‌های زیر را با مسیر محلی جایگزین کنید.
--------------------------------------------------------------------------- */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/morabba-font@v1.0.0/dist/font-face.css');

:root{
  /* رنگ‌ها */
  --ink:        #0E1524;   /* مرکّب اسناد */
  --ink-2:      #17203A;
  --ink-soft:   #2B3550;
  --paper:      #F2EEE5;   /* کاغذ رسمی */
  --paper-2:    #E9E3D6;
  --seal:       #8E2B3C;   /* لاکِ مُهر */
  --seal-soft:  #B4576A;
  --brass:      #B08D3F;   /* برنجِ خطوط */
  --muted:      #5B6478;

  /* تایپوگرافی */
  --display: 'Morabba', 'Vazirmatn', system-ui, sans-serif;
  --body:    'Vazirmatn', system-ui, sans-serif;

  --fs-hero: clamp(2.4rem, 6vw, 4.6rem);
  --fs-h2:   clamp(1.7rem, 3.4vw, 2.7rem);
  --fs-h3:   clamp(1.15rem, 2vw, 1.4rem);

  /* فضا */
  --container: 1200px;
  --gap: 28px;
  --radius: 4px;          /* اسناد رسمی گوشهٔ تیز دارند */
  --shadow: 0 18px 50px -28px rgba(14,21,36,.45);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:2;
  direction:rtl; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
ul{ margin:0; padding:0; list-style:none }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.45; margin:0 }
p{ margin:0 0 1em }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px }

.container{ width:min(var(--container), 92%); margin-inline:auto }
.num{ font-variant-numeric:tabular-nums }

/* --- بافت گیوشه (پس‌زمینهٔ اوراق رسمی) ------------------------------------ */
.guilloche{ position:relative; overflow:hidden }
.guilloche::before{
  content:''; position:absolute; inset:-20%;
  background:
    repeating-linear-gradient(38deg, rgba(176,141,63,.10) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-38deg, rgba(176,141,63,.08) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 26px);
  pointer-events:none;
}

/* ==========================================================================
   سربرگ
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:18px 0; transition:background .35s, padding .35s, box-shadow .35s;
}
.site-header.is-stuck{
  background:rgba(14,21,36,.94); backdrop-filter:blur(10px);
  padding:10px 0; box-shadow:0 1px 0 rgba(176,141,63,.35);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px }

.brand{ display:flex; align-items:center; gap:12px; color:var(--paper) }
.brand__mark{ width:40px; height:40px; flex:0 0 auto }
.brand__name{ font-family:var(--display); font-size:1.32rem; line-height:1.2 }
.brand__sub{ display:block; font-family:var(--body); font-size:.72rem; letter-spacing:.14em; color:var(--brass) }

.nav{ display:flex; align-items:center; gap:26px }
.nav a{ color:rgba(242,238,229,.82); font-size:.95rem; position:relative; padding:4px 0 }
.nav a::after{
  content:''; position:absolute; inset:auto 0 0 0; height:1px; background:var(--brass);
  transform:scaleX(0); transform-origin:right; transition:transform .3s;
}
.nav a:hover{ color:var(--paper) }
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1) }

.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--body); font-size:.95rem; font-weight:500;
  padding:12px 26px; border:1px solid transparent; border-radius:var(--radius);
  transition:transform .2s, background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px) }
.btn--seal{ background:var(--seal); color:#fff }
.btn--seal:hover{ background:#7A2333 }
.btn--ghost{ border-color:rgba(176,141,63,.6); color:var(--brass); background:transparent }
.btn--ghost:hover{ background:var(--brass); color:var(--ink) }
.btn--ink{ background:var(--ink); color:var(--paper) }
.btn--ink:hover{ background:var(--ink-2) }

.nav-toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--paper); margin:5px 0; transition:.3s }

/* ==========================================================================
   قهرمان صفحه
   ========================================================================== */
.hero{
  position:relative; background:var(--ink); color:var(--paper);
  padding:200px 0 120px; overflow:hidden;
}
.hero::after{ /* محو شدن مرکّب به کاغذ */
  content:''; position:absolute; inset:auto 0 0 0; height:140px;
  background:linear-gradient(to bottom, transparent, var(--paper));
}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.25fr .75fr; gap:60px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:.2em; color:var(--brass); margin-bottom:22px;
}
.eyebrow::before{ content:''; width:44px; height:1px; background:var(--brass) }

.hero h1{ font-size:var(--fs-hero); letter-spacing:-.01em; margin-bottom:24px }
.hero h1 em{ font-style:normal; color:var(--brass); position:relative }
.hero h1 em::after{
  content:''; position:absolute; inset:auto 0 6px 0; height:8px;
  background:rgba(142,43,60,.55); z-index:-1;
}
.hero__lead{ max-width:52ch; color:rgba(242,238,229,.75); font-size:1.06rem }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }

/* ردیف اعتبار — مثل ذیل یک سند رسمی */
.credential-row{
  position:relative; z-index:2; margin-top:80px; padding-top:26px;
  border-top:1px solid rgba(176,141,63,.28);
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.credential{ display:flex; flex-direction:column; gap:2px }
.credential b{ font-family:var(--display); font-size:2rem; color:var(--paper); line-height:1 }
.credential span{ font-size:.85rem; color:rgba(242,238,229,.6) }

/* --- عنصر امضایی: مُهر --------------------------------------------------- */
.seal{ width:min(330px,88%); margin-inline:auto; position:relative }
.seal svg{ width:100%; height:auto; overflow:visible }
.seal__ring{ animation:seal-spin 44s linear infinite }
@keyframes seal-spin{ to{ transform:rotate(-360deg) } }
.seal__stamp{
  transform-origin:center; opacity:0;
  animation:seal-press .9s cubic-bezier(.2,.9,.25,1) .35s forwards;
}
@keyframes seal-press{
  0%{ opacity:0; transform:scale(1.7) rotate(-14deg) }
  60%{ opacity:.95; transform:scale(.97) rotate(2deg) }
  100%{ opacity:1; transform:scale(1) rotate(0) }
}

/* ==========================================================================
   بخش‌های عمومی
   ========================================================================== */
.section{ padding:110px 0 }
.section--paper2{ background:var(--paper-2) }
.section--ink{ background:var(--ink); color:var(--paper) }

.section-head{ max-width:62ch; margin-bottom:56px }
.section-head h2{ font-size:var(--fs-h2); margin-bottom:14px }
.section-head p{ color:var(--muted); margin:0 }
.section--ink .section-head p{ color:rgba(242,238,229,.65) }

.head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap }

/* --- حوزه‌های تخصص: فهرست مواد قانونی ------------------------------------ */
.practice{ border-top:1px solid rgba(14,21,36,.16) }
.practice__item{
  display:grid; grid-template-columns:88px 1fr 1.3fr; gap:24px; align-items:start;
  padding:30px 0; border-bottom:1px solid rgba(14,21,36,.16);
  transition:background .3s, padding-inline-start .3s;
}
.practice__item:hover{ background:rgba(255,255,255,.55); padding-inline-start:14px }
.practice__no{
  font-family:var(--display); font-size:.85rem; letter-spacing:.1em;
  color:var(--seal); padding-top:8px;
}
.practice__item h3{ font-size:var(--fs-h3) }
.practice__item p{ color:var(--muted); margin:0; font-size:.95rem }

/* --- کارت وکیل ----------------------------------------------------------- */
.grid{ display:grid; gap:var(--gap) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--2{ grid-template-columns:repeat(2,1fr) }

.lawyer{
  background:var(--paper); border:1px solid rgba(14,21,36,.12);
  border-radius:var(--radius); overflow:hidden; position:relative;
  transition:transform .35s, box-shadow .35s, border-color .35s;
}
.lawyer:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(176,141,63,.55) }
.lawyer__photo{ position:relative; aspect-ratio:4/5; background:var(--ink-2); overflow:hidden }
.lawyer__photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35); transition:.5s }
.lawyer:hover .lawyer__photo img{ filter:grayscale(0); transform:scale(1.04) }
.lawyer__badge{
  position:absolute; inset:auto auto 12px 12px;
  background:rgba(14,21,36,.86); color:var(--brass);
  font-size:.72rem; letter-spacing:.08em; padding:6px 12px; border-radius:2px;
}
.lawyer__body{ padding:22px 22px 26px }
.lawyer__body h3{ font-size:1.22rem; margin-bottom:4px }
.lawyer__role{ color:var(--seal); font-size:.85rem; margin-bottom:12px }
.lawyer__body p{ color:var(--muted); font-size:.92rem; margin:0 }
.lawyer__meta{
  display:flex; gap:16px; margin-top:16px; padding-top:14px;
  border-top:1px dashed rgba(14,21,36,.2); font-size:.82rem; color:var(--muted);
}

/* --- مقاله --------------------------------------------------------------- */
.article-card{
  display:flex; flex-direction:column; height:100%;
  background:var(--paper); border:1px solid rgba(14,21,36,.12); border-radius:var(--radius);
  overflow:hidden; transition:transform .35s, box-shadow .35s;
}
.article-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.article-card__img{ aspect-ratio:16/10; background:var(--paper-2); overflow:hidden }
.article-card__img img{ width:100%; height:100%; object-fit:cover; transition:.5s }
.article-card:hover .article-card__img img{ transform:scale(1.05) }
.article-card__body{ padding:22px; display:flex; flex-direction:column; flex:1 }
.tag{
  display:inline-block; font-size:.74rem; letter-spacing:.08em; color:var(--seal);
  border:1px solid rgba(142,43,60,.35); padding:3px 10px; border-radius:2px; margin-bottom:14px;
}
.article-card h3{ font-size:1.1rem; margin-bottom:10px }
.article-card p{ color:var(--muted); font-size:.92rem }
.article-card__foot{
  margin-top:auto; padding-top:16px; display:flex; justify-content:space-between;
  align-items:center; font-size:.82rem; color:var(--muted);
}
.read-more{ color:var(--seal); display:inline-flex; align-items:center; gap:6px }
.read-more::after{ content:'←'; transition:transform .3s }
.article-card:hover .read-more::after{ transform:translateX(-5px) }

/* --- ویدیو --------------------------------------------------------------- */
.video-card{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  background:var(--ink-2); aspect-ratio:16/9;
}
.video-card img{ width:100%; height:100%; object-fit:cover; opacity:.62; transition:.5s }
.video-card:hover img{ opacity:.4; transform:scale(1.04) }
.video-card__info{
  position:absolute; inset:auto 0 0 0; padding:24px;
  background:linear-gradient(to top, rgba(14,21,36,.95), transparent);
  color:var(--paper);
}
.video-card__info h3{ font-size:1.05rem; margin-bottom:4px }
.video-card__info span{ font-size:.8rem; color:rgba(242,238,229,.6) }
.play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(176,141,63,.7); background:rgba(14,21,36,.5);
  color:var(--brass); transition:.3s;
}
.video-card:hover .play{ background:var(--seal); border-color:var(--seal); color:#fff; transform:scale(1.08) }

/* پخش‌کننده */
.modal{
  position:fixed; inset:0; z-index:100; display:none; place-items:center;
  background:rgba(6,9,16,.9); padding:20px;
}
.modal.is-open{ display:grid }
.modal__box{ width:min(960px,100%); position:relative }
.modal__box iframe, .modal__box video{ width:100%; aspect-ratio:16/9; border:0; background:#000 }
.modal__close{
  position:absolute; inset:-46px 0 auto auto; background:none; border:0;
  color:var(--paper); font-size:1.6rem; cursor:pointer;
}

/* --- دربارهٔ دفتر --------------------------------------------------------- */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center }
.about__figure{ position:relative }
.about__figure img{ border-radius:var(--radius); filter:grayscale(.2) }
.about__figure::before{
  content:''; position:absolute; inset:22px -22px -22px 22px;
  border:1px solid var(--brass); border-radius:var(--radius); z-index:-1;
}
.ledger{ margin-top:34px; border-top:1px solid rgba(14,21,36,.18) }
.ledger li{
  display:flex; justify-content:space-between; gap:16px; padding:14px 0;
  border-bottom:1px solid rgba(14,21,36,.12); font-size:.95rem;
}
.ledger b{ font-family:var(--display); color:var(--seal) }

/* --- روند همکاری (توالی واقعی، پس شماره‌گذاری معنا دارد) ------------------ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.step{ padding:0 26px; border-inline-start:1px solid rgba(176,141,63,.3) }
.step:first-child{ border:0; padding-inline-start:0 }
.step b{
  display:block; font-family:var(--display); font-size:2.4rem;
  color:rgba(176,141,63,.55); line-height:1; margin-bottom:14px;
}
.step h3{ font-size:1.05rem; margin-bottom:8px }
.step p{ font-size:.9rem; color:rgba(242,238,229,.62); margin:0 }

/* --- تماس ---------------------------------------------------------------- */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start }
.info-list li{ display:flex; gap:14px; padding:16px 0; border-bottom:1px dashed rgba(14,21,36,.18) }
.info-list svg{ flex:0 0 auto; color:var(--seal); margin-top:5px }
.info-list b{ display:block; font-family:var(--body); font-weight:600; font-size:.95rem }
.info-list span{ font-size:.9rem; color:var(--muted) }

.form{ background:var(--paper); border:1px solid rgba(14,21,36,.14); border-radius:var(--radius); padding:34px }
.field{ margin-bottom:18px }
.field label{ display:block; font-size:.88rem; margin-bottom:8px; color:var(--muted) }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; font-family:var(--body); font-size:.95rem;
  background:#fff; color:var(--ink);
  border:1px solid rgba(14,21,36,.2); border-radius:var(--radius); transition:.25s;
}
.field textarea{ min-height:130px; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--brass); box-shadow:0 0 0 3px rgba(176,141,63,.18); outline:0;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }

.alert{ padding:14px 18px; border-radius:var(--radius); margin-bottom:22px; font-size:.92rem }
.alert--ok{ background:rgba(46,125,80,.12); border:1px solid rgba(46,125,80,.4); color:#1E5B2A }
.alert--err{ background:rgba(142,43,60,.1); border:1px solid rgba(142,43,60,.4); color:var(--seal) }

/* ==========================================================================
   صفحات داخلی
   ========================================================================== */
.page-head{ background:var(--ink); color:var(--paper); padding:170px 0 70px; position:relative }
.page-head h1{ font-size:clamp(2rem,4vw,3.1rem); margin-bottom:12px }
.breadcrumb{ font-size:.85rem; color:rgba(242,238,229,.55) }
.breadcrumb a:hover{ color:var(--brass) }

.prose{ max-width:74ch; font-size:1.02rem }
.prose h2{ font-size:1.6rem; margin:2em 0 .6em }
.prose h3{ font-size:1.25rem; margin:1.6em 0 .5em }
.prose ul{ list-style:disc; padding-inline-start:1.4em; margin:0 0 1.2em }
.prose li{ margin-bottom:.4em }
.prose blockquote{
  margin:1.8em 0; padding:18px 24px; border-inline-start:3px solid var(--seal);
  background:var(--paper-2); color:var(--ink-soft);
}
.prose img{ border-radius:var(--radius); margin:1.6em 0 }

.sidebar{ position:sticky; top:110px }
.widget{ background:var(--paper-2); border:1px solid rgba(14,21,36,.1); padding:24px; margin-bottom:24px; border-radius:var(--radius) }
.widget h3{ font-size:1.05rem; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(176,141,63,.4) }
.widget li{ padding:9px 0; font-size:.92rem; border-bottom:1px dashed rgba(14,21,36,.12) }
.widget li:last-child{ border:0 }
.widget a:hover{ color:var(--seal) }

.pagination{ display:flex; gap:8px; justify-content:center; margin-top:56px }
.pagination a, .pagination span{
  min-width:42px; height:42px; display:grid; place-items:center;
  border:1px solid rgba(14,21,36,.18); border-radius:var(--radius); font-size:.92rem;
}
.pagination .is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.pagination a:hover{ border-color:var(--brass) }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px }
.filters a{
  padding:8px 18px; border:1px solid rgba(14,21,36,.18); border-radius:100px; font-size:.88rem;
}
.filters a.is-active, .filters a:hover{ background:var(--seal); color:#fff; border-color:var(--seal) }

/* ==========================================================================
   پابرگ
   ========================================================================== */
.site-footer{ background:var(--ink); color:rgba(242,238,229,.7); padding:80px 0 0 }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px }
.site-footer h4{ color:var(--paper); font-size:1rem; margin-bottom:18px }
.site-footer li{ padding:6px 0; font-size:.9rem }
.site-footer a:hover{ color:var(--brass) }
.footer-bar{
  border-top:1px solid rgba(176,141,63,.25); padding:22px 0;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.84rem;
}
.socials{ display:flex; gap:12px }
.socials a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(176,141,63,.35); border-radius:50%; transition:.3s;
}
.socials a:hover{ background:var(--brass); color:var(--ink) }

/* ==========================================================================
   انیمیشن ورود
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1) }
.reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  .reveal{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}

/* ==========================================================================
   واکنش‌گرایی
   ========================================================================== */
@media (max-width: 1024px){
  .hero__grid{ grid-template-columns:1fr; gap:44px }
  .seal{ width:250px }
  .about, .contact{ grid-template-columns:1fr; gap:44px }
  .grid--3{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr); gap:34px 0 }
  .footer-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width: 760px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(300px,80%);
    background:var(--ink-2); flex-direction:column; align-items:flex-start;
    padding:100px 30px; gap:18px; transform:translateX(100%); transition:transform .35s; z-index:55;
  }
  .nav.is-open{ transform:none }
  .nav-toggle{ display:block; z-index:60 }
  .section{ padding:74px 0 }
  .hero{ padding:150px 0 90px }
  .credential-row{ grid-template-columns:1fr 1fr; gap:26px }
  .practice__item{ grid-template-columns:60px 1fr; gap:14px }
  .practice__item p{ grid-column:2 }
  .grid--3, .grid--2, .steps, .form-row{ grid-template-columns:1fr }
  .step{ border:0; padding:0 0 0 0; border-top:1px solid rgba(176,141,63,.3); padding-top:22px }
  .footer-grid{ grid-template-columns:1fr }
  .form{ padding:24px }
}