/* ============================================================
   DEMO — choose a demo to try (live / VOD / low latency)
   Theme-aware (design tokens). Framework free.
   ============================================================ */
.demo{padding:clamp(28px,5vw,56px) 0 clamp(48px,8vw,88px);}
.demo__inner{max-width:1040px;margin:0 auto;}

.demo__back{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-bottom:18px;
  font-size:var(--text-sm);font-weight:600;color:var(--fg-2);text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.demo__back:hover{color:var(--accent);}
.demo__back svg{width:16px;height:16px;}

/* hero */
.demo-hero{max-width:760px;margin:0 0 clamp(30px,5vw,52px);}
.demo-hero .marker{margin-bottom:14px;}
.demo-hero__title{
  font-family:var(--font-display);font-weight:800;line-height:1.06;color:var(--fg-strong);
  font-size:clamp(2.1rem,1.5rem+2.6vw,3.1rem);margin:0 0 16px;
}
.demo-hero__lead{font-size:clamp(1.02rem,.98rem+.3vw,1.18rem);line-height:1.6;color:var(--fg-2);margin:0 0 22px;}
.demo-hero__attrs{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;color:var(--fg-muted);font-size:var(--text-sm);}
.demo-hero__attr{display:inline-flex;align-items:center;gap:7px;}
.demo-hero__attr::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;}

/* choice cards */
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:20px;}
.demo-card{
  display:flex;flex-direction:column;text-decoration:none;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.demo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-accent);}
.demo-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);}
.demo-card__media{position:relative;aspect-ratio:540/358;background:var(--surface-2);overflow:hidden;}
.demo-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur) var(--ease);
}
.demo-card:hover .demo-card__media img{transform:scale(1.04);}
.demo-card__chip{
  position:absolute;top:12px;left:12px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(5,11,31,.72);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill);padding:5px 11px;backdrop-filter:blur(4px);
}
.demo-card__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;}
.demo-card__title{font-family:var(--font-display);font-weight:700;color:var(--fg-strong);font-size:1.12rem;margin:0 0 8px;}
.demo-card__desc{color:var(--fg-2);font-size:var(--text-sm);line-height:1.55;margin:0 0 18px;flex:1;}
.demo-card__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;align-self:flex-start;
  font-weight:600;font-size:var(--text-sm);
}
.demo-card__cta svg{width:17px;height:17px;transition:transform var(--dur) var(--ease);}
.demo-card:hover .demo-card__cta svg{transform:translateX(3px);}

/* iOS note */
.demo-note{
  display:flex;gap:13px;align-items:flex-start;margin-top:clamp(28px,5vw,44px);
  padding:16px 18px;border:1px solid var(--border-accent);border-radius:var(--r-md);background:var(--signal-bg);
}
.demo-note svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:1px;}
.demo-note p{margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--fg-2);}
.demo-note strong{color:var(--fg-strong);font-weight:700;}