/* ============================================================
   محاسب ۳۶۵ — استایل صفحه‌ی معرفی سکو

   چرا این فایل توکن‌های خودش را دارد و به Design_System وصل نیست:
   دامنه‌ی سکو یک وب‌روت جداست و دیزاین‌سیستمِ محصول (که برای رابط
   پشتِ لاگین ساخته شده) آنجا سرو نمی‌شود. مقادیر برند عیناً همان‌های
   Design_System/gd-tokens.css هستند — آبی #2563eb و زرد #facc15 —
   و اگر آنجا عوض شد، همین‌جا هم باید عوض شود.

   فهرست:
     ۱  فونت و توکن
     ۲  پایه، اسکرول‌بار راست، کمکی‌ها
     ۳  دکمه و نشان
     ۴  هدر و ناوبری
     ۵  قهرمان و ماکت داشبورد
     ۶  بخش‌های عمومی: کارت، حوزه، ویژگی
     ۷  خط زمانی وضعیت
     ۸  فراخوان و فوتر
     ۹  حرکت و ریسپانسیو
   ============================================================ */

/* ════════ ۱ — فونت و توکن ════════ */

/* وزیرمتن، هم‌مبدأ. مسیر عمداً نسبی است تا هم وقتی این پوشه خودش
   وب‌روت است کار کند و هم وقتی زیرپوشه‌ی یک وب‌روت دیگر است. */
