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

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

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

:root,
[data-theme="light"] {
    --primary: #4f46e5;
    --primary-strong: #4338ca;
    --accent: #0f766e;
    --success: #15803d;
    --warning: #b45309;
    --danger: #b91c1c;
    --bg: #f5f7fb;
    --bg-soft: #eef2f9;
    --card: #ffffff;
    --card-soft: #f8fafc;
    --text: #0f172a;
    --muted: #475569;
    --border: #dbe3ef;
    --hero: linear-gradient(155deg, #eef2ff 0%, #f8fafc 48%, #eef6ff 100%);
    --ring: 0 0 0 .22rem rgba(79, 70, 229, .22);
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
    --shadow-md: 0 12px 32px rgba(15, 23, 42, .08);
    --radius: 1rem;
    --radius-sm: .7rem;
    --transition: .25s ease;
    --nav-bg: rgba(255,255,255,.86);
    --nav-bg-scrolled: rgba(255,255,255,.97);
    --footer-bg: #eaf0f8;
    --scroll-track: #edf2f7;
    --scroll-thumb: #b8c4d8;
}

[data-theme="dark"] {
    --primary: #818cf8;
    --primary-strong: #6366f1;
    --accent: #14b8a6;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --bg: #0a0f1b;
    --bg-soft: #101726;
    --card: #121b2d;
    --card-soft: #0f1728;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --border: rgba(148,163,184,.2);
    --hero: linear-gradient(160deg, #0b1120 0%, #172136 56%, #0b1526 100%);
    --ring: 0 0 0 .24rem rgba(129, 140, 248, .24);
    --shadow-sm: 0 4px 16px rgba(0,0,0,.26);
    --shadow-md: 0 14px 36px rgba(0,0,0,.34);
    --nav-bg: rgba(10,15,27,.88);
    --nav-bg-scrolled: rgba(10,15,27,.97);
    --footer-bg: #090f1b;
    --scroll-track: #0e1628;
    --scroll-thumb: #334155;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light dark; min-height: 100%; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    overflow-x: hidden;
}

[dir="rtl"] body,
[dir="rtl"] {
    font-family: 'Vazirmatn', 'Inter', system-ui, -apple-system, sans-serif;
}

::selection { background: var(--primary); color: #fff; }

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    padding: .5rem .9rem;
    border-radius: .5rem;
    background: var(--primary);
    color: #fff;
}

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

a { color: var(--primary); }
a:hover { color: var(--primary-strong); }

.navbar-jesr {
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    transition: all var(--transition);
    padding: .72rem 0;
}

.navbar-jesr.scrolled {
    background: var(--nav-bg-scrolled);
    box-shadow: var(--shadow-sm);
}

.navbar-brand-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
}

.navbar-jesr .nav-link {
    color: var(--muted);
    font-size: .93rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .4rem .85rem;
}

.navbar-jesr .nav-link:hover,
.navbar-jesr .nav-link:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.navbar-trust {
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
}

.btn-soft {
    background: var(--card-soft);
    border: 1px solid var(--border);
    color: var(--muted);
}

.btn-soft:hover,
.btn-soft:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-primary {
    border: 0;
    background: var(--primary);
    font-weight: 700;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent);
    transition: all var(--transition);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--primary-strong);
    transform: translateY(-1px);
}

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.nav-primary-cta { white-space: nowrap; }

.hero-section {
    position: relative;
    background: var(--hero);
    padding: 8.3rem 0 4.7rem;
}

.hero-section.hero-sm { padding: 7.1rem 0 3.2rem; }

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 12% 10%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 28%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 42%);
    pointer-events: none;
}

.hero-title {
    font-size: clamp(1.9rem, 4.8vw, 3.4rem);
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: .95rem;
}

.hero-subtitle {
    color: var(--muted);
    max-width: 720px;
    margin: 0 auto;
    font-size: clamp(1rem, 2.7vw, 1.18rem);
}

.hero-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.6rem;
    flex-wrap: wrap;
}

.hero-proofline {
    margin-top: 1rem;
    color: var(--muted);
    font-size: .88rem;
}

.hero-illustration {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 2rem auto 0;
    opacity: .85;
}

.content-section { position: relative; }
.bg-subtle { background: var(--bg-soft); }

.section-head { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
.section-title {
    font-size: clamp(1.5rem, 3.7vw, 2.35rem);
    line-height: 1.35;
    font-weight: 800;
    margin-bottom: .6rem;
}
.section-subtitle { color: var(--muted); margin: 0; }

.feature-card,
.article-card,
.portfolio-card,
.testimonial-card,
.form-card,
.stat-card,
.tech-card,
.cta-card,
.timeline-card,
.proof-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.feature-card,
.article-card,
.portfolio-card,
.tech-card,
.timeline-card { height: 100%; }

.feature-card,
.stat-card,
.testimonial-card,
.proof-card { padding: 1.25rem; }

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.article-card:hover,
.portfolio-card:hover,
.feature-card:hover,
.tech-card:hover,
.timeline-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
}

