:root {
                --bg: #f7fffb;
                --surface: #ffffff;
                --card: rgba(255, 255, 255, 0.92);
                --primary: #08c76f;
                --secondary: #00a5f1;
                --accent: #00b58a;
                --text: #0f2a2f;
                --muted: rgba(21, 41, 38, 0.7);
                --border: rgba(9, 166, 135, 0.18);
                --shadow: 0 25px 55px rgba(16, 136, 110, 0.15);
            }
            *, *::before, *::after { box-sizing: border-box; }
            body {
                margin: 0;
                font-family: 'Vazirmatn', sans-serif;
                background: linear-gradient(145deg, #f7fffb 0%, #e9fff7 45%, #f6fffb 100%);
                color: var(--text);
                line-height: 1.7;
                overflow-x: hidden;
            }
            a { text-decoration: none; color: inherit; }
            img { max-width: 100%; display: block; }
            .page {
                max-width: 1150px;
                margin: 0 auto;
                padding: 0 20px 90px;
                position: relative;
            }
            main {
                margin-top: 30px;
                display: block;
            }
            .site-announcements {
                margin: 10px auto 40px;
                padding: 24px 26px;
                background: rgba(255, 255, 255, 0.95);
                border-radius: 30px;
                border: 1px solid rgba(8, 199, 111, 0.18);
                box-shadow: 0 20px 45px rgba(8, 99, 81, 0.12);
            }
            .site-announcements h3 {
                margin: 0 0 12px;
                color: #0f2a2f;
            }
            .site-announcement-item {
                padding: 16px 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }
            .site-announcement-item:last-child {
                border-bottom: none;
            }
            .site-announcement-title {
                font-weight: 700;
                margin-bottom: 6px;
            }
            .site-announcement-date {
                color: #6a7d76;
                font-size: 0.85rem;
                margin-bottom: 10px;
            }
            header {
                position: sticky;
                top: 0;
                z-index: 10;
                padding: 10px 0;
                backdrop-filter: blur(10px);
            }
            .nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 22px;
                background: rgba(255, 255, 255, 0.95);
                border-radius: 999px;
                border: 1px solid rgba(9, 166, 135, 0.16);
                box-shadow: 0 15px 40px rgba(12, 85, 70, 0.1);
                margin: 0 auto;
                gap: 16px;
            }
            .nav-logo {
                font-weight: 800;
                font-size: 20px;
                letter-spacing: 0.2rem;
                color: var(--primary);
            }
            .nav-links {
                display: flex;
                gap: 20px;
                align-items: center;
            }
            .nav-links a {
                font-size: 0.95rem;
                color: #1d6d59;
                transition: color 0.2s ease;
                font-weight: 600;
            }
            .nav-auth-link {
                display: none;
                font-weight: 600;
            }
            .nav-links a:hover,
            .nav-links a:focus {
                color: var(--accent);
            }
            .nav-cta {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .ghost-link {
                padding: 0.45rem 1.2rem;
                border-radius: 999px;
                border: 1px solid rgba(7, 96, 78, 0.15);
                color: var(--text);
                font-weight: 600;
            }
            .ghost-link:hover {
                border-color: var(--accent);
                color: var(--accent);
            }
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                border: none;
                border-radius: 999px;
                padding: 0.75rem 1.6rem;
                font-weight: 600;
                cursor: pointer;
                color: #fff;
                background: linear-gradient(337deg, #003a3d, #62cf7d);
                /*box-shadow: 0 15px 35px rgba(0, 163, 164, 0.25);*/
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }
            .btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 20px 45px rgb(28 53 11 / 38%);
            }
            .btn-small {
                padding: 0.6rem 1.2rem;
            }
            .btn-light {
                background: #ffffff;
                border: 1px solid rgba(8, 199, 111, 0.2);
                color: var(--accent);
                box-shadow: none;
            }
            .hero {
                padding: 0 0 60px;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: 40px;
                align-items: center;
            }
            .hero h1 {
                font-size: clamp(2rem, 5vw, 3.4rem);
                margin: 0 0 18px;
                line-height: 1.3;
            }
            .hero p {
                color: var(--muted);
                margin-bottom: 32px;
            }
            .hero-actions {
                display: flex;
                gap: 12px;
                flex-wrap: wrap;
                margin-bottom: 24px;
            }
            .hero-card {
                /*background: var(--card);*/
                /*border: 1px solid var(--border);*/
                /*border-radius: 28px;*/
                /*padding: 28px;*/
                box-shadow: var(--shadow);
            }
            .badge {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: rgba(0, 179, 130, 0.1);
                border: 1px solid rgba(0, 179, 130, 0.2);
                border-radius: 999px;
                padding: 0.35rem 1rem;
                font-size: 0.85rem;
                margin-bottom: 16px;
            }
            .metrics {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 18px;
                margin-top: 32px;
            }
            .metric {
                padding: 16px;
                border-radius: 18px;
                background: rgba(255, 255, 255, 0.92);
                border: 1px solid rgba(15, 125, 107, 0.12);
                text-align: center;
            }
            section {
                margin-top: 80px;
            }
            section h2 {
                margin: 0 0 12px;
                font-size: clamp(1.6rem, 4vw, 2.4rem);
            }
            section p.section-lead {
                margin: 0 0 32px;
                color: var(--muted);
                max-width: 620px;
            }
            .grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 24px;
            }
            .card {
                background: var(--card);
                border-radius: 24px;
                padding: 22px;
                border: 1px solid var(--border);
                box-shadow: var(--shadow);
            }
            .card h3 {
                margin-top: 0;
            }
            .value-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                gap: 18px;
            }
            .value-card {
                border-radius: 22px;
                padding: 24px;
                background: rgba(255, 255, 255, 0.96);
                border: 1px solid rgba(10, 161, 134, 0.12);
                box-shadow: 0 20px 40px rgba(11, 115, 94, 0.08);
            }
            .value-card span {
                display: inline-flex;
                width: 36px;
                height: 36px;
                border-radius: 12px;
                align-items: center;
                justify-content: center;
                background: rgba(0, 227, 168, 0.15);
                color: var(--accent);
                margin-bottom: 12px;
                font-size: 1.2rem;
            }
            .clients-logos {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                gap: 16px;
                align-items: center;
            }
            .clients-logos span {
                border-radius: 18px;
                border: 1px solid rgba(9, 166, 135, 0.12);
                padding: 18px;
                text-align: center;
                background: rgba(0, 227, 168, 0.05);
                font-weight: 600;
                color: var(--muted);
            }
            .pricing {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: 24px;
            }
            .pricing-card {
                border-radius: 28px;
                padding: 26px 24px;
                border: 1px solid var(--border);
                background: rgba(255, 255, 255, 0.97);
                box-shadow: var(--shadow);
                display: flex;
                flex-direction: column;
                gap: 18px;
            }
            .pricing-card.highlight {
                background: linear-gradient(160deg, rgba(0, 227, 168, 0.18), rgba(0, 165, 241, 0.12));
                border-color: rgba(0, 227, 168, 0.35);
            }
            .price {
                font-size: 2.4rem;
                font-weight: 700;
            }
            .price span {
                font-size: 0.9rem;
                color: var(--muted);
            }
            .pricing-card ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: 10px;
                color: var(--muted);
            }
            .faq {
                max-width: 860px;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                gap: 16px;
            }
            .faq-item {
                border-radius: 18px;
                border: 1px solid rgba(6, 116, 94, 0.12);
                background: rgba(255, 255, 255, 0.95);
                box-shadow: 0 20px 45px rgba(23, 78, 63, 0.08);
                overflow: hidden;
            }
            .faq-question {
                cursor: pointer;
                padding: 18px 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
            }
            .faq-answer {
                max-height: 0;
                overflow: hidden;
                padding: 0 24px;
                transition: max-height 0.3s ease;
            }
            .faq-item.active .faq-answer {
                max-height: 300px;
                padding-bottom: 18px;
            }
            .lead-form {
                margin-top: 50px;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: 16px;
            }
            .lead-form-row {
                width: 100%;
            }
            .lead-form-row--full {
                grid-column: 1 / -1;
            }
            .lead-form-row--centered {
                text-align: center;
            }
            .lead-form input,
            .lead-form textarea {
                width: 100%;
                border-radius: 18px;
                border: 1px solid rgba(8, 199, 111, 0.15);
                background: #fdfefe;
                padding: 14px 18px;
                color: var(--text);
                font-family: inherit;
            }
            .lead-form textarea { height: 130px; resize: none; }
            footer {
                margin-top: 90px;
                padding: 32px 16px 60px;
                text-align: center;
                color: var(--muted);
            }
            .cta-panel {
                background: rgba(255, 255, 255, 0.96);
                border: 1px solid rgba(9, 166, 135, 0.15);
                border-radius: 28px;
                padding: 32px;
                box-shadow: 0 30px 60px rgba(8, 96, 78, 0.12);
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                align-items: center;
                justify-content: space-between;
            }
            .cta-panel .actions {
                display: flex;
                gap: 12px;
                flex-wrap: wrap;
            }
            .chip {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                border-radius: 999px;
                padding: 0.2rem 0.8rem;
                font-size: 0.75rem;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid var(--border);
                margin-inline-end: 8px;
            }
            .nav-toggle {
                display: none;
                flex-direction: column;
                gap: 4px;
                cursor: pointer;
            }
            .nav-toggle span {
                width: 24px;
                height: 2px;
                background: var(--text);
            }
            @media (max-width: 992px) {
                .hero {
                    grid-template-columns: 1fr;
                    text-align: center;
                }
                .metrics {
                    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
                }
                .hero-card {
                    max-width: 420px;
                    margin: 0 auto;
                }
                .nav button.btn {
                    display: none;
                }
            }

            @media (max-width: 768px) {
                header { position: fixed; width: 100%; }
                body { padding-top: 70px; }
                .nav-links {
                    position: absolute;
                    inset-inline-start: 0;
                    inset-inline-end: 0;
                    top: 100%;
                    flex-direction: column;
                    background: rgba(255, 255, 255, 0.97);
                    border-bottom: 1px solid rgba(9, 166, 135, 0.2);
                    padding: 16px 24px;
                    transform-origin: top;
                    transform: scaleY(0);
                    opacity: 0;
                    transition: 0.2s ease;
                }
                .nav-links.open {
                    transform: scaleY(1);
                    opacity: 1;
                }
                .nav-cta {
                    display: none;
                }
                .nav-auth-link {
                    display: block;
                    padding-top: 6px;
                }
                .nav-toggle { display: flex; }
                .pricing {
                    grid-template-columns: 1fr;
                }
                .pricing-card {
                    max-width: 420px;
                    margin-inline: auto;
                }
                .clients-logos span {
                    font-size: 0.85rem;
                    padding: 12px;
                }
                .lead-form {
                    grid-template-columns: 1fr;
                }
            }

            @media (max-width: 576px) {
                .page {
                    padding-inline: 16px;
                }
                section {
                    margin-top: 40px;
                }
                .hero {
                    padding: 0 0 0 30px;
                }
                .btn {
                    width: 100%;
                }
                .metrics {
                    grid-template-columns: 1fr 1fr;
                }
                .card,
                .hero-card {
                    padding: 18px;
                }
                .faq-question {
                    padding: 16px;
                }
                .cta-panel {
                    flex-direction: column;
                    text-align: center;
                }
            }


            .hero img {
              width: 420px;
              max-width: 100%;
              border-radius: 20px;
              box-shadow: 0 0 40px rgba(0, 255, 180, 0.15);
              animation: float 4s ease-in-out infinite;
            }

            @keyframes float {
              0%, 100% { transform: translateY(0); }
              50% { transform: translateY(-10px); }
            }

            @media (max-width: 900px) {
              .hero {
                flex-direction: column-reverse;
                text-align: center;
              }
              .hero img {
                width: 80%;
                margin-bottom: 2rem;
              }
            }
            .hero-image{
                direction: ltr;
            }

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(0, 167, 133, 0.15);
  border-color: rgba(0, 167, 133, 0.28);
  background: linear-gradient(180deg, #ffffff 0%, #f3fffa 100%);
  transition: all 0.25s ease;
}
.value-card h3 {
  transition: color 0.3s ease;
}
.value-card:hover h3 {
  color: var(--accent);
}
section h2 {
  position: relative;
  display: inline-block;
}
section h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  height: 6px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  opacity: 0.25;
}
.value-card span {
  transition: transform 0.3s ease;
}
.value-card:hover span {
  transform: scale(1.15) rotate(5deg);
}
section:not(:first-of-type) {
  margin-top: clamp(80px, 12vh, 120px);
}
#benefits .section-lead {
  color: rgba(0, 77, 64, 0.85);
}

