/* ================================================================
   STYLE-HOME.CSS — بازطراحی مدرن صفحه اصلی
   صنعت سبز طبرستان
   این فایل را بعد از style.css اصلی لود کنید.
   ================================================================ */

:root{
    --primary:#1a3a2a;
    --primary-light:#2d6a4f;
    --primary-dark:#0f2a1e;
    --secondary:#52b788;
    --accent:#40916c;
    --gold:#d4a854;
    --gold-light:#e8c97a;
    --cream:#f5efe6;
    --ease:cubic-bezier(.2,.7,.2,1);
}

/* ================================================================
   HERO — اسلایدر تمام‌صفحه با انیمیشن Ken-Burns + کراس‌فید
   ================================================================ */
.hero-section{
    position:relative;
    min-height:92vh;
    overflow:hidden;
    isolation:isolate;
    color:#fff;
}
.hero-slider{
    position:absolute;
    inset:0;
    z-index:0;
}
.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.08);
    transition:opacity 1.4s var(--ease);
    will-change:opacity,transform;
}
.hero-slide.active{
    opacity:1;
    animation:kenBurns 8s var(--ease) forwards;
}
@keyframes kenBurns{
    0%  {transform:scale(1.08) translate(0,0);}
    100%{transform:scale(1.18) translate(-1.5%,-1%);}
}
.hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(135deg, rgba(15,42,30,.85) 0%, rgba(26,58,42,.65) 55%, rgba(15,42,30,.3) 100%),
        radial-gradient(circle at 80% 30%, rgba(212,168,84,.18), transparent 60%);
}
.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.particle{
    position:absolute;
    top:-10px;
    border-radius:50%;
    animation:float linear infinite;
    will-change:transform;
}
@keyframes float{
    to{ transform:translateY(110vh) translateX(20px); }
}

.hero-section .container{position:relative;z-index:2;}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.5rem 1.1rem;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(212,168,84,.4);
    color:var(--gold-light);
    border-radius:50px;
    font-size:.8rem;
    font-weight:600;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    animation:fadeInDown .8s var(--ease) .1s both;
}
.hero-title{
    font-size:clamp(2rem, 5vw, 4.2rem);
    font-weight:800;
    line-height:1.15;
    margin:1.2rem 0 1rem;
    text-shadow:0 6px 24px rgba(0,0,0,.35);
    animation:fadeInUp .9s var(--ease) .25s both;
}
.hero-title .highlight{
    background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    display:inline-block;
    position:relative;
}
.hero-title .highlight::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:-6px;
    height:4px;
    background:linear-gradient(90deg,var(--gold),transparent);
    border-radius:4px;
    transform-origin:right;
    animation:lineIn 1s var(--ease) 1s both;
}
@keyframes lineIn{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.hero-subtitle{
    font-size:clamp(1rem, 1.4vw, 1.2rem);
    max-width:640px;
    color:rgba(255,255,255,.85);
    margin-bottom:2rem;
    animation:fadeInUp .9s var(--ease) .4s both;
}

.hero-cta,.hero-cta-secondary{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.95rem 2rem;
    border-radius:50px;
    font-weight:700;
    letter-spacing:.3px;
    text-decoration:none;
    transition:all .35s var(--ease);
    animation:fadeInUp .9s var(--ease) .55s both;
}
.hero-cta{
    background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);
    color:var(--primary-dark);
    box-shadow:0 10px 30px rgba(212,168,84,.35);
}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(212,168,84,.5);color:var(--primary-dark);}
.hero-cta-secondary{
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1.5px solid rgba(255,255,255,.35);
    backdrop-filter:blur(6px);
}
.hero-cta-secondary:hover{background:rgba(255,255,255,.14);border-color:var(--gold);color:var(--gold-light);}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.2rem;
    margin-top:3rem;
    padding-top:2rem;
    border-top:1px solid rgba(255,255,255,.15);
    max-width:640px;
    animation:fadeIn 1s var(--ease) .8s both;
}
.stat-item{display:flex;flex-direction:column;}
.stat-number{
    font-size:clamp(1.6rem,3vw,2.4rem);
    font-weight:800;
    color:var(--gold-light);
    line-height:1;
}
.stat-label{font-size:.85rem;color:rgba(255,255,255,.7);margin-top:.35rem;}

