@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ==========================================================================
   TADBIR SAZAN FINAL PREMIUM HEADER - SYMMETRIC & RESPONSIVE
   ========================================================================== */

:root {
    --primary-red: #ff3b30;
    --glass-bg: rgba(10, 10, 12, 0.85);
    --border-light: rgba(255, 255, 255, 0.08);
}
.main-header {
    position: fixed !important;
    top: 20px !important;
    left: 5% !important;
    right: 5% !important;
    width: 90% !important;
    height: 70px !important;
    background: transparent !important; /* پس‌زمینه اصلی باید شفاف باشد */
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: none !important;
    box-shadow: none !important;
}

.header-glass-container {
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 15, 18, 0.85) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border-radius: 100px !important; /* گردی کامل */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 40px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
}

/* افکت اسکرول */
.main-header.scrolled {
    top: 10px;
    height: 60px;
}

.main-header.scrolled .header-glass-container {
    background: rgba(10, 10, 12, 0.98);
    border-color: var(--primary-red);
}
.brand-side, .nav-side {
    display: flex !important;
    align-items: center !important;
}

/* تایپوگرافی لوگو */
.logo-text {
    font-size: 1.6rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.logo-text span {
    color: var(--primary-red);
}

/* نویگیشن دسکتاپ */
.nav-side {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links {
    display: flex !important;
    list-style: none !important;
    gap: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 1024px) {
    .main-header {
        top: 15px !important;
        left: 3% !important;
        right: 3% !important;
        width: 94% !important;
        height: 60px !important;
    }
    
    .nav-side {
        display: none !important; /* مخفی کردن منو در موبایل */
    }
    
    .header-glass-container {
        padding: 0 20px !important;
    }
}
@media (max-width: 1024px) {
    /* منو در حالت عادی مخفی و خارج از صفحه است */
    .nav-side {
        display: none !important; /* ابتدا کاملاً مخفی */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(10, 10, 12, 0.98);
        backdrop-filter: blur(25px) saturate(180%);
        -webkit-backdrop-filter: blur(25px) saturate(180%);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1999;
        opacity: 0;
        transition: all 0.5s ease-in-out;
    }



/* استایل دکمه همبرگر ثابت (بدون تغییر شکل) */
.hamburger {
    display: flex !important;
    position: relative;
    z-index: 2001; /* بالاتر از لایه منو */
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.hamburger span {
    display: block;
    width: 28px;
    height: 2px;
    background: #fff; /* همیشه سفید بماند */
    /* ترنزیشن را حذف نکردم تا اگر خواستی بعدا افکت ملایمی بدهی بماند، اما تغییری ایجاد نمی‌کند */
    transition: all 0.3s ease;
}

/* 
   بخش زیر را کلاً از فایل CSS خودت پاک کن یا با این نسخه جایگزین کن 
   که هیچ تغییری روی شکل ظاهری ایجاد نمی‌کند
*/
.hamburger.is-active span:nth-child(1),
.hamburger.is-active span:nth-child(2),
.hamburger.is-active span:nth-child(3) {
    transform: none !important; /* جلوگیری از هرگونه چرخش یا جابجایی */
    opacity: 1 !important;      /* جلوگیری از محو شدن خط وسط */
    background: #fff !important; /* ثابت ماندن رنگ سفید */
}

/* انیمیشن ورود لینک‌ها (بدون تغییر) */
.nav-side.active .nav-link {
    animation: slideUpFade 0.6s forwards;
}
.logo a {
    font-family: 'Poppins', sans-serif; /* یا هر فونتی که استفاده می‌کنی */
    font-weight: 800;
    font-size: 1.5rem;
    text-decoration: none;
    letter-spacing: -0.5px;
}

.text-white {
    color: #ffffff; /* سفید خالص */
}

.text-red {
    color: #ff3b30; /* قرمز زنده و مدرن */
    /* یک درخشش بسیار ملایم برای جذابیت بیشتر در محیط تیره */
    text-shadow: 0 0 10px rgba(255, 59, 48, 0.3);
}

/* اگر می‌خواهی وقتی هاور شد افکت جذابی بگیرد */
.logo a:hover .text-red {
    color: #ff453a;
    transition: 0.3s ease;
}

}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 1024px) {
/* اصلاح بدنه اصلی منوی موبایل */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: -100%; /* در حالت عادی مخفی */
    width: 80%; /* عرض منو */
    height: 100vh;
    background: rgba(15, 15, 15, 0.95); /* پس‌زمینه تیره و شیک */
    backdrop-filter: blur(20px);
    z-index: 10000;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    padding: 100px 40px; /* فاصله از بالا برای اینکه زیر هدر نرود */
    display: flex;
    flex-direction: column;
}

/* وقتی منو فعال می‌شود */
.mobile-nav-overlay.active {
    left: 0; /* آمدن به داخل صفحه */
}

/* استایل لیست لینک‌ها برای حذف آن حالت بولت‌وار */
.mobile-menu-inner ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-inner ul li {
    margin-bottom: 25px;
}

.mobile-menu-inner ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    transition: 0.3s;
}

    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
        padding-bottom: 15px;
    }

    .mobile-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .mobile-links li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07); /* خط جداکننده بسیار نازک */
        padding: 15px 0;
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.4s ease;
    }

    .mobile-nav-overlay.active li {
        opacity: 1;
        transform: translateX(0);
    }

    /* چپ‌چین کردن متون */
    .m-link {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        font-size: 1.2rem;
        font-weight: 500;
        font-family: 'Poppins', sans-serif; /* فونت انگلیسی مدرن */
        display: block;
        text-align: left; /* چپ‌چین */
    }

    /* انیمیشن پله‌ای برای لینک‌ها */
    .mobile-nav-overlay.active li:nth-child(1) { transition-delay: 0.1s; }
    .mobile-nav-overlay.active li:nth-child(2) { transition-delay: 0.15s; }
    .mobile-nav-overlay.active li:nth-child(3) { transition-delay: 0.2s; }
    .mobile-nav-overlay.active li:nth-child(4) { transition-delay: 0.25s; }
    .mobile-nav-overlay.active li:nth-child(5) { transition-delay: 0.3s; }
    .mobile-nav-overlay.active li:nth-child(6) { transition-delay: 0.35s; }

    .m-cta-item {
        border-bottom: none !important; /* دکمه آخر خط نمی‌خواهد */
        margin-top: 30px;
        text-align: left;
    }

    .cta-premium-mobile {
        display: inline-block;
        background: linear-gradient(135deg, #ff3b30, #ff2d55);
        color: #fff;
        padding: 12px 30px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
    }

    /* دکمه ضربدر */
    .close-menu span {
        background: #ff3b30;
        height: 1px; /* نازک‌
        تر و شیک‌تر */
    }
    /* ظرف اصلی دکمه بستن */
.close-menu-wrapper {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05); /* یک پس‌زمینه بسیار ظریف برای دیده شدن دکمه */
    border-radius: 12px;
    transition: all 0.3s ease;
    z-index: 10001; /* بالاتر از همه المان‌ها */
}

.close-menu-wrapper:active {
    transform: scale(0.9);
    background: rgba(255, 59, 48, 0.2);
}

/* ساخت خود ضربدر با CSS */
.close-icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.close-icon span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ff3b30; /* رنگ قرمز درخشان */
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* تبدیل دو خط به ضربدر */
.close-icon span:nth-child(1) {
    transform: rotate(45deg);
}

.close-icon span:nth-child(2) {
    transform: rotate(-45deg);
}

/* اصلاح هدر منو برای فاصله مناسب */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
}

}


.nav-link {
    color: #a1a1a6;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.nav-link:hover { color: #fff; }

/* دکمه CTA */
.cta-premium {
    background: var(--primary-red);
    color: #fff;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    white-space: nowrap;
}

.cta-premium:hover {
    box-shadow: 0 0 20px rgba(255, 59, 48, 0.4);
    transform: scale(1.05);
}

/* ==========================================================================
   RESPONSIVE DESIGN (MOBILE & TABLET)
   ========================================================================== */

/* همبرگر منو */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 2px;
    background: #fff;
    transition: 0.3s;
}
@media (min-width: 992px) {
    .mobile-nav-overlay {
        display: none !important;
    }
}
@media (max-width: 1024px) {
    .main-header {
        left: 3%;
        right: 3%;
        width: 94%;
        height: 65px;
    }
        
    .hamburger {
        display: flex; /* نمایش همبرگر در موبایل */
    }

    .header-glass-container {
        padding: 0 25px;
    }
    
    .logo-text {
        font-size: 1.3rem;
    }
}

/* استایل انیمیشن برای همبرگر وقتی باز می‌شود */
.hamburger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
    opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* main */
.hero--bg{
  position: relative;
  min-height: 620px;               /* ارتفاع Hero */
  display: flex;
  align-items: center;

  /* بک‌گراند */
  background-image: url("image_gen_51c4022e-21e0-47d0-b429-90ddf0ec1f47_0.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* لایه برای خوانایی متن (خیلی مهم) */
.hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10,16,28,0.78) 0%,
      rgba(10,16,28,0.55) 35%,
      rgba(10,16,28,0.15) 70%,
      rgba(10,16,28,0.00) 100%);
  z-index: 0;
}

.hero__container{
  position: relative;
  z-index: 1;
  width: min(1200px, 92%);
  margin: 0 auto;
}

.hero__content{
  max-width: 620px;  /* متن سمت چپ و محدود */
  color: #fff;
}

.hero__content h1{
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 12px;
}

.hero__content p{
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  margin: 0 0 22px;
}

.hero__cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* موبایل: متن همچنان چپ، اما پهن‌تر و ارتفاع کمتر */
@media (max-width: 768px){
  .hero--bg{ min-height: 560px; }
  .hero__content{ max-width: 100%; }
}


/* ===== ANIMATION ===== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .hero-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-title {
        font-size: 2.3rem;
    }
}



/* اطمینان از اینکه متن روی لایه تاریک قرار می‌گیرد */
.hero-content {
    position: relative;
    z-index: 1;
    color: white; /* رنگ متن سفید برای تضاد با عکس */
    max-width: 600px;
}

