/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Yekan",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#efefef; color:#121212; direction:rtl;
}

/* Wrapper */
.site-wrapper{max-width:1400px;margin:0 auto;padding:0 20px}
.section{scroll-margin-top:120px}

/* Loader */
#loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#efefef;transition:opacity .6s,visibility .6s}
#loader.hidden{opacity:0;visibility:hidden}
.loader-box{background:#fff;padding:1rem 1.25rem;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.08);display:flex;align-items:center;gap:.8rem}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid #d0d0d0;border-top-color:#555;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{color:#666;font-weight:800}

/* Hero */
.sequence{height:480vh;padding-top:96px;position:relative;opacity:0;transition:opacity .45s}
body.ready .sequence{opacity:1}
.sticky{position:sticky;top:8vh;height:84vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;isolation:isolate}
.mega{font-weight:1000;font-size:clamp(4rem,24vw,34rem);line-height:.84;color:#111;position:relative;z-index:1}
.overlay{position:absolute;inset:0;z-index:10;pointer-events:none}
.seq-img{position:absolute;bottom:-90vh;width:300px;height:450px;object-fit:cover;border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.12);opacity:0;transform:translateY(180vh) scale(1.05);will-change:transform,opacity}
.seq-img.left{left:10%}
.seq-img.center{left:50%;transform:translate(-50%,180vh) scale(1.05)}
.seq-img.right{right:10%}

/* About */
.about{background:#f4f4f4;padding:6rem 1.5rem}
.container{max-width:920px;margin:0 auto}
.about h2{font-size:2rem;margin:0 0 1rem}
.about p{color:#6f6f6f;line-height:1.95}

/* Pricing */
.pricing-seq{height:260vh;background:#ececec;border-top:1px solid #e2e2e2;position:relative;z-index:20}
.pricing-stick{position:sticky;top:8vh;height:84vh;display:flex;flex-direction:column;justify-content:center}
.pricing-title{font-size:clamp(1.8rem,6vw,3rem);text-align:center;color:#555;margin:0 0 24px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:24px;align-items:stretch;justify-items:center;padding:0 8px}
.price-card{width:100%;max-width:420px;background:#fff;border:1px solid #e2d8d0;border-radius:16px;padding:28px;box-shadow:0 10px 26px rgba(0,0,0,.06);transform:translateX(60vw);opacity:0;will-change:transform,opacity}

/* 🔧 FIX: header alignment so price doesn’t jump on mobile */
.price-card header{
  display:flex;
  justify-content:space-between;
  align-items:center;   /* was baseline */
  gap:.5rem;
  flex-wrap:wrap;       /* allow wrapping instead of overlap */
}
.price-card h3{margin:0;font-size:1.35rem}
.price{
  font-weight:1000;
  font-size:1.4rem;
  line-height:1;        /* steady baseline */
  white-space:nowrap;   /* prevent breaking Persian digits/unit */
}
.price span{font-size:.9rem;color:#555;margin-right:.25rem}

.features{list-style:disc;padding:0 1.1rem;margin:14px 0 18px;color:#1b1b1b;line-height:1.9}
.features .muted{opacity:.55;text-decoration:line-through}
.btn{cursor:pointer;border-radius:12px;padding:.75rem 1rem;font-weight:900;border:none;width:100%}
.btn.solid{background:#111;color:#fff}
.btn.ghost{background:#fff;color:#111;border:2px solid #111}

/* FAQ */
.faq{background:#f9f9f9;padding:6rem 1.5rem;border-top:1px solid #e2e2e2}
.faq h2{font-size:clamp(1.8rem,6vw,2.4rem);margin:0 0 1rem;text-align:center;color:#333}
.faq-subtitle{text-align:center;color:#666;margin-bottom:2rem}
.faq-list{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid #ddd}
.faq-question{width:100%;text-align:right;padding:1rem;font-weight:700;background:none;border:none;outline:none;cursor:pointer;font-family:inherit;font-size:1rem;color:#111;display:flex;justify-content:space-between;align-items:center}
.faq-question::after{content:"+";font-weight:900;transition:transform .3s}
.faq-item.active .faq-question::after{content:"−"}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease;padding:0 1rem;color:#333;line-height:1.9}
.faq-item.active .faq-answer{max-height:240px;padding:1rem}

/* Responsive */
@media (max-width:980px){
  .pricing-grid{grid-template-columns:1fr;gap:18px}
}

/* 🔧 FIX: mobile-specific stability */
@media (max-width:640px){
  /* disable translate animation to prevent layout jumps on first card */
  .price-card{ transform:none !important; opacity:1 !important; }

  /* slightly smaller title to keep header stable */
  .price-card h3{ font-size:1.15rem }
  .price{ font-size:1.25rem }
  
  /* shorter hero to avoid overlap during sticky transitions */
  .sequence{ height:340vh }
}

/* Scroll hint */
.scroll-indicator{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);width:68px;height:68px;border-radius:50%;background:#fff;border:2px solid #111;display:grid;place-items:center;font-weight:900;font-size:.85rem;color:#111;box-shadow:0 10px 28px rgba(0,0,0,.08);animation:bounce 2.4s ease-in-out infinite,pulse 2.4s ease-out infinite;opacity:1;transition:opacity .6s;pointer-events:none}
.scroll-indicator.hidden{opacity:0}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-6px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(17,17,17,.16)}70%{box-shadow:0 0 0 12px rgba(17,17,17,0)}100%{box-shadow:0 0 0 0 rgba(17,17,17,0)}}

/* Footer */
.footer{background:#222;color:#fff;padding:6rem 1.5rem;text-align:center}
.footer-title{font-size:clamp(1.8rem,6vw,2.6rem);margin:0 0 1rem;font-weight:900}
.footer-subtitle{font-size:1rem;color:#ccc;margin-bottom:2.5rem}
.footer-actions{display:flex;justify-content:center}
.footer-btn{display:inline-block;background:#fff;color:#111;font-weight:800;padding:1rem 2.5rem;border-radius:40px;text-decoration:none;transition:all .3s ease}
.footer-btn:hover{background:#f3f3f3;transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.2)}