:root {
  /* رنگ‌ها */
  --bg: #0f1216;
  --card: #151a21;
  --muted: #8b96a7;
  --text: #e8edf4;
  --primary: #3aaed8;
  --accent: #71dd8a;
  --border: #1f2630;
  --border-light: #2a3340;

  /* گرادیان مشترک لوگو و تایپ (در JS به‌روز می‌شود) */
  --g1: #ff4d4d; --g2: #4dd2ff; --g3: #b84dff;

  /* تقویت رنگ/کنتراست لوگو (قابل تنظیم و برگشت) */
  --logo-boost-saturation: 1.35;
  --logo-boost-contrast: 1.15;
  --logo-boost-brightness: 1.08;

  /* فاصله‌ها */
  --maxw: 1100px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-14: 56px;

  /* تایپوگرافی */
  --lh: 1.6;

  /* حرکت‌ها و افکت‌ها */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: .2s; --dur-2: .3s; --dur-3: .6s;
  --shadow-1: 0 4px 12px rgba(0,0,0,.25);
  --shadow-2: 0 10px 25px rgba(0,0,0,.2);
}

/* ریست و پایه */
* { box-sizing: border-box; }
*::before,*::after { box-sizing: inherit; }
html, body { height: 100%; scroll-behavior: smooth; }
body { font-family: "Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto; background: var(--bg); color: var(--text); line-height: var(--lh); }
a { color: var(--primary); text-decoration: none; transition: opacity var(--dur-1) var(--ease); }
a:hover { text-decoration: underline; opacity:.9; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-4); }

/* پیوند پرش برای دسترسی */
.skip-link { position: absolute; inset-inline-start: 8px; top: -40px; background:#111722; color:#fff; padding:6px 10px; border-radius:8px; z-index:100; transition: transform var(--dur-2) var(--ease); }
.skip-link:focus { transform: translateY(48px); outline:2px solid #2a86ff; }

/* هدر و ناوبری */
header { position: sticky; top: 0; backdrop-filter: saturate(180%) blur(8px); background: rgba(15,18,22,.7); border-bottom: 1px solid var(--border); z-index: 20; }
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); }
.brand { display:flex; align-items:center; gap: var(--space-3); }
.brand span { font-weight: 700; }

/* لوگوی تصویری در اپ‌بار */
.brand-logo-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
}

.brand-logo-img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(58, 174, 216, 0.6);
  border-color: rgba(58, 174, 216, 0.3);
}

/* تنظیمات واکنش‌گرا برای لوگو */
@media (max-width: 768px) {
  .brand-logo-img {
    width: 45px;
    height: 45px;
  }
}

@media (max-width: 480px) {
  .brand-logo-img {
    width: 42px;
    height: 42px;
  }
}

.menu { display:flex; gap: var(--space-5); }
.menu a { color: var(--text); opacity:.9; padding-block: var(--space-2); position: relative; }
.menu a[aria-current="page"] { color: var(--accent); }
.menu a::after { content:""; position:absolute; inset-inline: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: right; background: var(--primary); transition: transform var(--dur-2) var(--ease); }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-actions { display:flex; align-items:center; gap: var(--space-2); }