/* اصلاح استایل دکمه‌ها برای اینکه حرفه‌ای‌تر شوند */
.hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content:center;
}
/* تنظیمات عمومی دکمه‌ها */
.btn {
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

/* دکمه اصلی (Primary) */
/* کانتینر دکمه‌ها */
/* تنظیمات بهبود یافته برای ابعاد دکمه‌ها */
.hero-buttons {
    display: flex;
    gap: 24px; /* فاصله بیشتر بین دکمه‌ها */
    margin-top: 40px;
}

.hero-buttons button {
    /* افزایش چشمگیر سایز */
    padding: 20px 20px; 
    font-size: 15px;     /* فونت بزرگتر برای خوانایی بالا */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 50px; 
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;        /* اطمینان از نبود بوردر */
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* استایل دکمه اصلی (بزرگ و قدرتمند) */
.btn-primary {
    background: #e11d48;
    color: white;
    box-shadow: 0 12px 25px rgba(225, 29, 72, 0.4);
}

.btn-primary:hover {
    background: #be123c;
    transform: translateY(-3px) scale(1.02); /* کمی پرش به بالا هنگام هاور */
    box-shadow: 0 18px 35px rgba(225, 29, 72, 0.5);
}

/* استایل دکمه ثانویه (بزرگ و شیشه‌ای) */
.btn-secondary {
    border: none;
    outline: none;
    
    /* افکت شیشه‌ای اصلی */
    background: rgba(255, 255, 255, 0.08) !important; /* پس‌زمینه بسیار شفاف سفید */
    backdrop-filter: blur(12px) saturate(180%); /* مات کردن پشت دکمه */
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    
    /* لبه‌های دکمه */
    border: 1px solid rgba(255, 255, 255, 0.15); /* خط باریک شیشه‌ای دور دکمه */
    border-radius: 50px; /* کاملاً گرد مطابق با هدر کپسولی */
    
    /* استایل متن */
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    
    /* تنظیمات ابعاد و انیمیشن */
    padding: 12px 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* افکت جذاب هنگام هاور */
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(-3px); /* کمی بلند شدن از صفحه */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* افکت کلیک */
.btn-secondary:active {
    transform: translateY(-1px);
}


@keyframes skeleton-loading {
    0% { background-color: #e2e8f0; }
    50% { background-color: #cbd5e1; }
    100% { background-color: #e2e8f0; }
}

.skeleton {
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}
/* تنظیم کلی کانتینر هدر */
.main-header {
    opacity: 1; /* همیشه نمایش داده شود */
}

/* افکت محو شدگی و پرش برای المان‌های داخلی */
.brand-side, .nav-link, .cta-btn {
    opacity: 0;
    animation: slideDownFade 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* زمان‌بندی متفاوت برای هر المان (این همان سکرت حرفه‌ای شدن است) */
.brand-side { animation-delay: 0.1s; }
.nav-link:nth-child(1) { animation-delay: 0.2s; }
.nav-link:nth-child(2) { animation-delay: 0.3s; }
.nav-link:nth-child(3) { animation-delay: 0.4s; }
.nav-link:nth-child(4) { animation-delay: 0.5s; }
.cta-btn { animation-delay: 0.6s; }

@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateY(-30px);
        filter: blur(10px); /* افکت تار شدن حین ورود */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
    }
}
/* ========== Hero base ========== */
.hero-section{
  
  position: relative;
  overflow: clip;
  min-height: clamp(420px, 70vh, 760px);
  display: grid;
  align-items: center;
    padding: clamp(36px, 5vw, 72px) 0; /* پدینگ چپ و راست را صفر کن */
    width: 100vw; /* مطمئن شو کل عرض صفحه را می‌گیرد */
     /* این خطوط برای تصویر پس‌زمینه هستند */
    background-image: url('/src/img/audit-session1.png'); 
    background-size: cover;          /* تصویر کل بخش را بپوشاند */
    background-position: center;     /* تصویر در مرکز قرار گیرد */
    background-repeat: no-repeat;
    
    /* یک لایه تیره برای خوانایی بهتر متن روی تصویر (خیلی مهم!) */
    position: relative;
  color: #fff;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(11, 18, 32, 0.7); /* این عدد 0.7 شفافیت است */
    z-index: 1;
}

/* محتوای واقعی */
.hero-content{
  position: relative;
  z-index: 2;
  max-width: 680px;
}

/* ========== Cinematic reveal (mask + blur + stagger) ========== */
.hero-content > *{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(10px);
  padding-left: 40px;
}

/* وقتی لود تموم شد */
.hero-section.is-ready .hero-content > *{
  animation: heroReveal 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

/* Stagger */
.hero-section.is-ready .hero-content h1{ animation-delay: 60ms; }
.hero-section.is-ready .hero-content p{ animation-delay: 160ms; }
.hero-section.is-ready .hero-content .hero-buttons{ animation-delay: 280ms; }

@keyframes heroReveal{
  0%{ opacity: 0; transform: translateY(14px); filter: blur(10px); }
  100%{ opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* یک Shine خیلی ظریف روی تیتر (لوکس) */
.hero-section.is-ready .hero-content h1{
  position: relative;
}
.hero-section.is-ready .hero-content h1::after{
  content:"";
  position:absolute; inset:-10px -20px;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.25) 40%, transparent 60%);
  transform: translateX(-60%);
  mix-blend-mode: overlay;
  pointer-events:none;
  animation: titleShine 1200ms ease-out 420ms 1 forwards;
  opacity: .0;
}
@keyframes titleShine{
  0%{ transform: translateX(-60%); opacity: 0; }
  20%{ opacity: .7; }
  100%{ transform: translateX(60%); opacity: 0; }
}

/* ========== Skeleton layer ========== */
.hero-skeleton{
  position:absolute; inset:0;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: inherit;
  background: radial-gradient(1200px 600px at 20% 30%, rgba(225,29,72,.18), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  opacity: 0;
  pointer-events: none;
}

/* فقط هنگام loading نمایش بده */
.hero-section.is-loading .hero-skeleton{ opacity: 1; }

/* کارت‌های اسکلتون */
.hero-skeleton .sk-title,
.hero-skeleton .sk-line,
.hero-skeleton .sk-btn{
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}

/* اندازه‌ها */
.hero-skeleton .sk-title{ height: 56px; width: min(620px, 92%); border-radius: 18px; }
.hero-skeleton .sk-line{ height: 18px; width: min(560px, 88%); }
.hero-skeleton .w-90{ width: min(560px, 90%); }
.hero-skeleton .w-75{ width: min(470px, 75%); }

.hero-skeleton .sk-actions{
  display:flex;
  gap: 18px;
  margin-top: 18px;
}
.hero-skeleton .sk-btn{ height: 56px; width: 210px; border-radius: 999px; }
.hero-skeleton .sk-btn-ghost{ width: 200px; background: rgba(255,255,255,.06); }

/* Shimmer حرفه‌ای (با highlight رنگ برند) */
.hero-skeleton .sk-title::after,
.hero-skeleton .sk-line::after,
.hero-skeleton .sk-btn::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(110deg,
      transparent 0%,
      rgba(255,255,255,.08) 25%,
      rgba(225,29,72,.18) 45%,
      rgba(255,255,255,.10) 55%,
      transparent 80%);
  transform: translateX(-70%);
  animation: shimmer 1200ms cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes shimmer{
  100%{ transform: translateX(70%); }
}

/* وقتی ready شد skeleton جمع شود (Fade + slight scale) */
.hero-section.is-ready .hero-skeleton{
  animation: skOut 420ms ease forwards;
}
@keyframes skOut{
  to { opacity: 0; transform: scale(1.01); }
}

/* ========== Motion safety ========== */
@media (prefers-reduced-motion: reduce){
  .hero-content > *{ opacity: 1; transform:none; filter:none; }
  .hero-skeleton{ display:none !important; }
  .hero-section.is-ready .hero-content > *{ animation:none !important; }
}
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* این خط اصلی‌ترین راه حل برای حذف اسکرول افقی است */
}

/* برای اطمینان از اینکه هیرو هم هیچ فشاری به عرض نمی‌آورد */
.hero-section {
    width: 100%;
    box-sizing: border-box; /* اطمینان از اینکه پدینگ به عرض اضافه نمی‌شود */
}

/* استایل مخصوص موبایل (وقتی عرض صفحه کمتر یا مساوی 500 پیکسل است) */
@media (max-width: 500px) {
    .hero-section {
        background-image: url('/src/img/audit-session.png'); /* تصویر نسخه موبایل */
        
        /* اگر می‌خواهی دقیقاً همان ارتفاع دسکتاپ باشد: */
        min-height: 80vh; 
    }
    
    /* تنظیم چیدمان متن برای موبایل */
    .hero-content {
        padding: 40px 20px;
        text-align: center;
    }
}
/* درباره ما */
/* تم کلی صفحه (پس‌زمینه سفید، متن تیره) */
body.about-theme {
  background: #ffffff;
  color: #13141f;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* کانتینر اصلی About */
/* حالت پیش‌فرض: دسکتاپ (صفحات بزرگ) */
.about-page {
  /* بالا و پایین 96px | چپ و راست بر اساس فرمول تو یا مقدار ثابت */
  padding: 96px min(15vw, 350px); 
  background: #ffffff;
  transition: padding 0.3s ease; /* برای نرم شدن تغییر سایز */
}

/* حالت تبلت و موبایل (کمتر از 1024 یا 768 پیکسل) */
@media (max-width: 1024px) {
  .about-page {
    padding: 64px 40px; /* کاهش پدینگ برای تبلت */
  }
}

/* حالت موبایل (کمتر از 500 پیکسل - طبق درخواست قبلی‌ات) */
@media (max-width: 500px) {
  .about-page {
    /* در موبایل پدینگ کمتر می‌شود تا محتوا فضای بیشتری داشته باشد */
    padding: 48px 20px; 
  }
}


.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 56px;
  align-items: flex-start;
}

/* تایپوگرافی ستون چپ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #e11d48;
  font-weight: 600;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

.about-title {
  margin-top: 12px;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.2;
  font-weight: 800;
  color: #111827;
}

.about-lead {
  margin-top: 20px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #4b5563;
}

.about-body {
  margin-top: 14px;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #4b5563;
}

.about-main strong {
  color: #111827;
}

/* کارت Mission */
.mission-card {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(225, 29, 72, 0.15);
  background:
    radial-gradient(circle at top left, rgba(248, 113, 113, 0.08), transparent 55%),
    #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.mission-card h2 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: #b91c1c;
}

.mission-card p {
  font-style: italic;
  color: #374151;
  line-height: 1.7;
}

/* لیست هایلایت‌ها */
.about-highlights {
  margin-top: 26px;
  display: grid;
  gap: 8px;
}

.highlight-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  color: #374151;
}

.highlight-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, #ef4444, #b91c1c);
}

/* ستون راست: کارت هویت سازمانی */
.about-aside {
  position: relative;
}

.about-aside::before {
  content: "";
  position: absolute;
  inset: -24px -18px;
  border-radius: 24px;
  background: radial-gradient(circle at top, rgba(248, 113, 113, 0.16), transparent 55%);
  opacity: 0.85;
  z-index: 0;
}

.identity-card {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  background: #f9fafb;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.identity-header {
  padding: 16px 20px 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.badge-pill {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #6b7280;
  background: #ffffff;
}

.badge-pill--red {
  border-color: rgba(248, 113, 113, 0.6);
  color: #b91c1c;
  background: #fef2f2;
}

.identity-body {
  padding: 4px 20px 12px;
}

.identity-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.identity-subtitle {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #6b7280;
}

.identity-meta {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  font-size: 0.85rem;
  color: #4b5563;
}

.identity-meta dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9ca3af;
}

.identity-meta dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: #111827;
}

.identity-footer {
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(to right, #ffffff, #fef2f2);
}

.identity-footer p {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.6;
}

/* ریسپانسیو برای تبلت و موبایل */
@media (max-width: 900px) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  
  .about-aside::before {
    inset: -14px -10px;
  }
}

@media (max-width: 600px) {
  .about-page {
    padding: 64px 20px;
  }
  
  .identity-card {
    border-radius: 18px;
  }
}
/* امار سایت */
.stats-section {
  padding: 80px 40px;
  background: #fef2f2; /* یک پس‌زمینه ملایم قرمز */
  border-top: 1px solid rgba(225, 29, 72, 0.1);
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-card {
  text-align: center;
  padding: 40px 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-10px);
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: #e11d48;
  margin: 0;
}
/* فقط برای کارتی که درصد دارد */
.stat-card.is-percent .stat-number::before {
    font-size: 1rem; /* سایز کوچکتر برای کلمه بیش از */
    display: block; /* رفتن به خط بالا یا inline بسته به سلیقه تو */
    color: #666;
    font-weight: 400;
    margin-bottom: -5px;
}

/* اگر می‌خواهی رنگ درصد با بقیه فرق کند (اختیاری) */
.stat-card.is-percent .stat-number {
    color: #e11d48; /* قرمز مدرن مثل لوگو */
}

.stat-label {
  font-size: 1rem;
  color: #6b7280;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* اصلاح کلی هیرو برای موبایل */
#hero.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh; /* ارتفاع ۸۰ درصد ارتفاع صفحه نمایش */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('/src/img/audit-session1.png'); /* تصویر مخصوص موبایل */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* جلوگیری از سرریز شدن */
}

/* اگر محتوای هیرو (متن‌ها) در موبایل خیلی بزرگ است */
.hero-content {
    width: 90%;
    max-width: 600px;
    text-align: center;
    padding: 20px;
}

/* رفع حاشیه سفید احتمالی */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}
/* مزیت ها */
.advantages-section {
  padding: 96px min(7vw, 96px);
  background: #ffffff; /* پس‌زمینه سفید برای تمایز */
  position: relative;
  overflow: hidden;
}

.advantages-header {
  text-align: center;
  margin-bottom: 60px;
}

.advantages-header .eyebrow {
  color: #e11d48;
}

.section-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #111827;
  margin-top: 12px;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.advantage-card {
  background: #f9fafb; /* پس‌زمینه خیلی روشن برای کارت‌ها */
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 5px 25px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.advantage-icon {
  margin-bottom: 20px;
  width: 56px;
  height: 56px;
  background: #fef2f2; /* پس‌زمینه روشن برای آیکون */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(225, 29, 72, 0.1);
}

.advantage-icon svg {
  width: 28px;
  height: 28px;
}

.advantage-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.advantage-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .advantages-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 500px) {
  .advantages-section {
    padding: 64px 20px;
  }
  .advantages-grid {
    grid-template-columns: 1fr;
  }
}
/* استاندارد های قابل درخواست */
.standards-split-section {
  padding: 80px 0;
  background-color: #ffffff;
}

.standards-container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* ستون چپ کمی عریض‌تر */
  gap: 60px;
  align-items: center;
  padding: 0 40px;
}

/* استایل محتوای سمت چپ */
.standards-content .eyebrow {
  color: #e11d48;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

.standards-content .section-title {
  font-size: 2.5rem;
  color: #1e293b;
  margin: 15px 0 20px;
}

.standards-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* نمایش استانداردها در دو ستون کوچک */
  gap: 20px;
  margin: 35px 0;
}

.standard-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: #f8fafc;
}

