@font-face {
    font-family: 'danafanum-light';
    src: url('/fonts/danafanum-light.woff2') format('woff2');
    font-display: block !important;
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/Vazirmatn-Light.woff2') format('woff2');
    font-display: block !important;
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-display: block !important;
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-display: block !important;
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-display: block !important;
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 800;
    src: url('/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-display: block !important;
}

.contact-form-message {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
}

.contact-form-message--success {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.contact-form-message--error {
    background: color-mix(in srgb, #d32f2f 12%, transparent);
    border: 1px solid color-mix(in srgb, #d32f2f 24%, transparent);
}

@font-face {
    font-family: 'DanaFaNum-Regular';
    src: url('/fonts/DanaFaNum-Regular.woff2') format('woff2');
    font-display: block !important;
}

@font-face {
    font-family: 'danafanum-medium';
    src: url('/fonts/danafanum-medium.woff2') format('woff2');
    font-display: block !important;
}

@font-face {
    font-family: 'dana-demibold';
    src: url('/fonts/danafanum-demibold.woff2') format('woff2');
    font-display: block !important;
}

.inline-list {
    display: flex; /* تبدیل لیست به حالت افقی */
    flex-direction: row; /* قرار دادن آیتم‌ها در یک سطر */
    flex-wrap: wrap; /* اگر صفحه کوچک شد، لینک‌های اضافی به طور خودکار به خط پایین بروند */
    justify-content: center; /* وسط‌چین کردن لینک‌ها (اگر می‌خواهید راست‌چین باشند از flex-start استفاده کنید) */
    gap: 1.5rem; /* فاصله بین لینک‌ها */
    padding: 0;
    margin: 0;
    list-style: none; /* حذف نقطه‌های پیش‌فرض لیست */
}

/* ایجاد تغییرات نرم هنگام سوئیچ تم */
:root, [data-theme], body {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

:root,
[data-theme="light"] {
    --font-body: 'DanaFaNum-Regular', sans-serif;
    --font-display: 'DanaFaNum-Regular', sans-serif;
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
    --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
    --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --content-default: 1160px;
    --color-bg: #f7f6f2;
    --color-surface: #fbfbf8;
    --color-surface-2: #f1efe9;
    --color-surface-offset: #ece9e1;
    --color-border: #d4d1ca;
    --color-divider: #ddd8ce;
    --color-text: #26231e;
    --color-text-muted: #706f69;
    --color-text-faint: #9d9b93;
    --color-text-inverse: #f8f7f4;
    --color-primary: #0e6b66;
    --color-primary-hover: #0b524e;
    --color-primary-highlight: #d7e6e2;
    --color-blue: #296aa8;
    --shadow-sm: 0 4px 12px rgba(33, 28, 20, 0.06);
    --shadow-md: 0 18px 44px rgba(33, 28, 20, 0.1);
    --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --color-bg: #171614;
        --color-surface: #1d1c1a;
        --color-surface-2: #23211f;
        --color-surface-offset: #2b2926;
        --color-border: #3b3935;
        --color-divider: #312f2c;
        --color-text: #d7d4ce;
        --color-text-muted: #aaa7a0;
        --color-text-faint: #7d7a74;
        --color-text-inverse: #171614;
        --color-primary: #62a29f;
        --color-primary-hover: #80bab7;
        --color-primary-highlight: #2c3c3b;
        --color-blue: #78a6d4;
        --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.28);
    }
}

[data-theme="dark"] {
    --color-bg: #171614;
    --color-surface: #1d1c1a;
    --color-surface-2: #23211f;
    --color-surface-offset: #2b2926;
    --color-border: #3b3935;
    --color-divider: #312f2c;
    --color-text: #d7d4ce;
    --color-text-muted: #aaa7a0;
    --color-text-faint: #7d7a74;
    --color-text-inverse: #171614;
    --color-primary: #62a29f;
    --color-primary-hover: #80bab7;
    --color-primary-highlight: #2c3c3b;
    --color-blue: #78a6d4;
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.28);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.landing-container {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text);
    background: radial-gradient(circle at top right, rgba(14,107,102,0.08), transparent 32%), radial-gradient(circle at left bottom, rgba(41,106,168,0.05), transparent 28%), var(--color-bg);
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg {
    max-width: 100%;
    display: block;
}

button, input, textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

input, textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.95rem 1rem;
    border-radius: var(--radius-md);
    outline: none;
}

    input:focus, textarea:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(14,107,102,0.14);
    }

.skip-link {
    position: absolute;
    top: -50px;
    right: 1rem;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    z-index: 30;
}

    .skip-link:focus {
        top: 1rem;
    }

.container {
    width: min(calc(100% - 2rem), var(--content-default));
    margin-inline: auto;
}

.narrow {
    max-width: 760px;
}

.section {
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

.page-hero.section {
    padding-top: clamp(3.5rem, 7vw, 5rem);
    padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

    /* Make non-index public page heroes behave like the index hero: centered and with a consistent max width */
    .page-hero.section > .container {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

        .page-hero.section > .container > * {
            width: 100%;
            max-width: 70rem;
        }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(16px);
    background: color-mix(in srgb, var(--color-bg) 84%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.public-main {
    position: relative;
    z-index: 0;
    padding-top: var(--space-5);
}

/* --- ساختار هدر دسکتاپ --- */
.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 80px;
    flex-wrap: wrap; /* در موبایل به المان‌ها اجازه شکستن می‌دهد */
}

.brand {
    display: inline-flex;
    color: var(--color-text);
}

.brand-right {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text);
    white-space: nowrap;
}

.brand-right-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.brand-right-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.brand-right-name {
    color: var(--color-primary);
    font-weight: 900;
    font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.25rem);
    line-height: 1;
}

.brand-right-tagline {
    color: color-mix(in srgb, var(--color-primary) 80%, var(--color-text) 20%);
    font-weight: 400;
    font-size: var(--text-xs);
    line-height: 1;
}

.brand-mark {
    width: 120px;
    height: 34px;
}

/* استایل کانتینر لینک‌ها */
.main-nav {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-right: auto;
}

/* استایل کانتینر دکمه‌ها */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    /* ظاهر لینک‌ها و دکمه تغییر تم */
    .main-nav > a,
    .nav-actions .theme-toggle {
        padding: 0.7rem 0.9rem;
        border-radius: 999px;
        color: var(--color-text-muted);
    }

        .main-nav > a.active,
        .main-nav > a:hover,
        .nav-actions .theme-toggle:hover {
            color: var(--color-text);
            background: var(--color-surface-2);
        }

.theme-toggle {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.85rem 1.3rem;
    border-radius: 999px;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- دکمه‌های اضافه شده برای فراخوان‌های متنوع --- */

.btn-success {
    color: var(--color-text-inverse);
    background: #00b4d8; /* آبی فیروزه‌ای */
    box-shadow: var(--shadow-sm);
}

    .btn-success:hover {
        background: #0096b4; /* فیروزه‌ای تیره‌تر برای حالت هاور */
        transform: translateY(-1px);
    }

.btn-warning {
    color: var(--color-bg); /* رنگ تیره برای خوانایی بهتر روی پس‌زمینه روشن */
    background: #f59e0b; /* طلایی/نارنجی جذاب برای جلب توجه */
    box-shadow: var(--shadow-sm);
}

    .btn-warning:hover {
        background: #d97706;
        transform: translateY(-1px);
    }


.btn-primary {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

    .btn-primary:hover {
        background: var(--color-primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

    .btn-secondary:hover {
        background: var(--color-surface-2);
    }

/* --- ساختار صفحات --- */
.hero-grid,
.split-layout,
.contact-grid,
.footer-grid,
.about-grid {
    display: grid;
    gap: var(--space-8);
}

.hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
}

/* Index hero: allow wider content while keeping it centered */
.hero.section > .container.hero-grid {
    width: min(calc(100% - 2rem), 1440px);
}

/* Index hero: the current markup has only one column; make it use the full row */
.hero.section .hero-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

    .hero.section .hero-grid > div {
        width: 100%;
        max-width: 70rem;
    }

.hero h1,
.page-hero h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.15;
    margin: 0.5rem 0 1rem;
    max-width: none;
}

.page-hero h1 {
    max-width: none;
}

.page-hero {
    text-align: center;
}

    .page-hero .hero-text {
        margin-inline: auto;
    }

.eyebrow {
    margin: 0 0 0.5rem;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.hero-text {
    color: var(--color-text-muted);
    max-width: 60ch;
    margin: 0 0 1.5rem;
    margin-inline: auto;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

    .cta-row .btn {
        width: 220px;
        justify-content: center;
    }

.stat-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
    color: var(--color-text-muted);
}

    .stat-list strong {
        color: var(--color-text);
    }

.surface-card {
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 11%, transparent);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.hero-card {
    padding: 1.2rem;
}

.dashboard-mock {
    padding: 1.2rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-2) 92%, transparent), color-mix(in srgb, var(--color-surface-offset) 88%, transparent));
    border-radius: calc(var(--radius-xl) - 0.4rem);
}

.mock-head,
.mock-list div,
.solution-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.badge {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--color-primary-highlight);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 700;
}

.mock-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin-block: 1.2rem;
}

    .mock-kpis article,
    .feature-card,
    .detail-card,
    .use-card,
    .roadmap-card,
    .scenario-card,
    .about-card,
    .contact-card,
    .info-card,
    .highlight-card,
    .list-card,
    .solution-row {
        padding: 1.4rem;
    }

    .mock-kpis small {
        color: var(--color-text-muted);
        display: block;
        margin-bottom: 0.5rem;
    }

