/* دستیار — white, ink violet, a living orb; Vazirmatn throughout at expressive weights. */
:root{--bg:#FBFAFF;--ink:#1B1530;--ink2:#6E6890;--violet:#7C3AED;--cyan:#22D3EE;--soft:#F2EEFD;--line:#E9E5F7;--r:20px}
body{background:var(--bg);color:var(--ink);font:400 15.5px/1.85 "Vazirmatn",system-ui,sans-serif}
h1,h2,h3{margin:0;line-height:1.3}
.dh{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.4rem;padding:.7rem max(1rem,calc(50% - 640px));background:rgb(251 250 255/.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.dh__logo{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.25rem;color:var(--ink);text-decoration:none}
.dh__logo small{font-weight:500;font-size:.75rem;color:var(--ink2)}
.dh__orb{width:28px;height:28px;border-radius:50%;background:conic-gradient(from 90deg,var(--violet),var(--cyan),#F472B6,var(--violet));animation:turn 6s linear infinite}
@keyframes turn{to{transform:rotate(1turn)}}
.dh__tabs{display:flex;gap:.2rem;padding:3px;border-radius:12px;background:var(--soft);margin-inline-start:auto}
.dh__tabs a{padding:.35rem .9rem;border-radius:9px;color:var(--ink2);text-decoration:none;font-weight:800}
.dh__tabs a[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgb(27 21 48/.1)}
.dh__cart{border:0;background:var(--ink);color:#fff;border-radius:12px;padding:.45rem .9rem;font-weight:800}
.dh__cart b{display:inline-grid;place-items:center;min-width:1.3rem;height:1.3rem;border-radius:999px;background:var(--cyan);color:var(--ink);font-size:.72rem;margin-inline-start:.3rem}
@media (max-width:640px){.dh__logo small{display:none}}
main{max-width:1280px;margin:auto;padding:0 1rem}

.ai{display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem;align-items:center;padding:2.5rem 0}
.ai__intro{display:grid;gap:1rem;justify-items:start}
.orb{width:min(260px,60vw);aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 30px 50px rgb(124 58 237/.35))}
.orb.is-css{background:radial-gradient(circle at 35% 35%,#fff8,transparent 40%),conic-gradient(from 0deg,var(--violet),var(--cyan),#F472B6,var(--violet));animation:turn 12s linear infinite}
.ai h1{font-size:clamp(2.1rem,1.3rem + 3vw,3.6rem);font-weight:900;letter-spacing:0}
.ai__intro p{color:var(--ink2);max-width:32rem;margin:0}
.chat{display:flex;flex-direction:column;height:min(620px,78vh);border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgb(124 58 237/.45);overflow:hidden}
.chat__log{list-style:none;margin:0;padding:1.2rem;flex:1;overflow:auto;display:flex;flex-direction:column;gap:.7rem;scroll-behavior:smooth}
.m{max-width:92%;padding:.7rem 1rem;border-radius:18px;line-height:1.9}
.m p{margin:0}
.m--ai{align-self:flex-start;background:var(--soft);border-start-start-radius:6px}
.m--me{align-self:flex-end;background:var(--ink);color:#fff;border-start-end-radius:6px}
.m.is-typing p::after{content:"···";letter-spacing:.2em;animation:dots 1s infinite}
@keyframes dots{50%{opacity:.3}}
.chat__chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.2rem .6rem}
.chat__chips button{border:1.5px solid var(--violet);background:#fff;color:var(--violet);padding:.35rem .9rem;border-radius:999px;font-weight:800;animation:pop .3s both}
.chat__chips button:hover{background:var(--violet);color:#fff}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.chat__in{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--line)}
.chat__in input{flex:1;border:1.5px solid var(--line);border-radius:14px;padding:.7rem 1rem;background:var(--bg);outline:0}
.chat__in input:focus{border-color:var(--violet)}
.chat__in button{width:48px;border:0;border-radius:14px;background:var(--violet);display:grid;place-items:center}
.chat__in svg{width:22px;height:22px;fill:#fff;transform:scaleX(-1)}
@media (max-width:900px){.ai{grid-template-columns:1fr}.chat{height:560px}}

.rec{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.5rem}
.rec>li{display:grid;grid-template-columns:96px 1fr;gap:.7rem;padding:.6rem;border-radius:14px;background:#fff;animation:pop .4s both}
.rec>li:nth-child(2){animation-delay:.08s}.rec>li:nth-child(3){animation-delay:.16s}
.rec__art{display:grid;place-items:center;background:var(--bg);border-radius:10px}
.rec__b{display:grid;gap:.1rem}
.match{justify-self:start;font-size:.72rem;font-weight:800;padding:.05rem .5rem;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--cyan));color:#fff}
.rec__b ul{margin:.2rem 0;padding-inline-start:1rem;font-size:.82rem;color:var(--ink2);line-height:1.7}
.rec__f{display:flex;justify-content:space-between;align-items:center}
.rec__f button{border:0;background:var(--ink);color:#fff;border-radius:10px;padding:.3rem .7rem;font-weight:700;font-size:.8rem}
.cmp{overflow-x:auto;margin-top:.6rem}
.cmp table{border-collapse:collapse;font-size:.8rem;background:#fff;border-radius:12px;min-width:420px}
.cmp th,.cmp td{padding:.45rem .6rem;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.cmp thead th{color:var(--violet)}
.cmp tbody th{color:var(--ink2);font-weight:600;white-space:nowrap}

.shop{padding:2rem 0 4rem}
.shop__h{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.shop h2{font-size:1.8rem;font-weight:900}
.cats{display:flex;gap:.3rem;flex-wrap:wrap}
.cats button{border:0;background:var(--soft);color:var(--ink2);padding:.4rem .9rem;border-radius:999px;font-weight:800}
.cats button[aria-selected="true"]{background:var(--ink);color:#fff}
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pc{display:grid;gap:.15rem;padding:.8rem;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.pc__art{background:var(--bg);border-radius:14px;margin-bottom:.4rem}
.pc__c{font-size:.75rem;font-weight:800;color:var(--violet)}
.pc__r{font-size:.8rem;color:#B45309;font-weight:700}
.pc__f{display:flex;justify-content:space-between;align-items:center;margin-top:.3rem}
.pc__f button{width:36px;height:36px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:1.2rem}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(3,1fr)}}@media (max-width:700px){.pgrid{grid-template-columns:repeat(2,1fr)}}

.seller{padding:2rem 0 5rem}
.seller__h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem}
.seller h2{font-size:1.9rem;font-weight:900}.seller__h p{color:var(--ink2);margin:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}
.kpi{padding:1rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);display:grid}
.kpi span{color:var(--ink2);font-size:.85rem}.kpi b{font-size:1.6rem;font-weight:900}.kpi small{color:#15803D;font-weight:700}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.card{padding:1.1rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);display:grid;gap:.6rem;align-content:start}
.card--wide{grid-column:span 2}
.card h3{font-size:1rem;font-weight:800}.card h3 small{color:var(--ink2);font-weight:500}
.line{width:100%;direction:ltr}
.ln{stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 1.4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.qbars,.funnel{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.qbars li{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;font-size:.88rem}
.qbars i{grid-column:1/-1;grid-row:2;height:8px;border-radius:9px;background:var(--soft);position:relative;overflow:hidden}
.qbars i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);border-radius:9px;background:var(--violet)}
.funnel li{position:relative;display:flex;align-items:baseline;gap:.6rem;padding:.55rem .8rem;border-radius:12px;background:var(--soft);overflow:hidden;font-size:.88rem;z-index:0}
.funnel li::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);background:color-mix(in srgb,var(--violet) 22%,transparent);z-index:-1}
.funnel b{margin-inline-start:auto}.funnel small{color:var(--ink2)}
@media (max-width:800px){.kpis{grid-template-columns:repeat(2,1fr)}.sgrid{grid-template-columns:1fr}.card--wide{grid-column:auto}}
.df{text-align:center;color:var(--ink2);padding:1.5rem 1rem 6rem;border-top:1px solid var(--line);font-size:.86rem}
.toast{position:fixed;top:1rem;left:50%;z-index:60;transform:translate(-50%,calc(-100% - 2rem));padding:.7rem 1.2rem;border-radius:14px;background:var(--ink);color:#fff;font-weight:800;transition:transform .35s cubic-bezier(.2,.8,.2,1);max-width:92vw}
.toast.is-on{transform:translate(-50%,0)}