@font-face{font-family:Vazirmatn;src:url("../fonts/Vazirmatn.woff2") format("woff2");font-display:swap}
@font-face{font-family:IRANSansXFaNum;font-style:normal;font-weight:300;font-display:swap;src:local("IRANSansXFaNum Light"),local("IRANSansXFaNum"),url("https://web-cdn.snapp.ir/shared/fonts/fa/IRANSansXFaNum-light.woff2") format("woff2")}
@font-face{font-family:IRANSansXFaNum;font-style:normal;font-weight:400;font-display:swap;src:local("IRANSansXFaNum Regular"),local("IRANSansXFaNum"),url("https://web-cdn.snapp.ir/shared/fonts/fa/IRANSansXFaNum-regular.woff2") format("woff2")}
@font-face{font-family:IRANSansXFaNum;font-style:normal;font-weight:500;font-display:swap;src:local("IRANSansXFaNum Medium"),local("IRANSansXFaNum"),url("https://web-cdn.snapp.ir/shared/fonts/fa/IRANSansXFaNum-medium.woff2") format("woff2")}
@font-face{font-family:IRANSansXFaNum;font-style:normal;font-weight:700;font-display:swap;src:local("IRANSansXFaNum Bold"),local("IRANSansXFaNum"),url("https://web-cdn.snapp.ir/shared/fonts/fa/IRANSansXFaNum-bold.woff2") format("woff2")}

:root{
  color-scheme:dark;
  --mint:#2dd4b0;
  --cyan:#22d3ee;
  --gold:#d4af37;
  --bg:#080f0e;
  --surface:#0d1916;
  --surface-2:#11211d;
  --surface-3:#152a24;
  --ink:#eefbf7;
  --muted:#a3bbb5;
  --quiet:#78948c;
  --line:rgba(125,229,203,.16);
  --line-strong:rgba(45,212,176,.42);
  --danger:#ff8d85;
  --radius:20px;
  --shadow:0 24px 70px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;min-width:0;background:
  radial-gradient(circle at 5% 8%,rgba(34,211,238,.09),transparent 28rem),
  radial-gradient(circle at 92% 32%,rgba(45,212,176,.1),transparent 32rem),
  var(--bg);
  color:var(--ink);font-family:IRANSansXFaNum,Vazirmatn,Tahoma,sans-serif;line-height:1.8
}
button,input{font:inherit}
button{color:inherit}
p,h1,h2,h3{margin-top:0}
p{color:var(--muted);text-wrap:pretty}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.skip{
  position:fixed;right:1rem;top:-100px;z-index:100;padding:.7rem 1rem;border-radius:12px;
  background:var(--mint);color:#031713;text-decoration:none;font-weight:700
}
.skip:focus{top:1rem}
*:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.watermarks{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.watermarks span{
  position:absolute;color:rgba(238,251,247,.028);font-size:clamp(1.6rem,5.5vw,4.4rem);
  font-weight:700;white-space:nowrap;transform:rotate(-18deg)
}
.watermarks span:nth-child(1){top:10%;left:-3%}
.watermarks span:nth-child(2){top:43%;right:3%}
.watermarks span:nth-child(3){bottom:8%;left:18%}

.demo-header{
  position:sticky;top:0;z-index:30;padding:14px 18px 0;border-bottom:1px solid var(--line);
  background:rgba(8,15,14,.94);backdrop-filter:blur(14px)
}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:12px}
.demo-brand{display:flex;align-items:center;gap:.65rem;font-weight:700}
.demo-brand-mark{
  width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(145deg,rgba(45,212,176,.18),rgba(34,211,238,.07));
  border:1px solid var(--line-strong);color:var(--mint)
}
.demo-brand small{display:block;color:var(--quiet);font-size:.65rem;font-weight:400}
.demo-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.meta-chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:6px 9px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);color:var(--quiet);font-size:.68rem
}
.meta-chip strong{color:var(--ink)}
.meta-chip.safe::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.demo-actions{display:flex;align-items:center;gap:7px}
.tool-button{
  min-height:38px;padding:7px 11px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);cursor:pointer;font-size:.72rem;font-weight:700;transition:.18s ease
}
.tool-button:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.tool-button.primary{background:var(--mint);border-color:var(--mint);color:#031713}

.tab-scroller{overflow-x:auto;scrollbar-width:none}
.tab-scroller::-webkit-scrollbar{display:none}
.demo-tabs{display:flex;gap:5px;min-width:max-content}
.demo-tabs button{
  position:relative;min-height:42px;padding:9px 12px;border:1px solid transparent;border-radius:10px 10px 0 0;
  background:transparent;color:var(--quiet);cursor:pointer;font-size:.75rem;white-space:nowrap
}
.demo-tabs button::after{
  content:"";position:absolute;right:10px;left:10px;bottom:-1px;height:2px;
  background:var(--mint);transform:scaleX(0);transition:transform .18s ease
}
.demo-tabs button[aria-selected="true"]{color:var(--ink);background:rgba(45,212,176,.055)}
.demo-tabs button[aria-selected="true"]::after{transform:scaleX(1)}

.demo-main{max-width:1120px;margin:auto;padding:20px}
.demo-page{display:none}
.demo-page.is-active{display:block;animation:page-in .22s ease-out}
@keyframes page-in{from{opacity:0;transform:translateY(7px)}}
.page-lead{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:1.2rem;
  align-items:end;margin-bottom:14px;padding:18px;border:1px solid var(--line);
  border-radius:var(--radius);background:linear-gradient(135deg,rgba(45,212,176,.075),rgba(34,211,238,.025))
}
.page-kicker{display:block;color:var(--mint);font-size:.7rem;font-weight:700;margin-bottom:.45rem}
.page-lead h2{font-size:clamp(1.12rem,2vw,1.55rem);line-height:1.7;margin-bottom:0;text-wrap:balance}
.page-lead p{margin:0;font-size:.8rem;line-height:1.9}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.card{
  position:relative;min-height:125px;padding:16px;border:1px solid var(--line);
  border-radius:16px;background:linear-gradient(145deg,var(--surface-2),var(--surface));
  overflow:hidden
}
.card.wide{grid-column:1/-1}
.card h3{font-size:.94rem;line-height:1.75;margin-bottom:.65rem;text-wrap:balance}
.label{display:block;color:var(--mint);font-size:.67rem;font-weight:700;margin-bottom:.35rem}
.mini{margin:0;color:var(--quiet);font-size:.74rem;line-height:1.85}
.mask{
  display:inline-block;vertical-align:middle;min-width:68px;height:.8em;border-radius:4px;
  background:linear-gradient(90deg,#31534b,#1d3b34,#31534b);filter:blur(3px);opacity:.76
}
.mask.small{min-width:36px}.mask.line{display:block;width:100%;height:11px;margin:9px 0}
.mask.title{display:block;width:68%;height:17px;margin:9px 0}

.score-card{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:16px}
.score-ring{
  width:106px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--mint) 0 68%,#21332f 68%);position:relative
}
.score-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--surface-2)}
.score-ring span{position:relative;filter:blur(5px);font-weight:700}
.rows{display:grid;gap:8px}
.row{display:flex;justify-content:space-between;gap:1rem;padding-bottom:7px;border-bottom:1px dashed var(--line);color:var(--muted);font-size:.72rem}
.bars{height:150px;display:flex;align-items:end;gap:7px;padding-top:14px}
.bars i{flex:1;min-height:18%;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--mint),rgba(45,212,176,.07))}
.bars i:nth-child(2){height:62%}.bars i:nth-child(3){height:35%}.bars i:nth-child(4){height:84%}
.bars i:nth-child(5){height:51%}.bars i:nth-child(6){height:71%}