/* اسلایدر ایندیکاتور */
.slider-dots{
    position:absolute;
    bottom:2.5rem;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    display:flex;
    gap:.7rem;
}
.slider-dots button{
    width:36px;height:4px;
    background:rgba(255,255,255,.3);
    border:none;border-radius:4px;
    cursor:pointer;
    transition:all .3s var(--ease);
    padding:0;
    position:relative;
    overflow:hidden;
}
.slider-dots button.active{background:rgba(255,255,255,.15);}
.slider-dots button.active::after{
    content:'';
    position:absolute;inset:0;
    background:var(--gold);
    transform-origin:left;
    animation:progress 6s linear forwards;
}
[dir="rtl"] .slider-dots button.active::after{transform-origin:right;}
@keyframes progress{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.scroll-indicator{
    position:absolute;
    bottom:1rem;left:50%;
    transform:translateX(-50%);
    z-index:3;
    display:none;
    flex-direction:column;align-items:center;gap:.4rem;
    color:rgba(255,255,255,.6);
    font-size:.75rem;
}
@media(min-width:992px){.scroll-indicator{display:flex;}}
.scroll-indicator .mouse{width:22px;height:36px;border:2px solid rgba(255,255,255,.5);border-radius:14px;position:relative;}
.scroll-indicator .wheel{width:3px;height:6px;background:var(--gold-light);border-radius:2px;position:absolute;top:6px;left:50%;transform:translateX(-50%);animation:wheel 1.6s var(--ease) infinite;}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0);}30%{opacity:1;}100%{opacity:0;transform:translate(-50%,14px);}}

/* ================================================================
   FEATURES
   ================================================================ */
