/* «אתרים לדוגמה» — gallery cards (the landing section + /examples). Each card carries its design's colours. */
.exg h1 { margin: 6px 0 10px; }
.exg .lead, .exg-sec .lead { max-width: 64ch; }
.exg-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.exg-card { border-radius: 20px; overflow: hidden; background: var(--bg); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 20px 50px -30px rgba(20, 20, 40, .45); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.exg-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(20, 20, 40, .5); }
.exg-link { display: block; color: inherit !important; text-decoration: none !important; }
.exg-link:focus-visible { outline: 3px solid #1d4ed8; outline-offset: -3px; border-radius: 20px; }
.exg-mock { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 16px 18px 20px; overflow: hidden; background: linear-gradient(160deg, var(--bg2), var(--bg)); }
.exg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 25%, transparent); margin-inline-end: 4px; }
.exg-mock > .exg-dot { position: absolute; top: 14px; }
.exg-mock > .exg-dot:nth-child(1) { inset-inline-start: 18px; } .exg-mock > .exg-dot:nth-child(2) { inset-inline-start: 31px; } .exg-mock > .exg-dot:nth-child(3) { inset-inline-start: 44px; }
.exg-mock b { margin-top: 30px; font-family: var(--fh), sans-serif; font-size: 1.3rem; line-height: 1.2; color: var(--ink); max-width: 90%; }
.exg-btns { display: flex; gap: 8px; margin-top: auto; }
.exg-btns em { display: block; width: 92px; height: 30px; border-radius: 99px; background: var(--p); }
.exg-btns em + em { width: 64px; background: #0b7a43; }
.exg-glow { position: absolute; inset: auto -20% -50% auto; width: 60%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 45%, transparent), transparent); }
.exg-meta { display: grid; gap: 2px; padding: 14px 18px 18px; background: #fff; color: #1d1530; }
.exg-meta small { color: #5b5470; font-weight: 600; }
.exg-meta strong { font-size: 1.05rem; }
.exg-cta { margin-top: 6px; font-weight: 700; color: #2b62e3; }
.exg-foot { margin-top: 26px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .exg-card { transition: none; } .exg-card:hover { transform: none; } }