/* ==========================================================================
   PSKRIP — рекламная страница «Заказать сайт»
   Mobile-first. Фирменные цвета: #F5F5F1 / #151515 / #C7FF3D
   ========================================================================== */

/* ---------- шрифты (локальные) ---------- */
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-cyrillic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-cyrillic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-cyrillic-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-cyrillic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-cyrillic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-cyrillic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- токены ---------- */
:root {
  --bg: #F5F5F1;
  --surface: #FFFFFF;
  --ink: #151515;
  --ink-2: #2A2A28;
  --muted: #5E5E58;
  --subtle: #8A8A83;
  --line: rgba(21, 21, 21, 0.12);
  --line-strong: rgba(21, 21, 21, 0.24);
  --accent: #C7FF3D;
  --accent-ink: #151515;
  --on-dark: #F5F5F1;
  --on-dark-muted: rgba(245, 245, 241, 0.66);
  --danger: #B42318;
  --ok: #1E7A54;

  --head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1240px;
  --pad: 20px;
  --sec: 72px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --hdr-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 640px) { :root { --pad: 28px; } }
@media (min-width: 1024px) { :root { --sec: 120px; --hdr-h: 76px; } }
@media (min-width: 1600px) { :root { --wrap: 1400px; --pad: 40px; } }

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 12px); overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--bg); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- кнопки ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: #000; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #b6f01f; }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: progress; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .02em;
  color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(199, 255, 61, .28); }

/* ---------- шапка ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 245, 241, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow .3s var(--ease);
}
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.hdr__in { display: flex; align-items: center; gap: 24px; height: var(--hdr-h); }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__word { font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
.logo__role { font-size: 11px; line-height: 1.25; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line-strong); }
.nav { display: none; gap: 28px; margin-left: 24px; }
.nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-2); padding: 6px 0; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); }
.nav a:hover { background-size: 100% 1px; }
.hdr__side { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.hdr__phone { display: none; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.hdr__cta { display: none; }
.burger { position: relative; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu { border-top: 1px solid var(--line); background: var(--bg); max-height: calc(100svh - var(--hdr-h)); overflow-y: auto; }
.menu__nav { display: grid; gap: 4px; padding-block: 16px 24px; }
.menu__nav > a:not(.btn) { padding: 12px 0; font-family: var(--head); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu__nav .btn { margin-top: 16px; }
.menu__contacts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-weight: 600; }
.menu__contacts a { text-decoration: none; padding: 6px 0; }

@media (min-width: 560px) { .hdr__cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav { display: flex; }
  .burger { display: none; }
  .menu { display: none !important; }
}
@media (min-width: 1280px) { .hdr__phone { display: inline; } }
@media (max-width: 400px) { .logo__role { display: none; } }

/* ---------- hero ---------- */
.hero { padding-block: 28px 56px; overflow: hidden; }
.hero__in { display: grid; gap: 40px; }
.hero__title {
  margin-top: 18px;
  font-family: var(--head); font-weight: 800;
  font-size: clamp(2.15rem, 1.2rem + 3.9vw, 4.4rem);
  line-height: 1.02; letter-spacing: -0.045em;
  text-wrap: balance;
}
.mark { background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); padding: 0 .06em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__lead { margin-top: 20px; max-width: 36rem; font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.55; color: var(--ink-2); }
.hero__price { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 14px 18px 14px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.price-tag { flex: none; padding: 8px 14px; border-radius: 12px; background: var(--ink); color: var(--bg); font-family: var(--head); font-weight: 800; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.price-tag__from { font-weight: 600; font-size: .62em; color: var(--accent); margin-right: 2px; vertical-align: .12em; }
.hero__price-note { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }
.ticks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23151515' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; flex: none; }

.hero__visual { position: relative; margin-inline: -4px; }
.hero__shot { width: 100%; filter: drop-shadow(0 30px 50px rgba(21, 21, 21, .14)); }
.hero__card { position: absolute; filter: drop-shadow(0 18px 30px rgba(21, 21, 21, .16)); }
.hero__card--deals { width: 46%; left: -2%; bottom: -10%; }
.hero__card--contract { width: 26%; right: 1%; top: -8%; }

@media (max-width: 559px) {
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__price { width: 100%; }
}
@media (max-width: 399px) {
  .hero__price { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
}
@media (min-width: 1024px) {
  .hero { padding-block: 56px 96px; }
  .hero__in { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 40px; }
  .hero__visual { width: 112%; margin-right: -12%; }
  .hero__card--deals { width: 48%; left: -9%; bottom: -12%; }
  .hero__card--contract { width: 28%; right: 2%; top: -14%; }
}

/* ---------- преимущества ---------- */
.why { padding-block: 8px var(--sec); }
.why__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.why__item { padding: 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.why__item svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; padding: 4px; border-radius: 8px; background: var(--accent); box-sizing: content-box; }
.why__title { margin-top: 16px; font-family: var(--head); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; line-height: 1.25; }
.why__item p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 639px) {
  .why__list { gap: 8px; }
  .why__item { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 16px; }
  .why__item svg { grid-row: span 2; }
  .why__title { margin-top: 0; font-size: 16.5px; }
  .why__item p { margin-top: 2px; font-size: 14.5px; }
}

/* ---------- заголовки секций ---------- */
.sec-head { display: grid; gap: 14px; margin-bottom: 32px; }
.sec-title { font-family: var(--head); font-weight: 800; font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); line-height: 1.05; letter-spacing: -0.04em; }
.sec-text { max-width: 40rem; font-size: 16px; line-height: 1.55; color: var(--muted); }
@media (min-width: 1024px) {
  .sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; margin-bottom: 48px; }
  .sec-text { justify-self: end; }
}

