/* ===== FONTS ===== */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Vazirmatn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Vazirmatn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Vazirmatn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Vazirmatn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Vazirmatn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/Vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/Vazirmatn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/Vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/Vazirmatn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* هیچ عنصر رسانه‌ای نباید از عرض ظرف خودش بیرون بزند */
img, svg, canvas, video, iframe { max-width: 100%; }
img, canvas, video { height: auto; }

:root {
  --deep-navy: #031B34;
  --dark-blue: #003B75;
  --electric-blue: #0088FF;
  --soft-cyan: #6FE7FF;
  --primary-dark: #020e1c;
  --primary: #061a2e;
  --primary-light: #0c2a4a;
  --accent: #0088FF;
  --accent-glow: rgba(0, 136, 255, 0.35);
  --text: #ffffff;
  --text-secondary: #7ea8cc;
  --text-dim: #8ba5bf;
  --glass-bg: rgba(6, 26, 46, 0.45);
  --glass-border: rgba(0, 136, 255, 0.12);
  --glass-blur: 20px;
  --transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  /* مرکز این بیضی‌ها باید به‌قدر کافی داخل سکشن باشد که رنگ قبل از رسیدن به
     لبه کاملاً محو شود. اگر مرکز روی خودِ لبه بنشیند (مثلاً 50% 0%)، نیمهٔ
     بیرونی بیضی توسط کادر سکشن بریده می‌شود و همان برش یک خط صافِ افقی
     می‌سازد — دلیل «باکس» دیده‌شدنِ بخش خدمات همین بود. */
  --section-bg-1: radial-gradient(ellipse 70% 50% at 80% 34%, rgba(0, 59, 117, 0.15) 0%, transparent 60%),
                   radial-gradient(ellipse 50% 40% at 20% 74%, rgba(0, 136, 255, 0.04) 0%, transparent 50%);
  --section-bg-2: radial-gradient(ellipse 60% 40% at 50% 26%, rgba(0, 59, 117, 0.12) 0%, transparent 50%),
                   radial-gradient(ellipse 40% 30% at 80% 84%, rgba(0, 136, 255, 0.04) 0%, transparent 40%);
  --section-bg-3: radial-gradient(ellipse 50% 40% at 20% 30%, rgba(0, 59, 117, 0.12) 0%, transparent 50%),
                   radial-gradient(ellipse 40% 30% at 80% 70%, rgba(111, 231, 255, 0.03) 0%, transparent 40%);
  --section-bg-4: radial-gradient(ellipse 60% 40% at 70% 28%, rgba(0, 59, 117, 0.1) 0%, transparent 50%);
  --hero-bg: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(0, 59, 117, 0.4) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 75% 70%, rgba(0, 136, 255, 0.08) 0%, transparent 50%),
              radial-gradient(ellipse 40% 40% at 50% 50%, rgba(111, 231, 255, 0.04) 0%, transparent 40%);
  --hero-mesh: radial-gradient(circle at 20% 30%, rgba(0, 136, 255, 0.08) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(111, 231, 255, 0.05) 0%, transparent 30%),
                radial-gradient(circle at 50% 50%, rgba(0, 136, 255, 0.03) 0%, transparent 40%);
  --hero-vignette: radial-gradient(ellipse at center, transparent 30%, rgba(2, 14, 28, 0.6) 100%);
  --navbar-scrolled-bg: rgba(2, 14, 28, 0.85);
  --navbar-scrolled-border: rgba(0, 136, 255, 0.06);
  --card-hover-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 136, 255, 0.08);
  --badge-bg: rgba(0, 136, 255, 0.06);
  --badge-border: rgba(0, 136, 255, 0.18);
  --section-tag-bg: rgba(0, 136, 255, 0.05);
  --section-tag-border: rgba(0, 136, 255, 0.1);
  --section-title-grad: linear-gradient(135deg, #fff 0%, #7ea8cc 100%);
  --feature-bg: rgba(0, 136, 255, 0.03);
  --feature-border: rgba(0, 136, 255, 0.06);
  --feature-hover-bg: rgba(0, 136, 255, 0.06);
  --feature-hover-border: rgba(0, 136, 255, 0.14);
  --card-highlight-border: rgba(255, 255, 255, 0.05);
  --form-bg: rgba(2, 14, 28, 0.5);
  --form-border: rgba(0, 136, 255, 0.08);
  --form-focus-bg: rgba(2, 14, 28, 0.7);
  --footer-bg: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2));
  --nav-link-hover-bg: rgba(0, 136, 255, 0.08);
  --mobile-menu-bg: rgba(2, 14, 28, 0.96);
  --mobile-menu-border: rgba(0, 136, 255, 0.06);
  --why-hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  --service-hover-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 136, 255, 0.08);
  --btn-secondary-bg: rgba(255, 255, 255, 0.03);
  --btn-secondary-border: rgba(255, 255, 255, 0.08);
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.06);
  --btn-secondary-hover-border: rgba(0, 136, 255, 0.3);
  --cta-pre-glow: rgba(0, 136, 255, 0.08);
  --cta-post-glow: rgba(111, 231, 255, 0.05);
  --social-icon-bg: rgba(0, 136, 255, 0.04);
  --social-icon-border: rgba(0, 136, 255, 0.06);
  --scrollbar-track: var(--primary-dark);
  --scrollbar-thumb: var(--dark-blue);
  --scrollbar-thumb-hover: var(--electric-blue);
}