.features-section{padding:5rem 0;background:var(--light-bg,#f8faf9);}
.feature-item{
    background:#fff;
    border-radius:20px;
    padding:2.2rem 1.8rem;
    text-align:center;
    box-shadow:0 6px 30px rgba(0,0,0,.05);
    transition:all .4s var(--ease);
    height:100%;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.03);
}
.feature-item::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,var(--primary-light),var(--gold));
    opacity:0;transition:opacity .4s var(--ease);
    z-index:0;
}
.feature-item > *{position:relative;z-index:1;transition:color .4s var(--ease);}
.feature-item:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(26,58,42,.18);}
.feature-item:hover::before{opacity:1;}
.feature-item:hover h5,
.feature-item:hover p{color:#fff;}
.feature-item:hover .icon{background:rgba(255,255,255,.2);color:#fff;}
.feature-item .icon{
    width:72px;height:72px;
    margin:0 auto 1.2rem;
    display:grid;place-items:center;
    background:linear-gradient(135deg,rgba(82,183,136,.15),rgba(212,168,84,.15));
    color:var(--primary-light);
    border-radius:20px;
    font-size:1.8rem;
    transition:all .4s var(--ease);
}
.feature-item h5{font-size:1.2rem;font-weight:700;color:var(--text-dark,#1a1a2e);margin-bottom:.6rem;}
.feature-item p{color:var(--text-muted,#6c757d);font-size:.95rem;margin:0;}

/* ================================================================
   CERTIFICATES — بخش جدید ۴ لوح
   ================================================================ */
.certificates-section{
    padding:5rem 0;
    background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);
    position:relative;
    overflow:hidden;
}
.certificates-section::before{
    content:'';position:absolute;top:-100px;right:-100px;
    width:400px;height:400px;
    background:radial-gradient(circle,rgba(212,168,84,.08),transparent 70%);
    border-radius:50%;z-index:0;
}
.section-header{text-align:center;max-width:640px;margin:0 auto 3rem;position:relative;z-index:1;}
.section-header .section-badge{
    display:inline-block;
    background:rgba(212,168,84,.12);
    color:var(--gold);
    padding:.3rem 1.1rem;
    border-radius:50px;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:.8rem;
}
.section-header h2{
    font-size:clamp(1.6rem,3vw,2.4rem);
    font-weight:800;color:var(--primary);
    margin-bottom:.6rem;
}
.section-header h2 .highlight{color:var(--gold);}
.section-header p{color:var(--text-muted,#6c757d);font-size:1rem;}

.certificates-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.5rem;
    position:relative;
    z-index:1;
}
.certificate-card{
    background:#fff;
    border-radius:20px;
    padding:2rem 1.5rem;
    text-align:center;
    border:1.5px solid rgba(212,168,84,.15);
    transition:all .4s var(--ease);
    position:relative;
    overflow:hidden;
}
.certificate-card::after{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--gold),var(--primary-light));
    transform:scaleX(0);transform-origin:left;
    transition:transform .4s var(--ease);
}
.certificate-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(26,58,42,.12);
    border-color:var(--gold);
}
.certificate-card:hover::after{transform:scaleX(1);}
.certificate-card .cert-icon{
    width:88px;height:88px;
    margin:0 auto 1rem;
    display:grid;place-items:center;
    background:linear-gradient(135deg,rgba(212,168,84,.15),rgba(82,183,136,.15));
    color:var(--gold);
    border-radius:50%;
    font-size:2.2rem;
    transition:all .5s var(--ease);
}
.certificate-card:hover .cert-icon{transform:rotate(-10deg) scale(1.08);background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff;}
.certificate-card .cert-image{
    width:100%;height:120px;
    object-fit:contain;
    margin-bottom:1rem;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.08));
    transition:transform .4s var(--ease);
}
.certificate-card:hover .cert-image{transform:scale(1.05);}
.certificate-card h5{font-size:1.05rem;font-weight:700;color:var(--primary);margin:.5rem 0 .3rem;}
.certificate-card p{font-size:.85rem;color:var(--text-muted,#6c757d);margin:0;}

/* ================================================================
   PRODUCTS
   ================================================================ */
.products-section{padding:5rem 0;background:#fff;}
.product-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 6px 25px rgba(0,0,0,.05);
    transition:all .4s var(--ease);
    opacity:0;transform:translateY(30px);
    border:1px solid rgba(0,0,0,.03);
    height:100%;
    display:flex;flex-direction:column;
}
.product-card.visible{opacity:1;transform:translateY(0);}
.product-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(26,58,42,.15);}
.product-card .card-img-top{width:100%;height:220px;object-fit:cover;transition:transform .6s var(--ease);}
.product-card:hover .card-img-top{transform:scale(1.08);}
.product-card .card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;}
.product-card .card-title{font-size:1.1rem;font-weight:700;color:var(--primary);margin-bottom:.5rem;}
.product-card .card-text{color:var(--text-muted,#6c757d);font-size:.9rem;flex:1;margin-bottom:1rem;}

/* ================================================================
   ABOUT + ARTICLES + CONTACT
   ================================================================ */
.about-section{padding:5rem 0;background:var(--light-bg,#f8faf9);}
.about-image{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(26,58,42,.18);}
.about-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.about-image:hover img{transform:scale(1.05);}
.about-content h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--primary);margin-bottom:1rem;}
.about-content h2 .highlight{color:var(--gold);}
.about-content p{color:var(--text-muted,#6c757d);line-height:1.9;margin-bottom:1.5rem;}
.about-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,.08);}
.about-stats .stat{text-align:center;}
.about-stats .number{display:block;font-size:1.7rem;font-weight:800;color:var(--primary-light);}
.about-stats .label{font-size:.8rem;color:var(--text-muted,#6c757d);}

.articles-section{padding:5rem 0;background:#fff;}
.article-card{border:none;border-radius:20px;overflow:hidden;box-shadow:0 6px 25px rgba(0,0,0,.05);transition:all .4s var(--ease);height:100%;}
.article-card:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(26,58,42,.15);}
.article-card .card-img-top{height:200px;object-fit:cover;}
.article-meta{font-size:.8rem;color:var(--text-muted,#6c757d);}

/* ================================================================
   DIOXOLANE SPOTLIGHT (بخش ویژه محصول ۱و۳ دی‌اکسالان)
   ================================================================ */
.dioxolane-spotlight{
    padding:5rem 0;
    background:linear-gradient(135deg,#eef7f0 0%,#dff0e4 100%);
    position:relative;overflow:hidden;
}
.dioxolane-spotlight::before{
    content:'';position:absolute;top:-20%;left:-10%;
    width:420px;height:420px;
    background:radial-gradient(circle,rgba(212,168,84,.14),transparent 70%);
    border-radius:50%;
}
.dioxolane-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--primary);margin-bottom:1.1rem;position:relative;z-index:1;}
.dioxolane-title .highlight{color:var(--gold);}
.dioxolane-desc{color:var(--text-muted,#495a52);line-height:1.9;margin-bottom:1.8rem;font-size:1.02rem;position:relative;z-index:1;}
.dioxolane-image{max-width:420px;margin:0 auto;position:relative;z-index:1;border:3px solid rgba(212,168,84,.35);}
.dioxolane-image img{aspect-ratio:1/1;}

.contact-section{
    padding:4.5rem 0;
    background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
    color:#fff;
    position:relative;overflow:hidden;
}
.contact-section::before{
    content:'';position:absolute;top:-50%;right:-10%;
    width:500px;height:500px;
    background:radial-gradient(circle,rgba(212,168,84,.15),transparent 70%);
    border-radius:50%;
}
.contact-section h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;position:relative;z-index:1;}
.contact-section .highlight{color:var(--gold-light);}

/* ================================================================
   SCROLL ANIMATIONS
   ================================================================ */
.fade-up{opacity:0;transform:translateY(30px);transition:all .8s var(--ease);}
.fade-up.visible{opacity:1;transform:translateY(0);}
.fade-up.delay-1{transition-delay:.15s;}
.fade-up.delay-2{transition-delay:.3s;}
.fade-up.delay-3{transition-delay:.45s;}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:translateY(0);}}

/* ================================================================
   MOBILE / TABLET RESPONSIVE
   ================================================================ */
@media (max-width:991px){
    .hero-section{min-height:auto;padding:6rem 0 4rem;}
    .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;}
    .about-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:576px){
    .features-section,.products-section,.certificates-section,.about-section,.articles-section,.dioxolane-spotlight{padding:3.5rem 0;}
    .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
    .hero-stats .stat-item:nth-child(3){display:none;}
    .hero-cta,.hero-cta-secondary{width:100%;justify-content:center;}
    .about-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;}
    .certificate-card{padding:1.5rem 1rem;}
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
    .hero-slide.active{animation:none;}
}

/* ================================================================
   FIX نهایی: خنثی‌سازی تداخل با style.css قدیمی
   ----------------------------------------------------------------
   در style.css قدیمی، .hero-section به‌صورت display:flex تعریف شده
   (بازمانده از طراحی قبلی هیرو). چون این فایل (style-home.css) قبلاً
   این ویژگی را دوباره تعریف نمی‌کرد، مقدار flex از فایل قدیمی روی
   ساختار جدید (اسلایدر با position:absolute) اعمال می‌شد و باعث
   می‌شد فرزندهای هیرو به‌جای چیدمان عادی، کنار هم ردیف بشوند و از
   عرض صفحه بیرون بزنند — دقیقاً همان اسکرول افقی موبایل.
   چون این فایل آخرین CSS بارگذاری‌شده در صفحه اصلی است، همین‌جا
   با صراحت display را به حالت درست برمی‌گردانیم. */
.hero-section{
    display: block !important;
    background: none !important;
    max-width: 100vw;
}
/* کمربند ایمنی: مانع اسکرول افقی کل صفحه، مخصوص صفحه اصلی */
html, body{
    overflow-x: hidden;
    max-width: 100%;
}

/* ================================================================
   اسلایدر بخش «درباره شرکت / داستان موفقیت»
   ----------------------------------------------------------------
   ظاهر قاب (ارتفاع ۴۰۰، شعاع گوشه، سایه، زوم هاور) کاملاً از قوانین
   موجود .about-section .about-image در style.css می‌آید و اینجا
   دست نمی‌خورد؛ فقط اسلایدها روی هم (در یک سلول grid) چیده می‌شوند و
   با کراس‌فید جابه‌جا می‌شوند. اگر فقط یک تصویر (یا هیچ تصویری در
   پنل) باشد، این کلاس‌ها اصلاً در HTML نمی‌آیند و همان ظاهر قبلی می‌ماند.
   ================================================================ */
.about-image.about-slider{
    display: grid;
}
.about-image.about-slider .about-slide{
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}
.about-image.about-slider .about-slide.active{
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity .8s ease, visibility 0s;
}
.about-image.about-slider .about-slide img{
    display: block;
}
.about-dots{
    position: absolute;
    inset-inline: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}
.about-dot{
    position: relative;
    pointer-events: auto;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    box-shadow: 0 0 0 1px rgba(0,0,0,.18);
    cursor: pointer;
    transition: width .3s ease, background .3s ease, border-radius .3s ease;
}
/* ناحیه لمس بزرگ‌تر برای موبایل (بدون تغییر اندازه ظاهری نقطه) */
.about-dot::after{
    content: '';
    position: absolute;
    inset: -12px -5px;
}
.about-dot.active{
    width: 22px;
    border-radius: 6px;
    background: #fff;
}
.about-dot:focus-visible{
    outline: 2px solid var(--gold, #d4a854);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
    .about-image.about-slider .about-slide,
    .about-image.about-slider .about-slide.active{ transition: none; }
}