.decision-lens{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:12px;
  border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;background:var(--line)
}
.decision-step{position:relative;padding:14px 15px;background:#0a1512}
.decision-step::before{
  content:attr(data-step);display:block;color:var(--mint);font-size:.63rem;font-weight:700;margin-bottom:.35rem
}
.decision-step strong{display:block;font-size:.78rem;margin-bottom:.25rem}
.decision-step p{margin:0;color:var(--quiet);font-size:.69rem;line-height:1.8}

.matrix-lab{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:12px}
.matrix-map{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.matrix-node{
  min-height:120px;padding:13px;border:1px solid var(--line);border-radius:14px;text-align:right;
  background:var(--surface);cursor:pointer;transition:.18s ease
}
.matrix-node:hover,.matrix-node[aria-pressed="true"]{border-color:var(--mint);background:rgba(45,212,176,.075);transform:translateY(-2px)}
.matrix-node span{display:block;color:var(--mint);font-size:.65rem;margin-bottom:.4rem}
.matrix-node strong{display:block;font-size:.85rem;margin-bottom:.3rem}
.matrix-node small{color:var(--quiet);line-height:1.7}
.detail-panel{padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--surface-2),var(--surface))}
.detail-panel h3{font-size:1rem;margin-bottom:.45rem}
.detail-panel>p{font-size:.77rem;margin-bottom:1rem}
.detail-facts{display:grid;gap:8px}
.detail-fact{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:.73rem}
.detail-fact span{color:var(--quiet)}.detail-fact strong{font-weight:500}