.mock-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    height: 160px;
    margin-block: 1rem 1.4rem;
}

    .mock-chart span {
        flex: 1;
        border-radius: 999px 999px 0 0;
        background: linear-gradient(180deg, var(--color-primary), var(--color-blue));
    }

.mock-list {
    display: grid;
    gap: 0.7rem;
}

    .mock-list div {
        padding: 0.8rem 0.95rem;
        border-radius: var(--radius-md);
        background: var(--color-surface);
    }

.section-head {
    margin-bottom: 2rem;
}

.compact-head h2,
.split-layout h2,
.cta-box h2,
.page-hero h1,
.about-card h2,
.contact-card h2,
.info-card h2,
.solution-row h2 {
    margin: 0 0 0.8rem;
}

.feature-grid,
.use-grid,
.roadmap-grid,
.scenario-grid {
    display: grid;
    gap: 1.25rem;
}

.three-up {
    grid-template-columns: repeat(3, 1fr);
}

.two-up {
    grid-template-columns: repeat(2, 1fr);
}

.split-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.bullet-panel {
    display: grid;
    gap: 1rem;
}

.bullet-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1rem;
    align-items: start;
    padding-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.bullet-num {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 1.25rem;
    background: var(--color-primary-highlight);
    color: var(--color-primary);
    font-weight: 800;
}

