/* Demo websites gallery — extends /styles.css */

.nav-links a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.06); }

/* hero */
.demos-hero { padding-bottom: clamp(48px, 7vw, 88px); }
.demos-hero h1 { margin-top: 4px; }
.demos-hero-row {
  display: grid; grid-template-columns: 1.1fr auto; gap: 32px 56px; align-items: end;
  margin-top: clamp(28px, 4vw, 44px);
}
.demos-hero-row .cta-row { margin-top: 0; }
.demo-jump {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(36px, 5vw, 56px);
  padding-top: 28px; border-top: 1px solid var(--line);
}
.demo-jump a {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 14.5px; color: var(--muted); background: rgba(255,255,255,.02);
  transition: color .2s, border-color .2s, background .2s;
}
.demo-jump a:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* gallery cards */
.demos-gallery { padding-top: clamp(24px, 4vw, 48px); }
.demo-list { display: grid; gap: 28px; }
.demo-card {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(18px, 2.4vw, 28px); padding-right: clamp(22px, 4vw, 56px);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 28px;
  scroll-margin-top: 96px; transition: border-color .3s;
}
.demo-card:hover { border-color: var(--line-2); }
.demo-card.flip { grid-template-columns: 1fr 1.3fr; padding-right: clamp(18px, 2.4vw, 28px); padding-left: clamp(22px, 4vw, 56px); }
.demo-card.flip .demo-visual { order: 2; }

.demo-visual { position: relative; padding-bottom: 28px; padding-right: 56px; }
.demo-card.flip .demo-visual { padding-right: 0; padding-left: 56px; }
.demo-browser {
  display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #1a1a1a;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.9);
}
.demo-scroll { aspect-ratio: 16 / 10.5; overflow: hidden; background: #f2f2ee; }
.demo-scroll img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 0%;
  transition: object-position 7s cubic-bezier(.45,.05,.55,.95);
}
.demo-browser:hover .demo-scroll img,
.demo-browser:focus-visible .demo-scroll img { object-position: center 100%; transition-duration: 9s; }

.demo-phone {
  position: absolute; right: 0; bottom: 0; width: 26%; min-width: 120px; max-width: 170px;
  aspect-ratio: 390 / 844; border-radius: 22px; overflow: hidden;
  border: 5px solid #1c1c1c; outline: 1px solid var(--line-2); background: #fff;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.85);
  transform: rotate(2deg); transition: transform .6s var(--ease);
}
.demo-card.flip .demo-phone { right: auto; left: 0; transform: rotate(-2deg); }
.demo-card:hover .demo-phone { transform: rotate(0) translateY(-6px); }
.demo-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.demo-info { padding: 8px 0; }
.demo-num { color: var(--accent); }
.demo-info h2 { margin-top: 16px; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.04em; line-height: 1.05; }
.demo-desc { margin-top: 14px; color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); }
.demo-feats { display: grid; gap: 10px; margin-top: 22px; }
.demo-feats li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.demo-feats li::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex-shrink: 0; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.demo-actions .btn { --h: 48px; padding: 0 20px; font-size: 15px; }
.demo-actions .btn svg { width: 16px; height: 16px; }

/* included grid */
.incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.incl-grid li {
  padding: clamp(24px, 2.4vw, 32px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2);
  transition: border-color .3s;
}
.incl-grid li:hover { border-color: var(--line-2); }
.incl-grid h3 { margin-top: 22px; font-size: 22px; letter-spacing: -0.03em; }
.incl-grid p { margin-top: 8px; color: var(--muted); font-size: 16px; }

/* more */
.more-card { align-items: end; }
.more-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.more-chips li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--muted); background: rgba(0,0,0,.25); }
.more-actions { display: grid; gap: 10px; align-self: end; }

.footer-bottom > span:last-child { color: var(--faint); }

@media (max-width: 1080px) {
  .demos-hero-row { grid-template-columns: 1fr; }
  .demo-card, .demo-card.flip { grid-template-columns: 1fr; padding: 16px 16px 28px; }
  .demo-card.flip .demo-visual { order: 0; padding-left: 0; padding-right: 56px; }
  .demo-card.flip .demo-phone { left: auto; right: 0; transform: rotate(2deg); }
  .demo-info { padding: 8px 12px 0; }
  .incl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .demo-visual, .demo-card.flip .demo-visual { padding-right: 34px; padding-bottom: 22px; }
  .demo-phone { min-width: 0; width: 30%; border-width: 3px; border-radius: 14px; }
  .demo-actions .btn { flex: 1 1 auto; }
  .incl-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-scroll img { transition: none; }
}