[data-theme="light"] {
  --deep-navy: #c8daf0;
  --dark-blue: #4a90d9;
  --electric-blue: #0066cc;
  --soft-cyan: #0077b6;
  --primary-dark: #f4f7fb;
  --primary: #e4ecf4;
  --primary-light: #d0dbe8;
  --accent: #0066cc;
  --accent-glow: rgba(0, 102, 204, 0.18);
  --text: #1a2a3a;
  --text-secondary: #43566a;
  --text-dim: #5a6b7d;
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(20, 50, 90, 0.10);
  --glass-blur: 20px;
  --section-bg-1: radial-gradient(ellipse 70% 50% at 80% 34%, rgba(0, 102, 204, 0.06) 0%, transparent 60%),
                   radial-gradient(ellipse 50% 40% at 20% 74%, rgba(0, 136, 255, 0.03) 0%, transparent 50%);
  --section-bg-2: radial-gradient(ellipse 60% 40% at 50% 26%, rgba(0, 102, 204, 0.05) 0%, transparent 50%),
                   radial-gradient(ellipse 40% 30% at 80% 84%, rgba(0, 136, 255, 0.03) 0%, transparent 40%);
  --section-bg-3: radial-gradient(ellipse 50% 40% at 20% 30%, rgba(0, 102, 204, 0.05) 0%, transparent 50%),
                   radial-gradient(ellipse 40% 30% at 80% 70%, rgba(0, 119, 182, 0.03) 0%, transparent 40%);
  --section-bg-4: radial-gradient(ellipse 60% 40% at 70% 28%, rgba(0, 102, 204, 0.04) 0%, transparent 50%);
  --hero-bg: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(0, 102, 204, 0.1) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 75% 70%, rgba(0, 136, 255, 0.04) 0%, transparent 50%),
              radial-gradient(ellipse 40% 40% at 50% 50%, rgba(0, 119, 182, 0.02) 0%, transparent 40%);
  --hero-mesh: radial-gradient(circle at 20% 30%, rgba(0, 102, 204, 0.04) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(0, 119, 182, 0.03) 0%, transparent 30%),
                radial-gradient(circle at 50% 50%, rgba(0, 136, 255, 0.02) 0%, transparent 40%);
  --hero-vignette: radial-gradient(ellipse at center, transparent 30%, rgba(240, 244, 248, 0.5) 100%);
  --navbar-scrolled-bg: rgba(255, 255, 255, 0.92);
  --navbar-scrolled-border: rgba(20, 50, 90, 0.09);
  --card-hover-shadow: 0 18px 44px rgba(20, 50, 90, 0.14), 0 3px 10px rgba(20, 50, 90, 0.06);
  --badge-bg: rgba(255, 255, 255, 0.9);
  --badge-border: rgba(0, 102, 204, 0.22);
  --section-tag-bg: rgba(255, 255, 255, 0.9);
  --section-tag-border: rgba(0, 102, 204, 0.18);
  --section-title-grad: linear-gradient(135deg, #1a2a3a 0%, #4a6070 100%);
  --feature-bg: rgba(255, 255, 255, 0.85);
  --feature-border: rgba(20, 50, 90, 0.09);
  --feature-hover-bg: #ffffff;
  --feature-hover-border: rgba(0, 102, 204, 0.28);
  --card-highlight-border: rgba(255, 255, 255, 0.9);
  --form-bg: #ffffff;
  --form-border: rgba(20, 50, 90, 0.16);
  --form-focus-bg: #ffffff;
  --footer-bg: linear-gradient(to bottom, transparent, rgba(20, 50, 90, 0.07));
  --nav-link-hover-bg: rgba(0, 102, 204, 0.06);
  --mobile-menu-bg: rgba(240, 244, 248, 0.97);
  --mobile-menu-border: rgba(0, 102, 204, 0.08);
  --why-hover-shadow: 0 12px 32px rgba(20, 50, 90, 0.12);
  --service-hover-shadow: 0 18px 44px rgba(20, 50, 90, 0.14), 0 3px 10px rgba(20, 50, 90, 0.06);
  --btn-secondary-bg: #ffffff;
  --btn-secondary-border: rgba(20, 50, 90, 0.14);
  --btn-secondary-hover-bg: #f2f7fd;
  --btn-secondary-hover-border: rgba(0, 102, 204, 0.3);
  --cta-pre-glow: rgba(0, 102, 204, 0.05);
  --cta-post-glow: rgba(0, 119, 182, 0.03);
  --social-icon-bg: #ffffff;
  --social-icon-border: rgba(20, 50, 90, 0.12);
  --scrollbar-track: #e4ecf4;
  --scrollbar-thumb: #4a90d9;
  --scrollbar-thumb-hover: #0066cc;
}

html {
  scroll-behavior: smooth; font-size: 16px; transition: background 0.5s ease;
  /* لنگرها زیر نوار بالای صفحه پنهان نشوند.
     نوار در حالت اسکرول‌شده ۶۸ پیکسل است؛ باقی، فاصله تنفس عنوان بخش. */
  scroll-padding-top: 88px;
  /* روی موبایل جلوگیری از بزرگ‌نمایی خودکار متن در چرخش صفحه */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

body {
  font-family: 'Vazirmatn', sans-serif;
  background: var(--primary-dark);
  color: var(--text);
  line-height: 1.8;
  /* در سند راست‌به‌چپ، سرریز سمت چپ اسکرول افقی می‌سازد؛
     clip آن را بدون از کار انداختن position:sticky می‌بندد. */
  overflow-x: hidden;
  overflow-x: clip;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(0, 136, 255, 0.15);
  transition: background 0.5s ease, color 0.5s ease;
}

html { overflow-x: hidden; overflow-x: clip; }

::selection { background: var(--electric-blue); color: white; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.container {
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 24px);
  position: relative; z-index: 2;
}

/* حاشیه امن دستگاه‌های دارای بریدگی صفحه (iPhone و مشابه) */
@supports (padding: max(0px)) {
  .container {
    padding-inline-start: max(clamp(16px, 4vw, 24px), env(safe-area-inset-right));
    padding-inline-end: max(clamp(16px, 4vw, 24px), env(safe-area-inset-left));
  }
}

/* ===== ICONS (inline SVG) ===== */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top: 0; right: 0; left: 0; z-index: 1000;
  padding: clamp(12px, 2.4vw, 20px) 0;
  padding-top: max(clamp(12px, 2.4vw, 20px), env(safe-area-inset-top));
  /* فقط padding انیمیت می‌شود؛ ترنزیشن «all» روی این عنصر باعث می‌شد
     backdrop-filter هم آرام‌آرام تغییر کند و منوی موبایل را خراب کند.
     ۴۵۰ms برای جمع‌شدن هدر کند بود و حس تأخیر می‌داد؛ ۲۸۰ms چابک‌تر است. */
  transition: padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* لایه شیشه‌ای نوار بالا روی یک شبه‌عنصر است، نه روی خود .navbar
   ---------------------------------------------------------------
   دلیلش مهم است: هر عنصری که backdrop-filter داشته باشد برای فرزندانِ
   position:fixed خودش تبدیل به «بلوک دربرگیرنده» می‌شود. منوی کشویی موبایل
   (.nav-links) فرزند همین نوار است، پس وقتی صفحه اسکرول شده بود منو به‌جای
   اندازه‌ی پنجره، به اندازه‌ی نوار (حدود ۱۰۴ پیکسل) باز می‌شد و وسط انیمیشن
   می‌پرید. شبه‌عنصر فرزندی ندارد، بنابراین بلوک دربرگیرنده عوض نمی‌شود. */
.navbar::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--navbar-scrolled-bg);
  backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid var(--navbar-scrolled-border);
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled::before { opacity: 1; }
.navbar.scrolled { padding: 12px 0; }
/* لوگو همراه نوار کمی جمع می‌شود تا تغییر حالت اسکرول عمدی به نظر برسد.
   فقط روی دسکتاپ؛ دلیلش پایین‌تر در بخش موبایل توضیح داده شده. */
.navbar.scrolled .logo { min-height: 40px; }
.navbar.scrolled .logo-image { width: 136px; }

.navbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-width: 0;
}

/* لوگو و ابزارها اندازه خودشان را نگه می‌دارند و منو فضای میانی را پر می‌کند.
   روی موبایل .nav-links از جریان خارج (fixed) می‌شود و همان space-between
   بالا لوگو را راست و دکمه‌ها را چپ نگه می‌دارد. */
.logo, .nav-actions { flex-shrink: 0; }

.logo { display: flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--text); min-width: 0; }

