/* Витрина студии: стили поверх kit.css. Цвета — из темы (по умолчанию «Северное сияние»), --app — цвет решения. */
.kit { --r: calc(var(--card-radius) + 10px); --good: #4fd18b; --warn: #f1b44c; --bad: #ff6b6b; }
.kit[data-scheme="light"] { --good: #17803f; --warn: #a86400; --bad: #c62f2f; }
.link-btn { background: none; border: 0; padding: 6px 0; color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.sc-more { display: inline-block; margin-top: 10px; color: var(--accent-ink); opacity: 1; text-decoration: none; font-weight: 600; }
.sc-h3 { margin: 22px 0 10px; font-size: 17px; }
.sc-intro { margin: 10px 0 16px; }

/* ---------- главная ---------- */
.sc-hero { padding-top: 18px; display: grid; gap: 8px; }
.sc-kicker { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.sc-title { font-size: clamp(32px, 9.5vw, 46px); text-wrap: balance; }
.sc-tagline { margin: 0; font-size: 18px; line-height: 1.35; opacity: .92; text-wrap: balance; }
.sc-video { position: relative; margin-top: 18px; border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 4 / 5; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); border: 1px solid var(--line); }
.sc-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-video-btn { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.sc-video-btn svg { width: 20px; height: 20px; }
.sc-lede { margin: 18px 0 0; font-size: 17px; line-height: 1.5; }
.sc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sc-cta .btn { flex: 1 1 200px; }
.sc-cta .btn svg { width: 18px; height: 18px; }
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.sc-stats div { display: grid; gap: 2px; padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-align: center; }
.sc-stats b { font-size: 26px; font-family: var(--font-display); font-weight: 400; color: var(--accent-ink); }
.sc-stats span { font-size: 12px; line-height: 1.25; opacity: .8; }

.sc-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sc-strip::-webkit-scrollbar { display: none; }
.sc-strip-item { flex: none; width: 108px; display: grid; gap: 8px; justify-items: center; background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-size: 13px; text-align: center; cursor: pointer; scroll-snap-align: start; line-height: 1.25; }

/* телефон со скриншотом */
.sc-phone { --app: var(--accent); position: relative; display: block; flex: none; aspect-ratio: 9 / 18.5; border-radius: 18px; padding: 4px; background: #0b0d12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 26px rgba(0, 0, 0, .35); overflow: hidden; }
.sc-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 14px; display: block; }
.sc-phone.mini { width: 100px; border-radius: 14px; padding: 3px; }
.sc-phone.mini img { border-radius: 11px; }
.sc-phone.thumb { width: 96px; }
.sc-phone.big { width: 216px; border-radius: 26px; padding: 6px; }
.sc-phone.big img { border-radius: 21px; }
.sc-phone-ph { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 12px; padding: 8px; text-align: center; color: #fff; font-size: 13px; line-height: 1.2; background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--app) 85%, #fff) 0%, var(--app) 45%, color-mix(in srgb, var(--app) 40%, #000) 100%); }
.sc-q { display: grid; place-items: center; font-size: 34px; font-weight: 700; color: var(--accent-ink); background: var(--surface); }

.sc-builtin { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sc-builtin div { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.sc-builtin b { font-size: 15px; line-height: 1.25; }
.sc-builtin span { font-size: 13px; line-height: 1.35; opacity: .78; }

.sc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: st; }
.sc-steps li { counter-increment: st; position: relative; display: grid; gap: 2px; padding: 0 0 18px 46px; }
.sc-steps li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 15px; }
.sc-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--line); }
.sc-steps b { font-size: 16px; }
.sc-steps span { font-size: 14px; opacity: .82; }

.sc-about { margin: 8px 0 0; line-height: 1.55; }
.sc-faq { display: grid; gap: 8px; }
.sc-faq details { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); padding: 0 16px; }
.sc-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sc-faq summary::-webkit-details-marker { display: none; }
.sc-faq summary::after { content: "+"; font-size: 20px; line-height: 1; opacity: .6; }
.sc-faq details[open] summary::after { content: "–"; }
.sc-faq p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; opacity: .85; }
.sc-contacts { display: grid; gap: 8px; }
.sc-contact { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.sc-contact > span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.sc-contact svg { width: 20px; height: 20px; flex: none; opacity: .8; }
.sc-contact small { opacity: .6; }
.sc-final { display: grid; gap: 6px; margin-top: 26px; padding: 18px; border-radius: var(--r); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sc-final b { font-size: 18px; }
.sc-final span { opacity: .85; margin-bottom: 6px; }

/* ---------- решения ---------- */
.sc-apps { display: grid; gap: 10px; }
.sc-app { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-align: left; font: inherit; cursor: pointer; position: relative; overflow: hidden; }
.sc-app::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--app); opacity: .9; }
.sc-app-txt { display: grid; gap: 4px; min-width: 0; }
.sc-app-txt b { font-size: 17px; line-height: 1.25; }
.sc-app-points { display: grid; gap: 2px; margin-top: 4px; font-size: 13px; }
.sc-app-points span::before { content: "· "; color: var(--accent-ink); font-weight: 700; }
.sc-app-meta { margin-top: 4px; color: var(--accent-ink); font-weight: 600; }
.sc-app-head { display: grid; gap: 6px; margin-top: 12px; }
.sc-app-head p { margin: 0; }
.sc-app-head > p:first-of-type { font-size: 17px; line-height: 1.45; }
.sc-app-title { font-size: 26px; }
.sc-gallery { display: flex; gap: 12px; overflow-x: auto; padding: 16px 2px 10px; margin: 0 -2px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sc-gallery::-webkit-scrollbar { display: none; }
.sc-gallery > * { scroll-snap-align: start; flex: none; }
.sc-gallery.photos img { height: 260px; width: auto; max-width: 86%; border-radius: var(--r); object-fit: cover; }
.sc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-points li { display: flex; gap: 10px; align-items: flex-start; }
.sc-points svg { width: 20px; height: 20px; flex: none; color: var(--accent-ink); margin-top: 1px; }

/* ---------- модули ---------- */
.sc-filter { margin: 4px 0 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.sc-filter::-webkit-scrollbar { display: none; }
.sc-filter .chip { flex: none; cursor: pointer; font: inherit; font-size: 14px; }
.sc-mods { display: grid; gap: 8px; }
.sc-mod { display: grid; gap: 4px; padding: 13px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.sc-mod b { font-size: 15px; }
.sc-mod-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sc-tag { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.sc-tag.all { border-color: var(--accent); color: var(--accent-ink); cursor: default; }

/* ---------- работы и отзывы ---------- */
.sc-cases { display: grid; gap: 10px; }
.sc-case { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.sc-case > img { width: 96px; height: 96px; border-radius: calc(var(--r) - 6px); object-fit: cover; flex: none; }
.sc-case > span { display: grid; gap: 4px; min-width: 0; }
.sc-case b { font-size: 16px; }
.sc-result { font-weight: 600; color: var(--accent-ink); font-size: 14px; }
.sc-result.big { font-size: 20px; margin: 8px 0 0; }
.sc-reviews { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sc-reviews::-webkit-scrollbar { display: none; }
.sc-review { flex: none; width: min(300px, 84%); margin: 0; display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); scroll-snap-align: start; }
.sc-review blockquote { margin: 0; font-size: 15px; line-height: 1.5; }
.sc-review figcaption { display: flex; gap: 10px; align-items: center; }
.sc-review figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sc-review figcaption > span { display: grid; }
.sc-stars { color: #f5b82e; letter-spacing: 2px; }
.sc-stars i { font-style: normal; opacity: .25; }

/* ---------- конструктор заявки ---------- */
.sc-bsteps { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sc-bsteps li { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 11px; opacity: .55; }
.sc-bsteps li.on, .sc-bsteps li.done { opacity: 1; }
.sc-bsteps i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; border: 2px solid var(--line); }
.sc-bsteps li.on i { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sc-bsteps li.done i { border-color: var(--accent); color: var(--accent-ink); }
.sc-bsteps svg { width: 14px; height: 14px; }
.sc-bh { margin-top: 18px; }
.sc-pick { display: grid; gap: 8px; margin-top: 12px; }
.sc-pick-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--surface); border: 1.5px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sc-pick-item > span:last-child { display: grid; gap: 2px; min-width: 0; }
.sc-pick-item .sc-phone.mini { width: 54px; border-radius: 10px; padding: 2px; }
.sc-pick-item .sc-phone.mini img { border-radius: 8px; }
.sc-pick-item .sc-phone-ph { font-size: 0; }
.sc-pick-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.sc-toggles { display: grid; gap: 8px; margin-top: 12px; }
.sc-toggle { padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.sc-bnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.sc-bnav .btn { min-width: 120px; }
.sc-summary { display: grid; gap: 4px; margin: 12px 0 4px; padding: 14px; border-radius: var(--r); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid var(--line); }
.sc-done { display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 28px; padding: 26px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.sc-done > svg { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.sc-done b { font-size: 20px; }
.sc-done p { margin: 0; }
.sc-status { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.sc-status.s-new { color: var(--accent-ink); }
.sc-status.s-talks { color: var(--warn); }
.sc-status.s-won { color: var(--good); }
.sc-status.s-lost { opacity: .6; }

/* ---------- заявки в Админке ---------- */
.sc-lead { display: grid; gap: 6px; margin-top: 10px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); }
.sc-lead.s-new { border-left-color: var(--accent); }
.sc-lead.s-talks { border-left-color: var(--warn); }
.sc-lead.s-won { border-left-color: var(--good); }
.sc-lead-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.sc-lead-top b { font-size: 17px; }
.sc-lead-contact { font-weight: 600; }
.sc-lead-contact .link-btn { padding: 0; opacity: 1; }
.sc-lead-c { margin: 4px 0; padding: 10px 12px; border-radius: 10px; background: rgba(127, 127, 127, .1); white-space: pre-wrap; font-size: 14px; }
.sc-lead .chip { cursor: pointer; font: inherit; font-size: 13px; }
.sc-lead .field { margin: 4px 0 0; }
.sc-lead textarea { min-height: 54px; }
@media (prefers-reduced-motion: reduce) { .sc-strip, .sc-gallery, .sc-reviews { scroll-behavior: auto; } }