:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #0ea5e9;
    --accent: #01ff99;
    --dark: #0f172a;
    --light: #f8fafc;
    --gray: #94a3b8;
    --success: #10b981;
    --glass: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* ریست و فونت */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vazirmatn', sans-serif; }

body {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: var(--light);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background:
      radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.1) 0%, transparent 20%),
      radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.1) 0%, transparent 20%),
      radial-gradient(circle at 50% 10%, rgba(139, 92, 246, 0.1) 0%, transparent 20%);
    z-index: -1;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ───────────────── هدر چسبان + خط جداکننده ───────────────── */
.site-header{
    position: sticky;           /* همیشه بالای صفحه بماند */
    top: 0;
    z-index: 998;               /* بالاتر از محتوا، پایین‌تر از منوی موبایل/اوورلی */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(15, 23, 42, 0.72);
    border-bottom: 1px solid rgba(255,255,255,0.12); /* خط جداکننده */
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

/* ناوبری داخل هدر */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0;            /* کمی جمع‌وجورتر برای هدر چسبان */
    position: relative;
    z-index: 100;
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; z-index: 10; }

.logo-img{
    width: 65px; height: 65px;
}

.logo-text{ font-size: 24px; font-weight: 800; background: linear-gradient(to left, var(--primary), var(--secondary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }

.nav-links{ display: flex; gap: 30px; align-items: center; }
.nav-links a{
    color: var(--light); text-decoration: none; font-weight: 500; position: relative; padding: 5px 0; transition: all 0.3s ease;
    font-size: 1.1rem; display: flex; align-items: center; gap: 8px;
}
.nav-links a::after{
    content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s ease;
}
.nav-links a:hover{ color: var(--secondary); }
.nav-links a:hover::after{ width: 100%; }

/* آیکون لیمو با ماسک */
.icon-mask{
    width: 1em; height: 1em; display: inline-block; background-color: currentColor;
    -webkit-mask: url('LimouAI.svg') no-repeat center / contain;
            mask: url('LimouAI.svg') no-repeat center / contain;
    vertical-align: middle;
}
.icon-mask-mobile{
    width: 1em; height: 1em; display: inline-block; margin-left: 10px; background-color: currentColor;
    -webkit-mask: url('LimouAI.svg') no-repeat center / contain;
            mask: url('LimouAI.svg') no-repeat center / contain;
    vertical-align: middle;
}
.feature-icon .icon-mask, .icon-mask--lg{ width: 40px; height: 40px; }

/* قهرمان */
.hero{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 90vh; padding: 60px 0; position: relative; text-align: center;
}
.hero-content{ max-width: 800px; position: relative; z-index: 2; }

h1{ font-size: 3.5rem; line-height: 1.2; margin-bottom: 20px; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.highlight{ background: linear-gradient(90deg, var(--accent), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; display: inline-block; }

.subtitle{ font-size: 1.4rem; color: var(--gray); margin-bottom: 40px; line-height: 1.6; max-width: 700px; margin-left: auto; margin-right: auto; }

/* دکمه CTA (magic-button شما) */
.cta-button{ display: inline-block; background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
    color: white; padding: 15px 40px; font-size: 1.2rem; font-weight: 600; border-radius: 50px; text-decoration: none;
    transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3); border: none; cursor: pointer; position: relative; overflow: hidden; margin-top: 20px; z-index: 5; }
.cta-button::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s; }
.cta-button:hover::before{ left: 100%; }
.cta-button:hover{ transform: translateY(-5px); box-shadow: 0 15px 25px rgba(139, 92, 246, 0.4); }

.features{ padding: 100px 0; position: relative; }
.section-title{
    text-align: center; font-size: 2.5rem; margin-bottom: 70px; display: flex; position: relative; justify-content: center;
}
.section-title::after{
    content: ''; position: absolute; bottom: -10px; width: 60px; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px;
}

.features-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
.feature-card{
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; padding: 40px 30px; text-align: center; transition: all 0.4s ease;
    backdrop-filter: blur(10px); position: relative; overflow: hidden; z-index: 2;
}
.feature-card::before{
    content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, var(--primary), var(--accent), var(--secondary));
    z-index: -1; border-radius: 22px; opacity: 0; transition: opacity 0.3s ease;
}
.feature-card:hover::before{ opacity: 1; }
.feature-card:hover{ transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }

.feature-icon{
    width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px;
    font-size: 30px; color: white; box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}
.feature-title{ font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; }
.feature-desc{ color: var(--gray); line-height: 1.7; }

/* آمار */
.stats{ padding: 80px 0; background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.9)); position: relative; overflow: hidden; }
.stats::before{
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjEiIGZpbGw9IiMyNTYzZWIiIGZpbGwtb3BhY2l0eT0iMC4xIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIi8+PC9zdmc+');
    opacity: 0.2; z-index: 1;
}
.stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; position: relative; z-index: 2; }
.stat-item{ text-align: center; padding: 30px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 15px; backdrop-filter: blur(5px); transition: all 0.3s ease; }
.stat-item:hover{ transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.stat-number{
    font-size: 3rem; font-weight: 800; background: linear-gradient(to right, var(--primary), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px;
}
.stat-text{ font-size: 1.2rem; color: var(--gray); }

/* فوتر */
footer{ padding: 60px 0 30px; color: var(--gray); border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative; }
.footer-content{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-column h3{ font-size: 1.3rem; margin-bottom: 25px; position: relative; padding-bottom: 10px; }
.footer-column h3::after{ content: ''; position: absolute; bottom: 0; right: 0; width: 50px; height: 3px; background: var(--primary); border-radius: 2px; }
.footer-links{ list-style: none; }
.footer-links li{ margin-bottom: 15px; }
.footer-links a{ color: var(--gray); text-decoration: none; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; }
.footer-links a:hover{ color: var(--secondary); transform: translateX(5px); }
.footer-links a i{ font-size: 14px; }
.footer-bottom{ text-align: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.9rem; }

.social-links{ display: flex; gap: 15px; margin-top: 20px; }
.social-links a{
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--glass); border: 1px solid var(--glass-border); color: var(--light); text-decoration: none; transition: all 0.3s ease;
}
.social-links a:hover{ background: var(--primary); transform: translateY(-5px); }

/* پیام‌رسان‌ها */
.messenger-links{ display: flex; flex-wrap: wrap; gap: 12px; }
.messenger-btn{
    display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: 12px;
    text-decoration: none; color: var(--light);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(8px);
}
.messenger-btn:hover{ transform: translateY(-3px); background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.35); }
.messenger-btn img{ width: 30px; height: 30px; object-fit: contain; border-radius: 0px; }

/* منوی موبایل */
.mobile-messengers-title{ color: var(--gray); font-size: 0.95rem; margin: 12px 2px 2px; opacity: 0.9; }
.mobile-messenger-icon{ width: 22px; height: 22px; object-fit: contain; margin-left: 10px; }

/* آیکن‌های شناور */
@keyframes float{
  0%{ transform: translate(0,0) rotate(0) } 25%{ transform: translate(5px,-15px) rotate(5deg) }
  50%{ transform: translate(10px,5px) rotate(0) } 75%{ transform: translate(5px,10px) rotate(-5deg) }
  100%{ transform: translate(0,0) rotate(0) }
}
@keyframes pulse{ 0%{ transform: scale(1); opacity: .3 } 50%{ transform: scale(1.2); opacity: .6 } 100%{ transform: scale(1); opacity: .3 } }

.floating-icon{ position: absolute; color: rgba(148,163,184,0.3); font-size: 28px; animation: float 8s infinite ease-in-out; z-index: 1; opacity: 0.7; transition: all .5s ease; }
.floating-icon:hover{ color: var(--accent); opacity: 1; transform: scale(1.5)!important; z-index: 10; animation-play-state: paused; }
.floating-pulse{ animation: pulse 4s infinite ease-in-out, float 8s infinite ease-in-out; }

.floating-icons-container{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; }

/* دکمه منوی موبایل */
.mobile-menu-btn{
  display: none; width: 48px; height: 48px; padding: 0; border: none;
  border-radius: 10px; background: #1e293b; color: white; cursor: pointer; z-index: 100;
  -webkit-appearance: none; appearance: none;
}
.mobile-menu-btn i{ display: block; font-size: 22px; line-height: 1; pointer-events: none; }

/* فقط در موبایل نمایش */
@media (max-width: 768px){
  .nav-links{ display: none; }
  .mobile-menu-btn{ display: grid; place-items: center; }
  h1{ font-size: 2.2rem; }
  .logo-text{ font-size: 20px; }
  .feature-card{ padding: 30px 20px; }
  .feature-icon{ width: 70px; height: 70px; font-size: 25px; }
}

@media (max-width: 900px){
  h1{ font-size: 2.8rem; }
  .section-title{ font-size: 2rem; }
  .subtitle{ font-size: 1.2rem; }
}

/* منوی موبایل و اوورلی (روی همه چیز قرار می‌گیرد) */
.mobile-menu{
    position: fixed; top: 0; left: -100%; width: 280px; height: 100vh;
    background: var(--dark); z-index: 1000; padding: 80px 20px 20px;
    display: flex; flex-direction: column; gap: 15px; transition: left 0.4s ease;
    box-shadow: 5px 0 15px rgba(0,0,0,0.5); overflow-y: auto;
}
.mobile-menu.active{ left: 0; }
.mobile-menu a{
    color: var(--light); text-decoration: none; font-size: 1.2rem; padding: 12px 15px;
    border-radius: 15px; transition: all 0.3s ease; background: rgba(30,41,59,0.7);
    margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.mobile-menu a i{ margin-left: 10px; }
.mobile-menu a:hover{ background: var(--primary); color: white; }
.mobile-menu-close{
    position: absolute; top: 25px; right: 20px; background: transparent; border: none; color: white; font-size: 24px; cursor: pointer;
}
.overlay{
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 999; display: none;
}
.overlay.active{ display: block; }

#installBtn{
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #4361ee;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  font-size: 1.2rem;
  animation: pulse 2s infinite;
}


/* دکمه جادویی شما */
.magic-button{
    position: relative; padding: 22px 55px; font-size: 24px; font-weight: bold; color: #003366;
    background: transparent; border: 2px solid #0077ff; border-radius: 50px; cursor: pointer; overflow: hidden; transition: color .4s ease; z-index: 1;
}
.magic-button::before{
    content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, #0077ff, #00ffaa); transition: all .5s ease; z-index: -1; border-radius: 50px;
}
.magic-button:hover::before{ right: -100%; }
.magic-button:hover{ color: white; }