.logo-image {
  display: grid; width: 136px; flex: none; position: relative;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Use the hero accent for the dot while preserving the original logo's edges. */
.logo-image::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--soft-cyan);
  -webkit-mask: url('/logo-nav-dark.png?v=2') center / 100% 100% no-repeat;
  mask: url('/logo-nav-dark.png?v=2') center / 100% 100% no-repeat;
  clip-path: inset(0 75.5% 72.3684% 17.5%);
}
[data-theme="light"] .logo-image::after { display: none; }
.logo-icon { display: block; grid-area: 1 / 1; width: 100%; height: auto; object-fit: contain; }
.logo-icon-light { display: none; }
[data-theme="light"] .logo-icon-light { display: block; }
[data-theme="light"] .logo-icon-dark { display: none; }

.nav-actions { display: flex; align-items: center; gap: 8px; }

/* لینک‌ها کنار برند می‌نشینند و دکمه تماس با دکمه تم یک «ناحیه اقدام»
   در انتهای هدر می‌سازد؛ وگرنه دکمه تم تنها در لبه چپ رها می‌شد. */
.nav-links {
  display: flex; flex: 1; justify-content: flex-start; align-items: center;
  gap: 4px; list-style: none; margin-inline-start: 12px;
}
.nav-menu-items { display: flex; align-items: center; gap: 4px; list-style: none; min-width: 0; }
.nav-menu-footer { margin-inline-start: auto; flex-shrink: 0; }
.mobile-menu-header { display: none; }
.nav-fallback { display: none; }

/* Mobile overlay */
/* با display:none→block در یک فریم، ترنزیشن opacity اصلاً اجرا نمی‌شد و
   پوشش یک‌باره ظاهر می‌شد. visibility این مشکل را ندارد. */
.mobile-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.mobile-overlay.active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s;
}

.nav-links a {
  text-decoration: none; color: var(--text-secondary); padding: 8px 18px;
  border-radius: 8px; font-size: 0.95rem; font-weight: 500; transition: var(--transition);
}

.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--nav-link-hover-bg); }

.nav-services { position: relative; }
.nav-services-toggle {
  display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 18px;
  border-radius: 8px; color: var(--text-secondary); font-size: .95rem; font-weight: 500;
  cursor: pointer; list-style: none; transition: color 200ms ease, background 200ms ease;
}
.nav-services-toggle::-webkit-details-marker { display: none; }
.nav-services-toggle svg { width: 15px; height: 15px; transition: transform 200ms ease; }
.nav-services-toggle:hover, .nav-services-toggle.active, .nav-services details[open] > summary {
  background: var(--nav-link-hover-bg); color: var(--text);
}
.nav-services details[open] > summary svg { transform: rotate(180deg); }
.nav-services-menu {
  position: absolute; top: calc(100% + 12px); inset-inline-start: 0; width: 320px; z-index: 2;
  max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px; border: 1px solid var(--badge-border); border-radius: 18px;
  background: var(--primary-dark); box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
}
.nav-services-heading { padding: 5px 12px 12px; color: var(--text-secondary); font-size: .75rem; }
.nav-services-menu ul { list-style: none; }
.nav-links .nav-services-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 10px 12px; font-size: .875rem; line-height: 1.8;
  transition: background 180ms ease, color 180ms ease;
}
.nav-services-menu a svg { width: 16px; height: 16px; flex: none; opacity: .45; }
.nav-links .nav-services-menu a[aria-current="page"] { color: var(--soft-cyan); background: var(--nav-link-hover-bg); }
.nav-links .nav-services-all { margin-top: 10px; border-top: 1px solid var(--glass-border); border-radius: 0 0 8px 8px; color: var(--soft-cyan); font-size: .8125rem; }
.nav-services details[open] .nav-services-menu { animation: nav-services-enter 180ms ease-out; }
@keyframes nav-services-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.nav-cta {
  background: linear-gradient(135deg, #0066cc, #0054ad) !important;
  color: white !important; padding: 10px 26px !important; border-radius: 10px !important;
  font-weight: 600 !important; box-shadow: 0 4px 20px var(--accent-glow);
}

.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-glow) !important; }

.theme-toggle {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--glass-border);
  flex-shrink: 0;
  background: var(--glass-bg); backdrop-filter: blur(10px);
  color: var(--text-secondary); font-size: 1.05rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}

.theme-toggle:hover { color: var(--text); border-color: rgba(0, 136, 255, 0.25); background: var(--feature-hover-bg); }

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }
[data-theme="light"] .theme-toggle .icon-moon { display: inline-flex; }

.mobile-toggle {
  display: none; background: none; border: none; color: var(--text);
  font-size: 1.3rem; cursor: pointer; border-radius: 8px; transition: var(--transition);
  width: 44px; height: 44px; align-items: center; justify-content: center; flex-shrink: 0;
}

.mobile-toggle:hover { background: var(--nav-link-hover-bg); }

/* ===== HERO ===== */
.hero {
  position: relative; width: 100%;
  /* ارتفاع ثابت باعث بریده‌شدن محتوا در صفحه‌های کوتاه می‌شد؛
     حالا حداقلِ ارتفاع است و محتوا آزادانه رشد می‌کند.
     svh نوار آدرس مرورگرهای موبایل را هم حساب می‌کند. */
  min-height: min(90svh, 740px);
  padding: 128px 0 64px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--primary-dark);
  transition: background 0.5s ease;
}

.hero-bg-layer {
  position: absolute; inset: 0; z-index: 1;
  background: var(--hero-bg);
  transition: background 0.5s ease;
}

#heroCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  pointer-events: none; opacity: 0.3;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.3) 32%, #000 75%);
  mask-image: radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.3) 32%, #000 75%);
}

.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); z-index: 3;
  animation: orbFloat 12s ease-in-out infinite; opacity: 0.65;
}

.hero-orb-1 {
  width: 500px; height: 500px; top: -15%; right: -10%;
  background: radial-gradient(circle, rgba(0, 136, 255, 0.15) 0%, transparent 70%);
}

.hero-orb-2 {
  width: 400px; height: 400px; bottom: -10%; left: -5%;
  background: radial-gradient(circle, rgba(111, 231, 255, 0.1) 0%, transparent 70%);
  animation-delay: -4s; animation-duration: 15s;
}

.hero-orb-3 {
  width: 300px; height: 300px; top: 30%; left: 20%;
  background: radial-gradient(circle, rgba(0, 136, 255, 0.06) 0%, transparent 70%);
  animation-delay: -8s; animation-duration: 18s;
}

[data-theme="light"] .hero-orb-1 {
  background: radial-gradient(circle, rgba(0, 102, 204, 0.08) 0%, transparent 70%);
}
[data-theme="light"] .hero-orb-2 {
  background: radial-gradient(circle, rgba(0, 119, 182, 0.06) 0%, transparent 70%);
}
[data-theme="light"] .hero-orb-3 {
  background: radial-gradient(circle, rgba(0, 102, 204, 0.04) 0%, transparent 70%);
}

.hero-mesh {
  position: absolute; inset: 0; z-index: 4; opacity: 0.3;
  background-image: var(--hero-mesh);
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  transition: background-image 0.5s ease;
}

