/* ===== پالت رنگی جدید (بازطراحی حرفه‌ای) =====
   پالت قبلی (آبی/بنفش عمومی #2f6fed) با یک سیستم رنگی متمایزتر و پرانرژی‌تر جایگزین شده:
   - primary: بنفش/نیلی الکتریک (indigo) - امضای بصری اصلی برند، به‌جای آبی عمومی/تکراری.
   - accent: نارنجی مرجانی گرم - فقط برای نقاط تاکید کوچک (نشانگر روی نقشه، جزئیات ریز) استفاده
     می‌شود، نه به‌عنوان رنگ اصلی - همان «انرژی استارتاپی» که خواسته شده بود، بدون شلوغی.
   - ink/muted/bg با تن‌های خنثی‌تر و کمی گرم‌تر (کمتر آبی‌زده) هماهنگ با primary جدید تنظیم شدند. */
:root{
  --primary:#4F46E5; --primary-dark:#3730A3; --primary-light:#EEF0FF;
  --accent:#FF6B4A; --accent-dark:#E14F30; --ink:#0E1220; --muted:#5C6178;
  --bg:#F7F7FB; --card:#ffffff; --border:#E6E7F0;
  --shadow-sm:0 2px 8px rgba(14,18,32,.06);
  --shadow-md:0 12px 32px rgba(14,18,32,.10);
  --shadow-lg:0 24px 64px rgba(79,70,229,.18);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'Vazirmatn',Tahoma,sans-serif; background:var(--bg); color:var(--ink); direction:rtl; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;}
a{text-decoration:none;}
::selection{background:var(--primary); color:#fff;}

/* ---------- nav ---------- */
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 6vw; gap:16px;
  background:rgba(255,255,255,.75); backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;}
.nav .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--ink); white-space:nowrap;}
.nav .brand .logo-dot{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--accent)); font-size:17px; box-shadow:var(--shadow-sm);}
.nav .links{display:flex; align-items:center; gap:22px;}
.nav .links a{color:var(--muted); font-weight:600; font-size:13.5px; transition:color .15s ease; white-space:nowrap;}
.nav .links a:hover, .nav .links a.active{color:var(--primary);}
.nav .actions{display:flex; gap:10px; align-items:center;}
.nav .burger{display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:#fff;
  align-items:center; justify-content:center; font-size:18px; cursor:pointer; flex:none;}
.nav-mobile{display:none; flex-direction:column; gap:2px; background:#fff; border-bottom:1px solid var(--border);
  padding:8px 6vw 14px; position:sticky; top:66px; z-index:49;}
.nav-mobile.show{display:flex;}
.nav-mobile a{color:var(--ink); font-weight:600; font-size:14px; padding:12px 4px; border-bottom:1px solid var(--border);}
.nav-mobile a:last-child{border-bottom:none;}
@media (max-width:980px){
  .nav .links{display:none;}
  .nav .burger{display:flex;}
}
@media (max-width:480px){
  .nav{padding:12px 4vw;}
  .nav .brand{font-size:14px; gap:7px;}
  .nav .brand .logo-dot{width:28px; height:28px; font-size:14px;}
  .nav .actions{gap:6px;}
  .nav .actions .btn{padding:8px 12px; font-size:12.5px;}
}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border-radius:11px;
  font-weight:700; font-size:14px; cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:0 6px 18px rgba(79,70,229,.35);}
.btn-primary:hover{box-shadow:0 10px 24px rgba(79,70,229,.45); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--primary); border:1.5px solid var(--primary);}
.btn-outline:hover{background:var(--primary-light);}
.btn-white{background:#fff; color:var(--primary-dark); box-shadow:0 6px 18px rgba(0,0,0,.12);}
.btn-white:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.16);}

