/* ==========================================================================
   وکیل آنلاین — تم وکالت (vakil.css)
   بعد از style.css / article.css / services.css بارگذاری می‌شود و پالت را
   با بازتعریف متغیرها عوض می‌کند؛ کامپوننت‌های جدید با پیشوند vk- هستند.
   پالت: سرمه‌ای (اعتماد) + طلایی (اعتبار) + کرم گرم (آرامش)
   ========================================================================== */

:root {
  --vk-navy: #14222e;
  --vk-navy-2: #1c3142;
  --vk-navy-3: #284759;
  --vk-gold: #129fd8;
  --vk-gold-l: #5ec8f2;
  --vk-gold-d: #0a74a6;   /* روی زمینه‌ی روشن: کنتراست ≥ 5:1 */
  --vk-cream: #f5fafd;
  --vk-cream-2: #e9f4fa;
  --vk-line: #d3e5ef;

  /* بازتعریف متغیرهای قدیمی تا همه‌ی صفحات قبلی (وبلاگ، مقاله، خدمات) هم‌رنگ شوند */
  --bg: #f5fafd;
  --bg2: #e9f4fa;
  --surface: #ffffff;
  --border: #d3e5ef;
  --border2: #d3c9b1;
  --accent: #1c3142;
  --accent2: #284759;
  --accent3: #129fd8;
  --gold: #129fd8;
  --grad: linear-gradient(135deg, #14222e 0%, #284759 100%);
  --grad2: linear-gradient(135deg, #e9f4fa 0%, #f5fafd 100%);
  --text: #18223a;
  --text2: #454f66;
  --text3: #646e82;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 24px rgba(20, 34, 46, .07);
  --shadow-md: 0 10px 36px rgba(20, 34, 46, .12);
  --shadow-lg: 0 24px 60px rgba(20, 34, 46, .18);
  --nav-h: 76px;
}

html { scroll-padding-top: calc(var(--nav-h) + 16px); }
body { background: var(--vk-cream); color: var(--text); font-size: 16px; }
::selection { background: var(--vk-gold-l); color: var(--vk-navy); }
::-webkit-scrollbar-thumb { background: var(--vk-gold); }
:focus-visible { outline: 3px solid var(--vk-gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { color: var(--vk-navy); }
.vk-i { width: 1.2em; height: 1.2em; flex-shrink: 0; vertical-align: -.2em; }

/* ───────────────────────── Buttons ───────────────────────── */
.btn { font-weight: 700; border-radius: 10px; padding: 10px 24px; letter-spacing: 0; }
.btn-lg { padding: 14px 32px; font-size: 1rem; border-radius: 12px; }
.btn-primary {
  background: linear-gradient(135deg, #0f8fc4 0%, #8fdcf8 100%);
  color: var(--vk-navy);
  box-shadow: 0 8px 22px rgba(18, 159, 216, .32);
  border: 0;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18, 159, 216, .42); }
.btn-navy { background: var(--vk-navy); color: #fff; border: 0; }
.btn-navy:hover { background: var(--vk-navy-3); transform: translateY(-2px); }
.btn-outline { background: transparent; border: 1.5px solid var(--border2); color: var(--vk-navy); }
.btn-outline:hover { border-color: var(--vk-gold); color: var(--vk-gold-d); background: #fff; }
.btn-light { background: transparent; border: 1.5px solid rgba(255, 255, 255, .38); color: #fff; }
.btn-light:hover { background: rgba(255, 255, 255, .1); border-color: var(--vk-gold-l); color: #fff; }
.btn .vk-i { width: 1.15em; height: 1.15em; }

/* ───────────────────────── NAV ───────────────────────── */
#nav {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--vk-line);
  box-shadow: 0 2px 18px rgba(20, 34, 46, .05);
  transition: box-shadow .25s, background .25s;
}
#nav::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--vk-gold) 50%, transparent); opacity: .55; pointer-events: none;
}
#nav.is-scrolled { background: #fff; box-shadow: 0 6px 28px rgba(20, 34, 46, .1); }
.nav-inner { gap: 18px; }
.nav-logo { gap: 11px; }
.vk-wordmark { display: flex; flex-direction: column; line-height: 1.15; }
.vk-wordmark strong { font-size: 1.28rem; font-weight: 800; color: var(--vk-navy); letter-spacing: -.2px; }
.vk-wordmark small { font-size: .68rem; color: var(--vk-gold-d); font-weight: 600; margin-top: 3px; }
.nav-menu { gap: 2px; }
.nav-link { color: var(--vk-navy); font-weight: 600; font-size: .9rem; position: relative; }
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--vk-gold-d); background: var(--vk-cream); }
.mega-drop { border-radius: 18px; border-color: var(--vk-line); padding: 14px; }
.mega-link:hover { background: var(--vk-cream); }
.mega-icon { background: var(--vk-navy); color: var(--vk-gold-l); border-radius: 10px; }
.mega-icon .vk-i { width: 18px; height: 18px; }
.mega-link strong { color: var(--vk-navy); }
.mega-link small { color: var(--text3); white-space: normal; }
.mega-foot { grid-column: 1 / -1; margin-top: 6px; padding: 10px 12px 2px; border-top: 1px dashed var(--vk-line); }
.mega-foot a { color: var(--vk-gold-d); font-weight: 700; font-size: .85rem; display: inline-flex; gap: 6px; align-items: center; }
.nav-search input { background: var(--vk-cream); border-color: var(--vk-line); }
.nav-search input:focus { border-color: var(--vk-gold); box-shadow: 0 0 0 3px rgba(18, 159, 216, .16); }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.vk-nav-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--vk-navy); font-weight: 800; font-size: .95rem; direction: ltr; }
.vk-nav-phone .vk-i { color: var(--vk-gold-d); }
.hamburger span { background: var(--vk-navy); }
.mobile-nav { padding-top: calc(var(--nav-h) + 12px); }
.mob-section { color: var(--vk-gold-d); }
.mob-link:hover { background: var(--vk-cream); color: var(--vk-navy); }
@media (max-width: 1280px) { .nav-search { display: none; } }
@media (max-width: 1140px) { .vk-nav-phone { display: none; } }
@media (max-width: 1024px) { .nav-actions .btn { display: none; } .hamburger { margin-inline-start: auto; } }

/* ───────────────────────── Layout helpers ───────────────────────── */
.vk-wrap { max-width: 1240px; margin: 0 auto; }
.vk-sec { padding: 88px 5vw; }
.vk-sec--tight { padding: 64px 5vw; }
.vk-sec--cream { background: var(--vk-cream-2); }
.vk-sec--white { background: #fff; }
.vk-sec--navy { background: linear-gradient(165deg, #0f1b25 0%, #1c3142 100%); color: #dbe2f0; position: relative; overflow: hidden; }
.vk-head { text-align: center; max-width: 700px; margin: 0 auto 46px; }
.vk-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--vk-gold-d); font-weight: 700; font-size: .86rem; margin-bottom: 12px; }
.vk-eyebrow::before, .vk-eyebrow::after { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: .5; }
.vk-head h2 { font-size: clamp(1.45rem, 2.6vw, 2.05rem); font-weight: 800; line-height: 1.5; }
.vk-head p { color: var(--text2); margin-top: 12px; line-height: 2; }
.vk-sec--navy .vk-head h2 { color: #fff; }
.vk-sec--navy .vk-head p { color: #b9c4db; }
.vk-sec--navy .vk-eyebrow { color: var(--vk-gold-l); }
.vk-more { display: inline-flex; align-items: center; gap: 8px; color: var(--vk-gold-d); font-weight: 700; font-size: .9rem; }
.vk-more .vk-i { transition: transform .2s; }
a:hover > .vk-more .vk-i, .vk-more:hover .vk-i { transform: translateX(-4px); }
.vk-center { text-align: center; margin-top: 34px; }

/* scroll reveal (فقط وقتی JS فعال است) */
.vk-js .vk-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.vk-js .vk-rv.in { opacity: 1; transform: none; }

/* ───────────────────────── HERO ───────────────────────── */
.vk-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(94, 200, 242, .2), transparent 62%),
    radial-gradient(700px 380px at -5% 105%, rgba(40, 71, 89, .9), transparent 65%),
    linear-gradient(160deg, #0c1720 0%, #13244a 62%, #233d50 100%);
  padding: calc(var(--nav-h) + 72px) 5vw 120px;
}
.vk-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 22px);
}
.vk-hero-inner { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.vk-badge { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(94, 200, 242, .45); background: rgba(94, 200, 242, .08); color: #ecd6a4; padding: 7px 16px; border-radius: 99px; font-size: .84rem; font-weight: 600; }
.vk-badge .vk-i { color: var(--vk-gold-l); }
.vk-h1 { font-size: clamp(1.95rem, 3.8vw, 3.05rem); font-weight: 800; line-height: 1.45; color: #fff; margin: 20px 0 16px; }
.vk-h1 em { font-style: normal; color: var(--vk-gold-l); }
.vk-lead { font-size: 1.05rem; color: #cbd4e6; line-height: 2.05; max-width: 580px; }
.vk-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 24px; }
.vk-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #cfd8ea; font-size: .9rem; }
.vk-ticks li { display: flex; align-items: center; gap: 8px; }
.vk-ticks .vk-i { color: var(--vk-gold-l); }

.vk-contact-card {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px; padding: 30px 28px; backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
}
.vk-contact-card h2 { color: #fff; font-size: 1.15rem; font-weight: 800; margin-bottom: 4px; }
.vk-contact-card > p { color: #b9c4db; font-size: .88rem; margin-bottom: 20px; }
.vk-ci { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); color: #fff; }
.vk-ci-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(94, 200, 242, .14); color: var(--vk-gold-l); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vk-ci small { display: block; color: #aebad2; font-size: .76rem; }
.vk-ci strong { font-size: 1.02rem; font-weight: 800; direction: ltr; unicode-bidi: plaintext; }
.vk-ci strong.rtl { direction: rtl; font-size: .92rem; }
.vk-contact-card .btn { width: 100%; justify-content: center; margin-top: 8px; }

/* نوار اعتماد روی لبه‌ی هیرو */
.vk-strip { position: relative; z-index: 2; margin: -58px 5vw 0; }
.vk-strip-inner { max-width: 1240px; margin: 0 auto; background: #fff; border: 1px solid var(--vk-line); border-radius: 20px; box-shadow: var(--shadow-md); display: grid; grid-template-columns: repeat(4, 1fr); }
.vk-strip-item { display: flex; align-items: center; gap: 14px; padding: 22px 24px; }
.vk-strip-item + .vk-strip-item { border-inline-start: 1px solid var(--vk-line); }
.vk-strip-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--vk-navy); color: var(--vk-gold-l); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vk-strip-item strong { display: block; color: var(--vk-navy); font-size: .96rem; }
.vk-strip-item span { color: var(--text3); font-size: .8rem; line-height: 1.6; }

/* ───────────────────────── Practice areas ───────────────────────── */
.vk-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vk-area { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--vk-line); border-radius: 18px; padding: 26px 22px 22px; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; }
.vk-area::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--vk-gold), var(--vk-gold-l)); transform: scaleX(0); transform-origin: right; transition: transform .35s; }
.vk-area:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--vk-gold-l); }
.vk-area:hover::before { transform: scaleX(1); }
.vk-area-ico { width: 54px; height: 54px; border-radius: 15px; background: var(--vk-navy); color: var(--vk-gold-l); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.vk-area-ico .vk-i { width: 26px; height: 26px; }
.vk-area h3 { font-size: 1.05rem; font-weight: 800; }
.vk-area p { color: var(--text2); font-size: .88rem; line-height: 1.95; flex: 1; }
.vk-area .vk-more { margin-top: 6px; font-size: .86rem; }

/* ───────────────────────── Split / about ───────────────────────── */
.vk-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.vk-split h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); font-weight: 800; line-height: 1.6; margin: 6px 0 14px; }
.vk-split p { color: var(--text2); line-height: 2.1; margin-bottom: 14px; }
.vk-list { list-style: none; display: grid; gap: 12px; margin: 20px 0 26px; }
.vk-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text); line-height: 1.9; }
.vk-list li .vk-ck { width: 24px; height: 24px; border-radius: 50%; background: rgba(18, 159, 216, .16); color: var(--vk-gold-d); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 3px; }
.vk-list li .vk-ck .vk-i { width: 14px; height: 14px; }
.vk-panel {
  position: relative; background: linear-gradient(160deg, #0f1b25, #233d50); color: #dbe2f0; border-radius: 26px; padding: 44px 36px; overflow: hidden; box-shadow: var(--shadow-lg);
}
.vk-panel::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(94, 200, 242, .22); inset-inline-end: -140px; top: -140px; box-shadow: 0 0 0 46px rgba(94, 200, 242, .05), 0 0 0 92px rgba(94, 200, 242, .03); }
.vk-panel > * { position: relative; }
.vk-panel .vk-big { width: 74px; height: 74px; border-radius: 20px; background: rgba(94, 200, 242, .14); color: var(--vk-gold-l); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.vk-panel .vk-big .vk-i { width: 38px; height: 38px; }
.vk-panel h3 { color: #fff; font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; }
.vk-panel p { color: #bcc7dd; line-height: 2; font-size: .94rem; }
.vk-panel .vk-qrow { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 14px; font-size: .9rem; color: #d3dbea; }
.vk-panel .vk-qrow .vk-i { color: var(--vk-gold-l); margin-top: 4px; }

/* ───────────────────────── Process ───────────────────────── */
.vk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: s; }
.vk-step { position: relative; background: #fff; border: 1px solid var(--vk-line); border-radius: 18px; padding: 30px 22px 24px; }
.vk-step-n { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #0f8fc4, #8fdcf8); color: var(--vk-navy); font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 6px 16px rgba(18, 159, 216, .3); }
.vk-step h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.vk-step p { color: var(--text2); font-size: .88rem; line-height: 1.95; }
.vk-step:not(:last-child)::after { content: ""; position: absolute; top: 52px; inset-inline-start: calc(-22px); width: 22px; border-top: 2px dashed var(--vk-gold-l); }

/* ───────────────────────── Why us (dark) ───────────────────────── */
.vk-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vk-why-item { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 28px 24px; transition: background .25s, border-color .25s; }
.vk-why-item:hover { background: rgba(255, 255, 255, .09); border-color: rgba(94, 200, 242, .45); }
.vk-why-ico { width: 50px; height: 50px; border-radius: 14px; background: rgba(94, 200, 242, .14); color: var(--vk-gold-l); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.vk-why-item h3 { color: #fff; font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; }
.vk-why-item p { color: #b9c4db; font-size: .9rem; line-height: 2; }

/* ───────────────────────── Team ───────────────────────── */
.vk-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vk-member { background: #fff; border: 1px solid var(--vk-line); border-radius: 20px; padding: 30px 24px; text-align: center; transition: transform .25s, box-shadow .25s; }
.vk-member:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vk-avatar { width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 16px; background: linear-gradient(160deg, #1c3142, #284759); color: var(--vk-gold-l); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 4px solid var(--vk-cream-2); box-shadow: 0 0 0 2px var(--vk-gold-l); }
.vk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vk-avatar .vk-i { width: 46px; height: 46px; }
.vk-member h3 { font-size: 1.08rem; font-weight: 800; }
.vk-member .role { color: var(--vk-gold-d); font-size: .86rem; font-weight: 700; margin: 4px 0 10px; }
.vk-chip { display: inline-block; background: var(--vk-cream-2); color: var(--vk-navy); border-radius: 99px; padding: 4px 14px; font-size: .78rem; font-weight: 700; margin-bottom: 12px; }
.vk-member p { color: var(--text2); font-size: .88rem; line-height: 1.95; }

/* ───────────────────────── FAQ ───────────────────────── */
.vk-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.vk-faq details { background: #fff; border: 1px solid var(--vk-line); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.vk-faq details[open] { border-color: var(--vk-gold-l); box-shadow: var(--shadow); }
.vk-faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 800; color: var(--vk-navy); display: flex; align-items: center; justify-content: space-between; gap: 16px; line-height: 1.8; }
.vk-faq summary::-webkit-details-marker { display: none; }
.vk-faq summary::after { content: "+"; width: 30px; height: 30px; border-radius: 50%; background: var(--vk-cream-2); color: var(--vk-gold-d); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 400; flex-shrink: 0; transition: transform .25s, background .25s; }
.vk-faq details[open] summary::after { content: "−"; background: var(--vk-gold); color: #fff; }
.vk-faq .ans { padding: 0 22px 20px; color: var(--text2); line-height: 2.1; font-size: .95rem; }

/* ───────────────────────── CTA band ───────────────────────── */
.vk-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, #0f1b25 0%, #284759 100%); color: #fff; border-radius: 26px; padding: 52px 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; box-shadow: var(--shadow-lg); }
.vk-cta::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; inset-inline-start: -110px; bottom: -170px; border: 1px solid rgba(94, 200, 242, .3); box-shadow: 0 0 0 40px rgba(94, 200, 242, .05); }
.vk-cta > * { position: relative; }
.vk-cta h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; line-height: 1.6; }
.vk-cta p { color: #c3cde2; margin-top: 8px; max-width: 560px; line-height: 2; }
.vk-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ───────────────────────── Inner page hero (قدیمی + جدید) ───────────────────────── */
.page-hero, .vk-phero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(700px 300px at 90% -20%, rgba(94, 200, 242, .2), transparent 60%), linear-gradient(160deg, #0c1720 0%, #1c3142 100%);
  padding: calc(var(--nav-h) + 48px) 5vw 56px; border-bottom: 0;
}
.page-hero::before, .vk-phero::before { content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none; background: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 22px); }
.page-hero-inner, .vk-phero-inner { position: relative; max-width: 1240px; margin: 0 auto; }
.page-title, .vk-phero h1 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.5; margin-top: 10px; }
.page-desc, .vk-phero p.vk-sub { color: #c3cde2; margin-top: 10px; line-height: 2; max-width: 720px; font-size: 1rem; }
.page-hero .breadcrumb, .vk-phero .breadcrumb { color: #aab7d0; font-size: .85rem; }
.page-hero .breadcrumb a, .vk-phero .breadcrumb a { color: var(--vk-gold-l); }
.page-hero .breadcrumb a:hover, .vk-phero .breadcrumb a:hover { color: #fff; }
.page-hero .breadcrumb span, .vk-phero .breadcrumb span { color: #aab7d0; }
.page-hero[style*="padding-bottom:0"] { padding-bottom: 22px !important; }

/* ───────────────────────── Practice detail ───────────────────────── */
.vk-prac { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; align-items: start; }
.vk-block { background: #fff; border: 1px solid var(--vk-line); border-radius: 20px; padding: 32px; margin-bottom: 24px; }
.vk-block h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.vk-block h2::before { content: ""; width: 6px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, var(--vk-gold), var(--vk-gold-l)); }
.vk-block p { color: var(--text2); line-height: 2.1; }
.vk-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.vk-side { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 20px; }
.vk-side-card { background: linear-gradient(160deg, #0f1b25, #233d50); color: #dbe2f0; border-radius: 22px; padding: 28px 24px; box-shadow: var(--shadow-md); }
.vk-side-card h3 { color: #fff; font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.vk-side-card p { color: #b9c4db; font-size: .88rem; line-height: 2; margin-bottom: 16px; }
.vk-side-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.vk-side-card .tel { display: block; direction: ltr; text-align: center; font-size: 1.3rem; font-weight: 800; color: var(--vk-gold-l); margin: 4px 0 6px; }
.vk-side-list { background: #fff; border: 1px solid var(--vk-line); border-radius: 22px; padding: 22px 22px 14px; }
.vk-side-list h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.vk-side-list a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--vk-line); color: var(--text); font-size: .9rem; font-weight: 600; transition: color .2s; }
.vk-side-list a:first-of-type { border-top: 0; }
.vk-side-list a:hover, .vk-side-list a.on { color: var(--vk-gold-d); }
.vk-side-list .vk-i { color: var(--vk-gold-d); }
.vk-note { background: var(--vk-cream-2); border-inline-start: 4px solid var(--vk-gold); border-radius: 12px; padding: 16px 18px; color: var(--text2); font-size: .88rem; line-height: 2; }

/* ───────────────────────── Forms ───────────────────────── */
.vk-form-card { background: #fff; border: 1px solid var(--vk-line); border-radius: 22px; padding: 34px 32px; box-shadow: var(--shadow); }
.vk-form-card h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 6px; }
.vk-form-card > p.sub { color: var(--text2); font-size: .9rem; margin-bottom: 22px; line-height: 2; }
.vk-form { display: grid; gap: 16px; }
.vk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vk-field label { display: block; font-size: .86rem; font-weight: 700; color: var(--vk-navy); margin-bottom: 7px; }
.vk-field input, .vk-field select, .vk-field textarea {
  width: 100%; font-family: var(--font); font-size: .95rem; color: var(--text);
  background: var(--vk-cream); border: 1.5px solid var(--vk-line); border-radius: 12px; padding: 13px 15px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.vk-field textarea { resize: vertical; min-height: 130px; line-height: 1.9; }
.vk-field input:focus, .vk-field select:focus, .vk-field textarea:focus { outline: none; border-color: var(--vk-gold); background: #fff; box-shadow: 0 0 0 4px rgba(18, 159, 216, .16); }
.vk-field input[dir="ltr"] { text-align: left; }
.vk-captcha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vk-captcha label { margin: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.vk-captcha input { max-width: 120px; }
.vk-form .btn { width: 100%; justify-content: center; }
.vk-legal { color: var(--text3); font-size: .78rem; line-height: 1.95; }
.vk-alert { border-radius: 12px; padding: 14px 18px; font-size: .92rem; margin-bottom: 18px; line-height: 1.9; border: 1px solid; }
.vk-alert.success { background: #f0fdf4; color: #14663a; border-color: #9ddbb4; }
.vk-alert.error { background: #fef2f2; color: #a32121; border-color: #f2b4b4; }
.vk-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }

.vk-contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: start; }
.vk-info { display: grid; gap: 16px; }
.vk-info-card { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--vk-line); border-radius: 18px; padding: 20px 22px; }
.vk-info-card .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--vk-navy); color: var(--vk-gold-l); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vk-info-card h3 { font-size: .95rem; font-weight: 800; margin-bottom: 4px; }
.vk-info-card a, .vk-info-card p { color: var(--text2); font-size: .94rem; line-height: 1.9; }
.vk-info-card a.tel { display: block; direction: ltr; text-align: right; color: var(--vk-navy); font-weight: 800; font-size: 1.05rem; }
.vk-info-card a:hover { color: var(--vk-gold-d); }

/* ───────────────────────── Legacy components re-skin ───────────────────────── */
.blog-card, .sidebar-widget, .post-content, .svc-card { border-color: var(--vk-line); }
.blog-card { border-radius: 18px; transition: transform .25s, box-shadow .25s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-cat { color: var(--vk-gold-d); background: rgba(18, 159, 216, .12); }
.blog-card-title a:hover { color: var(--vk-gold-d); }
.post-body a { color: var(--vk-gold-d); }
.post-body h2, .post-body h3 { color: var(--vk-navy); }
.page-link.active, .pagination .active { background: var(--vk-navy); border-color: var(--vk-navy); color: #fff; }
.section-tag { color: var(--vk-gold-d); }
.svc { --svc-deep: #14222e; --svc-deep2: #1c3142; --svc-violet: #129fd8; --svc-tint: #e9f4fa; --svc-line: #d3e5ef; --svc-gold: #129fd8; }

/* ───────────────────────── 404 ───────────────────────── */
.vk-404 { min-height: 78vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--nav-h) + 40px) 5vw 70px; background: radial-gradient(700px 320px at 50% 0, rgba(94, 200, 242, .18), transparent 65%), linear-gradient(160deg, #0c1720, #1c3142); color: #fff; }
.vk-404 .num { font-size: clamp(5rem, 16vw, 9rem); font-weight: 900; line-height: 1; background: linear-gradient(180deg, #e9d3a0, #129fd8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vk-404 h1 { color: #fff; font-size: 1.6rem; font-weight: 800; margin: 16px 0 10px; }
.vk-404 p { color: #c3cde2; margin-bottom: 30px; line-height: 2; }
.vk-404 .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ───────────────────────── Footer ───────────────────────── */
footer { background: #0a1426; color: #a9b5cd; padding: 72px 5vw 26px; position: relative; }
footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--vk-gold), transparent); }
.footer-grid { grid-template-columns: 1.7fr 1.1fr 1fr 1.3fr; gap: 44px; }
.vk-fbrand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vk-fbrand strong { color: #fff; font-size: 1.3rem; font-weight: 800; }
.footer-brand p { max-width: 340px; color: #a9b5cd; font-size: .88rem; line-height: 2; }
.footer-col-title { color: #fff; font-size: .95rem; position: relative; padding-bottom: 10px; margin-bottom: 18px; }
.footer-col-title::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 28px; height: 2px; background: var(--vk-gold); }
.footer-col a { color: #a9b5cd; font-size: .88rem; }
.footer-col a:hover { color: var(--vk-gold-l); }
.vk-fcontact a, .vk-fcontact p { display: flex; align-items: flex-start; gap: 10px; color: #a9b5cd; font-size: .88rem; margin-bottom: 12px; line-height: 1.8; }
.vk-fcontact .vk-i { color: var(--vk-gold-l); margin-top: 3px; }
.vk-fcontact .ltr { direction: ltr; }
.vk-social { display: flex; gap: 10px; margin-top: 18px; }
.vk-social a { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 99px; font-size: .8rem; color: #d3dbea; }
.vk-social a:hover { border-color: var(--vk-gold-l); color: var(--vk-gold-l); }
.footer-bottom { border-top-color: rgba(255, 255, 255, .08); color: #8e9bb6; }
.vk-disclaimer { max-width: 760px; line-height: 1.9; }

/* نوار تماس ثابت موبایل */
.vk-mbar { display: none; }
@media (max-width: 768px) {
  .vk-mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; z-index: 990; inset-inline: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--vk-line); box-shadow: 0 -8px 24px rgba(20, 34, 46, .1); }
  .vk-mbar .btn { justify-content: center; padding: 12px 10px; font-size: .92rem; }
  body { padding-bottom: 72px; }
  #chat-widget { bottom: 88px; left: 14px; }
}

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 1100px) {
  .vk-areas { grid-template-columns: repeat(2, 1fr); }
  .vk-steps { grid-template-columns: repeat(2, 1fr); }
  .vk-step:not(:last-child)::after { display: none; }
  .vk-why, .vk-team { grid-template-columns: repeat(2, 1fr); }
  .vk-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .vk-strip-item:nth-child(3) { border-inline-start: 0; }
  .vk-strip-item:nth-child(n+3) { border-top: 1px solid var(--vk-line); }
}
@media (max-width: 980px) {
  .vk-hero { padding-bottom: 110px; }
  .vk-hero-inner, .vk-split, .vk-contact-grid, .vk-prac { grid-template-columns: 1fr; gap: 36px; }
  .vk-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .vk-sec { padding: 60px 5vw; }
  .vk-hero { padding-top: calc(var(--nav-h) + 40px); }
  .vk-areas, .vk-steps, .vk-why, .vk-team, .vk-cols2, .vk-row2, .footer-grid { grid-template-columns: 1fr; }
  .vk-strip { margin-top: -50px; }
  .vk-strip-inner { grid-template-columns: 1fr; }
  .vk-strip-item + .vk-strip-item { border-inline-start: 0; border-top: 1px solid var(--vk-line); }
  .vk-hero-ctas .btn, .vk-cta-btns .btn { width: 100%; justify-content: center; }
  .vk-cta { padding: 36px 24px; }
  .vk-block, .vk-form-card { padding: 24px 20px; }
  .vk-wordmark small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vk-js .vk-rv { opacity: 1; transform: none; transition: none; }
  .vk-area, .vk-member, .blog-card, .btn { transition: none; }
}

/* ───────────────────────── دسترس‌پذیری ───────────────────────── */
.vk-skip { position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 2000; background: var(--vk-navy); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 700; }
.vk-skip:focus { inset-inline-start: 12px; }
.nav-link[aria-current="page"] { color: var(--vk-gold-d); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--vk-gold); }
.nav-item:focus-within .mega-drop { opacity: 1; visibility: visible; transform: none; }

/* نوار ناوبری: جلوگیری از شکستن عنوان‌ها */
.nav-link { white-space: nowrap; }
@media (max-width: 1500px) { .nav-search { display: none; } }
@media (max-width: 1240px) { .nav-link { padding-inline: 10px; font-size: .86rem; } }
.vk-block .vk-step::after { display: none; }

/* ───────── دندانپزشکی: نشان، گالری و جزئیات ───────── */
.vk-mark { display: block; width: auto; height: 42px; object-fit: contain; }
.vk-fbrand .vk-mark { height: 44px; }
.vk-avatar { width: 132px; height: 132px; }
.vk-avatar img { object-position: center top; }
.post-body img, .page-body img, .article-body img { max-width: 100%; height: auto; border-radius: 10px; }
.dg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 24px 0; }
.dg-item { margin: 0; border-radius: 12px; overflow: hidden; background: var(--vk-cream-2); aspect-ratio: 4 / 3; }
.dg-item a { display: block; height: 100%; }
.dg-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .35s ease; display: block; }
.dg-item:hover img { transform: scale(1.05); }