@font-face {
    font-family: "Vazirmatn";
    src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("assets/fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
    font-weight: 800; font-display: swap;
}

:root {
    color-scheme: light;

    /* برند — همان مقادیر دیزاین‌سیستم محصول */
    --m-primary:        #2563eb;
    --m-primary-hover:  #1d4ed8;
    --m-primary-soft:   #eff6ff;
    --m-primary-border: #bfdbfe;
    --m-accent:         #facc15;
    --m-accent-text:    #a16207;

    /* خاکستری خنثی */
    --m-gray-0:   #ffffff;
    --m-gray-50:  #f8fafc;
    --m-gray-100: #f1f5f9;
    --m-gray-200: #e2e8f0;
    --m-gray-300: #cbd5e1;
    --m-gray-400: #94a3b8;
    --m-gray-500: #64748b;
    --m-gray-600: #475569;
    --m-gray-800: #1e293b;
    --m-gray-900: #0f172a;

    /* شب — فقط قهرمان و فوتر */
    --m-night:      #0b1220;
    --m-night-soft: #111c31;
    --m-night-line: rgba(255, 255, 255, .12);
    --m-on-night:   #e8eefc;
    --m-on-night-muted: #9fb0d0;

    /* معنایی */
    --m-ink:     var(--m-gray-900);
    --m-muted:   var(--m-gray-600);
    --m-bg:      var(--m-gray-0);
    --m-soft:    var(--m-gray-50);
    --m-line:    var(--m-gray-200);
    --m-success: #16a34a;

    /* تایپوگرافی — سیال، بدون بازنویسی در هر بریک‌پوینت */
    --m-font: "Vazirmatn", system-ui, "Segoe UI", sans-serif;
    --m-text-sm:  0.8125rem;
    --m-text-md:  clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
    --m-text-lg:  clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    --m-text-xl:  clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
    --m-text-2xl: clamp(1.4rem, 1.25rem + 0.7vw, 1.9rem);
    --m-text-3xl: clamp(1.7rem, 1.4rem + 1.3vw, 2.6rem);
    --m-text-4xl: clamp(2.1rem, 1.6rem + 2.3vw, 3.6rem);
    --m-lh-tight: 1.35;
    --m-lh:       1.85;

    /* فاصله، شعاع، سایه */
    --m-space-1: .25rem;  --m-space-2: .5rem;   --m-space-3: .75rem;
    --m-space-4: 1rem;    --m-space-5: 1.25rem; --m-space-6: 1.5rem;
    --m-space-8: 2rem;    --m-space-10: 2.5rem; --m-space-12: 3rem;
    --m-space-16: 4rem;   --m-space-20: 5rem;   --m-space-24: 6rem;

    --m-radius-sm:  8px;
    --m-radius:     14px;
    --m-radius-lg:  22px;
    --m-radius-full: 999px;

    --m-shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
    --m-shadow-2: 0 2px 6px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .06);
    --m-shadow-3: 0 10px 24px rgba(15, 23, 42, .10), 0 30px 70px rgba(15, 23, 42, .14);

    --m-wrap: 1180px;
    --m-gutter: var(--m-space-5);

    --m-dur: .22s;
    --m-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ════════ ۲ — پایه ════════ */

/* نوار اسکرول سمت راست.
   مرورگر در سند rtl نوار را سمت چپ می‌گذارد؛ قاعده‌ی ثابت پروژه این است
   که در صفحه‌های فارسی سمت راست باشد. چرخش فقط روی اسکرولرِ عمودیِ صفحه
   و دقیقاً یک سطح، وگرنه نوادگان جهت را اشتباه ارث می‌برند. */
html { direction: ltr; scroll-behavior: smooth; }
html > body { direction: rtl; }

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

body.m-body {
    margin: 0;
    background: var(--m-bg);
    color: var(--m-ink);
    font-family: var(--m-font);
    font-size: var(--m-text-md);
    line-height: var(--m-lh);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: var(--m-lh-tight); font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }

.m-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* آیکن‌ها: خطی، رنگ از متن */
.m-ico {
    width: 1.25em; height: 1.25em;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    flex: none;
}

.m-wrap {
    width: 100%;
    max-width: var(--m-wrap);
    margin-inline: auto;
    padding-inline: var(--m-gutter);
}

.m-skip {
    position: absolute; inset-inline-start: -9999px; top: 0;
    z-index: 100;
    padding: var(--m-space-3) var(--m-space-5);
    background: var(--m-primary); color: #fff; border-radius: 0 0 var(--m-radius) var(--m-radius);
}
.m-skip:focus { inset-inline-start: var(--m-space-4); }

:where(a, button):focus-visible {
    outline: 2px solid var(--m-primary);
    outline-offset: 3px;
    border-radius: var(--m-radius-sm);
}

/* ════════ ۳ — دکمه و نشان ════════ */
.m-btn {
    display: inline-flex; align-items: center; gap: var(--m-space-2);
    padding: .85rem 1.45rem;
    border: 1px solid transparent; border-radius: var(--m-radius-full);
    font: inherit; font-weight: 700; line-height: 1.2;
    cursor: pointer; white-space: nowrap;
    transition: background var(--m-dur) var(--m-ease),
                border-color var(--m-dur) var(--m-ease),
                color var(--m-dur) var(--m-ease),
                transform var(--m-dur) var(--m-ease);
}
.m-btn--sm { padding: .6rem 1.1rem; font-size: var(--m-text-sm); }

.m-btn--primary { background: var(--m-primary); color: #fff; }
.m-btn--primary:hover { background: var(--m-primary-hover); transform: translateY(-1px); }
.m-btn--primary .m-ico { transition: transform var(--m-dur) var(--m-ease); }
.m-btn--primary:hover .m-ico { transform: translateX(-3px); }

.m-btn--ghost { background: transparent; border-color: var(--m-night-line); color: var(--m-on-night); }
.m-btn--ghost:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); }

.m-chip {
    display: inline-block;
    margin-inline-end: var(--m-space-2);
    padding: .15rem .55rem;
    background: #dcfce7; color: #15803d;
    border-radius: var(--m-radius-full);
    font-size: .7rem; font-weight: 700; vertical-align: middle;
}

.m-kicker {
    margin-bottom: var(--m-space-3);
    color: var(--m-primary);
    font-size: var(--m-text-sm); font-weight: 700;
    letter-spacing: .02em;
}

/* ════════ ۴ — هدر ════════ */
.m-header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(11, 18, 32, .82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background var(--m-dur) var(--m-ease), border-color var(--m-dur) var(--m-ease);
}
.m-header.is-stuck { background: rgba(11, 18, 32, .96); border-bottom-color: var(--m-night-line); }

.m-header__bar {
    display: flex; align-items: center; gap: var(--m-space-6);
    min-height: 68px;
}