/* ---------- hero (large, for homepage) ----------
   گرادیان تیره‌ی قبلی (آبی دریایی عمومی) با یک گرادیان نیلی/بنفشِ عمیق‌تر و اختصاصی‌تر جایگزین
   شد - همان حس سینمایی/فضایی صحنه‌ی گلوب را حفظ می‌کند اما با پالت جدید هماهنگ است. حباب‌های
   محو (blur blobs) هم کم‌رنگ‌تر و کوچک‌تر شدند: نسخه‌ی قبلی چهار حباب پررنگ داشت که حس یک
   قالب عمومی/کلیشه‌ای می‌داد؛ نسخه‌ی جدید فقط دو لکه‌ی نور بسیار ملایم (یکی نیلی، یکی مرجانی
   کم‌رنگ) در گوشه‌ها دارد - ظریف و لوکس، نه شلوغ. */
.hero-wrap{position:relative; overflow:hidden; background:linear-gradient(160deg,#0A0D22 0%,#241E6B 48%,#4F46E5 100%);}
.hero-wrap::before, .hero-wrap::after{content:""; position:absolute; border-radius:50%; filter:blur(80px); opacity:.22;}
.hero-wrap::before{width:440px; height:440px; background:#6D5BFF; top:-160px; left:-100px;}
.hero-wrap::after{width:320px; height:320px; background:#FF6B4A; bottom:-160px; right:-80px; opacity:.14;}
.hero{position:relative; z-index:2; padding:96px 6vw 88px; text-align:center; max-width:860px; margin:0 auto;}
.hero .kicker{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); color:#e2e0ff;
  border:1px solid rgba(255,255,255,.22); padding:7px 16px; border-radius:30px; font-size:12.5px; font-weight:600; margin-bottom:22px;}
.hero h1{font-size:clamp(28px,4.4vw,45px); font-weight:800; margin:0 0 18px; line-height:1.5; letter-spacing:-.01em; color:#fff;}
.hero h1 span{background:linear-gradient(90deg,#8FD8FF,#C9BFFF); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{font-size:16.5px; color:#C7C8EA; line-height:2; margin:0 0 34px;}
.hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hero .btn{padding:14px 30px; font-size:15px;}
.hero .trust{margin-top:44px; display:flex; gap:28px; justify-content:center; flex-wrap:wrap; color:#9E9FC7; font-size:12.5px;}
.hero .trust b{color:#fff; font-size:14px; display:block; font-weight:800;}

/* ---------- page hero (small, for inner pages like about/contact) ---------- */
.page-hero{position:relative; overflow:hidden; background:linear-gradient(160deg,#0A0D22 0%,#241E6B 48%,#4F46E5 100%);
  padding:64px 6vw 76px; text-align:center;}
.page-hero::before{content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:#6D5BFF;
  filter:blur(80px); opacity:.2; top:-120px; right:-80px;}
.page-hero > *{position:relative; z-index:1;}
.page-hero .eyebrow{color:#B8B4FF;}
.page-hero h1{font-size:clamp(24px,3.6vw,36px); font-weight:800; color:#fff; margin:6px 0 12px;}
.page-hero p{font-size:14.5px; color:#C7C8EA; max-width:560px; margin:0 auto; line-height:1.9;}

.map-float{position:relative; z-index:2; max-width:920px; margin:-46px auto 0; padding:0 6vw;}
.map-float-inner{background:var(--card); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg);
  padding:34px; display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap;}
.map-float-inner .pin{font-size:64px; filter:drop-shadow(0 8px 14px rgba(79,70,229,.35));}
.map-float-stat{text-align:center; padding:0 18px;}
.map-float-stat b{display:block; font-size:22px; font-weight:800; color:var(--primary-dark);}
.map-float-stat span{font-size:12.5px; color:var(--muted);}
.map-float-sep{width:1px; height:38px; background:var(--border);}

/* ---------- sections ---------- */
.section{max-width:1100px; margin:0 auto; padding:108px 6vw 64px;}
.section.narrow{max-width:760px;}
.eyebrow{text-align:center; color:var(--primary); font-weight:800; font-size:12px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:12px;}
.section-title{text-align:center; font-size:clamp(23px,3vw,29px); font-weight:800; letter-spacing:-.01em; margin-bottom:14px;}
.section-sub{text-align:center; color:var(--muted); font-size:14.5px; line-height:1.8; margin-bottom:52px; max-width:520px; margin-inline:auto;}
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.feature{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:26px;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.feature:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.feature .icon{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:21px; margin-bottom:16px; background:var(--primary-light);}
.feature:nth-child(3n+2) .icon{background:#FFEAE3;}
.feature:nth-child(3n+3) .icon{background:#E8F5F1;}
.feature h3{font-size:15.5px; margin:0 0 8px; font-weight:700;}
.feature p{font-size:13.5px; color:var(--muted); line-height:1.9; margin:0;}

/* ---------- cta band ---------- */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(135deg,#241E6B,#4F46E5 65%,#7C6BFF);
  color:#fff; text-align:center; padding:64px 6vw; margin:40px 6vw 0; border-radius:28px;}
.cta-band::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.16), transparent 55%);}
.cta-band > *{position:relative; z-index:1;}
.cta-band h2{font-size:clamp(20px,2.6vw,26px); margin:0 0 10px; font-weight:800;}
.cta-band p{margin:0 0 26px; opacity:.92; font-size:14.5px;}

/* ---------- footer ---------- */
footer{background:#0B0D1F; color:#A6A8C8; padding:64px 6vw 0; margin-top:60px;}
.footer-grid{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px;}
.footer-brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; color:#fff; margin-bottom:14px;}
.footer-brand .logo-dot{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--accent)); font-size:15px;}
.footer-col p{font-size:13px; line-height:1.9; color:#8688AE; margin:0;}
.footer-col h4{color:#fff; font-size:13.5px; font-weight:700; margin:0 0 16px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.footer-col a{color:#A6A8C8; font-size:13px; transition:color .15s ease;}
.footer-col a:hover{color:#fff;}
.footer-bottom{max-width:1100px; margin:0 auto; border-top:1px solid rgba(255,255,255,.08); padding:20px 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:#71739A;}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:34px;}
}
@media (max-width:460px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ---------- how it works / steps ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px;}
.step{position:relative; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px 22px; box-shadow:var(--shadow-sm);}
.step .num{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; margin-bottom:16px;}
.step h3{font-size:15px; margin:0 0 8px; font-weight:700;}
.step p{font-size:13.5px; color:var(--muted); line-height:1.9; margin:0;}

/* ---------- pricing hint ---------- */
.price-band{display:flex; gap:20px; justify-content:center; flex-wrap:wrap;}
.price-card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:30px 34px; text-align:center;
  box-shadow:var(--shadow-sm); min-width:220px; position:relative;}
.price-card.highlight{border-color:var(--primary); box-shadow:var(--shadow-md);}
.price-card .tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff;
  font-size:11px; font-weight:700; padding:4px 14px; border-radius:20px; white-space:nowrap;}
.price-card .plan-name{font-size:13.5px; color:var(--muted); font-weight:700; margin-bottom:10px;}
.price-card .amount{font-size:26px; font-weight:800; color:var(--ink);}
.price-card .per{font-size:12px; color:var(--muted); margin-top:2px;}
.trial-note{margin-top:16px; font-size:12px; color:var(--primary-dark); font-weight:700; background:var(--primary-light);
  border-radius:10px; padding:8px 10px;}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq details{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:6px 20px; box-shadow:var(--shadow-sm);}
.faq summary{cursor:pointer; padding:16px 0; font-weight:700; font-size:14.5px; list-style:none; display:flex; align-items:center; justify-content:space-between;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-size:20px; color:var(--primary); font-weight:400; margin-inline-start:12px;}
.faq details[open] summary::after{content:"\2212";}
.faq p{margin:0 0 18px; color:var(--muted); font-size:13.5px; line-height:1.9;}

/* ---------- values grid (about page) ---------- */
.values{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;}
.value-card{text-align:center; padding:20px;}
.value-card .icon{width:56px; height:56px; border-radius:16px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:var(--primary-light);}
.value-card h3{font-size:14.5px; margin:0 0 8px; font-weight:700;}
.value-card p{font-size:13px; color:var(--muted); line-height:1.8; margin:0;}

/* ---------- contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:36px; align-items:start;}
.contact-info-card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:28px; box-shadow:var(--shadow-sm);}
.contact-info-card h3{font-size:15px; margin:0 0 16px;}
.contact-info-row{display:flex; align-items:flex-start; gap:12px; margin-bottom:18px;}
.contact-info-row .ic{width:38px; height:38px; border-radius:10px; background:var(--primary-light); display:flex;
  align-items:center; justify-content:center; font-size:16px; flex:none;}
.contact-info-row b{display:block; font-size:13.5px; margin-bottom:2px;}
.contact-info-row span{font-size:12.5px; color:var(--muted); line-height:1.8;}
.contact-form{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:30px; box-shadow:var(--shadow-sm);}
.cf-field{margin-bottom:16px;}
.cf-field label{display:block; font-size:13px; font-weight:700; margin-bottom:6px;}
.cf-field input, .cf-field textarea{width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--border);
  font-family:inherit; font-size:13.5px; background:#fbfcfe; transition:border-color .15s ease;}
.cf-field input:focus, .cf-field textarea:focus{outline:none; border-color:var(--primary);}
.cf-field textarea{resize:vertical; min-height:110px;}
.cf-row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr;}
  .cf-row2{grid-template-columns:1fr;}
}

/* ---------- legal page ---------- */
.legal-content h2{font-size:16.5px; margin:32px 0 12px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p, .legal-content li{font-size:13.5px; color:var(--muted); line-height:2;}
.legal-content ul{padding-inline-start:22px;}
.legal-note{background:#fff8e6; border:1px solid #f3dfa1; color:#7a5b00; border-radius:10px; padding:14px 16px; font-size:12.5px; line-height:1.9; margin-bottom:36px;}

/* ---------- scroll reveal ---------- */
/* فقط وقتی جاوااسکریپت فعال است عناصر ابتدا مخفی می‌شوند؛ در غیر این صورت (بدون جاوااسکریپت
   یا رباتی که جاوااسکریپت اجرا نمی‌کند) محتوا همیشه به‌طور کامل نمایش داده می‌شود. */
.js-ready .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .js-ready .reveal{opacity:1; transform:none; transition:none;}
}

@media (max-width:640px){
  .map-float{margin-top:-30px;}
  .map-float-inner{flex-direction:column; padding:26px;}
  .map-float-sep{width:60%; height:1px;}
}

/* ---------- globe hero (زمین سه‌بعدی که با اسکرول روی ایران زووم می‌شود) ----------
   پیش‌فرض مخفی است؛ فقط با اسکریپت globe-hero.js و فقط پس از موفقیت در ساخت صحنه‌ی
   WebGL کلاس gs-active به آن اضافه و نمایش داده می‌شود. یعنی اگر جاوااسکریپت غیرفعال
   باشد، WebGL پشتیبانی نشود یا کاربر prefers-reduced-motion را فعال کرده باشد، این بخش
   کلا رندر نمی‌شود و صفحه دقیقا مثل قبل (هدر گرادیانی آبی ساده) نمایش داده می‌شود. */
.globe-stage{display:none; position:relative; height:180vh; background:#05070f;}
.globe-stage.gs-active{display:block;}
.globe-sticky{position:sticky; top:0; height:100vh; min-height:420px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;}
#globeCanvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.globe-caption{position:relative; z-index:2; text-align:center; color:#fff; pointer-events:none; padding:0 20px;}
.globe-caption-line{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;
  font-weight:800; font-size:clamp(20px,3.4vw,34px);}
.globe-caption-line.show{opacity:1; transform:translateY(0);}
.globe-caption-line.line2{font-size:clamp(12.5px,1.6vw,15px); color:#9fc0ff; font-weight:600; margin-top:10px;}
.scroll-hint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  color:#9fc0ff; font-size:12px; display:flex; flex-direction:column; align-items:center; gap:7px;
  opacity:.85; transition:opacity .4s ease;}
.scroll-hint.hide{opacity:0;}
.scroll-hint .chev{width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); animation:gsBounce 1.6s ease-in-out infinite;}
@keyframes gsBounce{0%,100%{transform:translateY(0) rotate(45deg);} 50%{transform:translateY(6px) rotate(45deg);}}

/* ---------- نتیجه‌ی نهایی زوم: fade-in یک نقشه‌ی مسطح و خوانا از خودِ ایران با چند شهر ----------
   تا وقتی کلاس show (توسط globe-hero.js، نزدیک انتهای اسکرول) اضافه نشده، کاملا نامرئی و
   غیرفعال (pointer-events:none) است؛ صرفا یک لایه‌ی تزئینی روی صحنه‌ی سه‌بعدی است. شکل مرز
   ایران از پروژه‌ی متن‌باز svg-maps/world (مجوز CC-BY-4.0) گرفته شده است. */
.iran-reveal{position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .7s ease; pointer-events:none; padding:0 20px 8vh;}
.iran-reveal.show{opacity:1;}
/* این کارت دیگر خودِ نقشه را نشان نمی‌دهد (نقشه اکنون همان نقشه‌ی برجسته‌ی سه‌بعدیِ WebGL
   است که مستقیما داخل globeCanvas، پشت این کپشن، ساخته و انیمیت می‌شود) - فقط یک کپشن
   کوچک و شناور، شبیه زیرنویس یک عکس هوایی، پایین صفحه نشان می‌دهد. */
.iran-reveal-caption{background:rgba(10,14,30,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:10px 22px; text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.4); max-width:92vw; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;}
.iran-reveal-title{color:#fff; font-weight:800; font-size:clamp(13px,1.8vw,15px);}
.iran-reveal-sub{color:#9fc0ff; font-size:11.5px; position:relative; padding-right:12px;}
.iran-reveal-sub::before{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:12px; background:rgba(255,255,255,.25);}
.iran-svg{width:min(78vw,300px); height:auto; display:block; margin:0 auto; filter:drop-shadow(0 10px 24px rgba(79,70,229,.4));}
.iran-shape{fill:url(#iranTerrainGrad); stroke:#8FD8FF; stroke-width:.3; stroke-opacity:.55;}
.iran-city-dot{fill:#ffd166; stroke:#0a0e1e; stroke-width:.15;
  filter:drop-shadow(0 0 .5px #0a0e1e) drop-shadow(0 0 1.1px rgba(255,255,255,.85));}
.iran-city-main .iran-city-dot{fill:#FF6B4A;}
/* دامنه‌ی حرکت پالس روی حلقه‌ی شهر اصلی (تهران) کمی محدودتر و کندتر شده - نسخه‌ی قبلی
   (تا ۱.۳ برابر بزرگ‌شدن در ۲.۴ ثانیه) کمی «بازیگوش/غیرحرفه‌ای» به‌نظر می‌رسید. */
.iran-city-ring{fill:none; stroke:#FF6B4A; stroke-width:.35; opacity:.65; transform-box:fill-box; transform-origin:center;
  animation:iranRingPulse 3.2s ease-in-out infinite;}
@keyframes iranRingPulse{0%,100%{transform:scale(1); opacity:.65;} 50%{transform:scale(1.16); opacity:.28;}}
.iran-city text{fill:#fff; font-size:2.3px; font-weight:700; text-anchor:middle; font-family:'Vazirmatn',Tahoma,sans-serif;
  paint-order:stroke; stroke:#0a0e1e; stroke-width:.35px; stroke-linejoin:round;}
.iran-city-main text{font-size:2.8px; fill:#ffe3e9;}

/* ---------- کج‌شدن سه‌بعدی سبک کارت‌ها هنگام هاور (فقط دسکتاپ) ---------- */
.step, .feature{transition:transform .12s ease, box-shadow .12s ease; will-change:transform;}

/* ---------- بخش نمایشی سه‌بعدی «نقشه‌ی زنده» (پایین‌تر صفحه، بین امکانات و قیمت‌گذاری) ----------
   کاملا با transform های CSS سه‌بعدی کار می‌کند (بدون نیاز به WebGL)؛ با حرکت ماوس روی کارت
   کمی در فضا می‌چرخد. همان نقشه‌ی SVG ایران با نشانگر شهرها که در پایان اسکرول هدر هم استفاده
   شده، اینجا به‌عنوان محتوای اصلی کارت دوباره استفاده شده تا حس یکپارچه‌ای بین آن صحنه و این
   بخش وجود داشته باشد. */
.showcase-stage{display:flex; justify-content:center; padding:30px 16px 10px; perspective:1400px;}
.showcase-3d{--tiltX:0deg; --tiltY:0deg; position:relative; width:min(92vw,620px);
  transform-style:preserve-3d; transform:rotateX(var(--tiltX)) rotateY(var(--tiltY)); transition:transform .15s ease-out;}
.showcase-card{background:linear-gradient(160deg,#0A0D22,#1B1650 60%,#4F46E5); border-radius:22px;
  box-shadow:0 30px 70px rgba(18,23,43,.28), 0 4px 14px rgba(18,23,43,.12); overflow:hidden;
  border:1px solid rgba(255,255,255,.08); transform:translateZ(0);}
.showcase-card-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.08);}
.showcase-dot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:none;}
.showcase-dot.d1{background:#ff5f57;}
.showcase-dot.d2{background:#febc2e;}
.showcase-dot.d3{background:#28c840;}
.showcase-card-title{margin-inline-start:8px; color:#dbe6ff; font-size:12.5px; font-weight:700;}
.showcase-card-body{display:flex; align-items:center; justify-content:center; padding:26px 14px 32px;}
.showcase-svg.iran-svg{width:min(70vw,360px);}
/* داخل کارت سه‌بعدیِ کج‌شونده، فقط نقطه‌های شهرها نگه داشته می‌شود و برچسب متنی‌شان مخفی است:
   وقتی این SVG داخل یک والدِ دارای transform سه‌بعدی (preserve-3d) قرار می‌گیرد، برخی مرورگرها
   متن‌های ریزِ دارای stroke را هنگام rasterize کردن لایه‌ی سه‌بعدی محو/تار نشان می‌دهند؛ چون
   نام شهرها قبلا و واضح در پایان انیمیشن ابتدای صفحه نمایش داده شده، اینجا همان نقشه با نقطه‌ها
   کافی است و نیازی به تکرار متن نیست. */
.showcase-svg .iran-city text{display:none;}
.showcase-chip{position:absolute; background:#fff; color:var(--ink); font-size:12.5px; font-weight:700;
  padding:10px 16px; border-radius:12px; box-shadow:var(--shadow-lg); white-space:nowrap;
  transform:translateZ(60px); animation:showcaseFloat 6s ease-in-out infinite;}
.showcase-chip.chip-1{top:-7%; right:2%; animation-delay:0s;}
.showcase-chip.chip-2{bottom:14%; left:-6%; animation-delay:1.4s;}
.showcase-chip.chip-3{top:44%; right:-9%; animation-delay:2.8s; background:var(--primary); color:#fff;}
/* دامنه‌ی حرکت شناور کمتر و کندتر شده (قبلا ۱۰px در ۴.۵ ثانیه) تا حس آرام/لوکس داشته باشد،
   نه یک انیمیشن جهنده و بازیگوش. */
@keyframes showcaseFloat{0%,100%{transform:translateZ(60px) translateY(0);} 50%{transform:translateZ(60px) translateY(-6px);}}
@media (max-width:760px){
  .showcase-chip{font-size:11px; padding:8px 12px;}
  .showcase-chip.chip-1{right:2%;}
  .showcase-chip.chip-2{left:2%;}
  .showcase-chip.chip-3{display:none;}
}

/* ===== مرحله‌ی ۵: لایه‌ی زنده‌ی نقشه‌ی ایران (پشت محتوای بخش‌ها، توسط landing-map-journey.js) =====
   #mapJourney یک لایه‌ی position:fixed با overflow:hidden است که پشت سر محتوای معمولی صفحه
   (بین رنگ پس‌زمینه‌ی body و کارت‌های هر بخش) می‌نشیند. z-index آن پایین (۱) نگه داشته شده و در
   مقابل، خودِ containerهای اصلی محتوا (.hero-wrap، .section، .cta-band، footer) با یک z-index
   بالاتر (۲) روی آن سوار می‌شوند - همان تکنیک استاندارد stacking-context برای «پس‌زمینه‌ی ثابتِ
   پشت محتوای اسکرول‌شونده». چون کارت‌های داخل هر بخش (.feature/.step/.price-card/.showcase-card)
   خودشان پس‌زمینه‌ی توپر دارند، نقشه فقط از لابه‌لای فاصله‌ی بین این کارت‌ها و پشت متن‌های ساده
   (eyebrow/section-title/section-sub) دیده می‌شود - دقیقا همان جلوه‌ی «عنصر زنده‌ی پس‌زمینه،
   محتوا روی آن» که در پرامپت خواسته شده بود. overflow:hidden روی خودِ #mapJourney باعث می‌شود
   نیازی به clip-path دستی برای جلوه‌ی «فقط بخشی از Outline دیده شود» نباشد. رنگ‌ها عمدا از
   همان متغیرهای برند صفحه (--primary/--accent) با شفافیت کم گرفته شده‌اند تا هیچ glow یا رنگ
   اضافه‌ای به طراحی مینیمال/لوکس اضافه نشود. */
.map-journey{position:fixed; inset:0; overflow:hidden; z-index:1; pointer-events:none;
  opacity:0; visibility:hidden;}
.map-journey svg{position:absolute; top:50%; left:50%; width:520px; height:auto; overflow:visible;
  transform:translate(-50%,-50%);}
.iran-journey-path{fill:var(--primary); fill-opacity:.5; stroke:var(--accent); stroke-opacity:.35;
  stroke-width:.12;}
/* حالت static: وقتی prefers-reduced-motion فعال است یا GSAP/ScrollTrigger در دسترس نیست، نقشه
   بدون هیچ حرکتی، خیلی کم‌رنگ و ثابت، فقط به‌عنوان یک تزئین ملایمِ پس‌زمینه باقی می‌ماند - نه
   این‌که کلا مخفی شود. */
.map-journey.map-journey-static{opacity:1; visibility:visible;}
.map-journey.map-journey-static svg{transform:translate(-50%,-50%) scale(.9);}
.map-journey.map-journey-static .iran-journey-path{fill-opacity:.08; stroke-opacity:.12;}
.map-journey.map-journey-active{visibility:visible;}

.hero-wrap, .section, .cta-band, footer{position:relative; z-index:2;}

@media (max-width:760px){
  /* روی موبایل، هم برای عملکرد بهتر و هم برای جلوگیری از شلوغی بصری در عرض کم، اندازه‌ی پایه‌ی
     نقشه‌ی زنده کوچک‌تر می‌شود؛ خط داستان و رفتار هر بخش (landing-map-journey.js) دست‌نخورده
     باقی می‌ماند، فقط مقیاس پایه تغییر می‌کند. */
  .map-journey svg{width:340px;}
}

@media (prefers-reduced-motion: reduce){
  .globe-stage{display:none !important;}
  .step, .feature{transition:none;}
  .showcase-3d{transform:none !important;}
  .showcase-chip{animation:none;}
  .iran-city-ring{animation:none;}
  .map-journey{transition:none;}
}