/* ============================================================
   سبزحساب — صفحه اصلی روی دامنه اصلی (sabzhesab.com)

   مستقل از پوسته پنل: این صفحه برای کسی رسم می‌شود که هنوز وارد
   نشده و شاید هیچ‌وقت هم نشود. فقط tokens.css را می‌گیرد تا رنگ و
   قلم برند یکی بماند.

   قاعده ج-۱: هیچ ارجاع خارجی — نه قلم، نه تصویر، نه اسکریپت.
   صفحه با data-theme="light" پین شده، پس توکن‌ها همیشه روشن‌اند و
   تنها بخش تیره (.secure) رنگ‌هایش را صریح می‌نویسد.

   منطق دو جهته: همه فاصله‌ها با ویژگی‌های منطقی (inline/block) نوشته
   شده‌اند تا نسخه انگلیسی چپ‌به‌راست هم بدون قاعده جدا درست بیفتد.
   ============================================================ */

/* ---------- پایه ---------- */
.lp {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}
/* در انگلیسی ارقام لاتین دیده شوند (بازه ارقام از قلم سیستمی).
   🔴 `.num` هم لازم دارد: قلم عددی برند ارقام ASCII را به شکل فارسی
   می‌کشد، پس بدون این خط، صفحه انگلیسی مبالغش را فارسی نشان می‌داد. */
html[lang="en"] .lp { font-family: 'BrandLatinNum', var(--font-ui); }
html[lang="en"] .lp .num { font-family: 'BrandLatinNum', var(--font-num); }

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp h1, .lp h2, .lp h3 { margin: 0; line-height: 1.35; font-weight: 800; }
.lp p { margin: 0; }
/* 🔴 `:where` عمدی است: بدون آن، وزن این قاعده (۰,۱,۱) از خود
   کامپوننت‌ها (۰,۱,۰) بیشتر می‌شد و رنگ دکمه‌ها را پس می‌گرفت —
   متن دکمه سبز به‌جای سفید، جوهر تیره می‌شد و روی سبز خوانده
   نمی‌شد. `:where` وزن را صفر می‌کند، پس هر کامپوننتی که رنگ
   خودش را بنویسد برنده است. */
:where(.lp a) { color: inherit; }
.lp img { max-inline-size: 100%; height: auto; }
.lp :focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 3px;
    border-radius: var(--r-field);
}
.lp .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.lp .ic { flex: none; }

.wrap { inline-size: min(1180px, 100% - 40px); margin-inline: auto; }