.standard-item:hover {
  background: #fff1f2;
  transform: translateX(5px);
}

.standard-icon {
  color: #e11d48;
  font-weight: bold;
  font-size: 1.2rem;
}

.standard-info h4 {
  font-size: 1rem;
  color: #1e293b;
  margin: 0;
}

.standard-info p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 4px 0 0;
}

/* استایل بخش تصویر سمت راست */
.standards-visual {
  position: relative;
  height: 500px;
}

.image-placeholder-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  /* بک‌گراند انتزاعی و حرفه‌ای */
  background: linear-gradient(135deg, #1e293b 0%, #e11d48 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}

.visual-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.placeholder-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.placeholder-text span {
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 992px) {
  .standards-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .standard-item {
    text-align: left;
  }
  .standards-visual {
    height: 350px;
    order: -1; /* تصویر در موبایل بالا برود */
  }
}
.standards-split-section {
  padding: 80px 0;
  background-color: #ffffff;
}

.standards-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* ستون چپ کمی عریض‌تر */
  gap: 60px;
  align-items: center;
  padding: 0 40px;
}

/* استایل محتوای سمت چپ */
.standards-content .eyebrow {
  color: #e11d48;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

.standards-content .section-title {
  font-size: 2.5rem;
  color: #1e293b;
  margin: 15px 0 20px;
}

.standards-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* نمایش استانداردها در دو ستون کوچک */
  gap: 20px;
  margin: 35px 0;
}

.standard-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: #f8fafc;
}

.standard-item:hover {
  background: #fff1f2;
  transform: translateX(5px);
}

.standard-icon {
  color: #e11d48;
  font-weight: bold;
  font-size: 1.2rem;
}

.standard-info h4 {
  font-size: 1rem;
  color: #1e293b;
  margin: 0;
}

.standard-info p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 4px 0 0;
}

/* استایل بخش تصویر سمت راست */
.standards-visual {
  position: relative;
  height: 500px;
}

.image-placeholder-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  /* بک‌گراند انتزاعی و حرفه‌ای */
  background: linear-gradient(135deg, #1e293b 0%, #e11d48 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}

.visual-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.placeholder-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.placeholder-text span {
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 992px) {
  .standards-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .standard-item {
    text-align: left;
  }
  .standards-visual {
    height: 350px;
    order: -1; /* تصویر در موبایل بالا برود */
  }
}
.standards-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.btn-primary {
  background-color: #e11d48;
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background-color: #be123c;
}

.btn-secondary {
  background-color: transparent;
  color: #1e293b;
  padding: 12px 28px;
  border-radius: 8px;
  border: 2px solid #e2e8f0; /* رنگ خاکستری ملایم برای دکمه ثانویه */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
.standards-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px; /* بسته به طراحی */
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg, #111, #2b2b2b);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.main-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* مهم */
  object-position: center;
  display: block;
  filter: contrast(1.05) saturate(1.05);
}

.visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.25),
    rgba(255, 0, 0, 0.10)
  );
  z-index: 1;
  pointer-events: none;
}

.placeholder-text {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.placeholder-text svg {
  flex-shrink: 0;
}
/* حالت پیش‌فرض (دسکتاپ) */
.main-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 24px;
    transition: opacity 0.3s ease; /* برای نرم‌تر شدن جابه‌جایی */
}


.main-visual-bg {
    width: 100%;
    height: 500px;
    background-image: url("/src/img/Requestable standards1.png");
    background-size: cover;
    background-position: center;
    border-radius: 24px;
}

@media (max-width: 500px) {
    .main-visual-bg {
        background-image: url("/src/img/Requestable standards.png");
        height: 350px;
    }
}



/* --- Certification Services Styles --- */
.cert-services-advanced {
  padding: 100px 0;
  background: #ffffff;
}

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

.services-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.services-intro .eyebrow {
  color: #e11d48;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 10px;
}

.services-intro h2 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 20px;
}

.services-intro p {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.6;
}

/* Bento Grid Layout */
.services-bento-grid {
  
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 320px);
  gap: 24px;
}

.bento-item {
  position: relative;
  background: #f8fafc;
  border-radius: 32px;
  padding: 40px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.bento-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 80px -15px rgba(15, 23, 42, 0.1);
  border-color: #cbd5e1;
}

