.demos-header{padding:8rem 5% 3.5rem;border-bottom:1px solid var(--border)}
.demos-header h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,5vw,4rem);font-weight:300;color:var(--white);margin-bottom:.9rem}
.demos-header p{max-width:560px;color:var(--muted);line-height:1.8}
.di-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:1.2rem;padding:3.5rem 5%}
.di-card{background:var(--navy-mid);border:1px solid var(--border);padding:1.8rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;transition:border-color .2s,background .2s,transform .15s;text-decoration:none}
.di-card:hover{border-color:var(--card-accent,var(--blue-dim));background:var(--navy-light);transform:translateY(-2px)}
.di-icon{font-size:2rem;margin-bottom:.2rem}
.di-label{font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--white);line-height:1.3}
.di-cta{font-size:.7rem;color:var(--blue-dim);margin-top:auto;padding-top:.8rem;letter-spacing:.1em}
.di-card:hover .di-cta{color:var(--card-accent,var(--blue))}
.demos-note{background:var(--navy-light);border-top:1px solid var(--border);padding:1.4rem 5%;text-align:center;font-size:.78rem;color:var(--muted);line-height:1.7}
.demos-note a{color:var(--blue);text-decoration:none}