/* assets/css/landing.css — فقط صفحه‌ی اصلی (index.php). رنگ‌ها از توکن‌های custom.css؛ حالت تاریک پایین فایل. */
.zs-landing { max-width: 1080px; }
.ld-hero { padding: .5rem 0 2rem; }
.ld-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: var(--zs-terracotta, #C0633F); }
.ld-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ld-h1 { text-wrap: balance; font-weight: 800; line-height: 1.4; font-size: clamp(1.6rem, 6vw, 2.7rem); margin: .55rem 0 .8rem; color: var(--zs-text); }
.ld-h1 em { font-style: normal; color: var(--zs-blue); }
.ld-h1 span { display: block; font-size: .62em; font-weight: 700; color: var(--zs-blue); margin-top: .35rem; }
.ld-lead { color: var(--zs-text-2); line-height: 2; font-size: 1rem; margin: 0; max-width: 560px; }
.ld-micro { font-size: .82rem; color: var(--zs-text-2); margin: .7rem 0 0; }
.ld-micro i { color: var(--zs-terracotta, #C0633F); margin-inline-end: .3rem; }

/* نمای گوشی: عکس واقعی اپ در قاب، با دو برچسب شناور (طرح پیش‌نمایش «الف») */
.ld-visual { position: relative; padding: .8rem 0 1.4rem; }
/* قاب گوشی با تناسب iPhone 18 Pro Max (بدنه ۷۸×۱۶۳٫۴ میلی‌متر، صفحه ۱۳۲۰×۲۸۶۸)؛ همه‌ی اندازه‌ها درصدی‌اند تا با عرض قاب مقیاس بگیرند */
.ld-phone { position: relative; width: 290px; max-width: 74vw; margin: auto; padding: 3.1%; border-radius: 16.2% / 7.7%;
    background: linear-gradient(150deg, #4a5160 0%, #1b2029 38%, #12161d 62%, #3a404c 100%);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), 0 0 0 1px #0b0e13, 0 28px 60px rgba(21,41,67,.24); }
.ld-phone img { width: 100%; height: auto; display: block; border-radius: 14% / 6.45%; background: #F8F5F0; }
/* Dynamic Island */
.ld-phone::after { content: ""; position: absolute; top: 2.6%; left: 50%; transform: translateX(-50%); width: 26.6%; height: 3.8%;
    background: #05070a; border-radius: 999px; }
/* دکمه‌ی کناری راست و دکمه‌های صدا و اکشن چپ */
.ld-phone::before { content: ""; position: absolute; right: -2px; top: 26%; width: 3px; height: 10.5%; border-radius: 0 3px 3px 0;
    background: #2b313b; box-shadow: -293px -38px 0 0 #2b313b, -293px 22px 0 0 #2b313b, -293px 84px 0 0 #2b313b; }
@media (max-width: 400px) { .ld-phone::before { display: none; } }
/* زیامو کنار قاب گوشی؛ نمای اپ دست نمی‌خورد */
.ld-ziamo { position: absolute; z-index: 2; bottom: 4%; right: -2%; width: auto; height: clamp(120px, 34vw, 170px); }
@media (min-width: 992px) { .ld-ziamo { right: max(0px, calc(50% - 310px)); bottom: 8%; height: 180px; } }
.ld-float { position: absolute; background: var(--zs-surface, #fff); color: var(--zs-text); border-radius: 16px; padding: .55rem .8rem;
    font-size: .8rem; font-weight: 700; box-shadow: 0 10px 26px rgba(21,41,67,.14); display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.ld-float--top { top: 33%; right: 2%; }
.ld-float--bottom { bottom: 14%; left: 2%; }
.ld-ok { color: #4f8a6d; } .ld-wait { color: #C0633F; }
@media (min-width: 992px) { .ld-float--top { right: 6%; } .ld-float--bottom { left: 6%; } }

.t-blue { background: #DCE9F8; color: #2A6FC0; } .t-terra { background: #F7E1D6; color: #B4572F; } .t-sand { background: #F8EAD3; color: #93651D; }
.t-sage { background: #E3F0E8; color: #3f7a5c; } .t-navy { background: #E4E8EE; color: #152943; } .t-rose { background: #F9E3E8; color: #A54762; }

.ld-sec { padding: 2.4rem 0; }
.ld-band { background: var(--zs-surface-2, #F2E9DE); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; border-radius: 28px; }
@media (min-width: 768px) { .ld-band { margin: 0; padding: 2.4rem 2rem; } }
.ld-h2 { font-weight: 800; font-size: clamp(1.25rem, 4.2vw, 1.7rem); line-height: 1.55; margin: .4rem 0 .5rem; color: var(--zs-text); }
.ld-sub { color: var(--zs-text-2); line-height: 1.95; max-width: 640px; }

.ld-pain { background: var(--zs-surface, #fff); border: 1px solid var(--zs-border); border-radius: 22px; overflow: hidden; height: 100%; }
.ld-pain__q { background: #F7E1D6; color: #8a3f22; font-weight: 800; padding: .8rem 1rem; font-size: .95rem; }
.ld-pain__a { padding: .85rem 1rem; font-size: .9rem; line-height: 1.95; color: var(--zs-text-2); }
.ld-pain__a b { color: var(--zs-blue); }

.ld-weeks { display: flex; gap: .4rem; overflow-x: auto; padding: .3rem 0 .6rem; scrollbar-width: none; }
.ld-weeks::-webkit-scrollbar { display: none; }
.ld-week { flex-shrink: 0; border: 1px solid var(--zs-border); background: var(--zs-surface, #fff); border-radius: 14px; padding: .4rem .8rem; font-size: .85rem; font-weight: 700; color: var(--zs-text-2); }
.ld-week.is-on { background: var(--zs-blue); border-color: var(--zs-blue); color: #fff; }
.ld-weekcard { background: var(--zs-surface, #fff); border-radius: 24px; padding: .8rem; box-shadow: 0 14px 36px rgba(21,41,67,.08); }
.ld-weekcard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; display: block; background: var(--zs-surface-2); }
.ld-weekcard__bar { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; margin: .7rem .2rem .2rem; font-size: .9rem; color: var(--zs-text-2); }
.ld-weekcard__bar b { color: var(--zs-blue); }
.ld-weekcard__point { margin: .35rem .2rem .6rem; font-size: .9rem; line-height: 1.9; color: var(--zs-text); }

.ld-card { background: var(--zs-surface, #fff); border: 1px solid var(--zs-border); border-radius: 22px; padding: 1.1rem 1.15rem; height: 100%; }
.ld-ico { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .7rem; }
.ld-card h3 { font-size: 1.02rem; font-weight: 800; margin: 0 0 .35rem; color: var(--zs-text); }
.ld-card p { font-size: .88rem; color: var(--zs-text-2); line-height: 1.9; margin: 0; }

.ld-price { background: var(--zs-surface, #fff); border: 2px dashed #DCE9F8; border-radius: 22px; padding: 1.2rem 1.3rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.ld-price__t { font-weight: 800; font-size: 1.12rem; color: var(--zs-text); }
.ld-price__s { font-size: .88rem; color: var(--zs-text-2); margin-top: .2rem; }

.ld-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
@media (min-width: 768px) { .ld-months { grid-template-columns: repeat(9, 1fr); } }
.ld-month { background: var(--zs-surface, #fff); border: 1px solid var(--zs-border); border-radius: 16px; text-align: center; padding: .65rem .3rem; font-size: .8rem; color: var(--zs-text-2); text-decoration: none; }
.ld-month b { display: block; font-size: 1.25rem; color: var(--zs-blue); font-weight: 800; }
.ld-month:hover { border-color: var(--zs-blue); }

.ld-post { display: block; background: var(--zs-surface, #fff); border: 1px solid var(--zs-border); border-radius: 20px; overflow: hidden; height: 100%; color: var(--zs-text); text-decoration: none; }
.ld-post img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.ld-post span { display: block; padding: .75rem .9rem; font-weight: 800; font-size: .92rem; line-height: 1.7; }

.ld-faq { max-width: 820px; margin: auto; }
.ld-faq details { background: var(--zs-surface, #fff); border: 1px solid var(--zs-border); border-radius: 16px; padding: .85rem 1rem; margin-bottom: .55rem; }
.ld-faq summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: var(--zs-text); }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after { content: "+"; color: var(--zs-blue); font-size: 1.2rem; line-height: 1; }
.ld-faq details[open] summary::after { content: "−"; }
.ld-faq p { margin: .6rem 0 0; color: var(--zs-text-2); line-height: 1.95; font-size: .92rem; }

.zs-final { background: var(--zs-ink, #152943); border-radius: var(--zs-radius-xl, 28px); color: #E9EFF5; }
.zs-final h2 { color: #fff; }

/* حالت تاریک: رنگ‌های روشنِ ثابت این صفحه */
[data-bs-theme="dark"] .ld-float { box-shadow: 0 10px 26px rgba(0,0,0,.45); }
[data-bs-theme="dark"] .t-blue { background: rgba(42,111,192,.22); color: #8db8ea; }
[data-bs-theme="dark"] .t-terra, [data-bs-theme="dark"] .ld-pain__q { background: rgba(192,99,63,.22); color: #f0b59b; }
[data-bs-theme="dark"] .t-sand { background: rgba(232,196,143,.18); color: #e8c48f; }
[data-bs-theme="dark"] .t-sage { background: rgba(127,174,150,.2); color: #a9d3bd; }
[data-bs-theme="dark"] .t-navy { background: rgba(255,255,255,.08); color: #d6dde7; }
[data-bs-theme="dark"] .t-rose { background: rgba(181,86,110,.22); color: #eba7b9; }
[data-bs-theme="dark"] .ld-price { border-color: rgba(42,111,192,.35); }