@charset "UTF-8";.demos{padding:var(--space-20) 0;background:var(--color-white)}.demos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);margin-top:var(--space-16)}.demo-card{display:flex;flex-direction:column;text-decoration:none;transition:transform .4s cubic-bezier(.165,.84,.44,1)}.demo-card__visual{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--color-gray-100);border:1px solid var(--color-gray-200);margin-bottom:var(--space-4);transition:all .4s cubic-bezier(.165,.84,.44,1)}.demo-card__visual img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.demo-card__visual:after{content:"معاينة مباشرة";position:absolute;inset:0;background:#1a1a2ecc;display:flex;align-items:center;justify-content:center;color:var(--color-white);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);opacity:0;transition:opacity .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.demos-grid .demo-card:hover .demo-card__visual{border-color:var(--color-primary);box-shadow:0 20px 40px #0000001f}.demos-grid .demo-card:hover .demo-card__visual img{transform:scale(1.05)}.demos-grid .demo-card:hover .demo-card__visual:after{opacity:1}.demo-card__body{padding:0 var(--space-2)}.demo-card__title{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:var(--space-1);display:block}.demo-card__tags{font-size:var(--font-size-xs);color:var(--text-tertiary);display:block}@media(max-width:1024px){.demos-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.demos-grid{grid-template-columns:repeat(2,1fr)}.demo-card__visual{aspect-ratio:16/10}}.stagger.is-visible>*:nth-child(1){transition-delay:0ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(2){transition-delay:40ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(3){transition-delay:80ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(4){transition-delay:120ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(5){transition-delay:160ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(6){transition-delay:200ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(7){transition-delay:240ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(8){transition-delay:280ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(9){transition-delay:320ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(10){transition-delay:360ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(11){transition-delay:400ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(12){transition-delay:440ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(13){transition-delay:480ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(14){transition-delay:520ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(15){transition-delay:560ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(16){transition-delay:600ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(17){transition-delay:640ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(18){transition-delay:680ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(19){transition-delay:720ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(20){transition-delay:760ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(21){transition-delay:800ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(22){transition-delay:840ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(23){transition-delay:880ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(24){transition-delay:920ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(25){transition-delay:960ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(26){transition-delay:1000ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(27){transition-delay:1040ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(28){transition-delay:1080ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(29){transition-delay:1120ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(30){transition-delay:1160ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(31){transition-delay:1200ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(32){transition-delay:1240ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(33){transition-delay:1280ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(34){transition-delay:1320ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(35){transition-delay:1360ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(36){transition-delay:1400ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(37){transition-delay:1440ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(38){transition-delay:1480ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(39){transition-delay:1520ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(40){transition-delay:1560ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(41){transition-delay:1600ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(42){transition-delay:1640ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(43){transition-delay:1680ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(44){transition-delay:1720ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(45){transition-delay:1760ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(46){transition-delay:1800ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(47){transition-delay:1840ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(48){transition-delay:1880ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(49){transition-delay:1920ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(50){transition-delay:1960ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(51){transition-delay:2000ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(52){transition-delay:2040ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(53){transition-delay:2080ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(54){transition-delay:2120ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(55){transition-delay:2160ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(56){transition-delay:2200ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(57){transition-delay:2240ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(58){transition-delay:2280ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(59){transition-delay:2320ms;opacity:1;transform:translateY(0)}.stagger.is-visible>*:nth-child(60){transition-delay:2360ms;opacity:1;transform:translateY(0)}