.hero-vignette {
  position: absolute; inset: 0; z-index: 5;
  background: var(--hero-vignette);
  transition: background 0.5s ease;
}

.hero-bottom-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 250px; z-index: 6;
  background: linear-gradient(to top, var(--primary-dark) 0%, transparent 100%);
  transition: background 0.5s ease;
}

.hero-layout {
  position: relative; z-index: 10;
  display: grid; grid-template-columns: 1.12fr 1fr;
  align-items: center; gap: clamp(24px, 4vw, 64px);
}
.hero-content { min-width: 0; text-align: start; }

.hero-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; color: var(--text-secondary);
  font-size: 0.9375rem; font-weight: 500;
}
.hero h1 {
  margin: 0; max-width: 640px;
  color: var(--text); font-size: clamp(2rem, 3.1vw, 2.875rem);
  font-weight: 800; line-height: 1.55; text-wrap: balance;
}
.hero-brand::before { content: ''; width: 24px; height: 1px; background: var(--soft-cyan); opacity: .65; }
.hero h1 > span { display: block; }
.hero-title-accent { color: var(--soft-cyan); }
.hero-subtitle {
  max-width: 540px; margin: 24px 0 28px;
  color: var(--text-secondary); font-size: 1rem;
  line-height: 2; text-wrap: pretty;
}
.hero-buttons { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px 20px; }
.hero-buttons .btn-primary { padding: 16px 28px; border-radius: 12px; font-size: 1rem; box-shadow: 0 6px 24px rgba(0, 102, 204, 0.18); }
.hero-services-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 12px;
  color: var(--text-secondary); font-size: 0.9375rem; font-weight: 500;
  text-decoration: none; text-underline-offset: 6px; border-radius: 8px;
}
.hero-services-link svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) {
  .hero-services-link:hover { color: var(--text); text-decoration: underline; }
}
.hero-services {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 32px 0 0; gap: 8px 20px;
  color: var(--text-secondary); font-size: 0.875rem; line-height: 1.9;
}
.hero-services li { display: inline-flex; align-items: center; gap: 20px; }
.hero-services li + li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none; }

