/* SAKHTEH SHODE — dasti virayesh nakonid.
   Montaj az: .design-sync/landing-v3-src/base.css + parts/*.css
   Manba-e tarrahi: Claude Design → «Seller360 Landing.dc.html» */

/*
 * Paye-ye style baraye landing v3.
 *
 * Safhe hich class-i nadarad — hame chiz inline neveshte shode. Pas injaa
 * faqat chiz-haee hast ke inline nemishavad: keyframes, media query-ha, va
 * reset-e koochak. Har bakhsh hover-haye khodesh ra dar file-e khodesh darad.
 *
 * Har khat-e in file ozve hamun <style> dar helmet-e dc.html ast; ja-be-ja
 * nashode-and ta raftar-e responsive daqiqan hamun bemanad.
 */

html { direction: rtl; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: IRANYekan, Vazirmatn, ui-sans-serif, system-ui, sans-serif;
  background: #fff;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: #0168FC; }
a:hover { color: #0157d6; }

@keyframes s360-word  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes s360-dot   { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes s360-slide-a { from { transform: translateY(calc(-1 * var(--step, 230px))); } to { transform: none; } }
@keyframes s360-slide-b { from { transform: translateY(calc(-1 * var(--step, 230px))); } to { transform: none; } }
@keyframes s360-feed  { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes s360-pop   { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes s360-cta   {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 0 0 1px rgba(255,255,255,.45), 0 10px 22px -10px rgba(5,150,105,.9); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 0 0 4px rgba(52,211,153,.32), 0 10px 22px -10px rgba(5,150,105,.9); }
}

@media (max-width: 767px)  { [data-desk] { display: none !important; } }
@media (min-width: 768px)  { [data-mob]  { display: none !important; } }
@media (max-width: 899px)  { [data-navlinks] { display: none !important; } }

@media (max-width: 1099px) {
  [data-features] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  [data-span]     { grid-column: span 2 !important; }
  [data-t="4"]    { grid-column: span 4 !important; }
}
@media (max-width: 767px) {
  [data-features] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-span], [data-t="4"] { grid-column: span 2 !important; }
}
@media (max-width: 559px) {
  [data-features] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-span], [data-t="4"] { grid-column: span 1 !important; }
}

@media (max-width: 640px)  { [data-bnr]  { display: none !important; } }
@media (max-width: 620px)  { [data-pcol] { display: none !important; } }
@media (max-width: 1000px) { [data-bcol] { display: none !important; } }

@media (min-width: 760px) { [data-wh] { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; } }
@media (min-width: 900px) { [data-soon] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) !important; } }
@media (max-width: 1099px) { [data-soon-items] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { [data-soon-items] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

@media (max-width: 899px) { [data-contact] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 559px) { [data-contact] { grid-template-columns: minmax(0, 1fr) !important; } }

@media (min-width: 860px) { [data-pricing] { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Scroll reveal — faqat vaqti JS class-e .s360-js ra gozashte bashad.
   bedoon-e JS hich opacity:0 ee e'mal nemishavad va safhe kamel didani ast. */
.s360-js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
.s360-js [data-reveal].s360-in { opacity: 1; transform: none; }


/* Navbar chasban: banner + header dar yek [data-topbar]-e sticky hastand.
   Pas har anchor bayad be andaze-ye ertefa-e an (60 + 62) faseleh begirad,
   vagarna onvan-e bakhsh zir-e navbar mikhabad. */
#home, #mission, #features, #free, #faq, #contact { scroll-margin-top: 130px; }


/* ===== static.css ===== */
/* landing_v3 — static sections (nav, mission, pricing, final-cta, contact, footer)
   Hover classes reserved by this part: s360-h60 .. s360-h68
   `!important` is required: the elements keep their authored inline style="...",
   and an inline declaration beats a class rule without it. */

/* nav — banner CTA «شروع کنید» (sabz-e zomorrodi, tu-cheshm) */
.s360-h60:hover{background-image:linear-gradient(180deg,#10b981,#047857)!important;background-color:#047857!important;color:#fff!important;transform:translateY(-1px)!important;animation:none!important;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 3px rgba(16,185,129,.35),0 14px 28px -10px rgba(4,120,87,.95)!important}
.s360-h60:active{transform:translateY(0)!important}

/* shared link hover: nav menu links, contact card values, footer links */
.s360-h61:hover{color:#0168FC!important}

/* nav — login */
.s360-h62:hover{background:rgba(255,255,255,.9)!important;color:#1e293b!important}

/* nav — "۱۴ روز رایگان" and pricing primary CTA (same declaration) */
.s360-h63:hover{background:#0157d6!important;color:#fff!important}

/* pricing — secondary CTA */
.s360-h64:hover{background:rgba(255,255,255,.9)!important}

/* final-cta — primary CTA */
.s360-h65:hover{background:#2b7fff!important;color:#fff!important}

/* final-cta — telegram button */
.s360-h66:hover{background:rgba(255,255,255,.22)!important;color:#fff!important}

/* nav — «دمو» (kenar-e vorud va 14-ruz-e rayegan) */
.s360-h68:hover{background:#eaf2ff!important;border-color:#0168FC!important;color:#0168FC!important}

/* contact — card lift */
.s360-h67:hover{transform:translateY(-3px)!important;background:rgba(255,255,255,.75)!important;box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 22px 40px -18px rgba(2,27,77,.28),0 0 0 1px rgba(2,27,77,.06)!important}

/* responsive rules these sections depend on — copied verbatim from the dc.html
   <helmet> style block. Drop them here if the host head already carries them. */


/* ===== hero.css ===== */
/* hero — hover rules (dar dc.html style-hover boodand).
   !important lazem ast: style-e inline bar class-e sade barande mishavad. */
.s360-h101:hover { background: #0157d6 !important; color: #fff !important; }
.s360-h102:hover { background: rgba(255, 255, 255, .9) !important; }


/* ===== features.css ===== */
/* landing_v3 — بخش «امکانات» + بلوک «در راه است»
   این فایل فقط قاعده‌هایی دارد که در dc.html نمی‌شد اینلاین نوشت. */

/* ---- معادل style-hover های بخش امکانات ----------------------------------
   s360-h40 = کارت‌های امکانات (۱۰ کارت)
   s360-h41 = آیتم‌های «در راه است» (۵ آیتم)
   اگر بخش دیگری هم همین شماره‌ها را گرفته بود، شماره‌ها را عوض کنید. */
.s360-h40:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 22px 40px -18px rgba(2,27,77,.28),0 0 0 1px rgba(2,27,77,.06)}
.s360-h41:hover{background:rgba(255,255,255,.12)}

/* ---- چیدمان واکنش‌گرا ----------------------------------------------------
   عینا از بلوک <style> داخل head فایل مبدا؛ فقط قاعده‌هایی که به این بخش
   مربوط است. اگر بخش head هم همین‌ها را داشت، تکرارشان بی‌ضرر است. */
@media (max-width:1099px){[data-features]{grid-template-columns:repeat(4,minmax(0,1fr))!important}[data-span]{grid-column:span 2!important}[data-t="4"]{grid-column:span 4!important}}
@media (max-width:767px){[data-features]{grid-template-columns:repeat(2,minmax(0,1fr))!important}[data-span],[data-t="4"]{grid-column:span 2!important}}
@media (max-width:620px){[data-pcol]{display:none!important}}
@media (max-width:1000px){[data-bcol]{display:none!important}}
@media (max-width:559px){[data-features]{grid-template-columns:minmax(0,1fr)!important}[data-span],[data-t="4"]{grid-column:span 1!important}}
@media (min-width:760px){[data-wh]{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important}}
@media (min-width:900px){[data-soon]{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)!important}}
@media (max-width:1099px){[data-soon-items]{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:640px){[data-soon-items]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ---- سه نقطه‌ی «در حال نوشتن…» در دو چت این بخش ----
   همان کی‌فریم head فایل مبدا؛ تعریف دوباره‌اش بی‌ضرر است. */
@keyframes s360-dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-3px);opacity:1}}


/* ===== faq.css ===== */
/* SECTION: faq */

/* dc.html style="all:unset" روی دکمه، حلقه‌ی فوکوس مرورگر را هم پاک می‌کند.
   این تنها چیزی است که به طرح اضافه شده و فقط هنگام فوکوس با کیبورد دیده می‌شود. */
#faq [data-faq-btn]:focus-visible{outline:2px solid #0168FC;outline-offset:-3px;border-radius:18px}

/* همان کی‌فریم سراسری dc.html (خط ۲۵) — عینا تکرار شده تا این بخش مستقل کار کند.
   اگر اسمبلر استایل‌های پایه را هم بیاورد، تعریف تکراری و یکسان است و مشکلی ندارد. */
@keyframes s360-pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* احترام به کاربری که حرکت کمتر می‌خواهد: نه چرخش انیمیت‌شده‌ی فلش، نه ظاهرشدن متحرک پاسخ.
   وضعیت باز/بسته بدون حرکت و آنی عوض می‌شود. */
@media (prefers-reduced-motion:reduce){
  #faq [data-faq-chip]{transition:none!important}
  #faq [data-faq-panel]{animation:none!important}
}

/* ===== panel footer ===== */
/*
 * _site_footer.html ba Tailwind neveshte shode; in safhe Tailwind nadarad.
 * Pas faqat hamun class-haee ke an partial estefade mikonad inja dasti
 * neveshte shode-and. Hame zir-e .s360-panel-footer scope shode-and ta esm-haye
 * omoomi (.flex, .group, …) be baqiye-ye safhe nasht nakonand.
 *
 * Agar footer-e panel avaz shod va class-e taze-ee gereft, inja ham ezafe konid
 * — vagarna an tekke bedoon-e style mi-ayad.
 */
.s360-panel-footer { font-family: inherit; }
.s360-panel-footer .border-t      { border-top: 1px solid #f1f5f9; }
.s360-panel-footer .border-slate-100 { border-color: #f1f5f9; }
.s360-panel-footer .mx-auto       { margin-left: auto; margin-right: auto; }
.s360-panel-footer .max-w-6xl     { max-width: 72rem; }
.s360-panel-footer .px-5          { padding-left: 1.25rem; padding-right: 1.25rem; }
.s360-panel-footer .py-5          { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.s360-panel-footer .text-center   { text-align: center; }

.s360-panel-footer .flex          { display: flex; }
.s360-panel-footer .inline-flex   { display: inline-flex; }
.s360-panel-footer .flex-wrap     { flex-wrap: wrap; }
.s360-panel-footer .items-center  { align-items: center; }
.s360-panel-footer .justify-center{ justify-content: center; }
.s360-panel-footer .shrink-0      { flex-shrink: 0; }

.s360-panel-footer .gap-x-0\.5    { column-gap: .125rem; }
.s360-panel-footer .gap-y-1       { row-gap: .25rem; }
.s360-panel-footer .gap-1\.5      { gap: .375rem; }
.s360-panel-footer .gap-2         { gap: .5rem; }

.s360-panel-footer .mt-1\.5       { margin-top: .375rem; }
.s360-panel-footer .mt-2          { margin-top: .5rem; }
.s360-panel-footer .px-2\.5       { padding-left: .625rem; padding-right: .625rem; }
.s360-panel-footer .rounded-lg    { border-radius: .5rem; }
.s360-panel-footer .min-h-\[36px\]{ min-height: 36px; }

.s360-panel-footer .h-3\.5        { height: .875rem; }
.s360-panel-footer .w-3\.5        { width: .875rem; }
.s360-panel-footer .h-4           { height: 1rem; }
.s360-panel-footer .w-4           { width: 1rem; }

.s360-panel-footer .text-\[12px\] { font-size: 12px; }
.s360-panel-footer .text-\[13px\] { font-size: 13px; }
.s360-panel-footer .font-semibold { font-weight: 600; }
.s360-panel-footer .text-slate-200{ color: #e2e8f0; }
.s360-panel-footer .text-slate-400{ color: #94a3b8; }
.s360-panel-footer .text-slate-500{ color: #64748b; }
.s360-panel-footer .opacity-35    { opacity: .35; }

.s360-panel-footer .transition-colors  { transition: color .15s, background-color .15s, border-color .15s; }
.s360-panel-footer .transition-opacity { transition: opacity .15s; }

.s360-panel-footer a { text-decoration: none; }
.s360-panel-footer .hover\:bg-slate-50:hover     { background-color: #f8fafc; }
.s360-panel-footer .hover\:text-slate-700:hover  { color: #334155; }
.s360-panel-footer .group:hover .group-hover\:opacity-100    { opacity: 1; }
.s360-panel-footer .group:hover .group-hover\:text-slate-700 { color: #334155; }

.s360-panel-footer .tnum { font-variant-numeric: tabular-nums; }

@media print { .s360-panel-footer .print\:hidden { display: none; } }


/* ===== mobile.css ===== */
/* landing_v3 — eslah-e chidman rooye goushi (۱۴۰۵/۶/۲۷).
   Hame-ye qa'ede-ha !important darand chon element-ha style-e inline-e khodeshan
   ra negah midarand va yek e'lan-e inline bar class/attribute-e sade barande ast. */

/* --- navbar: zir-e 900px se dokme jaa nemishavad (logo 120 + ~۲۶۷ = ~۴۰۰px
       dar arz-e mojood-e ~۳۲۷px). Pas anha be menu-ye <details> mirand. --- */
@media (max-width: 899px) {
  [data-navbtns] { display: none !important; }
  [data-navmenu] { display: block !important; }
}
[data-navmenu] summary { list-style: none; }
[data-navmenu] summary::-webkit-details-marker { display: none; }
[data-navmenu] summary::marker { content: ""; }
[data-navmenu] summary:focus-visible { outline: 2px solid #0168FC; outline-offset: 2px; }

/* --- qab-e morurgar: hasht icon-e sabet + se cheragh ~۳۱۵px arz migirand va
       baraye navar-e address ~۲۸px baqi mimanad → matn-e URL dar hobab-e
       ۳۰px-e sabet mipichad va mirizad birun. Marz-e ۷۶۷px ba marz-e [data-desk]/[data-mob] yeki ast, pas
       qab-e desktop hich-vaqt rooye screenshot-e mobile nemi-oftad. Faqat navar-e
       address mimanad, ke hamun chizi ast ke dar morurgar-e mobile mibinand. --- */
@media (max-width: 767px) {
  [data-bchrome] { display: none !important; }
}

/* --- jadval-e demo-ye «ربات قیمت‌گذاری»: template haft track darad. Vaqti
       [data-bcol] panhan mishavad, se track-e khali hamchenan ۲.۶fr jaa
       migirand va sotun-e naam be ~۴۶px mirasad. Pas khod-e template avaz
       mishavad, na faqat sotun-ha. --- */
@media (max-width: 1000px) {
  [data-prow] { grid-template-columns: minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,1.15fr) minmax(0,.62fr) !important; }
}
@media (max-width: 560px) {
  [data-prow] { grid-template-columns: minmax(0,1.5fr) minmax(0,1.25fr) minmax(0,.7fr) !important; }
  [data-scol] { display: none !important; }
}

/* --- titr-e hero: kalame-ye charkhan nowrap ast; «قیمت‌گذاری هوشمند» dar ۳۰px
       hodud ۲۵۰px ast va ba «برای » rooye goushi-haye ۳۶۰px sarriz mikonad. --- */
@media (max-width: 430px) {
  [data-hero-word] { white-space: normal !important; }
}