:root{--ink:#edf3ff;--muted:#91a0bc;--bg:#071124;--panel:#0e1c34;--panel2:#122541;--line:rgba(163,185,224,.14);--teal:#47e6c1;--gold:#ffc66d;--pink:#ff8eb8;--blue:#799cff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Vazirmatn,system-ui,sans-serif;line-height:1.7;overflow-x:hidden}a{text-decoration:none;color:inherit}.ambient{position:fixed;z-index:-1;filter:blur(90px);opacity:.2;border-radius:50%;pointer-events:none}.ambient-one{width:480px;height:480px;background:#2548b8;top:-200px;right:-100px}.ambient-two{width:360px;height:360px;background:#0c9b8d;left:-180px;top:620px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;max-width:1220px;margin:auto;padding:0 28px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.8px}.brand-mark{width:30px;height:30px;display:flex;align-items:end;gap:3px}.brand-mark span{display:block;width:7px;border-radius:4px;background:var(--teal)}.brand-mark span:nth-child(1){height:14px;opacity:.65}.brand-mark span:nth-child(2){height:22px}.brand-mark span:nth-child(3){height:30px;background:var(--gold)}.brand-name{font-size:22px}.brand-name>span{color:var(--teal)}.brand-name small{color:var(--gold);font-size:13px}.nav-links{display:flex;gap:34px;color:var(--muted);font-size:14px}.nav-links a:hover{color:var(--ink)}.nav-cta,.primary-btn{border:0;border-radius:10px;background:var(--teal);color:#071c21;font:700 14px Vazirmatn;cursor:pointer;padding:12px 18px}.nav-cta b{margin-right:8px;font-size:18px}.hero{max-width:1220px;margin:0 auto;padding:88px 28px 75px;display:grid;grid-template-columns:1fr 1.05fr;gap:55px;align-items:center;min-height:610px}.eyebrow,.section-kicker{font-size:12px;color:var(--teal);font-weight:700;letter-spacing:.2px}.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-left:8px;box-shadow:0 0 12px var(--teal)}h1{font-size:clamp(43px,5.2vw,71px);line-height:1.15;letter-spacing:-2.5px;margin:17px 0 21px}h1 em,h2 em{font-style:normal;color:var(--teal)}.hero-lead{color:var(--muted);max-width:520px;font-size:16px;margin:0}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:31px}.primary-btn{display:inline-flex;align-items:center;gap:20px;padding:14px 20px;box-shadow:0 9px 28px rgba(71,230,193,.18)}.primary-btn span{font-size:20px}.primary-btn.small{font-size:13px;padding:10px 15px;gap:15px}.text-btn{color:#d3ddf2;font-size:13px}.play{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;font-size:9px;color:var(--gold);margin-left:7px}.trust-row{display:flex;align-items:center;gap:12px;margin-top:44px;color:var(--muted);font-size:11px}.trust-row strong{display:block;color:var(--ink);font-size:14px}.trust-row small{display:block}.avatar-stack{display:flex;direction:ltr}.avatar-stack span{width:27px;height:27px;border:2px solid var(--bg);border-radius:50%;display:grid;place-items:center;background:#4b679a;color:#fff;font-size:10px;margin-left:-7px}.avatar-stack span:nth-child(2){background:#9e5c72}.avatar-stack span:nth-child(3){background:#3e9f8b}.avatar-stack span:nth-child(4){background:#1e335a}.trust-line{height:27px;width:1px;background:var(--line);margin:0 9px}.source-label{color:#a9b8d0}.pulse{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--teal);margin-left:6px}.hero-visual{height:430px;position:relative;display:grid;place-items:center}.map-glow{position:absolute;width:440px;height:340px;background:radial-gradient(ellipse,#1e4a67 0%,transparent 67%);filter:blur(10px)}.map-card{position:relative;width:min(470px,100%);height:353px;border-radius:20px;background:linear-gradient(145deg,rgba(24,49,85,.92),rgba(10,25,51,.96));border:1px solid rgba(137,177,235,.24);box-shadow:0 30px 80px rgba(0,0,0,.3);padding:21px}.map-top,.map-bottom,.compare-head,.filter-row{display:flex;align-items:center;justify-content:space-between}.map-title{font-size:13px;font-weight:700}.live-dot{color:var(--teal);font-size:10px}.iran-map{height:254px;position:relative;margin-top:8px;background:radial-gradient(circle at 40% 45%,rgba(60,126,137,.27),transparent 45%)}.map-shape{position:absolute;inset:15px 32px;background:linear-gradient(145deg,rgba(65,127,147,.37),rgba(33,70,112,.27));clip-path:polygon(30% 2%,55% 8%,72% 20%,95% 21%,87% 40%,97% 53%,80% 60%,84% 78%,65% 75%,55% 94%,40% 78%,20% 87%,15% 67%,3% 58%,12% 43%,5% 24%,24% 24%);border:1px solid rgba(91,218,195,.3)}.pin{position:absolute;font-size:10px;color:#dce7fb;display:flex;align-items:center;gap:6px}.pin i{width:8px;height:8px;border:2px solid var(--teal);background:#0b2a45;border-radius:50%;box-shadow:0 0 0 5px rgba(71,230,193,.13)}.pin-tehran{top:30%;right:45%}.pin-shiraz{bottom:25%;right:36%}.pin-rasht{top:19%;right:60%}.pin-mashhad{top:29%;left:17%}.pin-isfahan{top:52%;right:50%}.route{position:absolute;border-top:1px dashed rgba(95,220,198,.38);width:100px;transform:rotate(-18deg)}.route-a{top:47%;right:38%}.route-b{top:36%;right:44%;transform:rotate(32deg);width:70px}.map-bottom{border-top:1px solid var(--line);padding-top:11px;color:#99a9c5;font-size:9px;justify-content:flex-start;gap:20px}.legend-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:4px}.teal{background:var(--teal)}.gold{background:var(--gold)}.pink{background:var(--pink)}.float-card{position:absolute;background:rgba(17,35,62,.92);border:1px solid rgba(133,174,232,.25);border-radius:14px;box-shadow:0 15px 35px rgba(0,0,0,.25);backdrop-filter:blur(12px);display:flex;align-items:center;gap:10px;padding:11px 13px}.score-card{top:31px;left:5px}.air-card{bottom:27px;right:3px}.score-icon,.air-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:rgba(71,230,193,.13);color:var(--teal)}.air-icon{color:var(--gold);background:rgba(255,198,109,.13)}.float-card small{font-size:9px;color:var(--muted);display:block}.float-card strong{font-size:15px;display:block}.float-card em{font-size:9px;color:var(--muted);font-style:normal}.trend{color:var(--teal);font-size:10px;margin-right:8px}.air-bar{width:42px;height:5px;background:#253a58;border-radius:4px}.air-bar i{display:block;width:78%;height:100%;background:var(--teal);border-radius:4px}.metrics-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:1220px;margin:auto;padding:22px 28px;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}.metrics-strip div{border-left:1px solid var(--line)}.metrics-strip div:last-child{border:0}.metrics-strip strong{display:block;font-size:24px;color:var(--ink)}.metrics-strip span{color:var(--muted);font-size:11px}.section{max-width:1220px;margin:auto;padding:105px 28px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:34px}.section-heading h2,.how-section h2{font-size:35px;letter-spacing:-1.2px;margin:8px 0 4px}.section-heading p{color:var(--muted);font-size:13px;margin:0}.ghost-btn{border:1px solid var(--line);border-radius:9px;padding:10px 15px;color:#c6d4eb;font-size:12px}.ghost-btn span{color:var(--teal);font-size:17px;margin-right:8px}.search-shell{display:flex;align-items:center;gap:12px;padding:9px 17px;border:1px solid rgba(141,177,227,.22);background:rgba(14,30,55,.75);border-radius:13px;box-shadow:0 14px 30px rgba(0,0,0,.12)}.search-icon{font-size:25px;color:var(--teal);line-height:1}.search-shell input{border:0;outline:0;background:transparent;color:var(--ink);font:13px Vazirmatn;flex:1}.search-shell input::placeholder{color:#71819f}.search-hint{font-size:10px;color:#637390;white-space:nowrap}.search-hint kbd{border:1px solid var(--line);border-radius:4px;padding:2px 5px;font:9px Vazirmatn;margin-right:8px}.filter-row{justify-content:flex-start;gap:9px;margin:25px 0}.filter{font:11px Vazirmatn;color:#8797b4;background:transparent;border:1px solid var(--line);padding:8px 13px;border-radius:20px;cursor:pointer}.filter.active,.filter:hover{color:#062124;background:var(--teal);border-color:var(--teal)}.result-count{margin-right:auto;color:#637390;font-size:11px}.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.city-card{background:linear-gradient(145deg,rgba(19,40,70,.9),rgba(12,28,52,.9));border:1px solid var(--line);border-radius:15px;padding:19px;transition:.25s;cursor:pointer}.city-card:hover{transform:translateY(-4px);border-color:rgba(71,230,193,.42);box-shadow:0 14px 35px rgba(0,0,0,.2)}.city-cover{height:112px;border-radius:10px;margin-bottom:15px;position:relative;overflow:hidden;background-size:cover;background-position:center}.cover-tehran{background:linear-gradient(135deg,#193760,#1a3a54 45%,#c77b61)}.cover-rasht{background:linear-gradient(135deg,#114d54,#2c8d79 45%,#d6b77a)}.cover-shiraz{background:linear-gradient(135deg,#5d3e57,#c47a68 58%,#e3bd88)}.cover-isfahan{background:linear-gradient(135deg,#283d74,#607ba4 45%,#d79f5a)}.cover-mashhad{background:linear-gradient(135deg,#5a3135,#b65a4b 52%,#e7b078)}.cover-tabriz{background:linear-gradient(135deg,#274b68,#528e97 48%,#d9aa77)}.city-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,16,32,.45))}.city-tag{position:absolute;z-index:1;top:10px;right:10px;padding:4px 8px;background:rgba(4,18,31,.6);backdrop-filter:blur(8px);border-radius:6px;color:#e6f2ff;font-size:9px}.city-head{display:flex;align-items:start;justify-content:space-between}.city-head h3{font-size:18px;margin:0}.city-head p{color:var(--muted);font-size:10px;margin:3px 0 0}.score{color:var(--gold);font-size:12px}.score b{font-size:18px}.score small{color:var(--muted);font-size:9px}.city-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:14px;padding-top:12px;gap:7px}.city-stats div{border-left:1px solid var(--line);padding-right:5px}.city-stats div:last-child{border:0}.city-stats small{display:block;color:#71819e;font-size:9px}.city-stats strong{display:block;font-size:12px;margin-top:3px}.stat-good{color:var(--teal)}.stat-warm{color:var(--gold)}.compare-section{max-width:1220px;margin:25px auto 95px;padding:68px 75px;background:linear-gradient(115deg,#112743,#122d43 55%,#133e4b);border:1px solid rgba(92,199,190,.24);border-radius:24px;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center;position:relative;overflow:hidden}.compare-section:before{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(71,230,193,.1);border-radius:50%;left:-140px;top:-190px}.compare-copy{position:relative}.compare-copy h2{font-size:38px;line-height:1.3;margin:8px 0 14px}.compare-copy p{color:#a7b7ce;font-size:13px;max-width:330px;margin-bottom:23px}.compare-preview{position:relative;background:rgba(5,18,35,.56);border:1px solid rgba(145,190,223,.18);border-radius:17px;padding:19px}.compare-head{font-size:11px;color:#c3d2ea}.compare-head button{border:0;background:transparent;color:var(--teal);font:11px Vazirmatn;cursor:pointer}.compare-cities{display:flex;align-items:center;justify-content:center;gap:28px;margin:20px 0}.mini-city{text-align:center}.mini-photo{display:block;width:58px;height:58px;border-radius:50%;margin:0 auto 7px;border:3px solid rgba(255,255,255,.12)}.photo-tehran{background:linear-gradient(135deg,#385a94,#b97868)}.photo-rasht{background:linear-gradient(135deg,#318776,#d0b57c)}.mini-city strong{display:block;font-size:13px}.mini-city small{display:block;color:var(--muted);font-size:9px}.versus{font-size:11px;font-weight:800;color:var(--gold);background:rgba(255,198,109,.12);padding:7px;border-radius:50%}.compare-bars>div{display:grid;grid-template-columns:90px 1fr 50px;align-items:center;gap:10px;margin-top:13px;font-size:10px;color:#a9bad3}.compare-bars i{height:7px;background:rgba(255,255,255,.08);border-radius:5px;display:flex;overflow:hidden}.compare-bars b{height:100%;display:block;background:var(--teal)}.compare-bars b+ b{background:var(--gold)}.compare-bars small{font-size:9px;color:var(--teal)}.how-section{max-width:930px;margin:0 auto;padding:0 28px 100px}.centered{text-align:center;display:block}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:42px}.step{padding:23px;border:1px solid var(--line);border-radius:13px;background:rgba(14,29,51,.55)}.step>span{color:var(--teal);font-size:11px}.step h3{margin:10px 0 3px;font-size:15px}.step p{color:var(--muted);font-size:11px;margin:0}footer{border-top:1px solid var(--line);max-width:1220px;margin:auto;padding:37px 28px;display:flex;align-items:center;justify-content:space-between;color:var(--muted)}footer .brand-name{font-size:18px}footer .brand-mark{transform:scale(.75);transform-origin:right center;width:23px}footer p{font-size:10px;margin:4px 0 0}.footer-links{display:flex;gap:22px;font-size:11px}.footer-links a:hover{color:var(--teal)}.footer-note{font-size:10px}.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(2,8,19,.7);backdrop-filter:blur(8px);z-index:10;place-items:center;padding:20px}.modal-backdrop.open{display:grid}.modal{width:min(540px,100%);background:#10233e;border:1px solid rgba(126,174,226,.25);border-radius:18px;padding:27px;position:relative;box-shadow:0 30px 90px #0008}.modal-close{position:absolute;top:12px;left:15px;border:0;background:transparent;color:#a9b8d0;font-size:23px;cursor:pointer}.modal h3{font-size:23px;margin:0}.modal-sub{color:var(--muted);font-size:11px}.modal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}.modal-stat{background:rgba(2,13,28,.35);border:1px solid var(--line);padding:12px;border-radius:10px}.modal-stat small{display:block;color:var(--muted);font-size:9px}.modal-stat strong{font-size:16px}.modal-source{margin-top:17px;color:#7588a8;font-size:10px}.empty-state{grid-column:1/-1;text-align:center;color:var(--muted);padding:45px;border:1px dashed var(--line);border-radius:14px}@media(max-width:850px){.nav-links{display:none}.hero{grid-template-columns:1fr;padding-top:55px}.hero-visual{order:-1;height:330px}.map-card{height:285px}.iran-map{height:190px}.float-card{transform:scale(.85)}.score-card{top:0}.air-card{bottom:0}.metrics-strip{grid-template-columns:repeat(2,1fr);gap:18px}.metrics-strip div:nth-child(2){border:0}.city-grid{grid-template-columns:repeat(2,1fr)}.compare-section{margin:10px 28px 75px;padding:45px 30px;grid-template-columns:1fr;gap:35px}.steps{grid-template-columns:1fr}footer{flex-wrap:wrap;gap:20px}}@media(max-width:540px){.topbar{padding:0 18px}.nav-cta{padding:9px 12px;font-size:11px}.hero{padding:38px 18px 55px}.hero-visual{height:285px}.map-card{width:100%;padding:15px;height:245px}.map-bottom{gap:9px;font-size:8px}.section{padding:75px 18px}.section-heading{display:block}.section-heading h2{font-size:29px}.ghost-btn{display:inline-block;margin-top:20px}.search-hint{display:none}.filter-row{overflow:auto;padding-bottom:6px;white-space:nowrap}.result-count{display:none}.city-grid{grid-template-columns:1fr}.compare-section{margin-left:18px;margin-right:18px;padding:35px 21px}.compare-copy h2{font-size:32px}.compare-bars>div{grid-template-columns:78px 1fr 45px}footer{padding:30px 18px;display:block}.footer-links{margin:22px 0}.footer-note{font-size:9px}.trust-row{margin-top:32px}}\n*** Add File: app.js
const cities=[
 {id:'tehran',name:'تهران',province:'استان تهران',tag:'پایتخت پرانرژی',score:'۷.۲',cover:'cover-tehran',air:'ناسالم برای گروه‌های حساس',cost:'زیاد',temp:'۱۸°',population:'۹.۰M',filter:['popular','work'],desc:'مرکز فرصت‌های شغلی، دانشگاه‌ها و خدمات تخصصی ایران.'},
 {id:'rasht',name:'رشت',province:'استان گیلان',tag:'شهر باران و زندگی',score:'۸.۴',cover:'cover-rasht',air:'پاک',cost:'متوسط',temp:'۱۶°',population:'۷۱۵K',filter:['popular','air'],desc:'شهری سبز و زنده با هزینه‌ی متعادل و کیفیت هوای عالی.'},
 {id:'shiraz',name:'شیراز',province:'استان فارس',tag:'فرهنگ، آرامش، زندگی',score:'۸.۱',cover:'cover-shiraz',air:'مطلوب',cost:'متوسط',temp:'۲۱°',population:'۱.۹M',filter:['popular','air'],desc:'ترکیبی از تاریخ، فرهنگ و ریتم آرام زندگی شهری.'},
 {id:'isfahan',name:'اصفهان',province:'استان اصفهان',tag:'قلب تاریخی ایران',score:'۷.۹',cover:'cover-isfahan',air:'متوسط',cost:'متوسط',temp:'۱۹°',population:'۲.۲M',filter:['popular','work'],desc:'شهر هنر و صنعت با زیرساخت‌های شهری گسترده.'},
 {id:'mashhad',name:'مشهد',province:'استان خراسان رضوی',tag:'شهر همیشه بیدار',score:'۷.۶',cover:'cover-mashhad',air:'مطلوب',cost:'اقتصادی',temp:'۱۷°',population:'۳.۴M',filter:['budget','work'],desc:'بازاری بزرگ، گردشگری پررونق و هزینه‌ی زندگی اقتصادی‌تر.'},
 {id:'tabriz',name:'تبریز',province:'استان آذربایجان شرقی',tag:'نوآوری در شمال‌غرب',score:'۷.۸',cover:'cover-tabriz',air:'پاک',cost:'اقتصادی',temp:'۱۴°',population:'۱.۶M',filter:['budget','air'],desc:'شهری صنعتی و نوآور با آب‌وهوای خنک و پاک.'}
];
const grid=document.getElementById('cityGrid'), input=document.getElementById('searchInput'), count=document.getElementById('resultCount');
function render(list=cities){count.textContent=`${list.length} شهر`;grid.innerHTML=list.length?list.map(c=>`<article class="city-card" onclick="showCity('${c.id}')"><div class="city-cover ${c.cover}"><span class="city-tag">${c.tag}</span></div><div class="city-head"><div><h3>${c.name}</h3><p>${c.province}</p></div><div class="score"><b>${c.score}</b><small> / ۱۰</small></div></div><div class="city-stats"><div><small>کیفیت هوا</small><strong class="${c.air==='پاک'?'stat-good':''}">${c.air}</strong></div><div><small>هزینه زندگی</small><strong class="${c.cost==='اقتصادی'?'stat-good':c.cost==='زیاد'?'stat-warm':''}">${c.cost}</strong></div><div><small>جمعیت</small><strong>${c.population}</strong></div></div></article>`).join(''):'<div class="empty-state">شهری با این مشخصات پیدا نشد. جست‌وجوی دیگری امتحان کن.</div>'}
function filterCities(type='all'){const q=input.value.trim();let list=cities.filter(c=>(type==='all'||c.filter.includes(type))&&(!q||`${c.name} ${c.province} ${c.tag} ${c.air} ${c.cost}`.includes(q)));render(list)}
document.querySelectorAll('.filter').forEach(btn=>btn.addEventListener('click',()=>{document.querySelectorAll('.filter').forEach(b=>b.classList.remove('active'));btn.classList.add('active');filterCities(btn.dataset.filter)}));
input.addEventListener('input',()=>filterCities(document.querySelector('.filter.active').dataset.filter));
document.addEventListener('keydown',e=>{if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='k'){e.preventDefault();input.focus()}});
function showCity(id){const c=cities.find(x=>x.id===id);document.getElementById('modalContent').innerHTML=`<span class="section-kicker">پروفایل شهر</span><h3>${c.name}</h3><div class="modal-sub">${c.province} · ${c.tag}</div><div class="modal-grid"><div class="modal-stat"><small>شاخص زندگی</small><strong>${c.score} / ۱۰</strong></div><div class="modal-stat"><small>کیفیت هوای امروز</small><strong class="${c.air==='پاک'?'stat-good':''}">${c.air}</strong></div><div class="modal-stat"><small>هزینه‌ی زندگی</small><strong>${c.cost}</strong></div><div class="modal-stat"><small>دمای فعلی</small><strong>${c.temp}</strong></div></div><p class="modal-source">${c.desc}</p><div class="modal-source">منابع: مرکز آمار ایران، داده‌های شهری و ایستگاه‌های سنجش · آخرین به‌روزرسانی: مرداد ۱۴۰۵</div>`;document.getElementById('modalBackdrop').classList.add('open')}
function closeModal(e){if(!e||e.target.id==='modalBackdrop'||e.currentTarget.classList.contains('modal-close'))document.getElementById('modalBackdrop').classList.remove('open')}
function openCompare(){document.getElementById('compare').scrollIntoView({behavior:'smooth'})}
render();