/* A decorative infrastructure diagram; labels describe services, not live telemetry. */
.hero-visual { min-width: 0; position: relative; direction: ltr; }
.hero-infrastructure { display: block; width: 100%; height: auto; overflow: visible; }
.hero-diagram-guides { color: var(--electric-blue); opacity: .17; }
.hero-connections { color: var(--electric-blue); opacity: .45; }
.hero-platform-edge { fill: var(--primary); stroke: var(--electric-blue); stroke-opacity: .18; }
.hero-rack-stop-top { stop-color: #153e62; }
.hero-rack-stop-bottom { stop-color: #071e35; }
.hero-rack-side { fill: #061a2d; stroke: #1b4b70; }
.hero-rack-top { fill: #224c70; stroke: #347ba4; }
.hero-rack-slots { fill: #09253e; stroke: #2a5e7f; stroke-width: .8; }
.hero-node-surface { fill: #0a2138; stroke: #234b69; stroke-width: 1; }
.hero-node-icon { stroke: var(--soft-cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-node text { fill: var(--text-secondary); font-family: inherit; font-size: 13px; font-weight: 500; text-anchor: middle; direction: rtl; }
.hero-diagram-points { opacity: .7; }
.hero-visual-caption { display: flex; align-items: center; justify-content: center; gap: 10px; direction: rtl; margin-top: 12px; color: var(--text-secondary); font-size: .8125rem; }
.hero-visual-caption span { width: 20px; height: 1px; background: currentColor; opacity: .5; }
.hero-signal { opacity: 0; animation: heroSignal 4.5s ease-in-out 2; }
@keyframes heroSignal {
  0% { stroke-dashoffset: 32; opacity: 0; }
  15%, 70% { opacity: .8; }
  100% { stroke-dashoffset: -220; opacity: 0; }
}
[data-theme="light"] .hero-rack-stop-top { stop-color: #e6f2fc; }
[data-theme="light"] .hero-rack-stop-bottom { stop-color: #b9d7ee; }
[data-theme="light"] .hero-rack-side { fill: #94bbd9; stroke: #568ab2; }
[data-theme="light"] .hero-rack-top { fill: #f6fbff; stroke: #77a5c7; }
[data-theme="light"] .hero-rack-slots { fill: #eaf5fc; stroke: #78a4c1; }
[data-theme="light"] .hero-node-surface { fill: #f6fbff; stroke: #b4cfe3; }
[data-theme="light"] .hero-diagram-guides { opacity: .23; }
@media (max-width: 960px) {
  .hero-layout { grid-template-columns: 1.2fr 1fr; gap: 20px; }
  .hero h1 { font-size: 1.9375rem; }
  .hero-buttons { gap: 8px; }
  .hero-buttons .btn-primary { padding-inline: 20px; }
  .hero-services { gap: 6px 12px; font-size: .8125rem; }
  .hero-services li { gap: 12px; }
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #0066cc, #0054ad);
  color: white; padding: clamp(14px, 3vw, 18px) clamp(24px, 5vw, 40px);
  border-radius: 14px; text-decoration: none; min-height: 48px;
  font-size: clamp(0.95rem, 2.6vw, 1.05rem); font-weight: 600; border: none; cursor: pointer;
  transition: var(--transition); font-family: inherit; position: relative; overflow: hidden;
  box-shadow: 0 4px 30px var(--accent-glow);
}

.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%);
  opacity: 0; transition: var(--transition); pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 45px rgba(0, 136, 255, 0.4);
}

.btn-primary:hover::before { opacity: 1; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--btn-secondary-bg); color: var(--text);
  padding: clamp(14px, 3vw, 18px) clamp(24px, 5vw, 40px);
  border-radius: 14px; text-decoration: none; min-height: 48px;
  font-size: clamp(0.95rem, 2.6vw, 1.05rem); font-weight: 600;
  border: 1px solid var(--btn-secondary-border); cursor: pointer; transition: var(--transition);
  font-family: inherit; backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-border); transform: translateY(-3px);
}

/* ===== SECTION COMMON ===== */
.section { padding: clamp(56px, 9vw, 100px) 0; position: relative; }

/* سربرگ بخش‌ها راست‌چین است تا با متنِ زیرش هم‌راستا باشد.
   وسط‌چین بودنش باعث می‌شد چشم بین وسط و راست بپرد. */
.section-header { text-align: start; margin-bottom: clamp(34px, 6vw, 64px); }

.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--section-tag-bg); border: 1px solid var(--section-tag-border);
  padding: 7px 18px; border-radius: 50px; font-size: 0.86rem;
  color: var(--soft-cyan); margin-bottom: 16px; font-weight: 500;
  transition: background 0.5s ease, border-color 0.5s ease;
}

.section-tag svg { width: 0.85em; height: 0.85em; }

.section-title {
  font-size: clamp(1.5rem, 5.2vw, 2.3rem); font-weight: 800; margin-bottom: 16px;
  line-height: 1.4;
  background: var(--section-title-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-wrap: balance;
}

.section-desc {
  font-size: clamp(0.95rem, 2.6vw, 1.1rem); color: var(--text-secondary);
  /* بلندترین توضیح سایت ۶۰۲ پیکسل می‌خواهد؛ با سقف ۵۸۰ آخرین کلمه تنها
     به خط بعد می‌افتاد. balance هم اگر روزی متن بلندتر شد خطوط را
     هم‌اندازه می‌کند به‌جای اینکه یک کلمه ته خط بماند. */
  max-width: 640px;
  text-wrap: balance;
  line-height: 2;
  margin-inline: 0; line-height: 2;
}

/* ===== SVG SEPARATORS ===== */
.svg-separator { position: relative; z-index: 5; margin-top: -2px; display: block; width: 100%; }

/* جداکننده‌ها فقط خط موج‌اند و دیگر شکل پُرشده ندارند، پس در تم روشن
   رنگِ خط را تنظیم می‌کنیم نه fill را. */
[data-theme="light"] .svg-separator path { stroke: rgba(0, 102, 204, 0.28); }

/* ===== GLASS PANEL ===== */
.glass-panel {
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border); border-radius: 24px;
  transition: background 0.5s ease, border-color 0.5s ease;
}

/* ===== ABOUT ===== */
.about {
  background: var(--section-bg-1), var(--primary-dark);
  transition: background 0.5s ease;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.about-story, .about-principles { min-width: 0; }
.about-eyebrow {
  display: flex; align-items: center; gap: 12px;
  color: var(--soft-cyan); font-size: 0.875rem; font-weight: 600;
  margin-bottom: 22px;
}
.about-eyebrow::before {
  content: ''; width: 24px; height: 2px; flex: none;
  background: currentColor;
}
.about-title {
  margin-bottom: 24px; color: var(--text);
  font-size: clamp(1.75rem, 3.15vw, 2.75rem);
  font-weight: 800; line-height: 1.6; text-wrap: balance;
}
.about-title > span { display: block; }
.about-title-accent { color: var(--soft-cyan); }
.about-lead {
  max-width: 520px; color: var(--text-secondary);
  font-size: 1.125rem; line-height: 2; margin-bottom: 16px;
}
.about-lead strong { color: var(--text); font-weight: 600; }
.about-description {
  max-width: 520px; color: var(--text-secondary);
  font-size: 1rem; line-height: 2.1;
}
.about-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 50px; margin-top: 30px; padding: 12px 18px;
  border: 1px solid var(--btn-secondary-hover-border); border-radius: 10px;
  background: var(--nav-link-hover-bg); color: var(--soft-cyan);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.8; text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}
.about-cta svg { width: 20px; height: 20px; flex: none; }
.about-cta:focus-visible { outline: 2px solid var(--soft-cyan); outline-offset: 5px; }
@media (hover: hover) {
  .about-cta:hover { background: var(--btn-secondary-hover-bg); border-color: var(--soft-cyan); }
}

.about-principles { padding-inline-start: clamp(24px, 3vw, 40px); border-inline-start: 1px solid var(--glass-border); }
.about-principles-title {
  margin-bottom: 8px; color: var(--text-secondary);
  font-size: 0.875rem; font-weight: 500; line-height: 1.8;
}
.about-principles-list { list-style: none; margin: 0; padding: 0; }
.about-principle {
  display: grid; grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px; align-items: start; padding: 24px 0;
}
.about-principle + .about-principle { border-top: 1px solid var(--glass-border); }
.about-principle:last-child { padding-bottom: 0; }
.about-principle-icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--glass-border); border-radius: 12px;
  color: var(--soft-cyan); background: var(--nav-link-hover-bg);
}
.about-principle-icon svg { width: 22px; height: 22px; }
.about-principle h4 { font-size: 1.0625rem; font-weight: 700; line-height: 1.8; margin-bottom: 8px; }
.about-principle p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 2; }

@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-story { max-width: 680px; }
  .about-lead, .about-description { max-width: 640px; }
  .about-principles { padding-inline-start: 0; padding-top: 28px; border-inline-start: 0; border-top: 1px solid var(--glass-border); }
  .about-principles-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .about-principle { grid-template-columns: 1fr; gap: 16px; padding: 16px 0 0; }
  .about-principle + .about-principle { border-top: 0; }
}
@media (max-width: 600px) {
  .about-title { font-size: clamp(1.65rem, 6.8vw, 2rem); }
  .about-lead { font-size: 1.0625rem; }
  .about-eyebrow { margin-bottom: 18px; }
  .about-principles-list { display: block; }
  .about-principle { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 22px 0; }
  .about-principle + .about-principle { border-top: 1px solid var(--glass-border); }
  .about-principle:last-child { padding-bottom: 0; }
  .about-principle-icon { width: 38px; height: 38px; border-radius: 10px; }
  .about-principle h4 { font-size: 1rem; }
  .about-cta { width: 100%; gap: 16px; }
}

/* ===== SERVICES ===== */
.services {
  background: var(--section-bg-2), var(--primary-dark);
  transition: background 0.5s ease;
}

.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.5vw, 20px); }

.service-card {
  padding: clamp(24px, 4.5vw, 34px) clamp(20px, 3.5vw, 26px);
  position: relative; overflow: hidden;
  transition: var(--transition);
}

.service-card:hover {
  border-color: rgba(0, 136, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: var(--service-hover-shadow);
}

.service-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; transition: var(--transition);
  background: var(--feature-bg); border: 1px solid var(--feature-border);
}

.service-icon svg { width: 1.3em; height: 1.3em; color: var(--soft-cyan); }

.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--electric-blue), #0066cc);
  border-color: transparent;
  box-shadow: 0 4px 20px var(--accent-glow);
}

.service-card:hover .service-icon svg { color: white; }

.service-card h3 { font-size: clamp(1.05rem, 3vw, 1.15rem); font-weight: 700; margin-bottom: 10px; line-height: 1.7; }
.service-card p { color: var(--text-secondary); font-size: 0.94rem; line-height: 1.95; }

/* ===== WHY US ===== */
.why-us { background: var(--section-bg-3), var(--primary-dark); transition: background 0.5s ease; }