/* دکمه‌ها */
.btn { display:inline-block; padding: 10px var(--space-4); border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease); }
.btn:where(:hover,:focus-visible) { transform: translateY(-2px); box-shadow: var(--shadow-1); text-decoration: none; }
.btn.primary { background: var(--primary); color: #081017; }
.btn.secondary { background: #1f2630; color: var(--text); border-color: var(--border-light); }

/* همبرگر */
.hamburger { display:none; place-items:center; inline-size: 40px; block-size: 40px; border-radius:10px; border: 1px solid var(--border-light); background:#1a202b; color:var(--text); cursor:pointer; transition: background var(--dur-1) var(--ease); }
.hamburger:hover { background:#222a36; }
.hamburger:focus-visible { outline: 2px solid #2a86ff; outline-offset: 2px; }

/* منوی موبایل */
.mobile-menu[hidden] { display:none; }
.mobile-menu { position: fixed; inset: auto 0 0 0; top: var(--appbar-h, 56px); background: rgba(13,17,22,.98); border-top:1px solid #223046; box-shadow: 0 -8px 24px rgba(0,0,0,.35); padding: 14px; z-index:19; }
@media (prefers-reduced-motion: no-preference) { .mobile-menu { animation: slideDown var(--dur-2) var(--ease); } }
@keyframes slideDown { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform: translateY(0); } }
.mobile-menu a { display:block; padding: var(--space-3) 10px; border-radius:10px; color:#e6ecf5; border:1px solid transparent; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.mobile-menu a:hover { background:#111722; border-color:#243045; text-decoration:none; }

/* هیرو */
.hero { padding-block: var(--space-14) var(--space-8); text-align:center; content-visibility: auto; contain-intrinsic-size: 1px 600px; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 var(--space-3); line-height: 1.2; }
.hero p { margin: 0 auto var(--space-6); max-width: 700px; color: var(--muted); font-size: 1.1rem; }
.hero .cta { display:flex; gap: var(--space-3); justify-content:center; flex-wrap: wrap; }
.badge { display:inline-flex; align-items:center; gap: var(--space-2); padding: 6px 10px; border-radius: 999px; border: 1px solid #263041; color:#b8c2d3; background:#141a22; font-size: 13px; margin-block-end: var(--space-4); }

/* سکشن‌ها */
section { padding-block: var(--space-14); border-top: 1px solid var(--border); content-visibility: auto; contain-intrinsic-size: 1px 700px; }
h2.section-title { font-size: clamp(22px, 3.5vw, 28px); margin: 0 0 var(--space-4); }
p.section-sub { color: var(--muted); margin: 0 0 var(--space-6); }

/* کارت‌های امکانات */
.features { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.card { background: var(--card); border: 1px solid #222a36; border-radius: var(--radius-lg); padding: var(--space-6); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
@media (hover: hover) { .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--border-light); } }
.card h3 { margin: 0 0 var(--space-2); font-size: 18px; }
.card p { margin: 0; color: var(--muted); }

/* گالری */
.gallery { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
figure { overflow: hidden; border-radius: 14px; border: 1px solid #222a36; background: #0f141d; }
.gallery img { transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
@media (hover: hover) { .gallery img:hover { transform: scale(1.03); } }
figcaption { padding: var(--space-3); text-align: center; color: var(--muted); font-size: .9rem; }

/* تعرفه */
.pricing { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.price-card { background: linear-gradient(180deg, #18202a, #131922); border: 1px solid #273142; border-radius: var(--radius-lg); padding: 22px; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); position: relative; overflow: hidden; }
@media (hover: hover) { .price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); } }
.price-card h3 { margin: 0 0 var(--space-2); }
.price { font-size: 28px; font-weight: 800; margin: var(--space-2) 0 var(--space-4); }
.price small { font-size: 12px; color: var(--muted); }
.clean { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.clean li { margin: var(--space-2) 0; color: #c9d3e2; position: relative; padding-inline-start: var(--space-4); }
.clean li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--accent); }

/* سوالات متداول */
.faq { max-width: 800px; margin: auto; }
details { background: #121821; border: 1px solid #222a36; border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-block: 10px; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
details:hover { border-color: var(--primary); }
details[open] { background: #131a24; }
summary { cursor: pointer; font-weight: 700; padding-block: var(--space-2); }
details p { margin-top: var(--space-3); color: var(--muted); }

/* تماس */
.contact { display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-6); }
.contact form, .contact .info { background: var(--card); border: 1px solid #222a36; border-radius: var(--radius-lg); padding: var(--space-4); }
.contact form :where(input, textarea) { width: 100%; background:#111722; color: var(--text); border: 1px solid #223046; border-radius: 10px; padding: var(--space-3); margin-block: var(--space-2); font-family: inherit; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.contact form :where(input, textarea):focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(58,174,216,.2); }

footer { padding-block: var(--space-6); text-align:center; color: var(--muted); border-top: 1px solid var(--border); }

/* آیکن‌های اجتماعی در فوتر */
.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding-block: var(--space-5);
  flex-wrap: nowrap;
}
.social-icons a {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.social-icons img,
.social-icons .icon {
  width: 40px;
  height: 40px;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  border-radius: 10px;
}

/* آیکن رنگی با ماسک تصویر و گرادیان پویا */
.social-icons .icon {
  display: inline-block;
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3));
  /* استاندارد */
  mask-image: var(--icon-src);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  /* WebKit */
  -webkit-mask-image: var(--icon-src);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}
.social-icons a:hover img,
.social-icons a:hover .icon,
.social-icons a:focus img,
.social-icons a:focus .icon,
.social-icons a:active img,
.social-icons a:active .icon {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.social-icons a::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  background: rgba(20,24,30,.9);
  color: #fff;
  border: 1px solid #223046;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
.social-icons a:hover::after,
.social-icons a:focus::after,
.social-icons a:active::after {
  opacity: 1;
  transform: translateY(0);
}

/* فرم تماس وسط‌چین با عرض مناسب و ریسپانسیو */
.contact { display: block; }
.contact form { max-width: 640px; margin-inline: auto; }

/* Brand Hero */
.brand-hero { padding-block: var(--space-4) var(--space-6); border-top: none; }
.brand-hero .wrap { display:flex; flex-direction:column; align-items:center; gap: var(--space-4); }
.brand-logo { width: min(220px, 40vw); height: min(220px, 40vw); }
.mask-shadow { position:relative; }
.mask-shadow::after { content:""; position:absolute; inset: auto 0 -10px 0; height:24px; background: radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,0) 70%); filter: blur(8px); opacity:.35; pointer-events:none; }

/* کلاس اختیاری برای تقویت رنگ لوگو (به‌سادگی قابل حذف) */
.logo-boost {
  filter: saturate(var(--logo-boost-saturation)) contrast(var(--logo-boost-contrast)) brightness(var(--logo-boost-brightness));
}

/* تایپ لاین */
.type-line { margin-top: var(--space-4); font-size: clamp(24px, 4vw, 36px); font-weight: 800; letter-spacing: .02em; min-height: 1.8em; white-space: nowrap; text-align:center; background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.caret::after { content: "|"; margin-inline-start: 4px; animation: blink 1s step-start infinite; color: currentColor; -webkit-text-fill-color: initial; }
@keyframes blink { 50% { opacity: 0; } }

/* رسپانسیو: پدینگ اپ‌بار و منوی موبایل در موبایل */
@media (max-width: 1024px) {
  .container.nav {
    padding: calc(var(--space-4) + env(safe-area-inset-top, 0px))
             calc(var(--space-6) + env(safe-area-inset-right, 0px))
             var(--space-4)
             calc(var(--space-6) + env(safe-area-inset-left, 0px)) !important;
  }
  header .menu { display: none !important; }
  header .hamburger { display: grid !important; }
  .brand { gap: var(--space-4); }
  .nav-actions { gap: var(--space-3); }
  .nav-actions .btn { padding-inline: var(--space-4); }
  .contact { grid-template-columns: 1fr; }
  #mobileMenu {
    padding: var(--space-4)
             calc(var(--space-6) + env(safe-area-inset-right, 0px))
             calc(var(--space-4) + env(safe-area-inset-bottom, 0px))
             calc(var(--space-6) + env(safe-area-inset-left, 0px)) !important;
  }
}

/* منوی موبایل بالاتر از محتوا */
#mobileMenu { position: fixed !important; left: 0; right: 0; top: 56px; bottom: 0; z-index: 9999 !important; background: rgba(13,17,22,.98); }
#mobileMenu[hidden] { display: none !important; }

/* بارگذاری تدریجی تصاویر */
img[loading="lazy"] { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
img[loading="lazy"].loaded { opacity: 1; }