/* گرادیان امضای برند — تنها جای استفاده‌اش در کل صفحه (BRAND.md ۲.۱) */
.lp-signature {
    position: fixed; inset-block-start: 0; inset-inline: 0;
    block-size: 3px; z-index: 60;
    background: linear-gradient(90deg,
        #024240, #035349, #037347, #048773, #11AD85, #57D362, #98E766);
}

/* ---------- دکمه‌ها ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; text-decoration: none; white-space: nowrap;
    font-size: 14px; font-weight: 700; line-height: 1;
    padding: 11px 18px; border-radius: var(--r-card);
    border: 1px solid transparent;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}
.btn--lg { font-size: 15px; padding: 15px 26px; }

/* متن دکمه اصلی در هر حالتی سفید است — روی سبز برند تنها رنگ
   خواناست (۵٫۹:۱). حالت‌ها صریح نوشته شده‌اند تا هیچ قاعده‌ای
   بعدا بی‌صدا عوضش نکند. */
.btn--solid,
.btn--solid:hover,
.btn--solid:focus,
.btn--solid:active,
.btn--solid:visited { color: #fff; }
.btn--solid { background: var(--brand-600); }
.btn--solid:hover { background: var(--brand-700); }

.btn--line { border-color: var(--border-strong); background: var(--surface); color: var(--ink); }
.btn--line:hover { border-color: var(--brand-600); color: var(--brand-700); }

.btn--ghost { color: var(--ink-muted); }
.btn--ghost:hover { color: var(--ink); background: rgb(3 115 71 / .07); }

.btn:active { transform: translateY(1px); }

/* ---------- نوار بالا ---------- */
.lp-head {
    position: sticky; inset-block-start: 3px; z-index: 50;
    background: rgb(246 250 248 / .82);
    backdrop-filter: blur(14px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.lp-head.is-stuck { border-block-end-color: var(--border); background: rgb(246 250 248 / .94); }

.lp-head__in {
    inline-size: min(1180px, 100% - 40px); margin-inline: auto;
    display: flex; align-items: center; gap: var(--sp-6);
    block-size: 68px;
}
.lp-logo { display: inline-flex; align-items: center; text-decoration: none; }
.lp-mark { flex: none; display: block; block-size: auto; }

.lp-nav { display: flex; gap: 4px; margin-inline: auto; }
.lp-nav a {
    padding: 8px 13px; border-radius: var(--r-pill); text-decoration: none;
    font-size: 14px; font-weight: 500; color: var(--ink-muted);
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lp-nav a:hover { color: var(--ink); background: rgb(3 115 71 / .07); }

.lp-head__cta { display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- سربرگ ---------- */
.hero {
    position: relative;
    padding-block: clamp(40px, 7vw, 84px) clamp(48px, 8vw, 96px);
    overflow: hidden;
}
/* درخشش زمینه — دو لکه نرم، نه گرادیان تمام‌صفحه */
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(760px 420px at 88% -8%, rgb(87 211 98 / .18), transparent 62%),
        radial-gradient(620px 360px at 4% 96%, rgb(17 173 133 / .13), transparent 60%);
}
.hero__in {
    position: relative; z-index: 1;
    inline-size: min(1180px, 100% - 40px); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px); align-items: center;
}

.pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 15px 6px 12px; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--border);
    font-size: 13px; font-weight: 700; color: var(--brand-700);
    box-shadow: var(--shadow-pop);
}
.pill__dot {
    inline-size: 7px; block-size: 7px; border-radius: 50%;
    background: var(--brand-400); flex: none;
    box-shadow: 0 0 0 4px rgb(17 173 133 / .18);
}

.hero h1 {
    margin-block: 22px 18px;
    font-size: clamp(31px, 4.6vw, 51px);
    font-weight: 900; line-height: 1.28;
    /* خط آخر یک کلمه تنها نماند — مرورگری که نشناسدش، همان رفتار قبلی */
    text-wrap: balance;
}
.grad {
    background: linear-gradient(105deg, #037347, #11AD85 45%, #57D362);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead {
    max-inline-size: 54ch; font-size: clamp(15px, 1.4vw, 17px);
    line-height: 2.1; color: var(--ink-muted);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: 28px; }
.hero__note { margin-block-start: 14px; font-size: 13px; color: var(--ink-faint); }

.hero__trust {
    list-style: none; margin: 30px 0 0; padding-block-start: 22px;
    border-block-start: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.hero__trust li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; color: var(--ink-muted);
}
.hero__trust .ic { inline-size: 17px; block-size: 17px; color: var(--brand-600); }

/* ---------- نمایش امضا: فاکتور، و سندی که خودش نوشته می‌شود ---------- */
.ledger { margin: 0; }
.ledger__cap {
    font-size: 12px; font-weight: 700; color: var(--ink-faint);
    letter-spacing: .02em; margin-block-end: 10px; text-align: center;
}
.ledger__card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-modal); padding: 16px 18px;
    box-shadow: 0 18px 40px -26px rgb(2 66 64 / .45);
}
.ledger__card header {
    display: flex; align-items: baseline; gap: var(--sp-3);
    padding-block-end: 10px; border-block-end: 1px solid var(--border);
}
.ledger__card header b { font-size: 14px; font-weight: 800; }
.ledger__card header > .num { margin-inline-start: auto; font-size: 12px; color: var(--ink-faint); }

.ledger__party { font-size: 12px; color: var(--ink-muted); padding-block: 9px 4px; }

.ledger__lines { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.ledger__lines > div { display: flex; align-items: baseline; gap: var(--sp-3); }
.ledger__lines dt { font-size: 13px; color: var(--ink-muted); }
.ledger__lines dd {
    margin: 0; margin-inline-start: auto; font-size: 13px; font-weight: 500;
}
.ledger__card footer {
    display: flex; align-items: baseline; gap: var(--sp-3);
    margin-block-start: 12px; padding-block-start: 11px;
    border-block-start: 1px solid var(--border);
    font-size: 13px; color: var(--ink-muted);
}
.ledger__card footer b { margin-inline-start: auto; font-size: 17px; font-weight: 800; color: var(--ink); }
.ledger__card footer em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ink-faint); }