/* ===== START A CONVERSATION ===== */
.cta-banner { padding: clamp(32px, 5vw, 64px) 0; }
.cta-banner-inner {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: clamp(32px, 6vw, 80px); align-items: center; padding: clamp(28px, 4.5vw, 60px);
  border: 1px solid var(--badge-border); border-radius: 28px;
  background: radial-gradient(ellipse at 100% 0%, var(--cta-pre-glow), transparent 65%), var(--primary);
}
.cta-copy { min-width: 0; }
.cta-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--soft-cyan); font-size: .8125rem; font-weight: 600; margin-bottom: 20px; }
.cta-eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; }
.cta-copy h2 { font-size: clamp(1.65rem, 2.8vw, 2.5rem); line-height: 1.65; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.cta-copy h2 span { color: var(--soft-cyan); }
.cta-description { max-width: 490px; margin-top: 20px; color: var(--text-secondary); font-size: .975rem; line-height: 2.1; }
.cta-action { margin-top: 28px; border-radius: 12px; font-size: .9375rem; padding: 14px 22px; }
.cta-action svg { transition: transform 200ms ease; }
.cta-action:hover svg { transform: translateX(-4px); }
.cta-reassurance { margin-top: 14px; color: var(--text-secondary); font-size: .75rem; line-height: 1.9; }
.cta-brief { padding-inline-start: clamp(24px, 3vw, 42px); border-inline-start: 1px solid var(--badge-border); min-width: 0; }
.cta-brief-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.cta-conversation { width: 38px; height: 38px; flex: none; color: var(--soft-cyan); stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cta-brief h3 { font-size: 1rem; font-weight: 600; line-height: 1.9; }
.cta-topics { list-style: none; }
.cta-topics li { display: flex; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--glass-border); }
.cta-topics li:first-child { padding-top: 0; }
.cta-topics li:last-child { padding-bottom: 0; border: 0; }
.cta-topic-number { color: var(--soft-cyan); opacity: .75; font-size: .75rem; font-variant-numeric: tabular-nums; }
.cta-topics h4 { font-size: .9375rem; font-weight: 600; line-height: 1.8; }
.cta-topics p { margin-top: 5px; font-size: .8125rem; color: var(--text-secondary); line-height: 1.9; }
@media (max-width: 768px) {
  .cta-banner-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 24px; border-radius: 24px; }
  .cta-eyebrow { margin-bottom: 14px; }
  .cta-copy h2 { font-size: clamp(1.45rem, 5.8vw, 2rem); }
  .cta-description { margin-top: 14px; font-size: .875rem; }
  .cta-action { margin-top: 22px; }
  .cta-reassurance { font-size: .6875rem; }
  .cta-brief { border-inline-start: 0; border-top: 1px solid var(--badge-border); padding: 24px 0 0; }
  .cta-brief-heading { gap: 10px; margin-bottom: 18px; }
  .cta-conversation { width: 28px; height: 28px; }
  .cta-brief h3 { font-size: .875rem; }
  .cta-topics li { padding: 13px 0; gap: 12px; }
  .cta-topics h4 { font-size: .8125rem; }
  .cta-topics p { margin-top: 2px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .cta-action:hover svg { transform: none; } }

/* ===== CONTACT ===== */
.contact {
  background: var(--section-bg-4), var(--primary-dark);
  transition: background 0.5s ease;
}

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "info form"; gap: clamp(26px, 4vw, 44px); align-items: stretch; }
.contact-grid > .contact-info { grid-area: info; }
.contact-grid > .contact-form { grid-area: form; }

.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-info h3 { font-size: clamp(1.1rem, 3.8vw, 1.35rem); font-weight: 700; margin-bottom: 6px; line-height: 1.6; }
.contact-info > p { color: var(--text-secondary); line-height: 2; }

.contact-item {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  min-width: 0; transition: var(--transition);
}

.contact-item:hover {
  border-color: rgba(0, 136, 255, 0.14);
  transform: translateX(-3px);
}

.contact-item-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--feature-bg); border: 1px solid var(--feature-border);
}

.contact-item-icon svg { width: 1em; height: 1em; color: var(--soft-cyan); }

.contact-item-text { display: flex; flex-direction: column; min-width: 0; }
.contact-item-label { font-size: 0.84rem; color: var(--text-dim); margin-bottom: 3px; }
.contact-item-value { font-size: clamp(0.92rem, 2.6vw, 1rem); font-weight: 600; direction: ltr; text-align: right; overflow-wrap: anywhere; }
.contact-item a { color: var(--text); text-decoration: none; transition: var(--transition); }
.contact-item a:hover { color: var(--soft-cyan); }

a.contact-item { display: flex; }
a.contact-item:hover { color: var(--text); }

.contact-item-value.rtl-value { direction: rtl; text-align: right; }

.contact-promise { padding: 20px 18px; }
.contact-info > .contact-promise { margin-top: auto; }
.contact-promise h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
.contact-promise ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.contact-promise li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--text-secondary); font-size: 0.95rem; line-height: 1.95;
}
.contact-promise li svg {
  width: 1em; height: 1em; flex-shrink: 0;
  margin-top: 6px; color: var(--soft-cyan);
}

.contact-form { padding: clamp(20px, 3vw, 28px); }
.contact-form .form-row > .form-group { min-width: 0; }
.form-group { margin-bottom: 16px; }

.form-group label {
  display: block; font-size: 0.94rem; font-weight: 500;
  margin-bottom: 6px; color: var(--text-secondary);
}

.form-group input, .form-group textarea {
  width: 100%; padding: 13px 16px;
  background: var(--form-bg); border: 1px solid var(--form-border);
  border-radius: 10px; color: var(--text); font-family: inherit; font-size: 1rem;
  transition: var(--transition); outline: none; direction: rtl;
}

.form-group input[dir="ltr"] { direction: ltr; text-align: left; }

.form-group input:focus, .form-group textarea:focus {
  border-color: var(--electric-blue);
  box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.06);
  background: var(--form-focus-bg);
}

.form-group textarea { min-height: 110px; resize: vertical; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-dim); }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.btn-submit {
  width: 100%; padding: 15px; min-height: 50px; color: white; border: none; border-radius: 12px;
  font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: var(--transition); display: flex; align-items: center;
  justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #0066cc, #0054ad);
  box-shadow: 0 4px 20px var(--accent-glow);
}

.btn-submit:hover {
  transform: translateY(-2px); box-shadow: 0 8px 35px rgba(0, 136, 255, 0.4);
}

