/* Examples page — loads on top of landing_v2.css (reuses .excard/.exshot/.exbar) */
.ex-hero{max-width:860px;margin:0 auto;padding:16px 22px 4px;text-align:center}
.ex-hero h1{font-family:var(--head);font-weight:800;font-size:clamp(30px,5vw,48px);letter-spacing:-.02em;color:var(--ink);margin:0;line-height:1.06}
.ex-hero h1 .grad{background:linear-gradient(96deg,#0288d1,#7c5cff 55%,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}
.ex-hero p{color:var(--slate);font-size:17px;line-height:1.65;margin:16px auto 0;max-width:58ch}

.ex-page-grid{max-width:1140px;margin:30px auto 0;padding:0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* card gets a description + live-link footer */
.ex-page-grid .excard .cap{flex-direction:column;align-items:flex-start;gap:8px}
.ex-page-grid .excard .cap .row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px}
.ex-page-grid .excard .desc{color:var(--slate);font-size:13.5px;line-height:1.5;margin:0}
.ex-page-grid .excard .visit{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:13.5px;margin-top:2px}
.ex-page-grid .excard:hover .visit{gap:9px}
.ex-page-grid .excard .visit svg{transition:transform .16s}
.ex-page-grid .excard:hover .visit svg{transform:translate(2px,-2px)}

.ex-cta{max-width:900px;margin:44px auto 0;padding:34px 26px;border-radius:26px;text-align:center;
  border:1px solid var(--border);background:linear-gradient(150deg,rgba(2,136,209,.10),rgba(124,92,255,.10))}
.ex-cta h2{font-family:var(--head);font-weight:800;font-size:clamp(22px,3.4vw,30px);color:var(--ink);margin:0 0 10px;letter-spacing:-.01em}
.ex-cta p{color:var(--slate);font-size:16px;line-height:1.6;margin:0 auto 18px;max-width:52ch}

@media(max-width:900px){.ex-page-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ex-page-grid{grid-template-columns:1fr;padding:0 16px}}