.highlight-card {
    padding: 2rem;
}

.text-link {
    color: var(--color-primary);
    font-weight: 700;
}

.use-grid {
    grid-template-columns: 1fr 1.2fr 1fr;
}

.accent-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-highlight) 70%, var(--color-surface) 30%), var(--color-surface));
}

.cta-section {
    padding-top: var(--space-12);
}

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-highlight) 72%, var(--color-surface) 28%), color-mix(in srgb, var(--color-surface) 86%, transparent));
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.muted-section {
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}

.site-footer {
    padding: 2.5rem 0 3.5rem;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

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

.site-footer h3 {
    font-size: var(--text-base);
    margin: 0 0 0.75rem;
}

.site-footer p, .site-footer li, .site-footer a {
    color: var(--color-text-muted);
}

.site-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

    .check-list li {
        position: relative;
        padding-right: 1.8rem;
    }

        .check-list li::before {
            content: "";
            position: absolute;
            right: 0;
            top: 0.55rem;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            background: var(--color-primary);
        }

.solutions-stack {
    display: grid;
    gap: 1rem;
}

.solution-row {
    padding: 1.6rem 1.8rem;
}

.scenario-grid {
    grid-template-columns: repeat(3, 1fr);
}

.roadmap-grid {
    grid-template-columns: repeat(3, 1fr);
}

.roadmap-card span {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
    font-weight: 800;
}

.about-grid {
    grid-template-columns: 1.1fr 1fr 1fr;
}

.large-card {
    grid-column: span 3;
}

.contact-grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
}