/* ===== CONTACT GUIDANCE & ACCESSIBILITY ===== */
.skip-link {
  position: fixed; inset-inline-start: 16px; top: 12px; z-index: 2000;
  transform: translateY(-160%); padding: 12px 20px; border-radius: 8px;
  color: var(--text); background: var(--primary); border: 2px solid var(--soft-cyan);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--soft-cyan); outline-offset: 4px;
}
.contact-form h3 { font-size: 1.25rem; line-height: 1.8; margin-bottom: 8px; }
.contact-form-intro { color: var(--text-secondary); line-height: 1.9; margin-bottom: 20px; font-size: 0.875rem; }
.form-group select {
  width: 100%; min-height: 48px; padding: 12px;
  background: var(--form-bg); border: 1px solid var(--form-border); border-radius: 10px;
  color: var(--text); font: inherit;
}
.contact-form .form-group select { min-width: 0; min-height: 56px; }
.form-group select option { color: var(--text); background: var(--primary-dark); }
.form-group select:focus { border-color: var(--electric-blue); }
.form-help, .contact-next-step { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.9; }
.form-help { margin-top: 8px; }
.contact-next-step { margin-top: 12px; text-align: center; }
.contact-privacy { margin-bottom: 14px; color: var(--text-secondary); font-size: .75rem; line-height: 1.9; }
.contact-next-step a, .contact-noscript a { color: var(--soft-cyan); text-underline-offset: 4px; }
.form-status { margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--glass-border); border-radius: 10px; line-height: 1.9; color: var(--text-secondary); }
.form-status:empty { display: none; }
.form-status[data-state="success"] { color: #91e3b4; border-color: #31744e; background: rgba(49, 116, 78, 0.12); }
.form-status[data-state="error"] { color: #ffc0bc; border-color: #a34848; background: rgba(163, 72, 72, 0.1); }
[data-theme="light"] .form-status[data-state="success"] { color: #205c39; }
[data-theme="light"] .form-status[data-state="error"] { color: #9c2626; }
.btn-submit:disabled { cursor: wait; opacity: 0.75; transform: none; }
.form-group :disabled { opacity: 0.7; cursor: wait; }
.footer-links a, .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-noscript { padding: 16px; line-height: 2; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .service-card:hover, .btn-submit:hover, .btn-primary:hover, .btn-secondary:hover { transform: none; }
}

/* ===== FOOTER ===== */
.footer {
  padding: clamp(32px, 5vw, 44px) 0 20px; position: relative;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  background: var(--footer-bg);
  transition: background 0.5s ease;
}

.footer-content {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}

.footer-text { color: var(--text-dim); font-size: 0.88rem; }

.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }

.footer-links a {
  color: var(--text-dim); text-decoration: none; font-size: 0.88rem; transition: var(--transition);
}

.footer-links a:hover { color: var(--soft-cyan); }

/* تله ربات فرم تماس: از دید کاربر پنهان است.
   نکته مهم: قبلاً با left:-9999px پنهان می‌شد و چون سند راست‌به‌چپ است،
   همان ۱۰۰۰۰ پیکسل سرریزِ سمت چپ، اسکرول افقی کل صفحه را می‌ساخت.
   حالا با clip پنهان می‌شود و هیچ فضایی اشغال نمی‌کند. */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.footer-legal {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--social-icon-border);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px;
  color: var(--text-dim); font-size: 0.84rem; line-height: 1.9;
}

.footer-legal a { color: inherit; text-decoration: none; transition: var(--transition); }
.footer-legal a:hover { color: var(--soft-cyan); }
.footer-legal-name { font-weight: 700; }

@media (max-width: 600px) {
  .footer-legal { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
}

.footer-social { display: flex; gap: 8px; }

.footer-social a {
  width: 40px; height: 40px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); text-decoration: none; transition: var(--transition);
  background: var(--social-icon-bg);
  border: 1px solid var(--social-icon-border);
}

.footer-social a svg { width: 0.85em; height: 0.85em; }

.footer-social a:hover {
  background: linear-gradient(135deg, var(--electric-blue), #0066cc);
  color: white; border-color: transparent; transform: translateY(-3px);
}

/* ===== LIGHT THEME POLISH =====
   حالت روز پس‌زمینه روشن دارد، پس کارت‌ها به‌جای درخشش به سایه و
   نوارهای رنگی ملایم نیاز دارند تا از هم جدا دیده شوند. */

/* کارت‌ها روی زمینه روشن باید کمی «بلند» به نظر برسند */
[data-theme="light"] .glass-panel {
  box-shadow: 0 2px 10px rgba(20, 50, 90, 0.06), 0 1px 2px rgba(20, 50, 90, 0.04);
}

/* قبلاً سکشن‌ها یک در میان تیره‌تر بودند تا مرزشان دیده شود، ولی همان باعث
   می‌شد «خدمات» و «تماس» مثل یک باکس بزرگ با دو لبه صافِ افقی دیده شوند.
   حالا همه یک زمینه دارند و مرزها را فقط خط‌های موج نشان می‌دهند. */

/* فوتر باید از بدنه صفحه جدا شود */
[data-theme="light"] .footer { border-top: 1px solid rgba(20, 50, 90, 0.09); }

/* نوار بالای صفحه بعد از اسکرول */
[data-theme="light"] .navbar::before {
  box-shadow: 0 1px 16px rgba(20, 50, 90, 0.08);
}

/* فیلدهای فرم روی کارت سفید باید لبه مشخص داشته باشند */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
  box-shadow: inset 0 1px 2px rgba(20, 50, 90, 0.05);
}

[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.14);
}

/* دکمه اصلی و لینک‌های فعال کمی پررنگ‌تر */
[data-theme="light"] .btn-primary,
[data-theme="light"] .nav-cta {
  box-shadow: 0 6px 18px rgba(0, 102, 204, 0.28);
}

/* آیکون‌های کارت خدمات روی زمینه روشن */
[data-theme="light"] .service-icon,
[data-theme="light"] .contact-item-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.6); } }
@keyframes scrollDown { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(10px); } }
@keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -30px) scale(1.05); } 66% { transform: translate(-15px, 15px) scale(0.95); } }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ===========================================================================
   RESPONSIVE
   نردبان نقطه‌شکست‌ها از بزرگ به کوچک:
   1200 ← تبلت افقی 1100 ← تبلت 900 ← موبایل بزرگ 768 ← موبایل 560 ← ریز 380
   =========================================================================== */

/* ---------- تبلت افقی و لپ‌تاپ کوچک ---------- */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; grid-template-areas: "form" "info"; }
}

/* ---------- تبلت عمودی ---------- */
@media (max-width: 900px) {
  html { scroll-padding-top: 84px; }
  .hero-orb-1 { width: 340px; height: 340px; }
  .hero-orb-2 { width: 280px; height: 280px; }
  .hero-orb-3 { width: 220px; height: 220px; }
}