/* پیوند دو کارت — خط عمودی که «از فاکتور به سند» را نشان می‌دهد */
.ledger__flow {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding-block: 10px;
}
.ledger__flow-line {
    inline-size: 1px; block-size: 20px;
    background: linear-gradient(var(--border-strong), var(--brand-400));
}
.ledger__flow-text { font-size: 11.5px; font-weight: 700; color: var(--brand-700); }

.ledger__entry { inline-size: 100%; border-collapse: collapse; margin-block-start: 9px; }
.ledger__entry thead th {
    padding-block-end: 7px; font-size: 10.5px; font-weight: 700; color: var(--ink-faint);
    text-align: end;
}
.ledger__entry th, .ledger__entry td { padding-block: 6px; font-weight: 400; }
/* نام حساب جریان متنی معمولی دارد و کد بعد از آن می‌آید — با flex،
   نامی که به خط دوم می‌رفت کدش را وسط ردیف جا می‌گذاشت. */
.ledger__entry th[scope="row"] {
    text-align: start; font-size: 12.5px; color: var(--ink); font-weight: 400;
}
.ledger__entry .code {
    display: inline-block; margin-inline-start: 7px;
    font-size: 10.5px; color: var(--ink-faint);
    background: var(--surface-sunken); border-radius: 4px; padding: 1px 5px;
}
.ledger__entry td { inline-size: 84px; text-align: end; font-size: 12.5px; }
.ledger__entry tfoot th, .ledger__entry tfoot td {
    padding-block-start: 9px; border-block-start: 1px solid var(--border);
    font-weight: 700; font-size: 12.5px;
}
.ledger__entry tfoot th { text-align: start; color: var(--ink-muted); }

.ledger__balanced {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-block-start: 12px; padding-block-start: 12px;
    border-block-start: 1px dashed var(--border-strong);
}
.ledger__balanced small { font-size: 11.5px; line-height: 1.7; color: var(--ink-faint); flex: 1 1 150px; }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill);
}
.chip--ok { background: var(--positive-bg); color: var(--positive); }
.chip .ic { inline-size: 14px; block-size: 14px; stroke-width: 2.4; }

/* ---------- بودجه عملکرد ---------- */
.perf {
    padding-block: clamp(40px, 5vw, 64px);
    background: var(--surface);
    border-block: 1px solid var(--border);
}
.perf__head { max-inline-size: 60ch; }
.perf__head h2 { font-size: clamp(20px, 2.4vw, 26px); }
.perf__head p { margin-block-start: 10px; font-size: 14.5px; line-height: 2; color: var(--ink-muted); }

.perf__grid {
    list-style: none; margin: 30px 0 0; padding: 0;
    display: grid; gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.perf__grid li {
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--brand-100);
}
.perf__grid b {
    display: block; font-size: clamp(34px, 4vw, 44px); font-weight: 900;
    line-height: 1.1; color: var(--brand-600);
}
.perf__unit { display: block; font-size: 12px; font-weight: 700; color: var(--brand-500); }
.perf__label {
    display: block; margin-block-start: 6px;
    font-size: 13px; line-height: 1.8; color: var(--ink-muted);
}

/* ---------- ساختار بخش‌ها ---------- */
.sec { padding-block: clamp(52px, 7vw, 92px); }
.sec--tight { padding-block: clamp(44px, 6vw, 76px); }

.sec__head { max-inline-size: 68ch; margin-block-end: clamp(28px, 4vw, 44px); }
.eyebrow {
    display: inline-block; margin-block-end: 12px;
    font-size: 12px; font-weight: 700; color: var(--brand-600);
    padding: 4px 12px; border-radius: var(--r-pill);
    background: rgb(3 115 71 / .08);
}
.sec__head h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; }
.sec__head p { margin-block-start: 14px; font-size: 15px; line-height: 2.05; color: var(--ink-muted); }

/* ---------- امکانات ---------- */
.bento {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.bento__card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-modal); padding: var(--sp-6);
    transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.bento__card:hover { border-color: var(--brand-300); transform: translateY(-2px); }