.phase-switcher{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.phase-button{
  min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--muted);cursor:pointer;font-size:.72rem
}
.phase-button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#211a02;font-weight:700}
.phase-board{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:start}
.phase-summary{padding:17px;border:1px solid rgba(212,175,55,.26);border-radius:16px;background:rgba(212,175,55,.055)}
.phase-summary span{color:var(--gold);font-size:.67rem}.phase-summary h3{font-size:.95rem;margin:.35rem 0}
.phase-summary p{font-size:.73rem;margin:0}
.week-list{display:grid;gap:7px}
.week-item{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.week-item b{color:var(--gold);font-size:.72rem}.week-item strong{display:block;font-size:.76rem}.week-item small{color:var(--quiet)}

.idea-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.fake-search{flex:1;min-width:170px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--quiet);font-size:.72rem}
.filter-button{
  padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--quiet);font-size:.68rem;cursor:pointer
}
.filter-button[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#031713}
.idea-card[hidden]{display:none}

.profile-lab{display:grid;grid-template-columns:230px 1fr;gap:14px}
.profile-phone{padding:13px;border:1px solid var(--line-strong);border-radius:28px;background:#07100e;box-shadow:var(--shadow)}
.phone-head{height:28px;display:flex;justify-content:center}.phone-head::before{content:"";width:72px;height:7px;border-radius:999px;background:#1b2c28}
.profile-row{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center}
.avatar{width:54px;aspect-ratio:1;border-radius:50%;border:1px solid var(--line-strong);background:radial-gradient(circle at 35% 30%,var(--mint),#0b2821 62%)}
.profile-copy{display:grid;gap:6px}
.highlight-row{display:flex;gap:7px;margin:16px 0}.highlight-row i{width:36px;aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:var(--surface-2)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.post-grid i{aspect-ratio:1;border-radius:4px;background:linear-gradient(145deg,#15322a,#0d1a17)}
.profile-points{display:grid;gap:8px}
.profile-point{
  width:100%;display:grid;grid-template-columns:32px 1fr;gap:10px;text-align:right;padding:11px;
  border:1px solid var(--line);border-radius:13px;background:var(--surface);cursor:pointer
}
.profile-point span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(45,212,176,.1);color:var(--mint);font-size:.68rem}
.profile-point strong{display:block;font-size:.78rem}.profile-point small{color:var(--quiet)}
.profile-point[aria-pressed="true"]{border-color:var(--mint);background:rgba(45,212,176,.06)}
.profile-explain{margin-top:10px;padding:14px;border-right:2px solid var(--mint);background:rgba(45,212,176,.05);border-radius:11px}
.profile-explain strong{display:block;font-size:.8rem;margin-bottom:.3rem}.profile-explain p{font-size:.73rem;margin:0}

.check-list{display:grid;gap:7px}
.check-item{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:.75rem}
.check-item input{accent-color:var(--mint);margin-top:.38rem}

.tour-dialog{
  position:fixed;right:18px;bottom:18px;z-index:80;width:min(420px,calc(100% - 36px));
  margin:0;padding:0;border:1px solid var(--line-strong);border-radius:18px;
  background:#0c1916;color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.55)
}
.tour-dialog::backdrop{background:transparent}
.tour-progress{height:3px;background:#1d302c;overflow:hidden;border-radius:18px 18px 0 0}
.tour-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--mint),var(--cyan));transform:scaleX(.125);transform-origin:right;transition:transform .18s ease}
.tour-body{padding:16px}
.tour-count{color:var(--mint);font-size:.67rem;font-weight:700}
.tour-body h2{font-size:1rem;line-height:1.75;margin:.35rem 0}.tour-body p{font-size:.75rem;margin:0}
.tour-actions{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
.tour-actions>div{display:flex;gap:6px}
.tour-button{min-height:38px;padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);cursor:pointer;font-size:.72rem}
.tour-button.next{background:var(--mint);border-color:var(--mint);color:#031713;font-weight:700}
.tour-button:disabled{opacity:.4;cursor:not-allowed}
.tour-highlight{box-shadow:0 0 0 1px var(--mint),0 16px 55px rgba(45,212,176,.1)}

.demo-lock{
  position:fixed;left:10px;bottom:10px;z-index:60;padding:7px 10px;border:1px solid rgba(212,175,55,.32);
  border-radius:999px;background:rgba(8,15,14,.9);color:#dccd8a;font-size:.61rem;backdrop-filter:blur(10px)
}
.print-note{display:none}

@media(max-width:820px){
  .demo-top{align-items:flex-start}.demo-meta{display:none}.page-lead{grid-template-columns:1fr;align-items:start}
  .matrix-lab,.profile-lab{grid-template-columns:1fr}.profile-phone{max-width:280px;margin:auto;width:100%}
}
@media(max-width:680px){
  .demo-header{padding-inline:11px}.demo-top{display:grid;grid-template-columns:1fr auto}.demo-actions{grid-column:1/-1}
  .tool-button{flex:1}.demo-main{padding:12px}.grid,.grid-3,.decision-lens{grid-template-columns:1fr}
  .card.wide{grid-column:auto}.score-card,.phase-board{grid-template-columns:1fr}.score-ring{margin:auto}
  .decision-lens{gap:1px}.matrix-node{min-height:108px}.tour-dialog{right:10px;bottom:10px;width:calc(100% - 20px)}
  .demo-lock{display:none}
}
@media(max-width:430px){
  .matrix-map{grid-template-columns:1fr}.page-lead{padding:14px}.card{padding:13px}
  .demo-brand small{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  .demo-header,.demo-main,.tour-dialog,.demo-lock,.watermarks{display:none!important}
  .print-note{display:block;padding:2rem;color:#111;background:#fff}
}