/* ---------- موبایل بزرگ / منوی کشویی ---------- */
@media (max-width: 768px) {
  html { scroll-padding-top: 84px; }
  .navbar:not(.nav-ready) .mobile-toggle, .navbar:not(.nav-ready) .theme-toggle { display: none; }
  .navbar:not(.nav-ready) .nav-fallback { display: block; }
  .nav-fallback > summary { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text); cursor: pointer; list-style: none; border-radius: 10px; }
  .nav-fallback > summary::-webkit-details-marker { display: none; }
  .nav-fallback-panel { position: fixed; top: 84px; inset-inline: 16px; max-height: calc(100dvh - 100px); overflow-y: auto; padding: 16px; background: var(--primary-dark); border: 1px solid var(--badge-border); border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .15); }
  .nav-fallback-panel > p { color: var(--text-secondary); font-size: .8125rem; margin-bottom: 8px; }
  .nav-fallback-panel ul { list-style: none; }
  .nav-fallback-panel a { display: flex; align-items: center; min-height: 44px; padding: 8px; color: var(--text); text-decoration: none; font-size: .875rem; line-height: 1.8; }

  /* --- منوی کشویی --- */
  /* کشو از همان سمتی باز می‌شود که دکمه‌اش آنجاست (چپ = پایانِ صفحه در RTL) */
  .nav-links {
    position: fixed; top: 0; bottom: 0; left: 0; right: auto;
    width: 320px; max-width: 88vw; z-index: 1001;
    background: var(--primary-dark);
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch;
    justify-content: stretch; padding: 0; margin: 0; gap: 0;
    border-right: 1px solid var(--mobile-menu-border);
    border-left: none; border-radius: 0 24px 24px 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0.28s;
    will-change: transform;
    overflow: hidden;
  }
  .nav-links.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .nav-menu-items {
    flex-direction: column; align-items: stretch; gap: 4px; min-height: 0;
    padding: 12px 16px; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--badge-border) transparent;
  }
  .nav-menu-items > li { flex-shrink: 0; }
  .nav-menu-footer { margin: 0; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-border); }
  .nav-services-toggle { justify-content: space-between; min-height: 48px; padding: 12px 16px; font-size: .9375rem; border-radius: 12px; }
  .nav-services-menu {
    position: static; width: auto; max-height: none; overflow: visible; margin: 8px 6px 4px 0;
    padding: 4px 8px 4px 0; border: 0; border-inline-start: 1px solid var(--badge-border);
    border-radius: 0; background: transparent; box-shadow: none;
  }
  .nav-services-heading { display: none; }
  .nav-links .nav-services-menu a { min-height: 44px; padding: 8px; font-size: .8125rem; }
  .nav-links li { width: 100%; list-style: none; }
  .nav-links a {
    display: flex; align-items: center; width: 100%;
    min-height: 48px; padding: 12px 16px;
    font-size: .9375rem; border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav-links .nav-cta { margin: 0; justify-content: center; box-shadow: 0 4px 14px var(--accent-glow); }

  .mobile-menu-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); border-bottom: 1px solid var(--glass-border);
  }
  .mobile-menu-title { color: var(--text-secondary); font-size: .8125rem; font-weight: 500; }
  .mobile-menu-close {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
    width: 44px; height: 44px; flex: none; border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease;
    display: flex; align-items: center; justify-content: center;
  }
  .mobile-menu-close:hover { background: var(--nav-link-hover-bg); color: var(--text); }
  .mobile-toggle { display: flex; }

  /* عرض لوگو هنگام اسکرول موبایل ثابت می‌ماند؛ ناحیه لمس حداقل ۴۴ پیکسل است. */
  .logo, .navbar.scrolled .logo { min-height: 44px; }
  .logo-image, .navbar.scrolled .logo-image { width: 108px; }

  /* --- چیدمان --- */
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 1fr; row-gap: 0; }
  .contact-grid { gap: 28px; }
  .contact-form { padding: 20px 18px; }
  .contact-form-intro { margin-bottom: 16px; font-size: .8125rem; }
  .contact-form .form-group { margin-bottom: 12px; }
  .contact-form .form-group label { font-size: .875rem; }
  .contact-form .form-group input, .contact-form .form-group textarea { padding: 11px 12px; }
  .contact-form .form-group select { min-height: 48px; padding: 10px 12px; }
  .contact-form .form-help { font-size: .75rem; margin-top: 5px; }
  .contact-info { gap: 12px; }
  .contact-info > p { font-size: .875rem; line-height: 1.9; }
  .contact-info .contact-item { padding: 14px; gap: 12px; }
  .contact-info .contact-item-icon { width: 34px; height: 34px; border-radius: 10px; }
  .contact-info .contact-item-value { font-size: .875rem; }
  .contact-info .contact-item-label { font-size: .75rem; }
  .contact-promise { padding: 16px; }
  .contact-promise h4 { font-size: .9375rem; margin-bottom: 10px; }
  .contact-promise ul { gap: 8px; }
  .contact-promise li { font-size: .8125rem; line-height: 1.9; }

  .hero { min-height: 0; padding: 108px 0 32px; }
  .hero-layout { grid-template-columns: 1fr; gap: 22px; }
  .hero-content { text-align: center; }
  .hero-brand, .hero-buttons, .hero-services { justify-content: center; }
  .hero h1 { margin-inline: auto; }
  .hero-visual { width: min(100%, 350px); margin-inline: auto; }
  .hero-infrastructure { max-height: 245px; }
  .hero-visual-caption { margin-top: 0; font-size: .75rem; }
  .hero h1 { font-size: clamp(1.625rem, 4.8vw, 2.5rem); line-height: 1.65; }
  .hero-brand { margin-bottom: 18px; font-size: 0.875rem; }
  .hero-subtitle { max-width: 560px; margin: 20px auto 24px; }
  .hero-services { margin-top: 24px; gap: 6px 12px; font-size: 0.8125rem; }
  .hero-services li { gap: 12px; }

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

/* ---------- موبایل ---------- */
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; align-items: stretch; gap: 8px; max-width: 360px; margin-inline: auto; }
  .hero { padding-top: 98px; }
  .hero-subtitle { font-size: .9375rem; line-height: 1.95; margin-block: 16px 22px; }
  .hero-services { display: none; }
  .hero-layout { gap: 8px; }
  .hero-infrastructure { max-height: 210px; }
  .hero-visual-caption { display: none; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .contact-promise li { font-size: 0.9rem; }

  /* iOS هر ورودی با فونت کمتر از ۱۶ پیکسل را هنگام فوکوس بزرگ‌نمایی می‌کند */
  .form-group input, .form-group textarea { font-size: 16px; padding: 14px 16px; }
  .form-group textarea { min-height: 130px; }
}

/* ---------- گوشی‌های باریک ---------- */
/* ۳۷۵ پیکسل (آیفون‌های کوچک) هنوز جای دو ستون دارد، پس مرز را زیر آن گذاشته‌ایم */
@media (max-width: 360px) {
  .footer-links { gap: 6px 16px; }
}

/* ---------- گوشی در حالت افقی (ارتفاع کم) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding: 96px 0 56px; }
  .hero-brand { margin-bottom: 12px; }
  .hero-subtitle { margin: 14px auto 22px; line-height: 1.9; }
  .nav-links { padding-top: 56px; }
}

/* ===========================================================================
   لمس در برابر ماوس
   افکت‌های hover روی صفحه‌های لمسی «می‌چسبند» چون انگشت رویداد خروج نمی‌فرستد.
   پس فقط برای اشاره‌گرهای دقیق نگه‌شان می‌داریم و به جایش بازخورد لمسی می‌دهیم.
   =========================================================================== */
@media (hover: none) {
  .service-card:hover, .contact-item:hover,
  .btn-primary:hover, .btn-secondary:hover, .btn-submit:hover,
  .nav-cta:hover, .footer-social a:hover {
    transform: none;
  }
  .service-card:hover { box-shadow: none; }
  .service-card:hover .service-icon {
    background: var(--feature-bg); border-color: var(--feature-border); box-shadow: none;
  }
  .service-card:hover .service-icon svg { color: var(--soft-cyan); }

  /* بازخورد لمسی: به‌جای hover، لحظه فشردن */
  .btn-primary:active, .btn-secondary:active, .btn-submit:active,
  .nav-cta:active, .footer-social a:active { transform: scale(0.97); }
  .service-card:active, .contact-item:active { transform: scale(0.99); }
}

/* ===========================================================================
   کاهش حرکت — برای کاربرانی که در تنظیمات سیستم انیمیشن را خاموش کرده‌اند
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-orb, .hero-signal { animation: none !important; }
}