.bento__icon {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 38px; block-size: 38px; border-radius: var(--r-card);
    background: var(--brand-50); color: var(--brand-600);
    margin-block-end: 14px;
}
.bento__card h3 { font-size: 16px; font-weight: 800; }
.bento__card p { margin-block-start: 9px; font-size: 13.5px; line-height: 2; color: var(--ink-muted); }

/* ---------- دو در ورودی ---------- */
.doors { padding-block: clamp(46px, 6vw, 80px); background: var(--surface-sunken); }
.doors__in {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(26px, 4vw, 56px); align-items: center;
}
.doors__copy h2 { font-size: clamp(23px, 3vw, 32px); font-weight: 900; }
.doors__copy > p { margin-block-start: 14px; font-size: 15px; line-height: 2.05; color: var(--ink-muted); }
.doors__switch {
    display: flex; align-items: center; gap: 9px;
    margin-block-start: 20px; font-size: 13px; color: var(--ink-faint);
}
.doors__switch .ic { color: var(--brand-600); }

.doors__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.door {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-modal); padding: var(--sp-5);
    display: flex; flex-direction: column;
}
.door--acc { background: var(--brand-950); border-color: #123A2F; }
.door__label {
    align-self: flex-start; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand-700);
}
.door--acc .door__label { background: rgb(17 173 133 / .16); color: #57D362; }
.door__metric { margin-block-start: 16px; font-size: 13px; color: var(--ink-muted); }
.door--acc .door__metric { color: #93A8A1; }
.door__value {
    margin-block-start: 6px; font-size: clamp(22px, 2.6vw, 29px);
    font-weight: 900; line-height: 1.2;
}
.door--acc .door__value { color: #EAF3EF; }
.door__unit { font-size: 12px; color: var(--ink-faint); }
.door--acc .door__unit { color: #7B918A; }
.door__note {
    margin-block-start: auto; padding-block-start: 16px;
    font-size: 12px; line-height: 1.9; color: var(--ink-faint);
}
.door--acc .door__note { color: #7B918A; }

/* ---------- چرا سبزحساب ---------- */
.why { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.why__item { padding-block-start: 20px; border-block-start: 2px solid var(--brand-600); }
.why__item h3 { font-size: 18px; font-weight: 800; }
.why__item p { margin-block-start: 10px; font-size: 14px; line-height: 2.05; color: var(--ink-muted); }

/* ---------- در راه است ---------- */
.next { padding-block: clamp(44px, 6vw, 72px); background: var(--surface); border-block: 1px solid var(--border); }
.next__in {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 52px);
}
.next__copy h2 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 900; }
.next__copy p { margin-block-start: 12px; font-size: 14px; line-height: 2.05; color: var(--ink-muted); }
.next__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    align-content: start;
}
.next__list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 15px; border-radius: var(--r-card);
    background: var(--surface-sunken);
    font-size: 13.5px; line-height: 1.85; color: var(--ink-muted);
}
.next__list .ic { inline-size: 17px; block-size: 17px; margin-block-start: 4px; color: var(--warning); }

/* ---------- امنیت — تنها بخش تیره صفحه ---------- */
.secure {
    padding-block: clamp(52px, 7vw, 92px);
    position: relative; overflow: hidden;
    background: var(--brand-950); color: #EAF3EF;
}
.secure::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(720px 420px at 85% 0%, rgb(17 173 133 / .18), transparent 62%);
}
.secure > .wrap { position: relative; }
.sec__head--invert .eyebrow { background: rgb(17 173 133 / .16); color: #57D362; }
.sec__head--invert h2 { color: #FFFFFF; }
.sec__head--invert p { color: #A9BEB7; }

/* سه در هر ردیف: شش کارت یعنی دو ردیف کامل. با چهار ستون، ردیف دوم
   دو کارت تنها می‌ماند و بخش ناتمام به نظر می‌رسد. */
.secure__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.secure__card {
    background: rgb(255 255 255 / .045);
    border: 1px solid rgb(255 255 255 / .09);
    border-radius: var(--r-modal); padding: var(--sp-5);
}
.secure__icon {
    display: inline-flex; margin-block-end: 12px;
    color: #57D362;
}
.secure__card h3 { font-size: 15px; font-weight: 800; color: #FFFFFF; }
.secure__card p { margin-block-start: 8px; font-size: 13px; line-height: 2; color: #A9BEB7; }

/* ---------- تعرفه ---------- */
.price { padding-block: clamp(52px, 7vw, 88px); }
.price__in {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(24px, 4vw, 48px); align-items: center;
}
.price__copy h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; }
.price__copy > p { margin-block-start: 14px; font-size: 15px; line-height: 2.05; color: var(--ink-muted); }
.price__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.price__list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 500;
}
.price__list .ic { inline-size: 17px; block-size: 17px; stroke-width: 2.4; color: var(--brand-600); }
.price__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: 26px; }

.notice {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-5); border-radius: var(--r-modal);
    background: var(--warning-bg); border: 1px solid rgb(181 71 8 / .22);
    font-size: 13.5px; line-height: 2; color: var(--ink);
}
.notice .ic { margin-block-start: 5px; color: var(--warning); }

/* ---------- پرسش‌ها ---------- */
.faq { display: grid; gap: 10px; max-inline-size: 860px; }
.faq__item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 2px 18px;
}
.faq__item[open] { border-color: var(--brand-300); }
.faq__item summary {
    display: flex; align-items: center; gap: var(--sp-4);
    padding-block: 15px; cursor: pointer; list-style: none;
    font-size: 14.5px; font-weight: 700;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary span { flex: 1; }
.faq__item summary .ic {
    color: var(--brand-600);
    transition: transform var(--t-base) var(--ease);
}
.faq__item[open] summary .ic { transform: rotate(45deg); }
.faq__item p {
    padding-block: 0 17px; margin-inline-end: 34px;
    font-size: 13.5px; line-height: 2.1; color: var(--ink-muted);
}

/* ---------- فراخوان پایانی ---------- */
.end { padding-block: clamp(20px, 3vw, 34px) clamp(52px, 7vw, 88px); }
.end__in {
    text-align: center; padding: clamp(36px, 5vw, 60px) var(--sp-5);
    border-radius: var(--r-modal);
    background:
        radial-gradient(600px 300px at 50% 0%, rgb(87 211 98 / .16), transparent 64%),
        var(--brand-50);
    border: 1px solid var(--brand-100);
}
.end__in h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; }
.end__in > p {
    margin: 14px auto 0; max-inline-size: 54ch;
    font-size: 15px; line-height: 2.05; color: var(--ink-muted);
}
.end__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-block-start: 26px; }
.end__note { margin-block-start: 14px; font-size: 12.5px; color: var(--ink-faint); }