.contact-form {
    display: grid;
    gap: 0.9rem;
}

    .contact-form label {
        font-weight: 700;
        font-size: var(--text-sm);
    }

.full-btn {
    width: 100%;
    margin-top: 0.5rem;
}

.info-card {
    height: fit-content;
}

.active-btn {
    box-shadow: var(--shadow-md);
}

@media (max-width: 980px) {
    .hero-grid,
    .split-layout,
    .contact-grid,
    .footer-grid,
    .about-grid,
    .three-up,
    .two-up,
    .use-grid,
    .roadmap-grid,
    .scenario-grid {
        grid-template-columns: 1fr;
    }

    .large-card {
        grid-column: auto;
    }

    .cta-box,
    .nav-wrap,
    .solution-row {
        flex-direction: column;
        align-items: stretch;
    }

    .mock-kpis {
        grid-template-columns: 1fr;
    }
}

/* --- استایل‌های اختصاصی موبایل --- */
@media (max-width: 720px) {
    .site-header {
        position: static;
    }

    .nav-wrap {
        padding-block: 1.5rem 1rem;
        display: flex;
        flex-direction: column; /* چیدمان ستونی برای قرار گرفتن زیر هم */
        align-items: center; /* وسط‌چین کردن تمام سطرها */
        gap: 1.25rem; /* ایجاد فاصله منظم بین لوگو، دکمه‌ها و لینک‌ها */
    }

    /* ۱. لوگو در سطر اول */
    .brand {
        order: 1;
    }

    /* ۲. دکمه‌ها در سطر دوم و وسط‌چین */
    .nav-actions {
        order: 2;
        margin-right: 0;
        width: 100%;
        justify-content: center;
    }

    /* ۳. لینک‌ها در سطر سوم و کاملا وسط‌چین */
    .main-nav {
        order: 3;
        width: 100%;
        margin-right: 0;
        margin-top: 0;
        justify-content: center; /* قرار دادن لینک‌ها در مرکز خط */
        gap: 0.5rem;
    }

        .main-nav > a {
            padding: 0.6rem 0.75rem;
        }

    .hero h1, .page-hero h1 {
        max-width: 100%;
    }

    .bullet-item {
        grid-template-columns: 1fr;
    }

    .bullet-num {
        width: 52px;
        height: 52px;
    }

    .cta-row, .stat-list {
        flex-direction: column;
        align-items: center;
    }

        .cta-row .btn {
            width: min(80%, 22rem);
            justify-content: center;
        }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* --- استایل اختصاصی هدر لاگین برای موبایل (قرارگیری در یک خط) --- */
@media (max-width: 980px) {
    .nav-wrap.login-nav-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-block: 1rem !important;
    }

        .nav-wrap.login-nav-wrap .brand {
            order: 1 !important;
        }

        .nav-wrap.login-nav-wrap .nav-actions {
            order: 2 !important;
            width: auto !important;
            justify-content: flex-end !important;
            margin: 0 !important;
        }
}