/* Shooco Chatbot — صفحه اصلی معرفی سرویس
   همه کلاس‌ها با پیشوند scb-lp هستند تا با قالب، المنتور و WP Bottom Menu تداخل نداشته باشند. */

.scb-lp{
  --b: var(--scb-lp-brand, #6C5CE7);
  --b2: color-mix(in srgb, var(--b) 72%, #0b0820);
  --soft: color-mix(in srgb, var(--b) 9%, #fff);
  --ink: #16132e;
  --mut: #66637d;
  --line: #e9e7f3;
  --bg: #fbfaff;
  --r: 22px;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  direction: rtl;
  text-align: right;
  font-family: Vazirmatn, Tahoma, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.9;
  font-size: 16px;
  box-sizing: border-box;
  overflow: hidden;
}
.scb-lp *, .scb-lp *::before, .scb-lp *::after{ box-sizing: border-box; }
.scb-lp h1, .scb-lp h2, .scb-lp h3, .scb-lp p, .scb-lp ul, .scb-lp ol{ margin: 0; padding: 0; font-family: inherit; letter-spacing: 0; text-transform: none; }
.scb-lp h1, .scb-lp h2, .scb-lp h3{ color: inherit; font-weight: 800; line-height: 1.45; }
.scb-lp mark{ background: none; color: inherit; position: relative; white-space: nowrap; }
.scb-lp a{ text-decoration: none; }
.scb-lp-in{ max-width: 1180px; margin: 0 auto; padding: 96px 24px; position: relative; }
body.scb-landing-page{ overflow-x: clip; }
.elementor-widget-container > .scb-lp, .elementor-widget[class*="shooco_lp"] .scb-lp{ margin-inline: 0; width: 100%; max-width: none; }
.elementor-section-full_width .scb-lp{ width: 100%; }

/* دکمه‌ها */
.scb-lp-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 14px; font-weight: 800; font-size: 15.5px; transition: transform .2s, box-shadow .2s, background .2s; cursor: pointer; line-height: 1.4; }
.scb-lp-btn:hover{ transform: translateY(-2px); }
.scb-lp-btn.is-primary{ background: var(--b); color: #fff !important; box-shadow: 0 14px 30px -12px var(--b); }
.scb-lp-btn.is-primary:hover{ box-shadow: 0 18px 34px -10px var(--b); }
.scb-lp-btn.is-ghost{ color: #fff !important; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.scb-lp-btn.is-soft{ background: var(--soft); color: var(--b) !important; }
.scb-lp-btn.is-white{ background: #fff; color: var(--b2) !important; box-shadow: 0 14px 30px -14px rgba(0,0,0,.4); }

/* سرتیتر بخش‌ها */
.scb-lp-head{ max-width: 660px; margin-bottom: 48px; }
.scb-lp-head.is-center{ margin-inline: auto; text-align: center; }
.scb-lp-kicker{ display: inline-block; font-size: 13px; font-weight: 800; color: var(--b); background: var(--soft); padding: 4px 14px; border-radius: 30px; margin-bottom: 14px; }
.scb-lp-head h2{ font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; }
.scb-lp-head h2 mark{ color: var(--b); }
.scb-lp-head p{ color: var(--mut); font-size: 17px; }

/* ---------- Hero ---------- */
.scb-lp--hero{ background: #0f0c26; color: #fff; }
.scb-lp--hero::before{ content: ""; position: absolute; inset: 0; background:
  radial-gradient(700px 420px at 12% 18%, color-mix(in srgb, var(--b) 55%, transparent), transparent 70%),
  radial-gradient(520px 380px at 92% 90%, color-mix(in srgb, var(--b) 35%, #00d4ff 0%), transparent 70%); opacity: .9; }
.scb-lp--hero::after{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }
.scb-lp--hero .scb-lp-in{ display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; padding-top: 110px; padding-bottom: 120px; z-index: 1; }
.scb-lp-badge{ display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; padding: 6px 16px; border-radius: 30px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); margin-bottom: 22px; }
.scb-lp--hero h1{ font-size: clamp(34px, 5vw, 58px); line-height: 1.32; margin-bottom: 22px; color: #fff; }
.scb-lp--hero h1 mark{ color: #fff; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--b) 85%, #fff 0%) 62%, color-mix(in srgb, var(--b) 85%, #fff 0%) 92%, transparent 92%); padding: 0 4px; }
.scb-lp--hero .lead{ font-size: 18px; color: rgba(255,255,255,.76); max-width: 540px; margin-bottom: 32px; }
.scb-lp-btns{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.scb-lp-points{ list-style: none; display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.7); }
.scb-lp-points li::before{ content: "✓"; color: #5ef0b0; font-weight: 900; margin-left: 6px; }
.scb-lp-hero-vis{ position: relative; }

/* پنجره چت نمایشی */
.scb-lp-chat{ background: #fff; color: var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); max-width: 400px; margin-inline: auto; position: relative; z-index: 1; }
.scb-lp--hero .scb-lp-chat{ transform: rotate(-2deg); }
.scb-lp-chat-h{ display: flex; gap: 12px; align-items: center; padding: 16px 18px 26px; color: #fff; background: linear-gradient(135deg, var(--b), var(--b2)); }
.scb-lp-chat-h .av{ width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.scb-lp-chat-h b{ display: block; font-size: 15px; }
.scb-lp-chat-h small{ font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 6px; }
.scb-lp-chat-h small i{ width: 8px; height: 8px; border-radius: 50%; background: #3ee08f; display: inline-block; }
.scb-lp-chat-b{ padding: 16px; margin-top: -14px; background: #fff; border-radius: 18px 18px 0 0; position: relative; min-height: 300px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.8; }
.scb-lp-chat-b .m{ max-width: 84%; padding: 9px 13px; border-radius: 16px; }
.scb-lp-chat-b .m.bot, .scb-lp-chat-b .m.agent{ background: var(--soft); align-self: flex-start; border-top-right-radius: 5px; }
.scb-lp-chat-b .m.agent em{ display: block; font-style: normal; font-size: 11px; font-weight: 800; color: var(--b); }
.scb-lp-chat-b .m.user{ background: linear-gradient(135deg, var(--b), var(--b2)); color: #fff; align-self: flex-end; border-top-left-radius: 5px; }
.scb-lp-chat-b .m.typing{ display: flex; gap: 4px; padding: 13px 15px; }
.scb-lp-chat-b .m.typing span{ width: 7px; height: 7px; border-radius: 50%; background: var(--b); opacity: .35; animation: scbBlink 1.2s infinite; }
.scb-lp-chat-b .m.typing span:nth-child(2){ animation-delay: .2s; } .scb-lp-chat-b .m.typing span:nth-child(3){ animation-delay: .4s; }
.scb-lp-chat.is-live .m{ opacity: 0; transform: translateY(8px); animation: scbIn .45s ease forwards; animation-delay: var(--d); }
.scb-lp-chat-f{ display: flex; gap: 8px; align-items: center; padding: 10px 14px 14px; border-top: 1px solid #f0eef7; }
.scb-lp-chat-f span{ flex: 1; background: #f5f4fb; border-radius: 12px; padding: 9px 12px; color: #9b98b0; font-size: 13px; }
.scb-lp-chat-f i{ width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--b), var(--b2)); }
@keyframes scbIn{ to{ opacity: 1; transform: none; } }
@keyframes scbBlink{ 0%,80%,100%{ opacity: .25; } 40%{ opacity: 1; } }
.scb-lp-float{ position: absolute; z-index: 2; background: #fff; color: var(--ink); border-radius: 16px; padding: 10px 14px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.55); font-size: 13px; line-height: 1.6; animation: scbFloat 5s ease-in-out infinite; }
.scb-lp-float b{ display: block; font-size: 13px; }
.scb-lp-float small{ color: var(--mut); font-size: 12px; }
.scb-lp-float.f1{ top: 18%; left: -6%; }
.scb-lp-float.f2{ bottom: 10%; right: -4%; animation-delay: -2.5s; }
@keyframes scbFloat{ 50%{ transform: translateY(-10px); } }

/* ---------- اعداد ---------- */
.scb-lp--stats{ background: #fff; border-bottom: 1px solid var(--line); }
.scb-lp--stats .scb-lp-in{ padding-top: 0; padding-bottom: 0; }
div.scb-lp-stats{ display: grid; grid-template-columns: repeat(4, 1fr); }
div.scb-lp-stats > div{ padding: 34px 20px; text-align: center; border-left: 1px solid var(--line); }
div.scb-lp-stats > div:last-child{ border-left: 0; }
div.scb-lp-stats b{ display: block; font-size: 30px; font-weight: 900; color: var(--b); line-height: 1.4; direction: rtl; }
div.scb-lp-stats span{ color: var(--mut); font-size: 14px; }

/* ---------- کارت‌ها ---------- */
.scb-lp-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.scb-lp-card{ background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.scb-lp-card:hover{ transform: translateY(-4px); box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--b) 60%, transparent); border-color: color-mix(in srgb, var(--b) 30%, var(--line)); }
.scb-lp-card .ic{ width: 54px; height: 54px; border-radius: 16px; background: var(--soft); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px; }
.scb-lp-card .ic.code{ font-family: ui-monospace, Menlo, monospace; font-size: 18px; font-weight: 800; color: var(--b); direction: ltr; }
.scb-lp-card h3{ font-size: 18.5px; margin-bottom: 8px; }
.scb-lp-card p{ color: var(--mut); font-size: 15px; }
.scb-lp-card.is-flat{ background: transparent; }

/* ---------- دو ستونه ---------- */
.scb-lp-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.scb-lp-split .scb-lp-head{ margin-bottom: 26px; }
.scb-lp--modes{ background: #fff; }
.scb-lp-check{ list-style: none; display: grid; gap: 12px; }
.scb-lp-check li{ display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.scb-lp-check li::before{ content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 9px; background: var(--soft); color: var(--b); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; margin-top: 2px; }

.scb-lp-inbox{ background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 40px 70px -40px rgba(30,20,90,.35); padding: 18px; position: relative; }
.scb-lp-inbox::before{ content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: 26px; background: var(--soft); z-index: -1; }
.scb-lp-inbox .ib-top{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.scb-lp-inbox .chips{ display: flex; gap: 6px; }
.scb-lp-inbox .chips i{ font-style: normal; font-size: 12px; padding: 3px 11px; border-radius: 20px; background: #f4f3fa; color: var(--mut); font-weight: 700; }
.scb-lp-inbox .chips i.on{ background: var(--b); color: #fff; }
.scb-lp-inbox .ib-row{ display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 14px; }
.scb-lp-inbox .ib-row.on{ background: var(--soft); }
.scb-lp-inbox .ib-row > div{ flex: 1; min-width: 0; }
.scb-lp-inbox .ib-row b{ display: block; font-size: 14px; }
.scb-lp-inbox .ib-row small{ color: var(--mut); font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scb-lp-inbox .ava{ width: 40px; height: 40px; border-radius: 13px; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.scb-lp-inbox .tag{ font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 20px; white-space: nowrap; }
.scb-lp-inbox .tag.ai{ background: var(--soft); color: var(--b); }
.scb-lp-inbox .tag.need{ background: #fde9ee; color: #e11d48; }
.scb-lp-inbox .tag.human{ background: #fff5e5; color: #d97706; }
.scb-lp-inbox .ib-switch{ display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; background: #f7f6fc; border-radius: 14px; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.scb-lp-inbox .ib-switch .muted{ color: var(--mut); font-weight: 500; }
.scb-lp-inbox .sw{ width: 42px; height: 24px; border-radius: 20px; background: var(--b); position: relative; display: inline-block; }
.scb-lp-inbox .sw::after{ content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; }

/* ---------- مراحل ---------- */
.scb-lp-steps{ list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.scb-lp-steps li{ counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; position: relative; }
.scb-lp-steps li::before{ content: counter(s, persian); display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(135deg, var(--b), var(--b2)); color: #fff; font-weight: 900; font-size: 20px; margin-bottom: 16px; box-shadow: 0 12px 24px -12px var(--b); }
.scb-lp-steps li:not(:last-child)::after{ content: ""; position: absolute; top: 50px; left: -21px; width: 22px; border-top: 2px dashed color-mix(in srgb, var(--b) 40%, transparent); }
.scb-lp-steps h3{ font-size: 18.5px; margin-bottom: 6px; }
.scb-lp-steps p{ color: var(--mut); font-size: 15px; }

/* ---------- دمو ---------- */
.scb-lp--demo{ background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--b) 6%, #fff)); }
.scb-lp-demo-box{ position: relative; }
.scb-lp-demo-box .scb-lp-chat{ max-width: 440px; }
.scb-lp-note{ color: var(--mut); font-size: 14px; background: #fff; border: 1px dashed var(--line); border-radius: 14px; padding: 10px 14px; display: inline-block; }
.scb-lp-admin{ margin-top: 12px !important; font-size: 13px; color: #b45309; background: #fff7e6; border-radius: 12px; padding: 10px 14px; }

/* ---------- تعرفه ---------- */
.scb-lp--pricing{ background: #fff; }
.scb-lp-prices{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; }
.scb-lp-price{ border: 1px solid var(--line); border-radius: 24px; padding: 30px 26px; display: flex; flex-direction: column; position: relative; background: #fff; }
.scb-lp-price.is-featured{ background: #120f2d; color: #fff; border-color: transparent; box-shadow: 0 34px 60px -30px var(--b); transform: translateY(-8px); }
.scb-lp-price .pop{ position: absolute; top: -13px; right: 26px; background: var(--b); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 14px; border-radius: 20px; }
.scb-lp-price h3{ font-size: 20px; }
.scb-lp-price .d{ color: var(--mut); font-size: 14px; margin-bottom: 18px; }
.scb-lp-price.is-featured .d{ color: rgba(255,255,255,.65); }
.scb-lp-price .amt{ font-size: 32px; font-weight: 900; margin-bottom: 18px; line-height: 1.4; }
.scb-lp-price .amt small{ font-size: 13px; font-weight: 500; color: var(--mut); }
.scb-lp-price.is-featured .amt small{ color: rgba(255,255,255,.6); }
.scb-lp-price ul{ list-style: none; display: grid; align-content: start; gap: 8px; margin-bottom: 24px; flex: 1; font-size: 14.5px; }
.scb-lp-price li::before{ content: "✓"; color: #16a34a; font-weight: 900; margin-left: 8px; }
.scb-lp-price.is-featured li::before{ color: #5ef0b0; }

/* ---------- سؤالات ---------- */
.scb-lp-split.is-faq{ align-items: start; grid-template-columns: .8fr 1.2fr; }
.scb-lp-faq{ display: grid; gap: 12px; }
.scb-lp-faq details{ background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 22px; transition: box-shadow .2s; }
.scb-lp-faq details[open]{ box-shadow: 0 20px 40px -30px rgba(30,20,90,.4); }
.scb-lp-faq summary{ cursor: pointer; font-weight: 800; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.scb-lp-faq summary::-webkit-details-marker{ display: none; }
.scb-lp-faq summary::after{ content: "+"; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--soft); color: var(--b); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform .2s; }
.scb-lp-faq details[open] summary::after{ transform: rotate(45deg); }
.scb-lp-faq details p{ color: var(--mut); padding-bottom: 18px; }

/* ---------- دعوت ---------- */
.scb-lp--cta{ background: var(--bg); }
.scb-lp--cta .scb-lp-in{ padding-top: 40px; }
div.scb-lp-cta{ background: linear-gradient(135deg, var(--b), var(--b2)); color: #fff; border-radius: 30px; padding: 64px 32px; text-align: center; position: relative; overflow: hidden; }
div.scb-lp-cta::before{ content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.08); top: -160px; left: -100px; }
div.scb-lp-cta::after{ content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.06); bottom: -140px; right: -60px; }
div.scb-lp-cta h2{ font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 10px; position: relative; z-index: 1; color: #fff; }
div.scb-lp-cta p{ opacity: .85; margin-bottom: 26px; position: relative; z-index: 1; }
div.scb-lp-cta .scb-lp-btn{ position: relative; z-index: 1; }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 1024px){
  .scb-lp-grid{ grid-template-columns: repeat(2, 1fr); }
  .scb-lp-float.f1{ left: 0; } .scb-lp-float.f2{ right: 0; }
}
@media (max-width: 860px){
  .scb-lp-in{ padding: 64px 18px; }
  .scb-lp--hero .scb-lp-in{ grid-template-columns: 1fr; gap: 44px; padding-top: 64px; padding-bottom: 72px; }
  .scb-lp--hero .lead{ font-size: 16.5px; }
  .scb-lp-split, .scb-lp-split.is-faq{ grid-template-columns: 1fr; gap: 36px; }
  .scb-lp-steps{ grid-template-columns: 1fr; }
  .scb-lp-steps li:not(:last-child)::after{ display: none; }
  div.scb-lp-stats{ grid-template-columns: repeat(2, 1fr); }
  div.scb-lp-stats > div:nth-child(2){ border-left: 0; }
  div.scb-lp-stats > div:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
  .scb-lp-price.is-featured{ transform: none; }
  .scb-lp-head{ margin-bottom: 32px; }
}
@media (max-width: 560px){
  .scb-lp{ font-size: 15px; }
  .scb-lp-grid{ grid-template-columns: 1fr; }
  .scb-lp-btns .scb-lp-btn{ flex: 1 1 auto; white-space: nowrap; padding: 14px 18px; }
  .scb-lp-float{ display: none; }
  .scb-lp--hero .scb-lp-chat{ transform: none; }
  div.scb-lp-stats b{ font-size: 24px; }
  div.scb-lp-cta{ padding: 44px 20px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce){
  .scb-lp-chat.is-live .m{ animation: none; opacity: 1; transform: none; }
  .scb-lp-float{ animation: none; }
}