/* architecture: landing — responsive & mobile | lines 2952-4173 from style.css */
/* ================================================
   12. RESPONSIVE & MOBILE MENU
   ================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .plans-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0 !important;
  }

}

@media (min-width: 769px) and (max-width: 992px) {
  .hero-desc,
  .section-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .premium-footer .footer-top {
    grid-template-columns: 1fr 1fr;
  }

}

/* ——— موبایل: فقط زیر ۷۶۸px — دسکتاپ بدون تغییر ——— */
@media (max-width: 768px) {

  /* سرتیتر بخش‌ها — تراز وسط */
  .lp-head {
    margin-bottom: 20px;
  }
  .section-desc {
    max-width: none;
    width: 100%;
    font-size: 0.78rem;
    line-height: 1.55;
  }
  .section-title {
    font-size: clamp(1.08rem, 4.4vw, 1.28rem);
    margin-bottom: 6px;
  }
  .section-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
    margin-bottom: 8px;
  }

  .plans-shared-feature-body p {
    max-width: none;
    width: 100%;
  }

  /* پلن‌ها — فشرده و لمس‌پسند */
  .plans-section {
    padding: var(--space-section) 0;
  }

  .plans-steps {
    margin: 16px 0 18px;
    gap: 8px;
  }
  .plans-step {
    font-size: 0.74rem;
    padding: 5px 10px;
  }
  .plans-step-divider { width: 14px; }
  .plans-shared-feature {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
  }
  .plans-shared-feature-icon {
    width: 30px;
    height: 30px;
    font-size: 0.82rem;
    border-radius: 9px;
  }
  .plans-shared-feature-body strong {
    font-size: 0.78rem;
    margin-bottom: 2px;
  }
  .plans-shared-feature-body p {
    font-size: 0.7rem;
    line-height: 1.5;
  }
  .billing-tabs {
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 12px;
  }
  .billing-tab {
    flex: 1 1 calc(50% - 3px);
    justify-content: center;
    padding: 9px 8px;
    font-size: 0.78rem;
    min-height: 42px;
    border-radius: 10px;
  }
  .billing-tab-badge {
    display: none;
  }
  .plans-compare {
    padding: 0;
    margin-top: 16px;
    border-radius: 16px;
  }
  .plans-compare-head {
    padding: 12px 14px;
  }
  .plans-compare-title {
    font-size: 0.88rem;
    margin-bottom: 2px;
  }
  .plans-compare-desc {
    font-size: 0.74rem;
  }
  .plans-compare-list {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 8px;
  }
  .plans-compare-list li {
    padding: 11px 12px;
    font-size: 0.82rem;
  }
  .plans-compare-item-label {
    font-size: 0.68rem;
  }
  .plans-slider {
    gap: 6px;
    max-width: 100%;
  }

  .plans-slider-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .plan-card:hover {
    transform: none;
  }

  .plan-radio {
    width: 18px;
    height: 18px;
  }

  .plan-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 4px 8px 5px;
    font-size: 0.56rem;
    gap: 4px;
    border-radius: 0 0 8px 8px;
    color: #fff;
    z-index: 5;
  }

  .plan-tag i {
    font-size: 0.52rem;
    color: #fff;
  }

  .plan-card.is-recommended .plan-card-inner {
    padding-top: calc(var(--plan-pad-y) + 22px);
  }

  .plans-selected-note {
    margin-top: 14px;
    border-radius: 16px;
  }
  .plans-selected-note-head {
    padding: 11px 12px;
  }
  .plans-selected-note-label {
    font-size: 0.8rem;
  }
  .plans-selected-note-meta {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 8px;
  }
  .plans-selected-note-item {
    padding: 10px 12px;
  }
  .plans-selected-note-item strong {
    font-size: 0.84rem;
  }

  .plans-slider-dots {
    margin-top: 2px;
  }

  /* FAQ — هم‌سبک نکات قیمت‌گذاری */
  .faq-container {
    max-width: 100%;
  }

  .faq-list {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 8px;
  }

  .faq-item {
    border-radius: 12px;
  }

  .faq-question {
    font-size: 0.82rem;
    padding: 11px 12px;
    min-height: 0;
    gap: 8px;
    align-items: flex-start;
  }

  .faq-question-text {
    padding-top: 0;
    font-size: 0.68rem;
  }

  .faq-chevron {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    margin-top: 0;
  }

  .faq-answer-inner {
    padding: 0 12px 11px;
  }

  .faq-item.active .faq-answer-inner {
    padding-top: 0;
  }

  .faq-answer p {
    font-size: 0.82rem;
    padding-top: 0;
    line-height: 1.55;
  }

  /* فوتر */
  .premium-footer { padding: 40px 0 20px; }
  .premium-footer .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
    margin-bottom: 44px;
  }
  .premium-footer .footer-col {
    align-items: center;
  }
  .premium-footer .footer-logo {
    justify-content: center;
    font-size: 1.2rem;
  }
  .premium-footer .footer-title::after {
    right: 50%;
    transform: translateX(50%);
  }
  .premium-footer .footer-links,
  .premium-footer .footer-contact {
    align-items: center;
  }
  .premium-footer .footer-contact li {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
  .premium-footer .footer-links a:hover { padding-right: 0; }
  .premium-footer .social-links { justify-content: center; }
  .plan-contact-note {
    text-align: center;
    font-size: 0.85rem !important;
  }
  .premium-footer .footer-bottom {
    flex-direction: column;
    text-align: center;
    font-size: 0.8rem;
    gap: 14px;
  }
  .premium-footer .footer-bottom-copy {
    align-items: center;
  }
  .premium-footer .footer-enamad-cube {
    width: 132px;
    height: 132px;
  }

}

