:root {
    --webnexon-dark-bg: #030712;
    --webnexon-card-bg: rgba(255, 255, 255, 0.03);
    --webnexon-card-border: rgba(255, 255, 255, 0.08);
    --webnexon-card-hover-border: rgba(59, 130, 246, 0.4);
    --webnexon-primary-blue: #3b82f6; 
    --webnexon-light-blue: #60a5fa; 
    --webnexon-text-gray: #9ca3af; 
    --webnexon-icon-bg-gradient: rgba(29, 78, 216, 0.15); 
    --webnexon-footer-btn-bg: rgba(255, 255, 255, 0.05);
    --webnexon-footer-btn-hover-bg: #2563eb; 
    --webnexon-header-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
    --webnexon-header-dot-shadow: 0 0 12px 4px rgba(96, 165, 250, 0.8);
    --webnexon-gradient-line: linear-gradient(90deg, transparent, var(--webnexon-primary-blue), var(--webnexon-light-blue), var(--webnexon-primary-blue), transparent);
    --webnexon-card-shadow: 0px 20px 50px rgba(0, 0, 0, 0.3);
    --webnexon-card-title-color: #ffffff;
    --webnexon-card-desc-color: var(--webnexon-text-gray);
    --webnexon-section-title-color: #ffffff;
    --webnexon-font-family: 'Vazirmatn', Tahoma, sans-serif;
}

.webnexon-section-wrapper {
    background-color: var(--webnexon-dark-bg);
    background-image: 
        radial-gradient(circle at 50% -20%, var(--webnexon-icon-bg-gradient) 0%, transparent 50%),
        radial-gradient(circle at 10% 80%, rgba(16, 185, 129, 0.02) 0%, transparent 40%);
    padding: 80px 20px;
    direction: rtl;
    font-family: var(--webnexon-font-family);
    overflow: hidden;
    position: relative;
    width: 100%; 
    box-sizing: border-box;
}

.webnexon-header-container { 
    text-align: center; 
    margin-bottom: 60px; 
    position: relative; 
    padding: 0 15px; 
}

.webnexon-section-title { 
    color: var(--webnexon-section-title-color); 
    font-size: 3rem; 
    font-weight: 700; 
    margin: 0 0 15px 0; 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); 
}

.webnexon-title-glow-line { 
    width: 160px; 
    height: 3px; 
    background: var(--webnexon-gradient-line); 
    margin: 0 auto; 
    position: relative; 
    box-shadow: var(--webnexon-header-shadow);
    border-radius: 2px; 
}

.webnexon-title-glow-line::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    right: -15px; 
    width: 12px; 
    height: 12px; 
    background-color: #93c5fd; 
    box-shadow: var(--webnexon-header-dot-shadow);
    border-radius: 50%;
}

/* اصلاح چیدمان قطعی برای قرارگیری هر ۳ کارت در یک ردیف متقارن */
.webnexon-cards-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* ۳ ستون همتراز برای ۳ کارت */
    gap: 30px; 
    max-width: 1300px; 
    margin: 0 auto; 
    padding: 0 20px; 
    box-sizing: border-box;
}

.webnexon-service-card {
    background: var(--webnexon-card-bg);
    border: 1px solid var(--webnexon-card-border);
    border-radius: 24px;
    padding: 45px 35px; 
    position: relative;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 420px; 
    box-shadow: var(--webnexon-card-shadow);
    box-sizing: border-box; 
}

.webnexon-service-card:hover { 
    transform: translateY(-10px); 
    border-color: var(--webnexon-card-hover-border); 
    box-shadow: 0 0 35px rgba(59, 130, 246, 0.5), var(--webnexon-card-shadow); 
}

.webnexon-card-content { 
    position: relative; 
    z-index: 2; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
}

.webnexon-card-icon-box { 
    width: 200px; 
    height: 140px; 
    margin-bottom: 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative;
    overflow: hidden; 
}

.webnexon-svg-icon {
    max-width: 100%;
    max-height: 100%;
    display: block; 
}

.webnexon-card-title { 
    color: var(--webnexon-card-title-color); 
    font-size: 24px; 
    font-weight: 700; 
    margin-bottom: 18px; 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.webnexon-card-desc { 
    color: var(--webnexon-card-desc-color); 
    font-size: 14.5px; 
    line-height: 1.9; 
    margin: 0; 
}

.webnexon-card-footer { 
    margin-top: 30px; 
    width: 100%; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    position: relative;
    z-index: 2;
}

.webnexon-arrow-btn { 
    width: 46px; 
    height: 46px; 
    border-radius: 50%; 
    background: var(--webnexon-footer-btn-bg); 
    border: 1px solid var(--webnexon-card-border); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #ffffff; 
    transition: all 0.3s ease; 
    cursor: pointer; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

.webnexon-service-card:hover .webnexon-arrow-btn { 
    background: var(--webnexon-footer-btn-hover-bg); 
    transform: translateX(-6px) scale(1.05); 
    border-color: var(--webnexon-primary-blue); 
}

/* Responsive Adjustments */
@media (max-width: 1440px) {
    .webnexon-section-title { font-size: 2.8rem; }
    .webnexon-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 25px; }
    .webnexon-service-card { padding: 40px 25px; min-height: 390px; }
    .webnexon-card-title { font-size: 22px; }
}

@media (max-width: 992px) {
    .webnexon-section-title { font-size: 2.5rem; }
    /* در تبلت چیدمان به ۲ ستون تبدیل می‌شود */
    .webnexon-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .webnexon-service-card { padding: 35px 20px; min-height: 360px; }
    .webnexon-card-title { font-size: 20px; }
}

@media (max-width: 768px) {
    .webnexon-section-wrapper { padding: 60px 15px; }
    .webnexon-header-container { margin-bottom: 40px; }
    .webnexon-section-title { font-size: 2.2rem; }
    .webnexon-title-glow-line { width: 120px; height: 2px; }
    .webnexon-title-glow-line::after { width: 10px; height: 10px; right: -10px; }
    /* در موبایل کارت‌ها به صورت تک‌ستونه زیر هم قرار می‌گیرند */
    .webnexon-cards-grid { grid-template-columns: 1fr; gap: 20px; }
    .webnexon-service-card { padding: 30px 20px; min-height: auto; } 
    .webnexon-card-title { font-size: 18px; }
    .webnexon-arrow-btn { width: 40px; height: 40px; }
    .webnexon-service-card:hover .webnexon-arrow-btn { transform: translateX(-5px) scale(1.02); }
}