/* ---------- работы ---------- */
.works { padding-block: 0 var(--sec); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.badge--real { border-color: transparent; background: var(--accent); color: var(--ink); }
.badge--real::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

.case { display: grid; gap: 22px; padding: 12px; border-radius: var(--r-lg); background: var(--ink); color: var(--on-dark); }
.case__media, .demo__media { display: block; width: 100%; padding: 0; border: 0; background: #0d0d0d; border-radius: calc(var(--r-lg) - 8px); overflow: hidden; cursor: zoom-in; }
.case__media img, .demo__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.case__media:hover img, .demo__media:hover img { transform: scale(1.025); }
.case__body { padding: 4px 10px 14px; }
.case__title { margin-top: 14px; font-family: var(--head); font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.05; }
.case__text { margin-top: 10px; max-width: 30rem; color: var(--on-dark-muted); font-size: 16px; }
.case__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.case__tags li { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(245, 245, 241, .22); font-size: 13px; color: var(--on-dark); }
@media (min-width: 1024px) {
  .case { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: 36px; padding: 16px 16px 16px 16px; }
  .case__body { padding: 8px 24px 8px 0; }
}

.demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 16px; margin-top: 28px; }
.demo__media { border-radius: var(--r); background: #e9e9e4; border: 1px solid var(--line); }
.demo__media img { aspect-ratio: 16 / 10; }
.demo__body { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 14px 4px 0; }
.demo__body .badge { grid-column: 2; grid-row: 1; justify-self: end; }
.demo__title { grid-column: 1; grid-row: 1; font-family: var(--head); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.demo__text { grid-column: 1 / -1; font-size: 14.5px; color: var(--muted); }
.more { display: grid; align-content: end; gap: 4px; height: 100%; min-height: 180px; padding: 22px; border-radius: var(--r); border: 1px dashed var(--line-strong); text-decoration: none; position: relative; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.more:hover { background: var(--surface); border-color: var(--ink); }
.more__title { font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.more__text { font-size: 14.5px; color: var(--muted); }
.more svg { position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; padding: 6px; border-radius: 50%; background: var(--accent); box-sizing: content-box; }

/* ---------- цены ---------- */
.prices { padding-block: var(--sec); background: var(--surface); border-block: 1px solid var(--line); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.plan--hit { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.plan__label { align-self: flex-start; margin-bottom: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--ink); font-family: var(--head); font-weight: 700; font-size: 11.5px; }
.plan__name { font-family: var(--head); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; padding-right: 0; }
.plan__price { margin-top: 18px; font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; white-space: nowrap; }
.plan__time { font-size: 14px; font-weight: 600; color: var(--muted); }
.plan--hit .plan__time { color: var(--accent); }
.plan__text { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.plan--hit .plan__text { border-top-color: rgba(245, 245, 241, .16); color: var(--on-dark-muted); }
.prices__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 20px 22px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.prices__cta p { max-width: 34rem; font-weight: 500; }
@media (max-width: 559px) { .prices__cta .btn { width: 100%; } }
@media (min-width: 1280px) { .plans { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- процесс ---------- */
.process { padding-block: var(--sec); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; counter-reset: s; }
.step { position: relative; padding: 22px 22px 24px; border-radius: var(--r); border: 1px solid var(--line); }
.step__n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--accent); font-family: var(--head); font-weight: 800; font-size: 13px; }
.step h3 { margin-top: 16px; font-family: var(--head); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.step p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.terms { display: grid; gap: 10px; margin-top: 20px; padding: 20px 22px; border-radius: var(--r); background: var(--accent); }
.terms li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.45; }
.terms li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 2px; background: var(--ink); }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* ---------- вопросы ---------- */
.faq { padding-block: 0 var(--sec); }
.faq__in { display: grid; gap: 24px; }
.faq__list { border-top: 1px solid var(--line-strong); }
.qa { border-bottom: 1px solid var(--line-strong); }
.qa summary { position: relative; display: block; padding: 20px 48px 20px 0; cursor: pointer; list-style: none; font-family: var(--head); font-weight: 700; font-size: 18px; letter-spacing: -0.015em; line-height: 1.35; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; border: 1px solid var(--line-strong); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10M14 9v10' stroke='%23151515' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat; transition: transform .3s var(--ease), background-color .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); background-color: var(--accent); border-color: var(--accent); }
.qa p { padding: 0 48px 22px 0; color: var(--muted); max-width: 44rem; }
@media (min-width: 1024px) { .faq__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; } }

/* ---------- заявка ---------- */
.lead { padding-block: var(--sec); background: var(--ink); color: var(--on-dark); }
.lead__in { display: grid; gap: 36px; }
.lead__title { font-family: var(--head); font-weight: 800; font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.045em; }
.lead__text { margin-top: 16px; max-width: 30rem; font-size: 17px; color: var(--on-dark-muted); }
.lead__alt { margin-top: 28px; }
.lead__alt > p { font-size: 14px; color: var(--on-dark-muted); }
.lead__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(245, 245, 241, .24); font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.chip:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.lead :focus-visible { outline-color: var(--accent); }

.form { display: grid; gap: 16px; align-content: start; padding: 22px; border-radius: var(--r-lg); background: #1f1f1d; border: 1px solid rgba(245, 245, 241, .1); }
.field { display: grid; gap: 8px; }
.field__label { font-size: 14px; font-weight: 600; }
.field__input {
  width: 100%; min-height: 54px; padding: 0 16px;
  border-radius: 12px; border: 1px solid rgba(245, 245, 241, .18);
  background: #151515; color: var(--on-dark);
  font-size: 17px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input::placeholder { color: rgba(245, 245, 241, .36); }
.field__input:hover { border-color: rgba(245, 245, 241, .34); }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(199, 255, 61, .22); }
.field__input[aria-invalid="true"] { border-color: #ff8f7a; }
.field__err { font-size: 13.5px; color: #ffb4a6; }
.field__err:empty { display: none; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.check { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.45; color: var(--on-dark-muted); }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.check__box { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 1px solid rgba(245, 245, 241, .4); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.check input:checked + .check__box { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.4l3.2 3.2L16 7.8' fill='none' stroke='%23151515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; border-color: var(--accent); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check input[aria-invalid="true"] + .check__box { border-color: #ff8f7a; }
.check a { color: var(--on-dark); text-underline-offset: 2px; }
.form__status { font-size: 15px; line-height: 1.5; }
.form__status:empty { display: none; }
.form__status.is-error { color: #ffb4a6; }
.form__status a { color: var(--on-dark); }
.form.is-sent { text-align: left; }
.done { display: grid; gap: 12px; padding: 8px 2px; }
.done__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15 24.5l6 6L33 18' fill='none' stroke='%23151515' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 48px no-repeat; }
.done__title { font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; }
.done__text { color: var(--on-dark-muted); }
@media (min-width: 1024px) {
  .lead__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; }
  .form { padding: 32px; }
}

/* ---------- подвал ---------- */
.ftr { padding-block: 40px 32px; font-size: 14.5px; }
.ftr__in { display: grid; gap: 24px; }
.ftr__brand p { margin-top: 6px; color: var(--muted); }
.ftr__links, .ftr__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ftr__links a { font-weight: 600; text-decoration: none; }
.ftr__links a:hover, .ftr__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ftr__legal { padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.ftr__legal a { text-decoration: none; }
.linkbtn { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .ftr__in { grid-template-columns: auto 1fr; align-items: center; } .ftr__links { justify-content: flex-end; } .ftr__legal { grid-column: 1 / -1; } }

/* ---------- просмотр скриншота ---------- */
.zoom { width: min(1280px, 100vw - 24px); max-width: none; max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: var(--r); background: #0d0d0d; overflow: hidden; }
.zoom::backdrop { background: rgba(10, 10, 10, .78); }
.zoom__img { width: 100%; height: auto; max-height: calc(100svh - 24px); object-fit: contain; }
.zoom__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 26px; line-height: 1; }

/* ---------- cookie-баннер ---------- */
.cookie {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
  display: grid; gap: 10px;
  max-width: 440px; padding: 12px 14px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(21, 21, 21, .14);
  font-size: 13px; line-height: 1.45;
}
.cookie__btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 420px) { .cookie { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.cookie__btns .btn { flex: 1 1 auto; min-height: 38px; padding: 0 10px; font-size: 13px; }
@media (min-width: 640px) { .cookie { left: auto; right: 20px; bottom: 20px; padding: 16px; font-size: 13.5px; } }

/* ---------- документы ---------- */
.doc { padding-block: 40px var(--sec); }
.doc__in { max-width: 760px; }
.doc h1 { font-family: var(--head); font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.035em; }
.doc h2 { margin-top: 36px; font-family: var(--head); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.doc p, .doc li { margin-top: 12px; color: var(--ink-2); }
.doc ul { padding-left: 20px; list-style: disc; }
.doc .meta { margin-top: 10px; color: var(--muted); font-size: 14.5px; }
.todo { background: #FFF1A8; padding: 0 4px; border-radius: 4px; font-weight: 600; }
.notice { margin-top: 24px; padding: 16px 18px; border-radius: var(--r-sm); background: #FFF1A8; font-size: 14.5px; }
.back { display: inline-flex; margin-bottom: 24px; font-weight: 600; text-decoration: none; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- появление ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* PSKRIP responsive refinement — continuous layout across small phones, tablets and desktop */
:root { --pad: clamp(14px, 3.3vw, 40px); }
.wrap, .hero__copy, .hero__visual, .plans > *, .steps > *, .works > *, .ftr__in > * { min-width: 0; }
.hero__title, .plan__name, .plan__text, .hero__lead { overflow-wrap: break-word; }
.plan__price { font-size: clamp(1.35rem, 1.08rem + .8vw, 1.65rem); white-space: normal; }
.plan { min-width: 0; }
.cookie { width: min(440px, calc(100% - 20px)); min-width: 0; }
.cookie__btns { min-width: 0; }
.cookie__btns .btn { min-width: 0; white-space: normal; text-align: center; }
[id] { scroll-margin-top: calc(var(--hdr-h) + 16px); }
@media (max-width: 419px) {
 .cookie__btns { display: grid; grid-template-columns: 1fr; }
 .cookie__btns .btn { width: 100%; }
 .hero__price-note { max-width: 100%; }
 .hero__visual { margin-inline: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
 .hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(16px, 3vw, 32px); }
 .hero__title { font-size: clamp(2.1rem, 4vw, 3.2rem); }
 .hero__visual { width: 100%; margin: 0; }
 .hero__card--contract { right: 0; }
 .hero__card--deals { left: 0; }
 .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
 .hero__in { gap: 24px; }
 .hero__visual { width: 100%; margin-right: 0; }
 .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1920px) {
 .hero__visual { max-width: 100%; margin-right: 0; }
}

/* Модальная заявка: используется существующая форма и её PHP-обработчик. */
.lead-modal {
  width: min(520px, calc(100vw - 24px)); max-width: none;
  max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
  padding: clamp(18px, 3.5vw, 28px); border-radius: 22px;
  border: 1px solid #383835; background: #151515; color: #f5f5f1;
  box-shadow: 0 32px 96px rgba(0,0,0,.28);
}
.lead-modal::backdrop { background: rgba(15,15,15,.65); backdrop-filter: blur(5px); }
.lead-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.lead-modal__head h2 { font-family:var(--head); font-size:clamp(24px,5vw,31px); font-weight:800; line-height:1.1; letter-spacing:-.035em; margin-top:6px; }
.lead-modal__head p { color: #aaa; font-size:14px; margin-top:8px; }
.lead-modal__eyebrow { font-size:10px; font-weight:700; letter-spacing:.12em; color:#c7ff3d; }
.lead-modal__close { width:42px; height:42px; flex:none; border:1px solid #454542; border-radius:50%; background:#262624; color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.lead-modal__close:hover { background:#343431; }
.lead-modal .form { padding:0; border:0; background:transparent; }
.lead-modal .field__label { color:#f5f5f1; }
.lead-modal .check a { color:#f5f5f1; }
@media (max-width: 380px) {
 .lead-modal { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:18px 14px; border-radius:16px; }
}

/* Ненавязчивый slide-in после блока цен: не блокирует страницу. */
.consult-slide {
  position: fixed; z-index: 48; right: clamp(12px, 2vw, 28px);
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(440px, calc(100vw - 24px));
  max-height: min(80dvh, 530px); overflow-y: auto;
  padding: clamp(20px, 3vw, 30px);
  background: #f5f5f1; color: #151515;
  border: 1px solid #d8dccb; border-radius: 20px;
  box-shadow: 0 14px 56px rgba(21,21,21,.19);
  transform: translateY(calc(100% + 50px));
  opacity: 0;
  transition: transform .45s var(--ease), opacity .4s ease;
}
.consult-slide[hidden] { display: none !important; }
.consult-slide.is-visible { transform: translateY(0); opacity: 1; }
.consult-slide__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 1px solid #dadad4; border-radius: 50%; background: #fff; color: #151515; font-size: 25px; line-height: 1; cursor: pointer; }
.consult-slide__eyebrow { display: block; padding-right: 40px; margin-bottom: 12px; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.consult-slide h2 { font-family: var(--head); font-size: clamp(22px, 3vw, 28px); line-height: 1.16; font-weight: 800; letter-spacing: -.035em; }
.consult-slide p { color: #50504a; font-size: 14px; line-height: 1.55; margin: 12px 0 18px; }
.consult-slide__cta { width: 100%; min-height: 46px; }
.consult-slide__later { display: block; margin: 10px auto 0; border: 0; background: transparent; color: #555; text-decoration: underline; text-underline-offset: 3px; padding: 8px 12px; cursor: pointer; }
@media (max-width: 600px) {
  .consult-slide { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-height: 58dvh; padding: 20px; border-radius: 18px; }
  .consult-slide h2 { font-size: 22px; }
  .consult-slide p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .consult-slide { transition: none; } }

/* Conversion UX v4: low-friction phone modal, portfolio CTA and mobile sticky. */
[hidden] { display: none !important; }
.portfolio-cta { margin-top: 28px; padding: clamp(22px,4vw,36px); border-radius: var(--r-lg); background: #151515; color:#f5f5f1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.portfolio-cta > div { max-width: 560px; min-width:0; }
.portfolio-cta__eyebrow { color:#c7ff3d; font-size:11px; font-weight:700; letter-spacing:.1em; }
.portfolio-cta h3 { font:800 clamp(24px,3vw,36px)/1.15 var(--head); letter-spacing:-.035em; margin:10px 0; }
.portfolio-cta p { color:#dadad6; line-height:1.55; }
.portfolio-cta .btn { flex-shrink:0; }
.mobile-sticky { position:fixed; z-index:45; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); pointer-events:none; }
.mobile-sticky .btn { display:flex; justify-content:center; width:100%; min-height:50px; box-shadow:0 8px 28px rgba(21,21,21,.22); pointer-events:auto; }
@media (min-width:768px) { .mobile-sticky { display:none !important; } }
@media (max-width:600px) { .portfolio-cta { align-items:stretch; } .portfolio-cta .btn { width:100%; justify-content:center; } .consult-slide h2 { font-size:20px; } .consult-slide p { font-size:13px; } }

/* PSKRIP v5: условия под карточками цен */
.prices__terms {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px;margin-bottom:24px}
.prices__term {min-width:0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);display:flex;flex-direction:column;gap:8px}
.prices__term strong {font-size:15px;font-weight:700;line-height:1.35}
.prices__term span {font-size:13.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:767px) {.prices__terms {grid-template-columns:1fr;gap:9px;margin-top:16px}.prices__term{padding:15px 17px;gap:5px}}
@media (min-width:768px) and (max-width:960px){.prices__terms{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v6: Portfolio responsive polish — deliberate 1/2/3-column grid */
.demos {grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;row-gap:36px;align-items:stretch}
.demos > .demo {display:flex;flex-direction:column;min-width:0;height:100%}
.demo__media {flex:0 0 auto;aspect-ratio:16/10;border-radius:18px;overflow:hidden}
.demo__media img {display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:var(--preview-pos, center top)}
.demo__body {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:start;column-gap:12px;row-gap:9px;padding:17px 3px 0;min-width:0;flex:1}
.demo__title {grid-column:1;grid-row:1;min-width:0;font-size:clamp(20px,1.65vw,27px);line-height:1.18;overflow-wrap:anywhere}
.demo__body .badge {grid-column:2;grid-row:1;align-self:start;justify-self:end;white-space:nowrap;font-size:11px;padding:6px 11px}
.demo__text {grid-column:1/-1;grid-row:2;font-size:clamp(14px,1.1vw,16px);line-height:1.5;overflow-wrap:break-word}
.demo--more {min-width:0}
.demo--more .more {min-height:0;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:26px;aspect-ratio:16/10;border-radius:18px;}
.more__title {font-size:clamp(21px,2vw,27px);line-height:1.15}
.more__text {line-height:1.5;max-width:24ch}
.more svg {top:20px;right:20px}
@media(max-width:1279px){.demos{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}}
@media(max-width:767px){.demos{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px}.demo__media{border-radius:16px}.demo__body{padding:13px 2px 0;gap:7px 10px}.demo__title{font-size:clamp(20px,5vw,25px)}.demo__text{font-size:14px}.demo--more .more{min-height:172px;aspect-ratio:auto;padding:22px}.more__title{font-size:23px}}
@media(max-width:359px){.demo__body .badge{padding:5px 9px;font-size:10px}.demo__title{font-size:20px}}
/* Compact consent panel: narrow enough not to swallow a portfolio card. */
.cookie {left:auto;right:20px;bottom:20px;width:min(340px,calc(100vw - 40px));max-width:none;grid-template-columns:minmax(0,1fr);gap:10px;padding:15px 16px;align-items:stretch;font-size:12.5px;line-height:1.45}
.cookie__btns {display:flex;justify-content:flex-end;min-width:0}
.cookie__btns .btn {flex:0 0 auto;min-width:112px;min-height:40px;padding:0 18px;font-size:13px}
@media(max-width:767px){.cookie{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;padding:14px;gap:10px}.cookie__btns{display:flex;justify-content:stretch}.cookie__btns .btn{flex:1 1 100%;width:100%;min-width:0}}

/* Portfolio: separate external live-site links; screenshot zoom remains available. */
.demo__body .project-link {grid-column:1/-1;grid-row:3;justify-self:start;margin-top:5px}
.project-link {display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 0;color:var(--ink);font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;text-underline-offset:4px}
.project-link:hover,.project-link:focus-visible {text-decoration:underline}
.project-link span {font-size:18px;transition:transform .2s ease}
.project-link:hover span {transform:translate(2px,-2px)}
.project-link--real {margin-top:18px;color:var(--accent);font-size:15px}
@media (max-width:767px){.project-link{min-height:44px}.demo__body .project-link{margin-top:3px}}
@media(prefers-reduced-motion:reduce){.project-link span{transition:none}}