/* Card Specifics */
.ims-card { grid-column: span 7; grid-row: span 2; background: #0f172a; color: #fff; border: none; }
.tech-card { grid-column: span 5; }
.process-card { grid-column: span 5; }
.mobility-card { grid-column: span 5; background: #fff1f2; border-color: #fecaca; }

/* Internal Card Components */
.ims-card .badge {
  background: rgba(225, 29, 72, 0.15);
  color: #fb7185;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 25px;
  display: inline-block;
}

.ims-card h3 { font-size: 2.5rem; font-weight: 800; margin-bottom: 20px; color: #fff; line-height: 1.1; }
.ims-card p { color: #94a3b8; line-height: 1.8; font-size: 1.15rem; }

.ims-features { display: flex; gap: 20px; margin-top: 40px; }
.ims-features span { font-size: 0.85rem; font-weight: 600; color: #fff; border-left: 3px solid #e11d48; padding-left: 12px; }

.icon-box {
  width: 56px;
  height: 56px;
  background: #0f172a;
  color: #fff;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
.icon-box.red { background: #e11d48; }
.icon-box svg { width: 28px; }

.bento-item h3 { font-size: 1.5rem; font-weight: 800; color: #1e293b; margin-bottom: 12px; }
.bento-item p { font-size: 1rem; color: #64748b; line-height: 1.6; }

.mobility-card h3 { color: #1e293b; }
.mini-tag {
  background: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #e11d48;
  margin-right: 10px;
  display: inline-block;
  margin-top: 15px;
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.05);
}

.card-bg-icon {
  position: absolute;
  bottom: -30px;
  right: -30px;
  color: rgba(255, 255, 255, 0.04);
  width: 300px;
  pointer-events: none;
}

/* --- Verification CTA Section --- */
.verification-cta {
  margin-top: 60px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 28px;
  padding: 40px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

.verification-cta::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.1) 0%, transparent 70%);
}

.v-content { display: flex; align-items: center; gap: 30px; z-index: 2; }
.v-icon {
  width: 64px;
  height: 64px;
  background: rgba(225, 29, 72, 0.1);
  border: 1px solid rgba(225, 29, 72, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e11d48;
}
.v-icon svg { width: 32px; }

.v-text h4 { color: #fff; font-size: 1.6rem; font-weight: 800; margin-bottom: 5px; }
.v-text p { color: #94a3b8; font-size: 1rem; margin: 0; }

.btn-verify {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #e11d48;
  color: #fff !important;
  padding: 18px 36px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 25px rgba(225, 29, 72, 0.4);
  z-index: 2;
}

.btn-verify:hover {
  transform: scale(1.05);
  background: #f43f5e;
  box-shadow: 0 15px 35px rgba(225, 29, 72, 0.5);
}

.btn-verify .btn-icon { display: flex; transition: transform 0.3s ease; }
.btn-verify:hover .btn-icon { transform: translateX(5px); }
.btn-verify .btn-icon svg { width: 22px; }

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .services-bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .ims-card, .tech-card, .process-card, .mobility-card { grid-column: span 1; }
  .verification-cta { flex-direction: column; text-align: center; padding: 40px 20px; gap: 30px; }
  .v-content { flex-direction: column; gap: 15px; }
}

/* --- Add-on for Filling the Gap --- */

/* اصلاح عرض کارت قبلی بدون تغییر در کدهای بالا */
.services-bento-grid .mobility-card {
    grid-column: span 3 !important; /* فضای کافی برای المان جدید باز می‌کند */
}

.mini-status-card {
    grid-column: span 2; /* ۲ ستون باقی‌مانده از ۵ ستون سمت راست را پر می‌کند */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    padding: 30px !important;
}

.status-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* افکت نقطه تپنده (Pulse) برای مدرن‌تر شدن */
.dot-pulse {
    width: 8px;
    height: 8px;
    background-color: #e11d48;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(225, 29, 72, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

.status-label {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.02em;
}

.mini-status-card p {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* اطمینان از تراز بودن در موبایل */
@media (max-width: 1024px) {
    .mini-status-card {
        grid-column: span 1 !important;
    }
}
/* --- Fix Alignment & Full Width --- */

.services-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 24px; /* فاصله بین کارت‌ها */
    width: 100%;
}

/* کارت IMS در ردیف اول (سمت چپ) - ۷ ستون */
.services-bento-grid .ims-card {
    grid-column: span 7 !important;
}

/* کارت Monitoring در ردیف اول (سمت راست) - ۵ ستون */
.services-bento-grid .tech-card {
    grid-column: span 5 !important;
}

/* کارت Market Access در ردیف دوم (سمت چپ) - ۷ ستون */
/* این کارت را ۷ ستون می‌کنیم تا با کارت بالایی تراز شود */
.services-bento-grid .mobility-card {
    grid-column: span 7 !important;
}

/* کارت Global Acceptance در ردیف دوم (سمت راست) - ۵ ستون */
/* این کارت را ۵ ستون می‌کنیم تا فضای خالی سمت راست کاملاً پر شود */
.services-bento-grid .mini-status-card {
    grid-column: span 5 !important;
    display: flex;
    align-items: center;
    justify-content: center; /* محتوا وسط کارت قرار بگیرد */
}

@media (max-width: 1028px) {
    /* ۱. این بخش والد اصلی است که باید به آن پدینگ بدهیم تا فضا ایجاد شود */
    .cert-services-advanced {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ۲. کانتینر داخلی را مهار می‌کنیم که از والدش بزرگتر نشود */
    .cert-services-advanced .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* ۳. تنظیم چیدمان عمودی گرید */
    .services-bento-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        /* برای اطمینان از حذف هرگونه استایل مزاحم دسکتاپ */
        grid-template-columns: 1fr !important; 
    }

    /* ۴. اصلاح کارت‌ها برای رعایت فاصله */
    .services-bento-grid .bento-item {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* --- Mobile Responsive Fix --- */

@media (max-width: 768px) {
    /* ابتدا والد اصلی گرید را پیدا می‌کنیم و به آن پدینگ می‌دهیم تا کارت‌ها به دیوار نچسبند */
    .cert-services-advanced .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .services-bento-grid {
        /* تبدیل گرید ۱۲ ستونه به ۱ ستونه برای موبایل */
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; /* فاصله عمودی بین کارت‌ها */
        width: 100% !important;
    }

    .services-bento-grid .bento-item {
        /* هر کارت تمام عرض کانتینر (منهای پدینگ والد) را پر کند */
        grid-column: span 1 !important;
        width: 100% !important;
        min-height: auto !important;
        box-sizing: border-box !important; /* حیاتی برای اینکه پدینگ باعث بیرون‌زدگی نشود */
    }

    /* اصلاح کارت جدید که در موبایل محتوایش درست دیده شود */
    .mini-status-card {
        padding: 24px !important; /* کمی پدینگ بیشتر برای خوانایی در موبایل */
        margin-top: 10px;
    }
}

/* --- Final Mobile Layout Reset --- */

/* --- Optimized Mobile Layout with Proper Spacing --- */

@media (max-width: 900px) {
    /* ۱. ایجاد فضای تنفس برای کل بخش */
    .cert-services-advanced {
        padding: 40px 20px !important; /* فاصله از بالا/پایین و چپ/راست */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ۲. کانتینر داخلی را مهار می‌کنیم */
    .cert-services-advanced .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* ۳. تنظیم چیدمان عمودی با فاصله بین کارت‌ها */
    .services-bento-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; /* فاصله عمودی بین کارت‌ها */
        width: 100% !important;
    }

    /* ۴. کارت‌ها تمام عرضِ موجود (با احتساب پدینگ والد) را پر کنند */
    .services-bento-grid .bento-item {
        width: 100% !important;
        grid-column: auto !important;
        min-height: auto !important;
        margin: 0 !important; /* مارجین حذف شود چون Gap داریم */
    }

    /* ۵. بهینه‌سازی فونت‌ها برای موبایل که محتوا شلوغ نشود */
    .bento-item h3 {
        font-size: 1.25rem !important;
        margin-bottom: 10px !important;
    }
    
    .bento-item p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
}

.ims-card h3 {
    color: #ffffff !important; 
    
    font-weight: 700; /* کمی ضخیم‌تر برای تاکید بیشتر */
    text-shadow: 0 2px 4px rgba(0,0,0,0.1); /* یک سایه بسیار ملایم برای جدا شدن از پس‌زمینه */
}


.ims-card p {
    color: rgba(255, 255, 255, 0.8) !important; /* سفید با ۸۰ درصد غلظت */
}
/* مقالات */
:root {
    --primary-dark: #0f172a;
    --accent-red: #cc0000;
    --text-slate: #64748b;
    --transition-premium: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.articles-slider-section {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Header Styling --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.sub-badge {
    color: var(--accent-red);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.section-title {
    font-family: 'Morabba', serif;
    font-size: 3.5rem;
    color: var(--primary-dark);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 15px;
}

.section-desc {
    color: var(--text-slate);
    font-size: 1.1rem;
    max-width: 520px;
    margin: 0;
}

/* --- Actions & Controls --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-bottom: 10px;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 2px solid rgba(15, 23, 42, 0.1);
    padding-bottom: 2px;
    transition: var(--transition-premium);
}

.view-all-btn:hover {
    color: var(--accent-red);
    border-bottom-color: var(--accent-red);
}

.view-all-btn svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.view-all-btn:hover svg { transform: translateX(4px); }

.slider-controls { display: flex; gap: 10px; }

.nav-btn {
    width: 46px; height: 46px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-premium);
    color: var(--primary-dark);
}

.nav-btn:hover {
    background: var(--primary-dark);
    color: #fff;
    border-color: var(--primary-dark);
    transform: translateY(-2px);
}

.nav-btn svg { width: 20px; height: 20px; }

/* --- Slider Core --- */
.articles-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px) / 3);
    gap: 24px;
    overflow-x: hidden;
    padding: 10px 5px 40px 5px;
}

/* --- Article Cards --- */
.article-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    transition: var(--transition-premium);
}

.article-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08);
}

.article-image {
    position: relative;
    height: 230px;
    margin: 12px;
    border-radius: 18px;
    overflow: hidden;
}

.article-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s ease;
}

.article-card:hover .article-image img { transform: scale(1.1); }

.category {
    position: absolute; top: 15px; right: 15px;
    background: rgba(204, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 5px 14px;
    border-radius: 10px;
    font-size: 0.75rem; font-weight: 700;
}

.article-content { padding: 10px 25px 30px; }
.date { font-size: 0.85rem; color: #94a3b8; display: block; margin-bottom: 10px; }
.article-content h3 {
    font-size: 1.4rem; color: var(--primary-dark);
    line-height: 1.3; margin-bottom: 15px; transition: color 0.3s ease;
}
.article-card:hover h3 { color: var(--accent-red); }

.read-more {
    text-decoration: none; color: var(--primary-dark);
    font-weight: 700; font-size: 0.95rem;
    display: inline-flex; align-items: center; gap: 6px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .articles-grid { grid-auto-columns: calc((100% - 24px) / 2); }
    .section-title { font-size: 2.8rem; }
}

@media (max-width: 768px) {
    .section-header { flex-direction: column; align-items: flex-start; gap: 25px; }
    .header-actions { width: 100%; justify-content: space-between; }
    .articles-grid { grid-auto-columns: 100%; }
}
/* تنظیمات عمومی اسلایدر برای جلوگیری از شکستگی */
.articles-grid {
    display: grid;
    grid-auto-flow: column;
    /* فاصله بین کارت‌ها */
    gap: 20px; 
    /* اجازه خروج از کانتینر برای اسکرول */
    overflow-x: auto; 
    /* حذف اسکرول‌بار زشت در مرورگرها */
    scrollbar-width: none; 
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory; /* برای اینکه کارت‌ها لب به لب متوقف شوند */
    padding: 10px 0 40px 0;
}

.articles-grid::-webkit-scrollbar {
    display: none;
}

.article-card {
    scroll-snap-align: start;
}

/* --- تنظیمات ریسپانسیو (بسیار مهم) --- */

/* دسکتاپ: ۳ کارت */
@media (min-width: 1025px) {
    .articles-grid {
        grid-auto-columns: calc((100% - 40px) / 3);
    }
}

/* تبلت: ۲ کارت کامل */
@media (max-width: 1024px) and (min-width: 769px) {
    .articles-grid {
        grid-auto-columns: calc((100% - 20px) / 2);
    }
}

/* موبایل: ۱ کارت کاملاً فیت شده */
@media (max-width: 768px) {
    .articles-grid {
        grid-auto-columns: 100%; /* کارت تمام عرض کانتینر را می‌گیرد */
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions {
        width: 100%;
        flex-direction: row; /* در موبایل دکمه و فلش‌ها کنار هم باشند بهتر است */
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
    
    .section-title {
        font-size: 2.2rem; /* کوچک‌تر برای موبایل */
    }
}
/* تماس با ما */

/* متغیرهای رنگی اختصاصی مجید */
:root {
    --brand-red: #cc0000;
    --brand-dark: #0f172a;
    --card-bg: #f8fafc;
    --transition-smooth: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.premium-contact {
    padding: 120px 0;
    background: #ffffff;
    overflow: hidden;
}

.contact-wrapper {
    grid-template-columns: 1fr 1.1fr; /* توازن بین عکس و محتوا */
    gap: 80px;
    align-items: center;
}

/* --- بخش عکس (سمت چپ) --- */
.contact-visual {
    position: relative;
}

.visual-inner {
    width: 100%;
    height: 700px;
    border-radius: 45px;
    background: #f1f5f9 url('/src/img/ertebat\ ba\ ma.png') center/cover no-repeat;
    box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.15);
    position: relative;
    transition: var(--transition-smooth);
}

.visual-inner:hover {
    transform: scale(1.02);
}

.availability-tag {
    position: absolute;
    bottom: 40px;
    left: 40px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    padding: 12px 25px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.pulse-dot {
    width: 10px; height: 10px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green 2s infinite;
}

/* --- بخش جزئیات (سمت راست) --- */
.tag-line {
    color: var(--brand-red);
    font-weight: 800;
    letter-spacing: 3px;
    font-size: 0.8rem;
}

.title-display {
    font-family: 'Morabba', serif;
    font-size: 4rem;
    line-height: 1.1;
    margin: 15px 0 50px;
    color: var(--brand-dark);
}

.title-display span {
    color: var(--brand-red);
}

.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-tile {
    display: flex;
    align-items: center;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 24px;
    text-decoration: none;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.contact-tile:hover {
    background: #fff;
    border-color: #e2e8f0;
    transform: translateX(20px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.tile-icon {
    width: 60px; height: 60px;
    background: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--brand-red);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    margin-right: 25px;
}

.tile-body small {
    display: block;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-bottom: 5px;
}

.tile-body p {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0;
}

.tile-arrow {
    margin-left: auto;
    color: #cbd5e1;
    transition: var(--transition-smooth);
}

.contact-tile:hover .tile-arrow {
    color: var(--brand-red);
    transform: translateX(5px);
}

/* --- ردیف سوشال مدیا --- */
.social-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.social-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    background: var(--card-bg);
    border-radius: 24px;
    text-decoration: none;
    transition: var(--transition-smooth);
    gap: 10px;
}

.social-box i { font-size: 1.8rem; color: var(--brand-dark); }
.social-box span { font-size: 0.85rem; font-weight: 700; color: var(--brand-dark); }

.social-box:hover { transform: translateY(-10px); color: #fff; }
.social-box:hover i, .social-box:hover span { color: #fff; }

.instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.whatsapp:hover { background: #25D366; }
.telegram:hover { background: #0088cc; }

/* انیمیشن‌ها */
@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* موبایل ریسپانسیو */
@media (max-width: 1024px) {
    .contact-wrapper { grid-template-columns: 1fr; gap: 50px; }
    .visual-inner { height: 450px; }
    .title-display { font-size: 3rem; }
    .social-row { grid-template-columns: 1fr; }
}
.social-button-container {
    display: flex;
    gap: 20px;
    justify-content: flex-start; /* یا center بسته به نیازت */
    padding: 20px 0;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 35px;
    background: #f8faff; /* دقیقا همان رنگ روشن تصویر */
    border-radius: 25px; /* لبه‌های گرد مشابه تصویر */
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 180px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); /* سایه بسیار ملایم */
}

/* استایل آیکون */
.icon-wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper svg {
    width: 100%;
    height: 100%;
}

/* استایل متن */
.social-btn span {
    font-family: 'Inter', sans-serif; /* یا هر فونتی که استفاده می‌کنی */
    font-weight: 700;
    font-size: 1.1rem;
    color: #0f172a; /* رنگ متن تیره تصویر */
}

/* --- افکت‌های هاور حرفه‌ای --- */

.social-btn:hover {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* تغییر رنگ متن در هاور (اختیاری - برای جذابیت بیشتر) */
.instagram-btn:hover span { color: #d6249f; }
.whatsapp-btn:hover span { color: #25D366; }
.telegram-btn:hover span { color: #0088cc; }

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .social-button-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .social-btn {
        justify-content: center;
    }
}
/* سوالات متداول */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root {
    --faq-blue: #0046ff;       /* آبی برند */
    --faq-red: #ff3b30;        /* قرمز اکشن */
    --faq-dark: #0f172a;       /* سورمه‌ای تیره */
    --faq-slate: #64748b;      /* متن فرعی */
    --faq-border: #e2e8f0;     /* رنگ خطوط */
    --faq-bg-soft: #f8fafc;    /* پس‌زمینه ملایم */
}

.faq-premium-section {
    padding: 120px 5%;
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    color: var(--faq-dark);
}

.faq-inner-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 80px;
}

/* Sidebar Styling */
.faq-sidebar-info {
    position: sticky;
    top: 120px;
    height: fit-content;
}

.faq-badge {
    color: var(--faq-red);
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.8rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.faq-main-heading {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -2px;
}

.highlight-blue {
    color: var(--faq-blue);
}

.faq-description {
    color: var(--faq-slate);
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 450px;
}

.faq-action-link {
    font-weight: 700;
    color: var(--faq-dark);
    text-decoration: none;
    border-bottom: 2px solid var(--faq-red);
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

.faq-action-link:hover {
    color: var(--faq-red);
    padding-left: 10px;
}

/* Accordion Styling */
.faq-accordion-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-top: 1px solid var(--faq-border);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.faq-item:last-child {
    border-bottom: 1px solid var(--faq-border);
}

.faq-header {
    padding: 40px 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.faq-idx {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--faq-blue);
    margin-right: 40px;
    opacity: 0.5;
}

.faq-title {
    font-size: 1.5rem;
    font-weight: 700;
    flex: 1;
    margin: 0;
    transition: color 0.3s ease;
}

/* Custom Icon */
.faq-icon-box {
    width: 24px;
    height: 24px;
    position: relative;
}

.faq-icon-box::before, .faq-icon-box::after {
    content: '';
    position: absolute;
    background-color: var(--faq-dark);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.faq-icon-box::before {
    width: 2px; height: 100%; left: 50%; transform: translateX(-50%);
}

.faq-icon-box::after {
    height: 2px; width: 100%; top: 50%; transform: translateY(-50%);
}

/* Interaction States */
.faq-item:hover .faq-title {
    color: var(--faq-red);
}

.faq-item.active {
    background-color: var(--faq-bg-soft);
    padding: 0 20px;
}

.faq-item.active .faq-title {
    color: var(--faq-blue);
}

.faq-item.active .faq-icon-box::before {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.faq-item.active .faq-icon-box::after {
    background-color: var(--faq-red);
    transform: translateY(-50%) rotate(180deg);
}

/* Collapse Mechanics */
.faq-body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.faq-text-content {
    padding: 0 0 40px 85px; /* Aligned with title */
    color: var(--faq-slate);
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 90%;
}

/* Responsive */
@media (max-width: 1024px) {
    .faq-inner-container { grid-template-columns: 1fr; gap: 50px; }
    .faq-sidebar-info { position: static; }
    .faq-main-heading { font-size: 3.2rem; }
    .faq-text-content { padding-left: 60px; }
}
/* اصلاحات اختصاصی برای ریسپانسیو و موبایل */
@media (max-width: 1024px) {
    .faq-inner-container { 
        grid-template-columns: 1fr; 
        gap: 40px; 
        padding-top: 20px;
    }
    
    .faq-sidebar-info { 
        position: static; 
        text-align: left;
    }

    .faq-main-heading { 
        font-size: 2.8rem; /* عنوان اصلی کمی کوچک‌تر */
        margin-bottom: 15px;
    }

    .faq-description {
        font-size: 1rem;
        margin-bottom: 25px;
    }
}

@media (max-width: 768px) {
    .faq-premium-section {
        padding: 60px 20px; /* کاهش پدینگ کلی بخش در موبایل */
    }

    .faq-main-heading { 
        font-size: 2.2rem; /* عنوان بخش در موبایل */
    }

    .faq-header {
        padding: 25px 5px; /* کاهش فاصله عمودی هر سوال */
    }

    .faq-idx {
        margin-right: 20px; /* فاصله کمتر شماره با متن */
        font-size: 0.75rem;
    }

    .faq-title {
        font-size: 1.15rem; /* سایز بهینه‌شده برای سوالات در موبایل */
        line-height: 1.4;
    }

    .faq-icon-box {
        width: 18px; /* آیکون پلاس کمی ظریف‌تر */
        height: 18px;
    }

    .faq-text-content {
        padding: 0 10px 25px 45px; /* تراز کردن پاسخ با متن سوال در موبایل */
        font-size: 0.95rem; /* متن پاسخ کمی کوچک‌تر */
        line-height: 1.6;
    }

    .faq-item.active {
        padding: 0 10px; /* جلوگیری از پرش زیاد متن هنگام فعال شدن */
    }
}
/* فوتر */
:root {
    --footer-bg: #030712;      /* مشکی عمیق‌تر برای جلوه بیشتر قرمز */
    --footer-text: #9ca3af;
    --footer-white: #ffffff;
    --primary-red: #ff3b30;    /* رنگ قرمز جدید منطبق بر تصویر */
    --hover-red: #d32f2f;
}

.premium-footer {
    background-color: var(--footer-bg);
    padding: 100px 5% 40px;
    font-family: 'Inter', sans-serif;
    color: var(--footer-text);
    border-top: 1px solid rgba(255, 59, 48, 0.1); /* خط بسیار ظریف قرمز در بالای فوتر */
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 0.8fr 1.2fr;
    gap: 60px;
    padding-bottom: 80px;
}

/* Logo & Branding */
.footer-logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--footer-white);
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.footer-logo span {
    color: var(--primary-red); /* بخش Sazan قرمز شد */
}

.footer-bio {
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 30px;
    max-width: 320px;
}

/* Social Icons */
.social-icon {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--footer-white);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(255, 59, 48, 0.2);
}

/* Links & Titles */
.footer-title {
    color: var(--footer-white);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: var(--footer-text);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-red); /* تغییر رنگ لینک‌ها در هاور به قرمز */
    padding-left: 8px;
}

/* Newsletter Custom Red */
.footer-form {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    padding: 5px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.3s;
}

.footer-form:focus-within {
    border-color: var(--primary-red);
}

.footer-form input {
    background: transparent;
    border: none;
    padding: 12px 15px;
    color: white;
    flex: 1;
    outline: none;
}

.footer-form button {
    background: var(--primary-red);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer-form button:hover {
    background: var(--hover-red);
    box-shadow: 0 0 15px rgba(255, 59, 48, 0.4);
}

/* Bottom Bar & CodeAction Signature */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 40px;
}

.bottom-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.codeaction-link {
    color: var(--primary-red); /* امضای شما با رنگ اصلی قرمز */
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.5px;
    position: relative;
    transition: all 0.3s;
}

.codeaction-link:hover {
    text-shadow: 0 0 10px rgba(179, 9, 0, 0.5);
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-container { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 600px) {
    .footer-container { grid-template-columns: 1fr; }
    .bottom-container { flex-direction: column; gap: 20px; text-align: center; }
}
.faq-main-heading {
    font-size: 4.5rem; /* ابعاد بزرگ و تاثیرگذار طبق تصویر */
    font-weight: 850;
    line-height: 1;
    color: #1a1a1a; /* رنگ تیره برای متن Expert و FAQ */
    letter-spacing: -2px;
}

.faq-main-heading .accent-text {
    color: #cc0c02bd; /* قرمزِ جدید و جذاب شما */
}

.faq-main-heading .dot {
    color: #f3150ac4; /* نقطه انتهای جمله هم قرمز باشد برای جزییات بیشتر */
}

/* افکت اختیاری برای درخشش ملایم کلمه قرمز در حالت Dark Mode (اگر سایت تیره است) */
.faq-premium-section.dark .faq-main-heading .accent-text {
    text-shadow: 0 0 30px rgba(255, 59, 48, 0.2);
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .faq-main-heading {
        font-size: 2.8rem;
        letter-spacing: -1px;
    }
}
/* حالت اولیه المان‌های مخفی */
.reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); /* منحنی بسیار نرم Apple-Style */
    visibility: hidden;
}

/* حالتی که بعد از اسکرول فعال می‌شود */
.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

/* انیمیشن پله‌پله برای فرزندان */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active .stagger-item {
    opacity: 1;
    transform: translateY(0);
}
/* حالت لودینگ */
/* --- Professional Reveal Loading System by GapGPT --- */

/* ۱. حالت اولیه تمام المان‌های بخش About (مخفی کردن هوشمند) */
.about-main > *, 
.mission-card, 
.highlight-item, 
.identity-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* ۲. استایل اختصاصی برای کارت سمت راست (ظهور سه‌بعدی) */
.identity-card {
    transform: translateX(40px) rotateY(-8deg) scale(0.95);
    transform-origin: right;
}

/* ۳. کلاس محرک که توسط JS اضافه می‌شود */
.about-page.is-visible .about-main > * {
    opacity: 1;
    transform: translateY(0);
}

.about-page.is-visible .identity-card {
    opacity: 1;
    transform: translateX(0) rotateY(0) scale(1);
}

/* ۴. زمان‌بندی پله‌پله (Stagger Effect) بدون تغییر HTML */
.about-page.is-visible .about-main > *:nth-child(1) { transition-delay: 0.1s; } /* Eyebrow */
.about-page.is-visible .about-main > *:nth-child(2) { transition-delay: 0.2s; } /* Title */
.about-page.is-visible .about-main > *:nth-child(3) { transition-delay: 0.3s; } /* Lead */
.about-page.is-visible .about-main > *:nth-child(4) { transition-delay: 0.4s; } /* Body */
.about-page.is-visible .mission-card { transition-delay: 0.6s; }
.about-page.is-visible .about-highlights { transition-delay: 0.7s; opacity: 1; transform: none; }

/* ۵. انیمیشن داخلی هایلایت‌ها */
.about-page.is-visible .highlight-item:nth-child(1) { transition-delay: 0.8s; opacity: 1; transform: translateY(0); }
.about-page.is-visible .highlight-item:nth-child(2) { transition-delay: 0.9s; opacity: 1; transform: translateY(0); }
.about-page.is-visible .highlight-item:nth-child(3) { transition-delay: 1.0s; opacity: 1; transform: translateY(0); }
/* مزیت ها */
/* =========================================================
   ADVANTAGES SECTION - PREMIUM LOADING / REVEAL ANIMATION
   No HTML changes required
   ========================================================= */

/* بهبود رندر */
.advantages-section,
.advantages-section * {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* اگر کاربر motion کمتر بخواهد */
@media (prefers-reduced-motion: reduce) {
  .advantages-section *,
  .advantages-section *::before,
  .advantages-section *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ---------------------------------
   حالت اولیه سکشن
--------------------------------- */
.advantages-section {
  overflow: hidden;
}

/* هدر سکشن */
.advantages-section .advantages-header .eyebrow,
.advantages-section .advantages-header .section-title {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}

/* عنوان ریز بالا */
.advantages-section .advantages-header .eyebrow {
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* تیتر اصلی با حس لوکس‌تر */
.advantages-section .advantages-header .section-title {
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------
   کارت‌ها - حالت اولیه
--------------------------------- */
.advantages-section .advantage-card {
  opacity: 0;
  transform:
    translateY(48px)
    scale(0.96)
    rotateX(8deg);
  filter: blur(10px);
  will-change: transform, opacity, filter;
  transform-origin: center bottom;
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
  position: relative;
}

/* شاین خیلی ظریف روی کارت */
.advantages-section .advantage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.04) 35%,
      rgba(255,255,255,0.10) 50%,
      rgba(255,255,255,0.04) 65%,
      rgba(255,255,255,0) 100%
    );
  transform: translateX(-130%);
  opacity: 0;
}

/* آیکون */
.advantages-section .advantage-card .advantage-icon {
  opacity: 0;
  transform: translateY(16px) scale(0.75) rotate(-8deg);
  filter: blur(6px);
  will-change: transform, opacity, filter;
  transition:
    opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 0.95s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* عنوان و متن هر کارت */
.advantages-section .advantage-card .advantage-title,
.advantages-section .advantage-card .advantage-description {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}

.advantages-section .advantage-card .advantage-title {
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.advantages-section .advantage-card .advantage-description {
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------
   حالت visible
--------------------------------- */
.advantages-section.is-visible .advantages-header .eyebrow {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.05s;
}

.advantages-section.is-visible .advantages-header .section-title {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.18s;
}

.advantages-section.is-visible .advantage-card {
  opacity: 1;
  transform:
    translateY(0)
    scale(1)
    rotateX(0deg);
  filter: blur(0);
}

.advantages-section.is-visible .advantage-card .advantage-icon {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  filter: blur(0);
}

.advantages-section.is-visible .advantage-card .advantage-title,
.advantages-section.is-visible .advantage-card .advantage-description {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------------------------------
   ترتیب زمانی کارت‌ها
--------------------------------- */
.advantages-section.is-visible .advantage-card:nth-child(1) { transition-delay: 0.28s; }
.advantages-section.is-visible .advantage-card:nth-child(2) { transition-delay: 0.40s; }
.advantages-section.is-visible .advantage-card:nth-child(3) { transition-delay: 0.52s; }
.advantages-section.is-visible .advantage-card:nth-child(4) { transition-delay: 0.64s; }
.advantages-section.is-visible .advantage-card:nth-child(5) { transition-delay: 0.76s; }
.advantages-section.is-visible .advantage-card:nth-child(6) { transition-delay: 0.88s; }

/* زمان‌بندی داخلی هر کارت */
.advantages-section.is-visible .advantage-card:nth-child(1) .advantage-icon { transition-delay: 0.42s; }
.advantages-section.is-visible .advantage-card:nth-child(2) .advantage-icon { transition-delay: 0.54s; }
.advantages-section.is-visible .advantage-card:nth-child(3) .advantage-icon { transition-delay: 0.66s; }
.advantages-section.is-visible .advantage-card:nth-child(4) .advantage-icon { transition-delay: 0.78s; }
.advantages-section.is-visible .advantage-card:nth-child(5) .advantage-icon { transition-delay: 0.90s; }
.advantages-section.is-visible .advantage-card:nth-child(6) .advantage-icon { transition-delay: 1.02s; }

.advantages-section.is-visible .advantage-card:nth-child(1) .advantage-title { transition-delay: 0.49s; }
.advantages-section.is-visible .advantage-card:nth-child(2) .advantage-title { transition-delay: 0.61s; }
.advantages-section.is-visible .advantage-card:nth-child(3) .advantage-title { transition-delay: 0.73s; }
.advantages-section.is-visible .advantage-card:nth-child(4) .advantage-title { transition-delay: 0.85s; }
.advantages-section.is-visible .advantage-card:nth-child(5) .advantage-title { transition-delay: 0.97s; }
.advantages-section.is-visible .advantage-card:nth-child(6) .advantage-title { transition-delay: 1.09s; }

.advantages-section.is-visible .advantage-card:nth-child(1) .advantage-description { transition-delay: 0.58s; }
.advantages-section.is-visible .advantage-card:nth-child(2) .advantage-description { transition-delay: 0.70s; }
.advantages-section.is-visible .advantage-card:nth-child(3) .advantage-description { transition-delay: 0.82s; }
.advantages-section.is-visible .advantage-card:nth-child(4) .advantage-description { transition-delay: 0.94s; }
.advantages-section.is-visible .advantage-card:nth-child(5) .advantage-description { transition-delay: 1.06s; }
.advantages-section.is-visible .advantage-card:nth-child(6) .advantage-description { transition-delay: 1.18s; }

/* ---------------------------------
   شاین هنگام ورود
--------------------------------- */
.advantages-section.is-visible .advantage-card::before {
  opacity: 1;
  animation: advantageShine 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.advantages-section.is-visible .advantage-card:nth-child(1)::before { animation-delay: 0.45s; }
.advantages-section.is-visible .advantage-card:nth-child(2)::before { animation-delay: 0.57s; }
.advantages-section.is-visible .advantage-card:nth-child(3)::before { animation-delay: 0.69s; }
.advantages-section.is-visible .advantage-card:nth-child(4)::before { animation-delay: 0.81s; }
.advantages-section.is-visible .advantage-card:nth-child(5)::before { animation-delay: 0.93s; }
.advantages-section.is-visible .advantage-card:nth-child(6)::before { animation-delay: 1.05s; }

@keyframes advantageShine {
  0% {
    transform: translateX(-130%);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

/* ---------------------------------
   افکت hover حرفه‌ای بعد از لود
--------------------------------- */
.advantages-section.is-visible .advantage-card:hover {
  transform: translateY(-8px) scale(1.015);
}

.advantages-section.is-visible .advantage-card:hover .advantage-icon {
  transform: translateY(-2px) scale(1.05);
}

/* ---------------------------------
   اگر کارت‌ها داخل گرید باشند، عمق بهتر
--------------------------------- */
.advantages-section .advantages-grid {
  perspective: 1200px;
}
/* استاندارد های قابل درخواست */
/* مخفی کردن اولیه فقط در صورتی که JS فعال باشد - برای جلوگیری از باگ عدم نمایش */
.standard-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.standards-content > *, .standards-visual {
    opacity: 0;
    filter: blur(8px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* حالت نمایش وقتی اسکرول انجام می‌شود */
.standards-split-section.is-visible .standard-item,
.standards-split-section.is-visible .standards-content > *,
.standards-split-section.is-visible .standards-visual {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
    filter: blur(0) saturate(1);
}

/* زمان‌بندی دقیق برای کارت‌هایی که در عکس فرستادی */
.standards-split-section.is-visible .standard-item:nth-child(1) { transition-delay: 0.3s; }
.standards-split-section.is-visible .standard-item:nth-child(2) { transition-delay: 0.4s; }
.standards-split-section.is-visible .standard-item:nth-child(3) { transition-delay: 0.5s; }
.standards-split-section.is-visible .standard-item:nth-child(4) { transition-delay: 0.6s; }
.standards-split-section.is-visible .standard-item:nth-child(5) { transition-delay: 0.7s; }
.standards-split-section.is-visible .standard-item:nth-child(6) { transition-delay: 0.8s; }

/* استایل آیکون چک‌مارک قرمز که در عکس هست */
.standard-icon {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* خدمات صدور گواهینامه */
/* --- Certification Services Bento Reveal --- */

/* ۱. مخفی‌سازی اولیه بخش هدر */
.services-intro .eyebrow,
.services-intro .section-title,
.services-intro p {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ۲. تنظیمات اولیه کارت‌های Bento */
.services-bento-grid .bento-item {
    opacity: 0;
    transform: translateY(40px) scale(0.92) rotateX(10deg);
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); /* افکت فنری ملایم */
}

/* ۳. انیمیشن داخلی آیتم‌های IMS (لیست کوچک داخل کارت اصلی) */
.ims-features span {
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.5s ease;
}

/* ۴. مخفی‌سازی CTA نهایی */
.verification-cta {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

/* --- کلاس Trigger (وقتی سکشن دیده می‌شود) --- */

.cert-services-advanced.is-active .services-intro > * {
    opacity: 1;
    transform: translateY(0);
}

.cert-services-advanced.is-active .services-bento-grid .bento-item {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
}

.cert-services-advanced.is-active .ims-features span {
    opacity: 1;
    transform: translateX(0);
}

.cert-services-advanced.is-active .verification-cta {
    opacity: 1;
    transform: translateY(0);
}

/* ۵. مدیریت زمان‌بندی (Staggering) */

/* تاخیر برای متون هدر */
.cert-services-advanced.is-active .services-intro .section-title { transition-delay: 0.15s; }
.cert-services-advanced.is-active .services-intro p { transition-delay: 0.25s; }

/* تاخیر برای کارت‌های بنتو - به ترتیب اهمیت و جایگاه */
.cert-services-advanced.is-active .ims-card { transition-delay: 0.4s; }
.cert-services-advanced.is-active .tech-card { transition-delay: 0.55s; }
.cert-services-advanced.is-active .process-card { transition-delay: 0.65s; }
.cert-services-advanced.is-active .mobility-card { transition-delay: 0.75s; }
.cert-services-advanced.is-active .mini-status-card { transition-delay: 0.85s; }

/* تاخیر برای لیست داخلی IMS */
.cert-services-advanced.is-active .ims-features span:nth-child(1) { transition-delay: 0.9s; }
.cert-services-advanced.is-active .ims-features span:nth-child(2) { transition-delay: 1s; }
.cert-services-advanced.is-active .ims-features span:nth-child(3) { transition-delay: 1.1s; }

/* تاخیر برای بخش تاییدیه نهایی */
.cert-services-advanced.is-active .verification-cta { transition-delay: 1.3s; }
/* مقالات */
/* --- Articles Slider Reveal --- */

/* ۱. هدر بخش مقالات */
.articles-slider-section .header-content > *,
.articles-slider-section .header-actions {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ۲. کارت‌های مقاله (حالت اولیه) */
.article-card {
    opacity: 0;
    transform: translateX(50px) scale(0.95); /* ورود از سمت راست */
    transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ۳. افکت تصویر داخل کارت (زوم ملایم هنگام لود) */
.article-card .article-image img {
    transform: scale(1.2);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ۴. کلاس فعال‌ساز */
.articles-slider-section.is-revealed .header-content > *,
.articles-slider-section.is-revealed .header-actions {
    opacity: 1;
    transform: translateY(0);
}

.articles-slider-section.is-revealed .article-card {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.articles-slider-section.is-revealed .article-card .article-image img {
    transform: scale(1);
}

/* ۵. زمان‌بندی پله‌پله (Staggering) */

/* هدر */
.articles-slider-section.is-revealed .sub-badge { transition-delay: 0.1s; }
.articles-slider-section.is-revealed .section-title { transition-delay: 0.2s; }
.articles-slider-section.is-revealed .section-desc { transition-delay: 0.3s; }
.articles-slider-section.is-revealed .header-actions { transition-delay: 0.4s; }

/* کارت‌ها (به ترتیب نمایش در اسلایدر) */
.articles-slider-section.is-revealed .article-card:nth-child(1) { transition-delay: 0.5s; }
.articles-slider-section.is-revealed .article-card:nth-child(2) { transition-delay: 0.65s; }
.articles-slider-section.is-revealed .article-card:nth-child(3) { transition-delay: 0.8s; }
.articles-slider-section.is-revealed .article-card:nth-child(4) { transition-delay: 0.95s; }
/* تماس با ما */
/* --- Premium Contact Reveal --- */

/* ۱. بخش تصویر/ویژوال سمت چپ */
.contact-visual {
    opacity: 0;
    transform: scale(0.9) translateX(-30px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ۲. محتوای سمت راست (تیتر و متن) */
.details-header .tag-line,
.details-header .title-display,
.details-header .title-display span {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ۳. کارت‌های تماس (Phone & Email) */
.contact-tile {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* کمی حالت فنری */
}

/* ۴. دکمه‌های شبکه‌های اجتماعی */
.social-btn {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- حالت فعال (Trigger) --- */

.premium-contact.is-active .contact-visual {
    opacity: 1;
    transform: scale(1) translateX(0);
}

.premium-contact.is-active .details-header > *,
.premium-contact.is-active .contact-tile,
.premium-contact.is-active .social-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ۵. زمان‌بندی (Staggering) */

/* هدر تماس */
.premium-contact.is-active .details-header .tag-line { transition-delay: 0.2s; }
.premium-contact.is-active .details-header .title-display { transition-delay: 0.3s; }

/* کارت‌های تماس */
.premium-contact.is-active .contact-tile.phone { transition-delay: 0.5s; }
.premium-contact.is-active .contact-tile.email { transition-delay: 0.6s; }

/* دکمه‌های اجتماعی (پاپ آپ یکی‌یکی) */
.premium-contact.is-active .instagram-btn { transition-delay: 0.8s; }
.premium-contact.is-active .whatsapp-btn { transition-delay: 0.9s; }
.premium-contact.is-active .telegram-btn { transition-delay: 1s; }

/* انیمیشن Pulse برای تگ در دسترس بودن (همیشه فعال باشد) */
.pulse-dot {
    animation: contact-pulse 2s infinite;
}

@keyframes contact-pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}
/* سوالات متداول */
/* =========================================
   FAQ Premium Section Reveal Animation
   ========================================= */

/* برای روان‌تر شدن رندر */
.faq-premium-section {
    overflow: hidden;
}

/* --- ستون چپ: Sidebar Info --- */
.faq-sidebar-info > * {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* تیتر اصلی کمی cinematic تر */
.faq-main-heading {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* اکسنت داخل تیتر کمی با تاخیر مستقل */
.faq-main-heading .accent-text,
.faq-main-heading .dot {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    filter: blur(6px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* CTA سمت چپ */
.faq-action-link {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- ستون راست: Accordion Items --- */
.faq-item {
    opacity: 0;
    transform: translateY(32px) scale(0.985);
    filter: blur(8px);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
    will-change: transform, opacity, filter;
}

/* اجزای داخلی هر آیتم */
.faq-item .faq-idx,
.faq-item .faq-title,
.faq-item .faq-icon-box {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* اگر خواستی خط جداکننده یا سطح کارت subtle تر حس شود */
.faq-item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.08) 45%,
        rgba(255,255,255,0) 100%
    );
    opacity: 0;
    transform: translateX(-12%);
    transition:
        opacity 0.9s ease,
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* مهم: اگر faq-item از قبل position ندارد */
.faq-item {
    position: relative;
}

/* --- حالت فعال شدن سکشن --- */
.faq-premium-section.is-visible .faq-sidebar-info > * {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.faq-premium-section.is-visible .faq-main-heading {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.faq-premium-section.is-visible .faq-main-heading .accent-text,
.faq-premium-section.is-visible .faq-main-heading .dot {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.faq-premium-section.is-visible .faq-action-link {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.faq-premium-section.is-visible .faq-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.faq-premium-section.is-visible .faq-item .faq-idx,
.faq-premium-section.is-visible .faq-item .faq-title,
.faq-premium-section.is-visible .faq-item .faq-icon-box {
    opacity: 1;
    transform: translateY(0);
}

.faq-premium-section.is-visible .faq-item::before {
    opacity: 1;
    transform: translateX(0);
}

/* --- Stagger Timing: ستون چپ --- */
.faq-premium-section.is-visible .faq-main-heading {
    transition-delay: 0.08s;
}

.faq-premium-section.is-visible .faq-main-heading .accent-text {
    transition-delay: 0.22s;
}

.faq-premium-section.is-visible .faq-main-heading .dot {
    transition-delay: 0.3s;
}

.faq-premium-section.is-visible .faq-description {
    transition-delay: 0.22s;
}

.faq-premium-section.is-visible .faq-cta-wrapper {
    transition-delay: 0.34s;
}

.faq-premium-section.is-visible .faq-action-link {
    transition-delay: 0.4s;
}

/* --- Stagger Timing: آیتم‌های FAQ --- */
.faq-premium-section.is-visible .faq-item:nth-child(1) { transition-delay: 0.18s; }
.faq-premium-section.is-visible .faq-item:nth-child(2) { transition-delay: 0.28s; }
.faq-premium-section.is-visible .faq-item:nth-child(3) { transition-delay: 0.38s; }
.faq-premium-section.is-visible .faq-item:nth-child(4) { transition-delay: 0.48s; }
.faq-premium-section.is-visible .faq-item:nth-child(5) { transition-delay: 0.58s; }
.faq-premium-section.is-visible .faq-item:nth-child(6) { transition-delay: 0.68s; }
.faq-premium-section.is-visible .faq-item:nth-child(7) { transition-delay: 0.78s; }

/* اجزای داخلی هر آیتم کمی بعد از خود آیتم */
.faq-premium-section.is-visible .faq-item:nth-child(1) .faq-idx,
.faq-premium-section.is-visible .faq-item:nth-child(1) .faq-title,
.faq-premium-section.is-visible .faq-item:nth-child(1) .faq-icon-box { transition-delay: 0.34s; }

.faq-premium-section.is-visible .faq-item:nth-child(2) .faq-idx,
.faq-premium-section.is-visible .faq-item:nth-child(2) .faq-title,
.faq-premium-section.is-visible .faq-item:nth-child(2) .faq-icon-box { transition-delay: 0.44s; }

.faq-premium-section.is-visible .faq-item:nth-child(3) .faq-idx,
.faq-premium-section.is-visible .faq-item:nth-child(3) .faq-title,
.faq-premium-section.is-visible .faq-item:nth-child(3) .faq-icon-box { transition-delay: 0.54s; }

.faq-premium-section.is-visible .faq-item:nth-child(4) .faq-idx,
.faq-premium-section.is-visible .faq-item:nth-child(4) .faq-title,
.faq-premium-section.is-visible .faq-item:nth-child(4) .faq-icon-box { transition-delay: 0.64s; }

.faq-premium-section.is-visible .faq-item:nth-child(5) .faq-idx,
.faq-premium-section.is-visible .faq-item:nth-child(5) .faq-title,
.faq-premium-section.is-visible .faq-item:nth-child(5) .faq-icon-box { transition-delay: 0.74s; }

.faq-premium-section.is-visible .faq-item:nth-child(6) .faq-idx,
.faq-premium-section.is-visible .faq-item:nth-child(6) .faq-title,
.faq-premium-section.is-visible .faq-item:nth-child(6) .faq-icon-box { transition-delay: 0.84s; }

.faq-premium-section.is-visible .faq-item:nth-child(7) .faq-idx,
.faq-premium-section.is-visible .faq-item:nth-child(7) .faq-title,
.faq-premium-section.is-visible .faq-item:nth-child(7) .faq-icon-box { transition-delay: 0.94s; }

/* --- Hover فقط بعد از لود بهتر دیده می‌شود --- */
/* --- Hover فقط بعد از لود بهتر دیده می‌شود --- */
.faq-premium-section.is-visible .faq-item:hover {
    transform: translateY(-6px) scale(1.01);
    filter: blur(0);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

.faq-premium-section.is-visible .faq-item:hover::before {
    opacity: 1;
    transform: translateX(8%);
}

/* یک حس premium: عنوان و ایندکس کمی واضح‌تر روی هاور */
.faq-premium-section.is-visible .faq-item:hover .faq-title {
    transform: translateY(-1px);
}

.faq-premium-section.is-visible .faq-item:hover .faq-idx {
    transform: translateY(-1px);
    opacity: 1;
}

/* --- Micro motion برای icon box (اگر با pseudo-element ساخته شده باشد هم اوکیه) --- */
.faq-icon-box {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.55s ease;
    will-change: transform;
}

.faq-premium-section.is-visible .faq-item:hover .faq-icon-box {
    transform: rotate(6deg) scale(1.05);
}

/* --- Optional: یک shimmer خیلی subtle وقتی ظاهر می‌شود --- */
@keyframes faqShimmer {
    0%   { transform: translateX(-18%); opacity: 0; }
    25%  { opacity: 0.35; }
    100% { transform: translateX(18%); opacity: 0; }
}

/* shimmer فقط هنگام reveal اجرا شود (نه همیشه) */
.faq-premium-section.is-visible .faq-item::before {
    animation: faqShimmer 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s 1 both;
}

/* --- Performance: اگر تعداد FAQ زیاد شد، blur سنگین می‌شود؛ این fallback کمک می‌کند --- */
@media (max-width: 576px) {
    .faq-sidebar-info > *,
    .faq-item {
        filter: none; /* روی موبایل blur را حذف می‌کنیم برای FPS بهتر */
    }
}

/* --- Reduced Motion (استاندارد حرفه‌ای دسترسی‌پذیری) --- */
@media (prefers-reduced-motion: reduce) {
    .faq-sidebar-info > *,
    .faq-main-heading,
    .faq-main-heading .accent-text,
    .faq-main-heading .dot,
    .faq-action-link,
    .faq-item,
    .faq-item .faq-idx,
    .faq-item .faq-title,
    .faq-item .faq-icon-box,
    .faq-item::before {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}
/* فوتر */
/* =========================================
   Premium Footer Reveal Animation
   ========================================= */

/* حالت اولیه: مخفی کردن ستون‌ها */
.footer-column {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
    transition: 
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* افکت خاص برای لوگو و بیو در ستون اول */
.footer-logo, .footer-bio, .footer-socials {
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* افکت لینک‌های فوتر (Hover حرفه‌ای) */
.footer-links li a {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-links li a:hover {
    transform: translateX(-5px); /* حرکت به سمت چپ در راست‌چین یا برعکس */
    color: var(--primary-red); /* فرض بر وجود متغیر رنگ برند */
}

/* بخش کپی‌رایت پایین */
.footer-bottom {
    opacity: 0;
    border-top: 1px solid rgba(255, 255, 255, 0);
    transition: opacity 1.2s ease 0.8s, border-color 1.2s ease 0.8s;
}

.bottom-container {
    transform: translateY(10px);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s;
}

/* --- Trigger: وقتی کلاس is-visible اضافه شود --- */

.premium-footer.is-visible .footer-column {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.premium-footer.is-visible .footer-logo,
.premium-footer.is-visible .footer-bio,
.premium-footer.is-visible .footer-socials {
    opacity: 1;
    transform: translateX(0);
}

.premium-footer.is-visible .footer-bottom {
    opacity: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-footer.is-visible .bottom-container {
    transform: translateY(0);
}

/* --- Stagger Timing: تاخیر زمانی برای هر ستون --- */
.premium-footer.is-visible .footer-column:nth-child(1) { transition-delay: 0.1s; }
.premium-footer.is-visible .footer-column:nth-child(2) { transition-delay: 0.25s; }
.premium-footer.is-visible .footer-column:nth-child(3) { transition-delay: 0.4s; }
.premium-footer.is-visible .footer-column:nth-child(4) { transition-delay: 0.55s; }

/* تاخیر داخلی ستون اول */
.premium-footer.is-visible .footer-logo { transition-delay: 0.2s; }
.premium-footer.is-visible .footer-bio { transition-delay: 0.35s; }
.premium-footer.is-visible .footer-socials { transition-delay: 0.5s; }

/* انیمیشن دکمه Join خبرنامه */
.footer-form button {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.footer-form button:hover {
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.2);
}

/* امضای CodeAction */
/* --- CodeAction Signature Styling --- */
.codeaction-link {
    position: relative;
    font-weight: 700; /* کمی ضخیم‌تر برای تاکید */
    text-decoration: none;
    color: #ff3b3b; /* قرمز برند CodeAction */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
}

/* افکت Underline متحرک */
.codeaction-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    right: 0; /* شروع از راست (برای هماهنگی با زبان فارسی یا استایل خاص) */
    background-color: #ff3b3b;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.codeaction-link:hover {
    color: #ffffff; /* تغییر رنگ به سفید در هنگام هاور برای کنتراست بهتر */
    text-shadow: 0 0 8px rgba(255, 59, 59, 0.6); /* یک درخشش ملایم قرمز */
    transform: translateY(-1px);
}

.codeaction-link:hover::after {
    width: 100%;
    left: 0; /* گسترش به کل عرض */
}

/* برای حالت موبایل که در اسکرین‌شات فرستادی */
@media (max-width: 768px) {
    .designer-signature {
        margin-top: 10px;
        font-size: 14px;
        opacity: 0.9;
    }
}