.pricing-table {
  overflow-x: auto;
  border-radius: 24px;
  box-shadow: 0 25px 45px rgba(16, 136, 110, 0.08);
  background: #fff;
  margin-top: 40px;
}

.pricing-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
  text-align: center;
}

.pricing-table th,
.pricing-table td {
  padding: 16px 14px;
  border: 1px solid rgba(8, 199, 111, 0.12);
}

.pricing-table th {
  background: linear-gradient(135deg, #f7fffb, #e9fff7);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.pricing-table tbody td:first-child {
  text-align: right;
  font-weight: 600;
  color: var(--muted);
  background: rgba(0, 227, 168, 0.03);
}

.pricing-table tbody tr:nth-child(even) td {
  background: rgba(0, 179, 130, 0.02);
}

/* ستون‌ها با رنگ‌های ملایم برند */
.plan-light { color: #089f78; }
.plan-pro { color: #00a5f1; }
.plan-plus { color: #0078b7; }
.plan-enterprise { color: #004f67; }

/* دکمه‌ها داخل جدول */
.pricing-table .btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  border-radius: 999px;
}

.pricing-table .btn-light {
  background: #fff;
  color: var(--accent);
  border: 1px solid rgba(8, 199, 111, 0.25);
}

.pricing-table .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(8, 199, 111, 0.2);
}

/* واکنش‌گرایی */
@media (max-width: 768px) {
  .pricing-table table {
    font-size: 0.9rem;
  }
  .pricing-table th,
  .pricing-table td {
    padding: 12px 8px;
  }
}

/* ردیف‌های مخفی اولیه */
.hidden {
  display: none;
}

/* دکمه نمایش بیشتر */
.show-more-wrapper {
  text-align: center;
  padding: 20px 0 10px;
  background: linear-gradient(0deg, #fff 60%, rgba(255,255,255,0));
  border-radius: 0 0 24px 24px;
}

#toggleRows {
  border: 1px solid rgba(8, 199, 111, 0.25);
  background: #fff;
  color: var(--accent);
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}
#toggleRows:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  transform: translateY(-2px);
}