.article-card-img,
.portfolio-card-img,
.article-card-img-placeholder,
.portfolio-card-img-placeholder {
    width: 100%;
    height: 196px;
    object-fit: cover;
}

.article-card-img-placeholder,
.portfolio-card-img-placeholder {
    background: linear-gradient(145deg, var(--card-soft), color-mix(in srgb, var(--primary) 20%, var(--card-soft)));
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
}

.article-card-body,
.portfolio-card-body { padding: 1.1rem 1.1rem 1.2rem; }

.stats-section .stat-card { text-align: center; }
.stat-icon { color: var(--primary); font-size: 1.25rem; margin-bottom: .45rem; }
.stat-value { font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.stat-label { font-size: .84rem; color: var(--muted); }

.client-logo {
    max-height: 44px;
    max-width: 150px;
    object-fit: contain;
    opacity: .75;
    filter: grayscale(1);
}

.client-logo:hover { opacity: 1; filter: grayscale(0); transition: all var(--transition); }

.client-chip,
.proof-chip {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 999px;
    padding: .48rem .82rem;
    font-size: .82rem;
    color: var(--muted);
    white-space: nowrap;
}

.proof-card .proof-value {
    font-size: 1.42rem;
    font-weight: 800;
    margin-bottom: .3rem;
}

.timeline-card {
    padding: 1rem;
    border-inline-start: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
}

.timeline-year {
    display: inline-block;
    font-size: .76rem;
    color: var(--primary);
    margin-bottom: .35rem;
}

.testimonial-card .quote {
    color: var(--text);
    margin-bottom: .8rem;
}

.tech-card { padding: 1rem .8rem; text-align: center; }
.tech-card .category { color: var(--muted); font-size: .75rem; }

.cta-section { background: var(--bg-soft); }
.cta-card {
    padding: 2rem 1.1rem;
    text-align: center;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--card) 88%, var(--primary) 12%), var(--card)),
        var(--card);
}

.faq-wrap .accordion-item {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: .8rem !important;
    overflow: hidden;
    margin-bottom: .65rem;
}

.faq-wrap .accordion-button {
    background: var(--card);
    color: var(--text);
    font-weight: 700;
    box-shadow: none !important;
}

.faq-wrap .accordion-button:not(.collapsed) {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 11%, var(--card));
}

.faq-wrap .accordion-body { color: var(--muted); }

.rich-text-content { max-width: 760px; }
.rich-text-content h2, .rich-text-content h3, .rich-text-content h4 {
    margin-top: 1.7rem;
    margin-bottom: .75rem;
    font-weight: 800;
}

.rich-text-content p,
.rich-text-content li {
    color: var(--text);
    line-height: 1.95;
}

.rich-text-content ul,
.rich-text-content ol { padding-inline-start: 1.2rem; }

.form-card { padding: 1.35rem; }

.form-control,
.form-select {
    border-radius: .75rem;
    border-color: var(--border);
    background: var(--card);
    color: var(--text);
    min-height: 46px;
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
a:focus-visible,
button:focus-visible {
    border-color: var(--primary);
    box-shadow: var(--ring);
    outline: none;
}

textarea.form-control { min-height: 128px; }

.form-label {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

.form-helper,
.form-assurance {
    color: var(--muted);
    font-size: .83rem;
}

.contact-icon {
    width: 42px;
    height: 42px;
    border-radius: .8rem;
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sticky-submit {
    position: sticky;
    bottom: .8rem;
    z-index: 3;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: .6rem;
}

.footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--border);
    margin-top: 3rem;
}

.footer-brand { font-weight: 800; font-size: 1.22rem; }
.footer-links li { margin-bottom: .45rem; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--text); }

.social-link {
    width: 35px;
    height: 35px;
    border-radius: 999px;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.social-link:hover { color: var(--primary); border-color: var(--primary); }

.pagination .page-link {
    border-color: var(--border);
    color: var(--muted);
    background: var(--card);
    border-radius: .65rem;
    margin: 0 .13rem;
}

.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.animate-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
}

.animate-fade-up.visible,
.hero-section .animate-fade-up { opacity: 1; transform: none; }

.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .28s; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; }

[dir="rtl"] .navbar-nav .nav-item,
[dir="rtl"] .d-flex { letter-spacing: 0; }

@media (max-width: 991.98px) {
    .navbar-jesr .navbar-collapse {
        margin-top: .7rem;
        border-top: 1px solid var(--border);
        padding-top: .7rem;
    }
}

@media (max-width: 767.98px) {
    .hero-section { padding: 7rem 0 3.5rem; }
    .hero-section.hero-sm { padding: 6.3rem 0 2.65rem; }
    .hero-ctas .btn { width: 100%; }
    .section-title { font-size: 1.42rem; }
    .form-card { padding: 1rem; }
    .sticky-submit { bottom: .2rem; }
}