/* ---------- پانوشت ---------- */
.foot { background: var(--surface); border-block-start: 1px solid var(--border); }
.foot__in {
    display: grid; gap: var(--sp-8);
    grid-template-columns: minmax(230px, 1.4fr) repeat(2, minmax(130px, .8fr)) minmax(210px, 1.2fr) auto;
    padding-block: clamp(36px, 5vw, 56px);
}
.foot__brand p {
    margin-block-start: 14px; max-inline-size: 34ch;
    font-size: 13px; line-height: 1.95; color: var(--ink-muted);
}
.foot__lang {
    display: inline-flex; gap: 2px; padding: 3px; margin-block-start: 18px;
    border: 1px solid var(--border); border-radius: var(--r-pill);
}
.foot__lang a {
    padding: 4px 14px; border-radius: var(--r-pill); text-decoration: none;
    font-size: 12px; font-weight: 600; color: var(--ink-muted);
}
.foot__lang a:hover { color: var(--ink); }
.foot__lang a.is-on { background: var(--brand-50); color: var(--brand-700); }

.foot__col { display: flex; flex-direction: column; gap: 9px; }
.foot__col h2 {
    font-size: 12px; font-weight: 700; color: var(--ink-faint);
    letter-spacing: .03em; margin-block-end: 3px;
}
.foot__col a { font-size: 13px; text-decoration: none; color: var(--ink-muted); width: fit-content; }
.foot__col a:hover { color: var(--brand-700); }
.foot__plain { font-size: 13px; line-height: 1.95; color: var(--ink-muted); }
.foot__plain a { display: inline; }
.foot__address { max-inline-size: 30ch; }

.foot__seal img { block-size: 94px; inline-size: auto; }