.m-brand { display: inline-flex; align-items: center; gap: var(--m-space-3); flex: none; }
.m-brand__mark {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--m-primary), #60a5fa);
    color: #fff; border-radius: 12px;
    font-size: .95rem; font-weight: 800; letter-spacing: -.02em;
}
.m-brand__text { display: flex; flex-direction: column; line-height: 1.35; }
.m-brand__text strong { color: var(--m-on-night); font-size: 1.02rem; font-weight: 800; }
.m-brand__text small { color: var(--m-on-night-muted); font-size: .72rem; }

.m-nav { display: flex; align-items: center; gap: var(--m-space-5); margin-inline-end: auto; }
.m-nav a {
    color: var(--m-on-night-muted);
    font-size: var(--m-text-sm); font-weight: 500;
    padding-block: var(--m-space-2);
    border-bottom: 2px solid transparent;
    transition: color var(--m-dur) var(--m-ease), border-color var(--m-dur) var(--m-ease);
}
.m-nav a:hover, .m-nav a.is-current { color: #fff; border-bottom-color: var(--m-accent); }

.m-header__cta { display: flex; align-items: center; gap: var(--m-space-3); flex: none; }

.m-burger {
    display: none;
    width: 42px; height: 42px;
    padding: 0 11px;
    background: transparent; border: 1px solid var(--m-night-line); border-radius: 11px;
    cursor: pointer;
}
.m-burger span {
    display: block; height: 2px; margin: 4px 0;
    background: var(--m-on-night); border-radius: 2px;
    transition: transform var(--m-dur) var(--m-ease), opacity var(--m-dur) var(--m-ease);
}
.m-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.m-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.m-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ════════ ۵ — قهرمان ════════ */
.m-hero {
    position: relative; isolation: isolate; overflow: hidden;
    /* پس‌زمینه‌ی شب + شبکه‌ی نازک؛ هیچ تصویری لود نمی‌شود */
    background:
        linear-gradient(180deg, rgba(11, 18, 32, .0) 0%, rgba(11, 18, 32, .92) 92%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 64px),
        linear-gradient(160deg, #14213d 0%, var(--m-night) 60%);
    color: var(--m-on-night);
    padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6.5rem);
    margin-top: -68px;      /* هدر شناور روی قهرمان می‌نشیند */
    padding-top: calc(68px + clamp(3rem, 6vw, 5.5rem));
}
.m-hero__glow {
    position: absolute; z-index: -1;
    inset-block-start: -22%; inset-inline-start: -12%;
    width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
    background: radial-gradient(circle, rgba(37, 99, 235, .45) 0%, rgba(37, 99, 235, 0) 62%);
    filter: blur(6px);
    pointer-events: none;
}

.m-hero__grid {
    display: grid; gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: center;
}

.m-eyebrow {
    display: inline-flex; align-items: center; gap: var(--m-space-2);
    margin-bottom: var(--m-space-5);
    padding: .4rem .9rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--m-night-line);
    border-radius: var(--m-radius-full);
    color: var(--m-on-night-muted);
    font-size: var(--m-text-sm);
}
.m-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--m-success);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
    animation: m-pulse 2.4s infinite;
}
@keyframes m-pulse {
    70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ستون، تا خط دوم زیر خط اول بیفتد ولی خودش به اندازه‌ی متنش پهن باشد
   (زیرخط زرد باید دقیقاً هم‌اندازه‌ی همان عبارت باشد، نه کل عرض) */
.m-hero__title {
    display: flex; flex-direction: column; align-items: flex-start;
    font-size: var(--m-text-4xl);
    letter-spacing: -.01em;
}
/* خط دوم عنوان. رنگ متن ساده است؛ تأکید از یک زیرخط زرد برند می‌آید،
   نه از گرادیان روی حروف — گرادیانِ متن هم خوانایی را کم می‌کند و هم
   با ضخامت‌های مختلف فارسی ناهموار دیده می‌شود. */
.m-hl {
    display: inline-block;
    position: relative;
    color: #fff;
}
.m-hl::after {
    content: "";
    position: absolute;
    inset-inline: -.08em; inset-block-end: .06em;
    height: .18em;
    background: var(--m-accent);
    border-radius: var(--m-radius-full);
    opacity: .9;
    z-index: -1;
}
.m-hero__lead {
    max-width: 46ch;
    margin-top: var(--m-space-5);
    color: var(--m-on-night-muted);
    font-size: var(--m-text-lg);
}
.m-hero__actions {
    display: flex; flex-wrap: wrap; gap: var(--m-space-3);
    margin-top: var(--m-space-8);
}

.m-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--m-space-4);
    margin-top: var(--m-space-10);
    padding-top: var(--m-space-6);
    border-top: 1px solid var(--m-night-line);
}
.m-stat dt { color: var(--m-on-night-muted); font-size: var(--m-text-sm); order: 2; }
.m-stat dd {
    margin: 0; order: 1;
    color: #fff; font-size: var(--m-text-3xl); font-weight: 800; line-height: 1.2;
}
.m-stat { display: flex; flex-direction: column; }

