/* Showcase landing — reuses the template's own tokens so it always matches. */
.showcase .site-header { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.sc-hero .hero__title { max-width: 20ch; font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
.sc-hero .lead { max-width: 70ch; }
.sc-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.sc-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; background: var(--surface); }
.sc-pills .ti { color: var(--primary); }
.sc-hero-shot, .demo__frame { display: block; position: relative; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.sc-hero-shot img { width: 100%; height: auto; }
.demo__bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.demo__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.demo__bar i:nth-child(2) { background: #febc2e; } .demo__bar i:nth-child(3) { background: #28c840; }
.demos { display: grid; gap: 40px 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .demos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .demos--3 { grid-template-columns: repeat(3, 1fr); } }
.demo { display: block; }
.demo__shot { display: block; aspect-ratio: 16 / 10.5; background-size: 100% auto; background-position: top center; background-repeat: no-repeat; transition: background-position 4.5s cubic-bezier(.45, 0, .55, 1); }
.demo:hover .demo__shot, .demo:focus-visible .demo__shot { background-position: bottom center; }
.demo--sm .demo__shot { aspect-ratio: 16 / 11; }
.demo__hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .4s; }
.demo:hover .demo__hover { opacity: 1; }
.demo__frame { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.demo:hover .demo__frame { transform: translateY(-8px); }
.demo__info { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding-top: 18px; }
.demo__num { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); font-weight: 600; color: var(--primary); }
.demo__info b { font-family: var(--font-head); font-size: 1.35rem; letter-spacing: -0.01em; }
.demo__info small { color: var(--muted); }
.demo--sm .demo__info { grid-template-columns: 1fr; text-align: center; }
.phones-sc { display: flex; justify-content: center; align-items: flex-end; gap: 16px; }
.phone-sc { width: 31%; max-width: 230px; padding: 7px; border-radius: 30px; background: #0b0b0f; box-shadow: var(--shadow-lg); }
.phone-sc:nth-child(2) { transform: translateY(-36px); }
.phone-sc img { width: 100%; border-radius: 24px; }
.sc-feat h3 { font-size: 1.15rem !important; }
.sc-tech { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 48px; }
.sc-tech span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .92rem; }
.sc-tech .ti { font-size: 1.2rem; color: var(--primary); }
.sc-plan { max-width: 460px; margin-inline: auto; width: 100%; }
.sc-footer { padding-top: 0; }