/* «أمثلة جاهزة» (examples.html), on top of ui.css and shell.css: the landing page's starter cards as a section of the app. */
.ex-wrap{max-width:1120px;margin:0 auto;padding:36px 28px 56px}
.ex-intro{margin-bottom:28px}
.ex-intro h2{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.ex-intro p{margin:0;color:var(--stone);font-size:15px;line-height:1.75;max-width:640px}
.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ex-card{position:relative;border-radius:var(--r-xl);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--sh-sm);overflow:hidden;cursor:pointer;text-align:start;border:0;color:inherit;padding:0;display:flex;flex-direction:column;font:inherit;
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.ex-card:hover,.ex-card:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(114,50,242,.22),var(--sh-lg);outline:0}
.ex-card .stage{flex:none;position:relative;height:220px;overflow:hidden;background:radial-gradient(70% 85% at 50% 100%,var(--glow,rgba(139,61,255,.28)),transparent 72%),#F6F6F8;border-bottom:1px solid var(--line)}
.ex-card .s{position:absolute;bottom:-40px;border-radius:10px;overflow:hidden;box-shadow:0 16px 34px -14px rgba(18,18,28,.5);transition:transform .4s var(--ease)}
.ex-card .s .dz{width:100%;height:100%}
.ex-card .s1{width:28%;left:12%;transform:rotate(-7deg)}
.ex-card .s2{width:36%;left:32%;z-index:2;bottom:-28px}
.ex-card .s3{width:30%;right:9%;transform:rotate(6deg)}
.ex-card:hover .s1{transform:rotate(-10deg) translate(-8px,-6px)}
.ex-card:hover .s3{transform:rotate(9deg) translate(8px,-6px)}
.ex-card:hover .s2{transform:translateY(-8px)}
.ex-card .body{flex:1;display:flex;flex-direction:column;padding:18px 20px 20px;position:relative;z-index:3;background:var(--surface)}
.ex-card h3{font-size:17px;font-weight:700;margin:0 0 4px}
.ex-card p{margin:0 0 14px;font-size:13.5px;color:var(--stone);line-height:1.65}
.ex-card q{display:block;margin:0 0 16px;padding:10px 12px;border-radius:var(--r-md);background:var(--app);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:1.65;color:var(--ink-2);quotes:none}
.ex-card .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;color:var(--primary)}
.ex-card .go svg{width:16px;height:16px;transition:transform var(--t) var(--ease)}
.ex-card:hover .go svg{transform:translateX(-4px)}
@media (max-width:1000px){.ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ex-wrap{padding:20px 16px 36px}.ex-grid{grid-template-columns:1fr;gap:14px}.ex-intro h2{font-size:21px}}