/* موبایل‌های کوچک — هیرو و دکمه‌ها کمی فشرده‌تر */
@media (max-width: 480px) {
  .hero {
    padding-bottom: 18px;
  }

  .hero-title {
    font-size: clamp(1.34rem, 6.8vw, 1.58rem);
    gap: 0.18em;
    margin-bottom: 6px;
  }

  .hero-title-tagline {
    font-size: clamp(0.8rem, 3.8vw, 0.9rem);
  }

  .hero-desc {
    font-size: clamp(0.78rem, 3.4vw, 0.84rem);
    line-height: 1.6;
    max-width: 20rem;
    margin-bottom: 10px;
  }

  .plans-page .plan-card,
  .plans-page--short .plan-card {
    width: min(100%, 236px);
    max-width: min(100%, 236px);
  }

  .plan-card {
    --plan-pad-x: 8px;
    --plan-pad-y: 10px;
    --plan-min-h: 360px;
    border-radius: 12px;
  }

  .plan-tag {
    padding: 3px 7px 4px;
    font-size: 0.52rem;
  }

  .plan-card.is-recommended .plan-card-inner {
    padding-top: calc(var(--plan-pad-y) + 20px);
  }

  .plan-card-top {
    margin-bottom: 8px;
    padding: 2px 8px 8px;
    gap: 6px;
  }

  .plan-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 0.9rem;
  }

  .plan-title {
    font-size: 0.86rem;
  }

  .plan-subtitle {
    font-size: 0.6rem;
    line-height: 1.5;
  }

  .plan-price-wrap {
    padding: 2px 0 6px;
  }

  .plan-price {
    font-size: 1.08rem;
  }

  .plan-price-unit,
  .plan-price-period {
    font-size: 0.62rem;
  }

  .plan-metric-value {
    font-size: 0.72rem;
  }

  .plan-metric-label {
    font-size: 0.5rem;
  }

  .plan-features li {
    font-size: 0.6rem;
    padding: 3px 0;
  }

  .plan-features li.plan-feature-item i {
    font-size: 0.68rem;
  }

  .plan-card .plan-request-btn {
    font-size: 0.7rem;
    padding: 7px 8px;
    min-height: 34px;
  }

  .store-btn {
    min-height: 44px;
    padding: 8px 12px;
    justify-content: flex-start;
    gap: 14px;
    direction: rtl;
  }

  .store-btn-icon {
    width: 28px;
    height: 28px;
    font-size: 1.05rem;
    margin-inline: 0;
    padding-inline-end: 12px;
  }

  .store-btn-text {
    align-items: flex-start;
    text-align: right;
    flex: 1;
  }

  .store-btn-label {
    width: 100%;
    text-align: right;
  }

  .store-btn-platform {
    font-size: 0.68rem;
    width: 100%;
    text-align: right;
  }

  .plans-step span:not(.plans-step-divider) {
    max-width: 120px;
    text-align: center;
    line-height: 1.3;
  }

}

/* Fade-in Animation Base */
.fade-in-up { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }
/* جلوگیری از محو شدن متن هنگام هاور/کلیک روی کارت‌ها */
.fade-in-up.visible:hover,
.fade-in-up.visible:active,
.fade-in-up.visible:focus,
.fade-in-up.visible:focus-within {
  opacity: 1;
}

@media (max-width: 768px) {
  .fade-in-up {
    opacity: 1;
    transform: none;
  }

}