.p-hero .p-hero-art { min-height: 540px; }
.p-hero-demo { position: relative; display: grid; place-items: center; width: min(100%, 470px); min-height: 520px; margin-inline: auto; isolation: isolate; font-family: Vazirmatn, Tahoma, sans-serif; }
.p-hero-demo__halo { position: absolute; z-index: -1; inset: 7% -10% 5%; border-radius: 50%; background: radial-gradient(ellipse at center, #e6f1ff 0%, #f3f8ff 40%, transparent 72%); pointer-events: none; }
.p-hero-demo__halo::before, .p-hero-demo__halo::after { content: ''; position: absolute; inset: 12%; border: 1px solid #d9e9ff; border-radius: 50%; }
.p-hero-demo__halo::after { inset: 27%; opacity: .75; }
.p-hero-demo__frame { display: flex; flex-direction: column; width: min(100%, 384px); height: 474px; border: 1px solid #dae6f8; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px #265baa27, 0 6px 22px #214a8510; text-align: right; }
.p-hero-demo__head { display: flex; align-items: center; gap: 11px; flex: none; min-height: 64px; box-sizing: border-box; padding: 11px 15px; color: #fff; background: #1877ff; }
.p-hero-demo__avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #ffffff33; box-shadow: inset 0 0 0 1px #ffffff38; }
.p-hero-demo__avatar svg { width: 19px; height: 19px; }
.p-hero-demo__identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-hero-demo__identity strong { font-size: 14px; line-height: 1.5; }
.p-hero-demo__status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; opacity: .9; white-space: nowrap; }
.p-hero-demo__status i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: p-demo-breathe 2.4s ease-in-out infinite; }
.p-hero-demo__reset { display: grid; place-items: center; width: 30px; height: 30px; margin-inline-start: auto; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; opacity: .78; transition: opacity .2s, background-color .2s; }
.p-hero-demo__reset:hover { opacity: 1; background: #ffffff29; }
.p-hero-demo__reset svg { width: 17px; height: 17px; }
.p-hero-demo__thread { display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d9e4f3 transparent; background: #f4f7fc; }
.p-hero-demo__turn { display: flex; align-items: flex-start; gap: 8px; width: 100%; animation: p-demo-rise .26s ease both; }
.p-hero-demo__turn--user { justify-content: flex-end; }
.p-hero-demo__face { display: grid; place-items: center; width: 28px; height: 28px; flex: none; margin-top: 2px; border: 1px solid #d8e7fa; border-radius: 50%; background: #eaf3ff; }
.p-hero-demo__face img { width: 18px; height: 14px; object-fit: contain; filter: invert(42%) sepia(92%) saturate(2480%) hue-rotate(200deg) brightness(101%); }
.p-hero-demo__bubble { max-width: 84%; margin: 0; padding: 10px 14px; border: 1px solid #e3e9f2; border-radius: 16px 16px 16px 6px; background: #fff; box-shadow: 0 1px 2px #0f172a0f; color: #273a56; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.p-hero-demo__turn--user .p-hero-demo__bubble { border-color: #1877ff; border-radius: 16px 16px 6px 16px; background: #1877ff; color: #fff; }
.p-hero-demo__suggestions { display: flex; flex-wrap: wrap; gap: 7px; padding-inline-start: 36px; }
.p-hero-demo__suggestion { padding: 7px 12px; border: 1px solid #dfe8f6; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px #0f172a0b; color: #54657e; font: inherit; font-size: 11px; line-height: 1.6; text-align: right; cursor: pointer; transition: color .18s, border-color .18s, background-color .18s, transform .18s; }
.p-hero-demo__suggestion:hover { color: #1877ff; border-color: #bad7ff; background: #eff6ff; transform: translateY(-1px); }
.p-hero-demo__foot { flex: none; padding: 10px 12px 8px; border-top: 1px solid #e3e9f2; background: #fff; }
.p-hero-demo__compose { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.p-hero-demo__compose textarea { box-sizing: border-box; flex: 1; min-width: 0; min-height: 42px; max-height: 96px; padding: 10px 13px; border: 1px solid #e1e8f2; border-radius: 14px; outline: none; background: #fff; color: #263952; font: inherit; font-size: 12px; line-height: 1.7; resize: none; transition: border-color .18s, box-shadow .18s; }
.p-hero-demo__compose textarea::placeholder { color: #9aa7b9; }
.p-hero-demo__compose textarea:focus { border-color: #1877ff; box-shadow: 0 0 0 3px #1877ff1a; }
.p-hero-demo__send { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: #1877ff; color: #fff; cursor: pointer; transition: filter .18s, transform .18s; }
.p-hero-demo__send:hover { filter: brightness(1.08); transform: translateY(-2px); }
.p-hero-demo__send:disabled { opacity: .5; cursor: default; transform: none; }
.p-hero-demo__send svg { width: 19px; height: 19px; transform: scaleX(-1); }
.p-hero-demo__brand { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 7px; color: #98a5b6; font-size: 10px; }
.p-hero-demo__brand img { width: 15px; height: 12px; object-fit: contain; opacity: .55; }
.p-hero-demo__caption { display: block; margin-top: -4px; padding: 7px 12px; border: 1px solid #e3ecf9; border-radius: 999px; background: #ffffffec; box-shadow: 0 5px 20px #255ba612; color: #7085a3; font-size: 10px; font-weight: 700; }
.p-hero-demo__signup-link { display: block; width: fit-content; margin-top: 10px; padding: 6px 11px; border-radius: 8px; background: #eaf3ff; color: #176fe0; font-size: 11px; font-weight: 750; text-decoration: none; }
.p-hero-demo__signup-link:hover { background: #dcecff; }
.p-hero-demo__typing { letter-spacing: 3px; color: #7a9bc7; animation: p-demo-breathe 1s ease-in-out infinite; }
.p-hero-demo button:focus-visible, .p-hero-demo a:focus-visible { outline: 2px solid #135fc4; outline-offset: 3px; }
@keyframes p-demo-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes p-demo-breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media (max-width: 700px) { .p-hero .p-hero-art { min-height: 535px; } .p-hero-demo { min-height: 520px; } }
@media (max-width: 430px) { .p-hero .p-hero-art { min-height: 510px; } .p-hero-demo { min-height: 505px; } .p-hero-demo__frame { height: 455px; } .p-hero-demo__bubble { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .p-hero-demo__turn, .p-hero-demo__status i, .p-hero-demo__typing { animation: none; } .p-hero-demo__suggestion, .p-hero-demo__send, .p-hero-demo__reset { transition: none; } .p-hero-demo__suggestion:hover, .p-hero-demo__send:hover { transform: none; } }
.p-hero-demo__bubble strong { font-weight: 750; color: #16294a; }
.p-hero-demo__bubble code { padding: 1px 5px; border-radius: 5px; background: #eef3fa; font-size: 11px; }
.p-hero-demo__bubble a { color: #176fe0; }
.p-hero-demo__turn--note { justify-content: center; }
.p-hero-demo__turn--note .p-hero-demo__bubble { max-width: 92%; border-style: dashed; border-radius: 12px; background: #f8fbff; color: #54657e; font-size: 11px; text-align: center; }