/* Нүүр хуудас: түгээмэл товчлол, давуу тал, хөдөлгөөнт демо (зөвхөн CSS, 10 секундийн давталт). */
.quick .btn { font-weight: 500; }
.perk { display: flex; gap: .75rem; align-items: center; background: #fff; border-radius: .5rem; padding: 1rem; box-shadow: var(--shadow); height: 100%; }
.perk strong { display: block; font-size: .9375rem; }
.perk span:not(.avatar-tile) { display: block; font-size: .8125rem; }

.demo { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1rem; padding: 1.25rem; border-radius: 1rem;
  background: linear-gradient(160deg, #f3f1ff 0%, #ffffff 60%); box-shadow: var(--shadow); min-height: 330px; overflow: hidden; }
@media (max-width: 575.98px) { .demo { grid-template-columns: 1fr; } .demo-paper { display: none; } }
.demo-form { background: #fff; border-radius: .75rem; padding: 1rem; box-shadow: 0 .125rem .5rem rgba(47, 43, 61, .08); align-self: start; }
.demo-label { font-size: .75rem; font-weight: 600; color: var(--bs-heading-color); margin: .5rem 0 .25rem; }
.demo-label:first-child { margin-top: 0; }
.demo-input { height: 34px; border: 1px solid #dbdade; border-radius: .375rem; padding: 0 .625rem; display: flex; align-items: center; font-size: .875rem; color: var(--bs-heading-color); position: relative; }
.demo-type { white-space: nowrap; clip-path: inset(0 100% 0 0); }
.demo-caret { width: 1px; height: 16px; background: var(--bs-primary); margin-left: 1px; opacity: 0; }
.demo-actions { display: flex; gap: .375rem; margin-top: 1rem; }
.demo-btn { font-size: .75rem; font-weight: 600; padding: .375rem .625rem; border-radius: .375rem; background: rgba(115, 103, 240, .12); color: var(--bs-primary); }
.demo-btn.primary { background: var(--bs-primary); color: #fff; }

.demo-paper { background: #fff; border-radius: 4px; padding: 1.125rem 1.125rem 1.5rem; box-shadow: 0 .25rem 1rem rgba(47, 43, 61, .14); font-family: Arial, Arimo, sans-serif; color: #000; font-size: .6875rem; line-height: 1.35; transform: rotate(1deg); }
.demo-title { text-align: center; font-weight: 700; font-size: .75rem; margin-bottom: .625rem; }
.demo-line { height: 6px; border-radius: 3px; background: #ecebf0; margin: .375rem 0; }
.demo-line.w95 { width: 95%; } .demo-line.w90 { width: 90%; } .demo-line.w85 { width: 85%; } .demo-line.w80 { width: 80%; } .demo-line.w70 { width: 70%; } .demo-line.w60 { width: 60%; }
.demo-row { margin: .375rem 0; }
.demo-slot { display: inline-block; min-width: 4.5em; border-radius: 2px; background: var(--slot); box-shadow: 0 0 0 1px var(--slot-line) inset; padding: 0 .2em; vertical-align: baseline; }
.demo-slot > span, .demo-words > span { opacity: 0; }
.demo-words { margin-top: -.125rem; }
.demo-sign { display: flex; justify-content: space-between; margin-top: 1rem; }
.demo-sign span { width: 38%; border-top: 1px dashed #b7b5be; }
.demo-toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 20px); opacity: 0; background: #2f2b3d; color: #fff; font-size: .8125rem; padding: .5rem .875rem; border-radius: .5rem; white-space: nowrap; display: flex; align-items: center; gap: .375rem; }
.demo-toast .icon-base { color: #28c76f; }
.demo-cursor { position: absolute; left: 70%; top: 85%; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .t1 { animation: type1 10s steps(8, end) infinite; }
  .t2 { animation: type2 10s steps(9, end) infinite; }
  .t3 { animation: type3 10s steps(10, end) infinite; }
  .c1 { animation: caret1 10s infinite; } .c2 { animation: caret2 10s infinite; } .c3 { animation: caret3 10s infinite; }
  .s1 > span { animation: fill1 10s infinite; }
  .s2 > span { animation: fill2 10s infinite; }
  .demo-words > span { animation: fillw 10s infinite; }
  .s3 > span { animation: fill3 10s infinite; }
  .demo-btn.pdf { animation: press 10s infinite; }
  .demo-cursor { animation: cursor 10s infinite; }
  .demo-toast { animation: toast 10s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-type { clip-path: none; }
  .demo-slot > span, .demo-words > span { opacity: 1; }
}
@keyframes type1 { 0%, 8% { clip-path: inset(0 100% 0 0); } 20%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes type2 { 0%, 24% { clip-path: inset(0 100% 0 0); } 36%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes type3 { 0%, 44% { clip-path: inset(0 100% 0 0); } 56%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes caret1 { 0%, 7% { opacity: 0; } 8%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes caret2 { 0%, 23% { opacity: 0; } 24%, 37% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes caret3 { 0%, 43% { opacity: 0; } 44%, 57% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes fill1 { 0%, 19% { opacity: 0; } 22%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes fill2 { 0%, 35% { opacity: 0; } 38%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes fillw { 0%, 40% { opacity: 0; } 44%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes fill3 { 0%, 55% { opacity: 0; } 58%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cursor {
  0%, 60% { opacity: 0; left: 70%; top: 85%; }
  63% { opacity: 1; left: 70%; top: 85%; }
  70% { opacity: 1; left: 24%; top: 76%; }
  74% { opacity: 1; left: 24%; top: 76%; transform: scale(.85); }
  76% { transform: scale(1); }
  90% { opacity: 1; left: 24%; top: 76%; }
  94%, 100% { opacity: 0; left: 24%; top: 76%; }
}
@keyframes press { 0%, 72% { transform: none; box-shadow: none; } 74% { transform: scale(.94); box-shadow: 0 0 0 4px rgba(115, 103, 240, .25); } 78%, 100% { transform: none; box-shadow: none; } }
@keyframes toast { 0%, 76% { opacity: 0; transform: translate(-50%, 20px); } 80%, 92% { opacity: 1; transform: translate(-50%, 0); } 96%, 100% { opacity: 0; transform: translate(-50%, 20px); } }