/* ---------- ماکت داشبورد ---------- */
.m-mock {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--m-night-line);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-3);
    overflow: hidden;
    transform: perspective(1400px) rotateY(4deg) rotateX(2deg);
}
.m-mock__chrome {
    display: flex; align-items: center; gap: 6px;
    padding: var(--m-space-3) var(--m-space-4);
    background: rgba(255, 255, 255, .05);
    border-bottom: 1px solid var(--m-night-line);
}
.m-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.m-mock__url {
    margin-inline-start: auto;
    color: var(--m-on-night-muted); font-size: .72rem;
}
.m-mock__body { display: flex; gap: var(--m-space-3); padding: var(--m-space-4); }
.m-mock__rail { display: flex; flex-direction: column; gap: 8px; width: 44px; flex: none; }
.m-mock__railitem { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .12); }
.m-mock__railitem.is-on { background: var(--m-accent); }
.m-mock__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--m-space-3); }

.m-mock__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m-space-2); }
.m-mock__kpi {
    padding: var(--m-space-3);
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--m-night-line);
    border-radius: var(--m-radius-sm);
    display: flex; flex-direction: column; gap: 2px;
}
.m-mock__kpi b { color: #fff; font-size: 1.05rem; font-weight: 800; }
.m-mock__kpi i { color: var(--m-on-night-muted); font-size: .68rem; font-style: normal; }

.m-mock__chart {
    display: flex; align-items: flex-end; gap: 6px;
    height: 96px; padding: var(--m-space-3);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--m-night-line);
    border-radius: var(--m-radius-sm);
}
.m-mock__chart span {
    flex: 1;
    height: var(--h);
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #60a5fa, var(--m-primary));
}
.m-mock__chart span:nth-child(6) { background: linear-gradient(180deg, #fde047, #eab308); }

.m-mock__rows { display: flex; flex-direction: column; gap: 6px; }
.m-mock__rows span { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .1); }
.m-mock__rows span:nth-child(2) { width: 78%; }
.m-mock__rows span:nth-child(3) { width: 55%; }

/* ════════ ۶ — بخش‌های عمومی ════════ */
.m-sec { padding-block: clamp(3.5rem, 7vw, 6rem); }
.m-sec--soft { background: var(--m-soft); border-block: 1px solid var(--m-line); }

.m-sec__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.m-sec__title { font-size: var(--m-text-3xl); }
.m-sec__lead { margin-top: var(--m-space-4); color: var(--m-muted); font-size: var(--m-text-lg); }

.m-grid { display: grid; gap: var(--m-space-5); grid-template-columns: 1fr; }

.m-card {
    padding: var(--m-space-6);
    background: var(--m-gray-0);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-1);
    transition: box-shadow var(--m-dur) var(--m-ease),
                border-color var(--m-dur) var(--m-ease),
                transform var(--m-dur) var(--m-ease);
}
.m-card:hover { box-shadow: var(--m-shadow-2); border-color: var(--m-gray-300); transform: translateY(-2px); }
.m-card h3 { margin-bottom: var(--m-space-3); font-size: var(--m-text-xl); }
.m-card p { color: var(--m-muted); }