.foot__bar {
    border-block-start: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: var(--sp-4);
    align-items: center; justify-content: space-between;
    inline-size: min(1180px, 100% - 40px); margin-inline: auto;
    padding-block: 18px; font-size: 12px; color: var(--ink-faint);
}
.foot__bar a { text-decoration: none; }
.foot__bar a:hover { color: var(--brand-700); }

/* ---------- حرکت: فقط ورود نرم، و فقط وقتی جاوااسکریپت هست ----------
   کلاس `js-reveal` را همان اسکریپت در <head> می‌گذارد. اگر اسکریپت
   نیامد یا مسدود شد، هیچ‌چیز پنهان نمی‌ماند — متن صفحه اصلی نباید
   گروگان یک فایل جاوااسکریپت باشد. */
html.js-reveal .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
html.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* پلکانی شدن هم‌گروه‌ها — بدون هیچ تأخیری در جاوااسکریپت */
html.js-reveal .bento__card:nth-child(3n+2),
html.js-reveal .secure__card:nth-child(3n+2),
html.js-reveal .perf__grid li:nth-child(2),
html.js-reveal .next__list li:nth-child(2n) { transition-delay: 70ms; }
html.js-reveal .bento__card:nth-child(3n),
html.js-reveal .secure__card:nth-child(3n),
html.js-reveal .perf__grid li:nth-child(3) { transition-delay: 140ms; }
html.js-reveal .perf__grid li:nth-child(4) { transition-delay: 210ms; }

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

html { scroll-behavior: smooth; }
/* لنگرها زیر نوار چسبان پنهان نشوند */
.lp [id] { scroll-margin-block-start: 88px; }

/* ---------- واکنش‌گرایی ---------- */
@media (max-width: 1080px) {
    .hero__in { grid-template-columns: 1fr; }
    .ledger { max-inline-size: 560px; margin-inline: auto; }
    .doors__in, .next__in, .price__in { grid-template-columns: 1fr; }
    .foot__in {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-6) var(--sp-8);
    }
    .foot__brand { grid-column: 1 / -1; }
    .foot__seal { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    /* ناوبری لنگری روی گوشی برداشته می‌شود: بخش‌ها با اسکرول در
       دسترس‌اند و دو دکمه واقعی (ورود و شروع) جا می‌مانند — بهتر از
       منوی همبرگری که برای پنج لنگر یک فایل جاوااسکریپت می‌خواهد. */
    .lp-nav { display: none; }
    .lp-head__in { block-size: 62px; gap: var(--sp-3); }
    .lp-head__cta { margin-inline-start: auto; }
}

@media (max-width: 560px) {
    .wrap, .lp-head__in, .hero__in, .foot__bar { inline-size: calc(100% - 32px); }
    /* نشان روی گوشی یک پله کوچک‌تر تا کنار دو دکمه جا باز کند */
    .lp-head .lp-mark { inline-size: 116px; }
    .btn--lg { padding: 14px 20px; font-size: 14px; }
    .hero__cta .btn, .end__cta .btn, .price__cta .btn { flex: 1 1 220px; }
    .doors__pair { grid-template-columns: 1fr; }
    .ledger__cols i { inline-size: 62px; }
    .ledger__entry td { inline-size: 70px; }
    .foot__in { grid-template-columns: 1fr; }
}

/* ---------- سبزاستور ---------- */

/*
 * 🔴 هیچ کد رنگ تازه‌ای. همان توکن‌هایی که بقیه این فایل دارد، پس
 * حالت تاریک خودش درست می‌ماند.
 */
.os__stats {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-block-end: var(--sp-5);
}
.os__stat {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    background: rgb(3 115 71 / .06);
    border: 1px solid var(--border);
    border-radius: var(--r-modal);
}
.os__stat b {
    font-size: clamp(26px, 3.4vw, 34px); font-weight: 900; line-height: 1;
    color: var(--brand-600);
}
/* آیکون به‌جای عدد — هم‌اندازه با رقم‌ها می‌ماند */
.os__stat b svg { width: 30px; height: 30px; display: block; }
.os__stat span { font-size: 13px; line-height: 1.75; color: var(--ink-muted); }

.os__note {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    margin-block-start: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-modal);
    font-size: 13px; line-height: 2; color: var(--ink-muted);
}
.os__note svg { flex: none; width: 17px; height: 17px; margin-block-start: 5px; }