/* ==================== GLOBAL LANDING STYLES ==================== */
body { background: #f8fbfa; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { font-size: 2.2rem; color: #0f2b3d; margin-bottom: 10px; font-weight: 800; }
.section-header p { color: #7a96a0; font-size: 1.1rem; }

/* ==================== 1. HERO SECTION ==================== */
.hero-section { padding: 80px 0 60px; text-align: center; background: radial-gradient(circle at top, #f0f7f4 0%, #f8fbfa 100%); }
.hero-content { max-width: 800px; margin: 0 auto; }
.badge-pill { display: inline-block; background: white; padding: 8px 20px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; color: #1e6f5c; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 25px; border: 1px solid #eef2f6; }
.hero-section h1 { font-size: 3.5rem; color: #0f2b3d; font-weight: 800; line-height: 1.3; margin-bottom: 20px; }
.text-gradient {
    background: linear-gradient(135deg, #1e6f5c, #2e7d32);
    
    /* نسخه‌های مخصوص سافاری و کروم */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* نسخه استاندارد برای سایر مرورگرها و رفع ارور ویرایشگر */
    background-clip: text;
    color: transparent;
    
    /* برای اطمینان از اعمال درست در برخی حالت‌ها */
    display: inline-block; 
}
.hero-section p { font-size: 1.2rem; color: #4a6f7c; line-height: 1.8; margin-bottom: 40px; }
.hero-actions { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; }
.btn-primary { background: #1e6f5c; color: white; padding: 14px 35px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 10px; transition: 0.3s; box-shadow: 0 8px 20px -8px rgba(30,111,92,0.6); }
.btn-primary:hover { background: #0e5444; transform: translateY(-2px); box-shadow: 0 12px 25px -8px rgba(30,111,92,0.8); }
.btn-secondary { background: white; color: #1e6f5c; padding: 14px 35px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1.1rem; border: 2px solid #eef2f6; transition: 0.3s; }
.btn-secondary:hover { border-color: #1e6f5c; background: #f4f9f7; }
.hero-trust { display: flex; justify-content: center; gap: 30px; font-size: 0.9rem; color: #7a96a0; }
.hero-trust i { color: #2e7d32; margin-left: 5px; }

/* ==================== 2. SERVICES SECTION ==================== */
.features-section { padding: 80px 0; background: white; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.feature-card { background: #f8fbfa; padding: 40px 30px; border-radius: 24px; border: 1px solid #eef2f6; transition: all 0.3s ease; text-align: right; }
.feature-card:hover { background: white; border-color: #cbdde0; box-shadow: 0 20px 40px -15px rgba(0,0,0,0.05); transform: translateY(-5px); }
.feature-icon { width: 60px; height: 60px; background: #e5f4ee; color: #1e6f5c; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 20px; }
.feature-card h3 { color: #0f2b3d; font-size: 1.3rem; margin-bottom: 12px; }
.feature-card p { color: #7a96a0; font-size: 0.95rem; line-height: 1.7; }

/* ==================== 3. PLANS SECTION ==================== */
.btn-outline-sm { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; border: 1px solid #cbdde0; background: white; color: #4a6f7c; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.2s; }
.btn-outline-sm:hover { border-color: #1e6f5c; color: #1e6f5c; background: #f4f9f7; }

/* ==================== PLANS SECTION ==================== */
.plans-section { 
    padding: 80px 0; 
    background: #f8fbfa; 
}

/* وسط چین کردن تایتل بخش */
.plans-section .section-header {
    text-align: center !important;
    margin-bottom: 40px;
}

.plans-section .section-header h2 {
    text-align: center !important;
}

/* چیدمان کارت‌ها */
.plans-grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; /* این دستور کارت‌های ردیف دوم را دقیقا وسط چین می‌کند */
    gap: 30px; 
    align-items: stretch; 
}

/* ظاهر هر کارت */
.plan-card { 
    /* عرض ثابت برای هر کارت تا همه هم‌اندازه باشند */
    width: 320px; 
    display: flex;
    flex-direction: column;
    background: white; 
    border-radius: 24px; 
    padding: 35px 30px; 
    text-align: right; /* تراز راست برای فارسی */
    border: 1px solid #eef2f6; 
    position: relative; 
    transition: 0.3s; 
}

.plan-card:hover { 
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.08); 
    transform: translateY(-5px); 
}

.plan-card.popular { 
    border: 2px solid #1e6f5c; 
    transform: scale(1.02); 
}

.plan-card.popular:hover { 
    transform: scale(1.02) translateY(-5px); 
}



.popular-badge { position: absolute; top: -15px; right: 30px; background: #ff8c42; color: white; padding: 6px 20px; border-radius: 30px; font-size: 0.8rem; font-weight: bold; box-shadow: 0 4px 10px rgba(255,140,66,0.4); }
/* استایل کارت ویژه */
.plan-card.featured-card {
    border: 2px solid #ff8c42; /* خط دور نارنجی */
    box-shadow: 0 15px 35px -10px rgba(255,140,66,0.15); /* سایه ملایم نارنجی */
}

/* اگر می‌خواهید کارت ویژه کمی بزرگ‌تر و بالاتر از بقیه باشد */
.plan-card.featured-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(255,140,66,0.3);
}
/* ==================== PLANS HEADER ==================== */
.plans-header {
    text-align: center;
    margin-bottom: 50px;
}

.plans-header h2 {
    font-size: 2.2rem;
    color: #0f2b3d;
    font-weight: 800;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

/* خط سبز زیر تایتل */
.plans-header h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #1e6f5c;
    border-radius: 3px;
}

.plans-header p {
    color: #7a96a0;
    font-size: 1.1rem;
    margin-top: 25px;
}

/* ==================== FIX PLAN ICONS ==================== */
.plan-icon-wrapper {
    width: 65px;
    height: 65px;
    background: #eef7f3; /* رنگ سبز بسیار روشن */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    
    /* این خط باعث می‌شود آیکون دقیقاً در سمت راست (شروع کادر) قرار بگیرد */
    align-self: flex-start; 
}

.plan-icon-wrapper i {
    font-size: 2rem;
    color: #1e6f5c;
}

.plan-name { font-size: 1.4rem; font-weight: 800; color: #0f2b3d; margin-bottom: 10px; }
.plan-price { font-size: 1.8rem; font-weight: 800; color: #0f2b3d; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px dashed #eef2f6;}
.plan-price small { font-size: 0.9rem; font-weight: 400; color: #7a96a0; }

.plan-features { list-style: none; padding: 0; margin: 0 0 30px 0; flex-grow: 1; }
.plan-features li { padding: 5px 0; color: #4a6f7c; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
.plan-features i { color: #2e7d32; font-size: 1.1rem; }

.btn-order { 
    display: block; 
    width: 100%; 
    padding: 14px; 
    background: #1e6f5c; /* رنگ سبز یکدست */
    color: white; 
    border-radius: 12px; 
    text-decoration: none; 
    font-weight: bold; 
    text-align: center;
    border: none; 
    transition: 0.2s; 
}
.btn-order:hover { background: #0e5444; }

/* ==================== 4. ABOUT SECTION ==================== */
.about-section { padding: 80px 0; background: white; }
.about-story { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-bottom: 50px; }
.about-text h3 { color: #0f2b3d; font-size: 1.4rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.about-text p { color: #4a6f7c; line-height: 1.9; font-size: 1rem; margin-bottom: 15px; text-align: justify; }
.about-stats-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.stat-box { background: #f8fbfa; border: 1px solid #eef2f6; padding: 20px; border-radius: 16px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.stat-box h4 { font-size: 1.8rem; color: #1e6f5c; margin-bottom: 5px; font-weight: 800; }
.stat-box span { color: #7a96a0; font-size: 0.85rem; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 50px; }
.value-card { background: #f4f9f7; padding: 30px; border-radius: 20px; text-align: center; border: 1px solid #e5f4ee; }
.value-card i { font-size: 2.5rem; color: #1e6f5c; margin-bottom: 15px; }
.value-card h4 { font-size: 1.2rem; color: #0f2b3d; margin-bottom: 10px; }
.value-card p { color: #4a6f7c; font-size: 0.9rem; line-height: 1.7; }

.awards-team-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: #f8fbfa; padding: 40px; border-radius: 24px; margin-bottom: 0; } /* مارجین پایین صفر شد */
.awards-box h4, .team-box h4 { font-size: 1.2rem; color: #0f2b3d; margin-bottom: 20px; }
.badges-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-badge { display: inline-flex; align-items: center; gap: 8px; background: white; border: 1px solid #cbdde0; padding: 8px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: #4a6f7c; }
.trust-badge i { color: #1e6f5c; font-size: 1.1rem; }
.team-box ul { list-style: none; padding: 0; margin: 0; }
.team-box li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #4a6f7c; font-size: 0.95rem; }
.team-box li i { color: #2e7d32; }

/* ==================== 5. CONTACT SECTION ==================== */
.contact-section { padding: 80px 0; background: #f8fbfa; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.contact-card { 
    background: white; 
    padding: 30px; 
    border-radius: 20px; 
    border: 1px solid #eef2f6; 
    transition: 0.3s; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; /* تراز به سمت راست */
    text-align: right; 
}
.contact-card:hover { border-color: #cbdde0; box-shadow: 0 15px 30px -10px rgba(0,0,0,0.05); transform: translateY(-3px); }
.contact-icon { width: 50px; height: 50px; background: #e5f4ee; color: #1e6f5c; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 15px; }
.contact-card h3 { color: #0f2b3d; font-size: 1.1rem; margin-bottom: 10px; font-weight: 800; }
.contact-value { color: #1e6f5c; font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
.contact-hours { color: #7a96a0; font-size: 0.8rem; display: flex; align-items: center; gap: 5px; margin-top: auto; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
    .about-story, .awards-team-section { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .hero-section h1 { font-size: 2.2rem; }
    .hero-actions { flex-direction: column; }
    .values-grid { grid-template-columns: 1fr; }
    .btn-outline-sm { position: static !important; margin-bottom: 20px; display: inline-flex; }
    .hero-trust { flex-direction: column; gap: 10px; }
}

/* ==================== TOP BANNER ==================== */
.top-banner {
    background: linear-gradient(90deg, #0f2b3d, #1e6f5c);
    color: white;
    padding: 10px 0;
    font-size: 0.85rem;
    font-weight: 500;
}

.top-banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.banner-text span {
    letter-spacing: 0.5px;
}

.banner-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
    padding: 6px 18px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: bold;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.banner-btn:hover {
    background: white;
    color: #1e6f5c;
    border-color: white;
}

/* رسپانسیو برای موبایل */
@media (max-width: 768px) {
    .top-banner-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .banner-text {
        flex-direction: column;
        gap: 5px;
    }
    
    .banner-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== 1. HERO SECTION ==================== */
.hero-section { 
    padding: 100px 0 80px; 
    text-align: center; 
    position: relative;
    overflow: hidden; /* جلوگیری از بیرون زدن آیکون‌ها */
    background-color: #f8fbfa;
    /* ایجاد پترن شبکه‌ای و گرادیانت‌های نرم */
    background-image: 
        radial-gradient(at 80% 0%, rgba(30,111,92,0.08) 0px, transparent 50%),
        radial-gradient(at 20% 100%, rgba(46,125,50,0.06) 0px, transparent 50%),
        radial-gradient(#d1ded9 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 30px 30px;
}

/* لایه محتوا برای اینکه روی آیکون‌ها قرار بگیرد */
.hero-content { 
    max-width: 800px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 10; 
}

/* --- افکت‌های پس‌زمینه --- */
.hero-bg-elements {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; /* کاربر نتواند روی آیکون‌ها کلیک کند */
    z-index: 1;
}

.hero-float-icon {
    position: absolute;
    color: #1e6f5c;
    opacity: 0.05; /* شفافیت بسیار بالا */
    font-size: 8rem;
    animation: floatAnimation 6s ease-in-out infinite;
}

/* موقعیت و تاخیر انیمیشن هر آیکون */
.icon-1 { top: 10%; right: 5%; font-size: 10rem; animation-delay: 0s; }
.icon-2 { bottom: 15%; left: 8%; font-size: 7rem; animation-delay: 1s; }
.icon-3 { top: 30%; left: 15%; font-size: 6rem; animation-delay: 2s; }
.icon-4 { bottom: 10%; right: 20%; font-size: 9rem; animation-delay: 3s; }
.icon-5 { top: 50%; right: 15%; font-size: 5rem; animation-delay: 4s; }

@keyframes floatAnimation {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* ==================== PLANS HEADER ACTION BUTTON ==================== */
.plans-header-action {
    position: absolute;
    left: 15px;
    top: 10px;
}

/* رسپانسیو برای موبایل و تبلت */
@media (max-width: 992px) {
    .plans-header-action {
        position: static; /* از حالت شناور خارج می‌شود */
        text-align: center;
        margin-bottom: 25px; /* فاصله از کارت‌های زیرین */
        margin-top: 15px;
    }
}

/* ==================== FREE PLAN BANNER ==================== */
.free-plan-banner {
    background: linear-gradient(135deg, #e5f4ee, #f4f9f7);
    border: 2px dashed #1e6f5c; /* حاشیه خط چین برای جلب توجه */
    border-radius: 24px;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
    box-shadow: 0 10px 30px -10px rgba(30,111,92,0.1);
}

.free-plan-info h3 {
    color: #0f2b3d;
    font-size: 1.4rem;
    margin-bottom: 8px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.free-plan-info p {
    color: #4a6f7c;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.free-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.free-plan-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2c4b5a;
    font-weight: 600;
    font-size: 0.9rem;
}

.free-plan-features i {
    color: #2e7d32;
}

.free-plan-action {
    flex-shrink: 0;
}

.btn-free-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1e6f5c;
    color: white;
    padding: 14px 30px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px -8px rgba(30,111,92,0.6);
    white-space: nowrap;
}

.btn-free-cta:hover {
    background: #0e5444;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px -8px rgba(30,111,92,0.8);
}

/* رسپانسیو برای موبایل */
@media (max-width: 768px) {
    .free-plan-banner {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }
    
    .free-plan-info h3 {
        justify-content: center;
        font-size: 1.2rem;
    }
    
    .free-plan-features {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .btn-free-cta {
        width: 100%;
    }
}