.m-card__ico {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    margin-bottom: var(--m-space-4);
    border-radius: 13px;
    font-size: 1.15rem;
}
.m-card__ico[data-tone="blue"]   { background: #eff6ff; color: #2563eb; }
.m-card__ico[data-tone="amber"]  { background: #fefce8; color: #a16207; }
.m-card__ico[data-tone="green"]  { background: #f0fdf4; color: #15803d; }
.m-card__ico[data-tone="violet"] { background: #f5f3ff; color: #6d28d9; }
.m-card__ico[data-tone="cyan"]   { background: #ecfeff; color: #0e7490; }
.m-card__ico[data-tone="rose"]   { background: #fff1f2; color: #be123c; }

.m-card--plain { background: var(--m-gray-0); }

/* ---------- حوزه‌های کاری ---------- */
.m-domains { display: grid; gap: var(--m-space-3); grid-template-columns: 1fr; }
.m-domain {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ico title" "ico desc";
    gap: 0 var(--m-space-3);
    align-items: start;
    padding: var(--m-space-4) var(--m-space-5);
    background: var(--m-gray-0);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    transition: border-color var(--m-dur) var(--m-ease), box-shadow var(--m-dur) var(--m-ease);
}
.m-domain:hover { border-color: var(--m-primary-border); box-shadow: var(--m-shadow-1); }
.m-domain .m-ico { grid-area: ico; margin-top: .35rem; font-size: 1.1rem; color: var(--m-primary); }
.m-domain b { grid-area: title; font-size: var(--m-text-md); font-weight: 700; }
.m-domain span { grid-area: desc; color: var(--m-muted); font-size: var(--m-text-sm); line-height: 1.7; }

/* ---------- ویژگی‌های زنده ----------
   عمداً بدون نوار رنگیِ کنارِ کارت: نشانه‌ی «زنده بودن» را همان چیپ سبز
   کنار عنوان می‌دهد و دو نشانه برای یک معنی، سروصداست. */
.m-feat {
    padding: var(--m-space-6);
    background: var(--m-gray-0);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    transition: border-color var(--m-dur) var(--m-ease), box-shadow var(--m-dur) var(--m-ease);
}
.m-feat:hover { border-color: var(--m-gray-300); box-shadow: var(--m-shadow-1); }
.m-feat h3 { margin-bottom: var(--m-space-3); font-size: var(--m-text-lg); }
.m-feat p { color: var(--m-muted); }

.m-note {
    display: flex; align-items: flex-start; gap: var(--m-space-3);
    margin-top: var(--m-space-8);
    padding: var(--m-space-5);
    background: var(--m-primary-soft);
    border: 1px solid var(--m-primary-border);
    border-radius: var(--m-radius);
    color: var(--m-gray-800);
    font-size: var(--m-text-sm); line-height: 1.9;
}
.m-note .m-ico { margin-top: .35rem; color: var(--m-primary); }

/* ════════ ۷ — خط زمانی وضعیت ════════ */
.m-timeline {
    display: grid; gap: var(--m-space-5);
    grid-template-columns: 1fr;
    counter-reset: m-step;
}
.m-tl {
    position: relative;
    padding: var(--m-space-6);
    padding-top: var(--m-space-10);
    background: var(--m-gray-0);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
}
.m-tl::before {
    counter-increment: m-step;
    content: counter(m-step, persian);
    position: absolute; inset-block-start: var(--m-space-5); inset-inline-start: var(--m-space-6);
    display: grid; place-items: center;
    width: 30px; height: 30px;
    background: var(--m-gray-100); color: var(--m-gray-500);
    border-radius: 50%;
    font-size: .82rem; font-weight: 700;
}
.m-tl.is-done::before   { background: #dcfce7; color: #15803d; }
.m-tl.is-active::before { background: var(--m-primary); color: #fff; }
.m-tl.is-active { border-color: var(--m-primary-border); box-shadow: var(--m-shadow-2); }
.m-tl h3 { margin-bottom: var(--m-space-3); font-size: var(--m-text-lg); }
.m-tl p { color: var(--m-muted); }

/* ════════ ۸ — فراخوان و فوتر ════════ */
.m-cta {
    background: linear-gradient(140deg, #14213d 0%, var(--m-night) 70%);
    color: var(--m-on-night);
    padding-block: clamp(3rem, 6vw, 5rem);
}
.m-cta__inner {
    display: grid; gap: var(--m-space-8);
    grid-template-columns: 1fr;
    align-items: center;
}
.m-cta h2 { font-size: var(--m-text-2xl); }
.m-cta p { margin-top: var(--m-space-4); color: var(--m-on-night-muted); max-width: 58ch; }
/* دو انتخابگر زیر عمداً دوکلاسه‌اند تا از `.m-cta p` سنگین‌تر باشند و
   لازم نشود !important بنویسیم. */
.m-cta .m-cta__contact {
    display: inline-block;
    margin-top: var(--m-space-5);
    padding: var(--m-space-3) var(--m-space-5);
    background: rgba(255, 255, 255, .07);
    border: 1px dashed var(--m-night-line);
    border-radius: var(--m-radius);
    color: #fff;
    font-weight: 700;
}
.m-cta__side {
    padding: var(--m-space-6);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--m-night-line);
    border-radius: var(--m-radius-lg);
}
.m-cta .m-cta__quote { margin: 0; color: #fff; font-size: var(--m-text-xl); font-weight: 800; }
.m-cta .m-cta__quotesub { font-size: var(--m-text-sm); }

.m-footer {
    background: var(--m-night);
    color: var(--m-on-night-muted);
    border-top: 1px solid var(--m-night-line);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}
.m-footer__grid {
    display: grid; gap: var(--m-space-8);
    grid-template-columns: 1fr;
    padding-bottom: var(--m-space-8);
}
.m-brand--footer { margin-bottom: var(--m-space-4); }
.m-footer__about { max-width: 42ch; font-size: var(--m-text-sm); }
.m-footer h3 { margin-bottom: var(--m-space-4); color: #fff; font-size: var(--m-text-md); }
.m-footer nav a {
    display: block;
    padding-block: var(--m-space-1);
    font-size: var(--m-text-sm);
    transition: color var(--m-dur) var(--m-ease);
}
.m-footer nav a:hover { color: #fff; }
.m-footer__meta { padding-block: var(--m-space-1); font-size: var(--m-text-sm); }

.m-footer__bottom {
    display: flex; flex-wrap: wrap; gap: var(--m-space-3);
    justify-content: space-between;
    padding-block: var(--m-space-5);
    border-top: 1px solid var(--m-night-line);
    font-size: var(--m-text-sm);
}

/* ════════ ۹ — حرکت و ریسپانسیو ════════ */
.m-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--m-ease), transform .5s var(--m-ease);
}
.m-reveal.is-in { opacity: 1; transform: none; }

/* بدون جاوااسکریپت هیچ چیز نامرئی نمی‌ماند */
.no-js .m-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .m-reveal { opacity: 1; transform: none; transition: none; }
    .m-dot { animation: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- موبایل: منوی کشویی ---------- */
@media (max-width: 899px) {
    .m-burger { display: block; }
    .m-nav {
        position: absolute; inset-inline: 0; top: 100%;
        display: none;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: var(--m-space-3) var(--m-gutter) var(--m-space-5);
        background: rgba(11, 18, 32, .98);
        border-bottom: 1px solid var(--m-night-line);
    }
    .m-nav.is-open { display: flex; }
    .m-nav a { padding-block: var(--m-space-3); border-bottom: 1px solid var(--m-night-line); }
    .m-nav a:last-child { border-bottom: 0; }
    .m-header { position: sticky; }
    .m-header__bar { position: relative; }
    .m-header__cta .m-btn { display: none; }
}

@media (min-width: 600px) {
    .m-grid--2, .m-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    :root { --m-gutter: var(--m-space-6); }
    .m-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .m-domains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .m-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .m-hero__grid { grid-template-columns: 1.05fr .95fr; }
    .m-cta__inner { grid-template-columns: 1.4fr .6fr; }
    .m-footer__grid { grid-template-columns: 1.6fr .7fr .7fr; }
}