/* Start:/bitrix/templates/h5script/studio.css?179421917662672*/
@font-face {
  font-family: Rubik;
  src: url("/bitrix/templates/h5script/assets/rubik-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Rubik;
  src: url("/bitrix/templates/h5script/assets/rubik-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --dark: #131412;
  --slate: #1b1e1b;
  --paper: #f0eee6;
  --stone: #dfddd2;
  --lime: #d5ff47;
  --white: #f5f4eb;
  --side: clamp(26px, 5.35vw, 102px);
  --shell-max: 1660px;
  --header-height: 82px;
  --screen-height: 100vh;
  --sans: Rubik, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

@supports (height: 100dvh) {
  :root { --screen-height: 100dvh; }
}

.h5script-body { display: flex; flex-direction: column; min-height: var(--screen-height); margin: 0; }
.h5script-home { height: var(--screen-height); overflow: hidden; }
.h5script-admin-panel { flex: none; }
.h5script-site {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-height: 0;
  color-scheme: dark;
  background: var(--dark);
  color: var(--white);
  font: 400 16px/1.5 var(--sans);
}
.h5script-page-content { padding-block: clamp(26px, 5vw, 80px); }
:where(.h5script-site), :where(.h5script-site) * { box-sizing: border-box; }
:where(.h5script-site) [hidden] { display: none !important; }
:where(.h5script-home .h5script-site, .h5script-site .studio-dialog) :is(h1, h2, h3, p, figure, fieldset) { margin: 0; }
:where(.h5script-site) :is(button, input, textarea) { color: inherit; font: inherit; }
:where(.h5script-site) :is(button, a) { -webkit-tap-highlight-color: transparent; }
:where(.h5script-site) button { cursor: pointer; }
:where(.h5script-site) a { color: inherit; text-decoration: none; }
:where(.h5script-site) img { display: block; max-width: 100%; }
.h5script-site ::selection { color: var(--dark); background: var(--lime); }
:where(.h5script-site) :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: square; stroke-linejoin: miter; }
.mono { font-family: var(--mono); letter-spacing: .07em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 30; top: 12px; left: 12px; padding: 12px 20px; transform: translateY(-200%); background: var(--lime); color: var(--dark); }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(var(--shell-max), calc(100% - var(--side) * 2)); margin-inline: auto; }

[data-tone="dark"],
[data-tone="slate"] {
  --surface: var(--dark);
  --ink: var(--white);
  --muted: #b4b8aa;
  --line: #3b4038;
  --accent: var(--lime);
  --wheel-green: var(--lime);
  --chrome-bg: rgb(19 20 18 / .93);
  --mark-ink: var(--dark);
}

[data-tone="slate"] { --surface: var(--slate); --chrome-bg: rgb(27 30 27 / .94); --line: #484d43; }

[data-tone="paper"],
[data-tone="stone"],
[data-tone="lime"] {
  --surface: var(--paper);
  --ink: #191c15;
  --muted: #51584a;
  --line: #b9beb0;
  --accent: #263716;
  --wheel-green: #456c1b;
  --chrome-bg: rgb(240 238 230 / .94);
  --mark-ink: var(--paper);
}

[data-tone="stone"] { --surface: var(--stone); --line: #aaa99b; --chrome-bg: rgb(223 221 210 / .94); --mark-ink: var(--stone); }
[data-tone="lime"] { --surface: var(--lime); --muted: #33430e; --line: #9bbb32; --chrome-bg: rgb(213 255 71 / .94); --mark-ink: var(--lime); }
[data-tone="lime"] ::selection { background: var(--dark); color: var(--lime); }

.site-header {
  position: relative;
  z-index: 10;
  inset: 0 0 auto;
  height: var(--header-height);
  color: var(--ink);
  background: var(--chrome-bg);
  backdrop-filter: blur(12px);
}

.h5script-home .site-header { position: absolute; }

.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(22px, 2.1vw, 42px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  width: fit-content;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.07em;
}

.brand-mark { flex: none; width: 35px; height: 35px; color: var(--accent); }
.brand-cut { fill: var(--mark-ink); }
.brand-rest { font-size: .91em; letter-spacing: -.07em; }
.brand b { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: clamp(15px, 2vw, 33px); }
.site-nav a { position: relative; padding-block: 12px; font-size: 14px; color: var(--muted); }
.site-nav a:is(:hover, [aria-current]) { color: var(--ink); }
.site-nav a[aria-current]::after { content: ""; position: absolute; inset: auto 0 5px; height: 1px; background: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px 11px 15px;
  border: 1px solid var(--line);
  font-size: 13px;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}

.header-cta .icon { width: 16px; height: 16px; color: var(--accent); }
.header-cta:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.header-cta:hover .icon { color: inherit; }
.header-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 43px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  font: 400 13px/1.2 var(--sans);
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.header-account .icon { width: 16px; height: 16px; color: var(--accent); }
.header-account:hover { border-color: var(--accent); }
.menu-toggle, .mobile-account { display: none; }

.screen-nav {
  position: absolute;
  z-index: 8;
  right: max(clamp(10px, 1.3vw, 34px), env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 2px;
  color: var(--ink);
}

.screen-nav a {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: end;
  width: 35px;
  height: 30px;
  color: var(--muted);
  font: 10px/1 var(--mono);
}

.screen-nav a::after { content: ""; width: 8px; height: 1px; background: currentColor; transition: width .2s ease; }
.screen-nav a span:first-child { opacity: 0; transition: opacity .2s ease; }
.screen-nav a:is(:hover, :focus-visible, [aria-current]) { color: var(--accent); }
.screen-nav a:is(:hover, :focus-visible, [aria-current]) span:first-child { opacity: 1; }
.screen-nav a[aria-current]::after { width: 14px; height: 2px; }

.screens {
  position: relative;
  height: 100%;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.screens::-webkit-scrollbar { display: none; }

.screen {
  position: relative;
  height: 100%;
  background: var(--surface);
  color: var(--ink);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.screen-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  padding-top: var(--header-height);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.screen-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden auto;
  padding-block: 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.screen-body > :first-child { flex: none; margin-block: auto; }

.screen-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 57px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.screen-footer b, .case-count b { color: var(--ink); font-weight: 400; }
.screen-footer i, .case-count i { margin-inline: 8px; font-style: normal; opacity: .7; }
.footer-end { justify-self: end; }
.next-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 43px; text-transform: uppercase; }
.next-link .icon { width: 16px; height: 16px; color: var(--accent); transition: transform .2s ease; }
.next-link:hover { color: var(--ink); }
.scroll-mouse { flex: none; width: 23px; height: 25px; fill: none; stroke-width: 1.35; stroke-linecap: round; transition: transform .22s ease; }
.scroll-mouse-outline { stroke: currentColor; }
.scroll-mouse-wheel, .scroll-mouse-tread { stroke: var(--wheel-green); }
.next-link:hover .scroll-mouse { transform: translateY(2px); }
.screen-brief .next-link:hover .icon { transform: translateY(-3px); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font: 400 12px/1.3 var(--mono);
  letter-spacing: .085em;
  text-transform: uppercase;
}

.signal { display: inline-block; flex: none; width: 7px; height: 7px; background: var(--accent); }
:where(.h5script-home .h5script-site, .h5script-site .studio-dialog) :is(h1, h2) { font-weight: 700; letter-spacing: -.074em; line-height: .94; }
:where(.h5script-home .h5script-site) h2 { font-size: clamp(62px, 7.15vw, 122px); }
:where(.h5script-home .h5script-site) :is(h1, h2) em { color: var(--accent); font-style: normal; }
.screen:is([data-tone="paper"], [data-tone="stone"]) .heading-accent { color: #416915; }
.section-intro h2, .work-copy h2, .process-intro h2 { margin-top: 23px; }
.section-lead { max-width: 370px; margin-top: 25px; color: var(--muted); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.48; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: fit-content;
  min-height: 55px;
  padding: 12px 17px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.button-accent { background: var(--lime); color: var(--dark); }
.button-accent:hover { background: var(--white); }
.button-dark { background: var(--dark); color: var(--lime); }
.button-dark:hover { background: #333b24; }
.button:disabled { opacity: .62; cursor: default; }

.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: fit-content;
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  transition: color .2s ease;
}

.text-link .icon { width: 16px; height: 16px; color: var(--accent); transition: transform .2s ease; }
.text-link:hover { color: var(--accent); }
.text-link:hover .icon { transform: translate(2px, -2px); }

.hero-stage {
  display: grid;
  grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr);
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px) clamp(20px, 3.4vw, 70px);
}
.hero-copy { min-width: 0; padding-block: 12px; }
.hero-copy .eyebrow { color: var(--white); }
.hero-copy h1 {
  margin-top: 22px;
  font-size: clamp(59px, 7.65vw, 133px);
  letter-spacing: -.041em;
  line-height: .91;
}
.hero-stage[data-hero-mode="support"] h1 { font-size: clamp(50px, 6.45vw, 112px); }
.hero-lead { min-height: 2.84em; max-width: 460px; margin-top: 25px; color: var(--muted); font-size: clamp(16px, 1.4vw, 22px); line-height: 1.42; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px 22px; margin-top: 25px; }
.hero-actions .text-link:hover .icon { transform: translateY(3px); }

.hero-gallery { position: relative; min-width: 0; }
.hero-swiper { width: 100%; min-width: 0; aspect-ratio: 16 / 10; }
.hero-swiper .swiper-slide { height: 100%; overflow: hidden; }
.hero-photo {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #4b5347;
  background: #191d17;
}
.hero-photo-image { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-hero-slide="sites"] .hero-photo { --device-top: 9.55%; --device-left: 9.95%; --device-width: 66.9%; --device-height: 62.9%; }
[data-hero-slide="promotion"] .hero-photo { --device-top: 11.8%; --device-left: 19.3%; --device-width: 61.45%; --device-height: 58.2%; }
[data-hero-slide="support"] .hero-photo { --device-top: 8.7%; --device-left: 6.25%; --device-width: 75.6%; --device-height: 64.2%; }
[data-hero-slide="design"] .hero-photo { --device-top: 4.45%; --device-left: 12.3%; --device-width: 75.45%; --device-height: 65.05%; }
.hero-device-screen {
  position: absolute;
  top: var(--device-top, 10%);
  left: var(--device-left, 14%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: var(--device-width, 63%);
  height: var(--device-height, 56%);
  overflow: hidden;
  border-radius: 1px;
  background: var(--dark);
  container-type: inline-size;
  user-select: none;
  --demo-small: clamp(4px, 1.55cqw, 9px);
  --demo-body: clamp(5px, 1.85cqw, 11px);
}
.hero-device-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(127deg, rgb(255 255 255 / .05), transparent 61%);
}

.mock-browser {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  min-height: clamp(10px, 4.9cqw, 29px);
  padding-inline: clamp(4px, 2.2cqw, 13px);
  border-bottom: 1px solid #596151;
  color: #c0c7b8;
  font-size: clamp(4px, 1.44cqw, 9px);
}
.mock-browser .browser-dots i { width: clamp(2px, .85cqw, 5px); height: clamp(2px, .85cqw, 5px); }
.mock-browser > :last-child { justify-self: end; color: var(--lime); }

.mock-product { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; color: #171a12; background: #f3f3eb; }
.mock-product-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.6cqw; padding: 1.5cqw 3.1cqw; border-bottom: 1px solid #dce0d3; font-size: var(--demo-small); }
.mock-product-nav > b { font-size: clamp(6px, 2.6cqw, 19px); letter-spacing: -.06em; white-space: nowrap; }
.mock-product-nav > b span { font-weight: 400; }
.mock-product-nav > :last-child { justify-self: end; }
.mock-product-body { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); gap: 3cqw; min-height: 0; padding: 2.6cqw 3.1cqw; }
.mock-product-media { position: relative; overflow: hidden; min-height: 0; background: #242a1c; }
.mock-product-media img { width: 100%; height: 100%; object-fit: cover; object-position: 69% center; }
.mock-product-media .mono { position: absolute; bottom: 1.1cqw; left: 1.2cqw; padding: .25cqw .7cqw; color: #e8efdb; background: #1a2017; font-size: var(--demo-small); }
.mock-product-info { display: grid; align-content: center; gap: 1.35cqw; min-width: 0; color: #464b40; font-size: var(--demo-body); line-height: 1.25; }
.mock-product-info > strong { color: #171a12; font-size: clamp(11px, 5.8cqw, 35px); line-height: 1; letter-spacing: -.055em; }
.mock-product-crumb { font-size: var(--demo-small); }
.mock-product-swatches { display: flex; align-items: center; gap: .8cqw; }
.mock-product-swatches i, .mock-design-inspect i { display: block; width: 2.15cqw; height: 2.15cqw; background: #282d23; }
.mock-product-swatches i:first-child { outline: 1px solid #747e68; outline-offset: 1px; }
.mock-product-swatches i:nth-child(2), .mock-design-inspect i:nth-child(2) { background: #768068; }
.mock-product-swatches i:nth-child(3), .mock-design-inspect i:nth-child(3) { background: #cbd6b4; }
.mock-product-swatches small { font-size: var(--demo-small); }
.mock-product-price { color: #171a12; font-size: clamp(6px, 3.4cqw, 19px); }
.mock-product-cta { display: flex; justify-content: space-between; padding: 1.35cqw 1.6cqw; color: #161b0f; background: #c7f444; font-weight: 700; }

.mock-direct { color: #1c2030; background: #f8f9fc; font: 400 var(--demo-body)/1.22 Arial, sans-serif; }
.mock-direct-head { display: flex; align-items: center; gap: 1.4cqw; min-height: 6.1cqw; padding: .6cqw 2cqw; border-bottom: 1px solid #e5e6ee; background: #fff; }
.mock-direct-head > b { display: grid; place-items: center; width: 3.9cqw; height: 3.9cqw; border-radius: 50%; background: #ff312a; color: #fff; font-size: clamp(4px, 2.45cqw, 14px); }
.mock-direct-head > strong { font-size: clamp(6px, 2.9cqw, 16px); }
.mock-direct-head > span { margin-left: auto; color: #4b5168; font-size: var(--demo-small); }
.mock-direct-body { display: grid; grid-template-columns: minmax(0, .27fr) minmax(0, .73fr); min-height: 0; }
.mock-direct-sidebar { display: grid; align-content: start; gap: 1cqw; overflow: hidden; padding: 1.6cqw 1.25cqw; border-right: 1px solid #e5e6ee; background: #fff; font-size: var(--demo-small); }
.mock-direct-sidebar > :is(span, b, strong) { padding: .85cqw 1cqw; white-space: nowrap; }
.mock-direct-sidebar > b { border: 1px solid #ebedf2; border-radius: .75cqw; }
.mock-direct-sidebar > strong { border-radius: .75cqw; color: #243fa4; background: #eef2ff; }
.mock-direct-main { min-width: 0; padding: 1.9cqw 1.8cqw; }
.mock-direct-title { display: flex; justify-content: space-between; align-items: center; gap: .8cqw; }
.mock-direct-title > strong { font-size: clamp(8px, 4.5cqw, 26px); letter-spacing: -.03em; }
.mock-direct-title > b { padding: .95cqw 1.2cqw; border-radius: .85cqw; background: #ffdc60; color: #1c2030; font-size: var(--demo-small); white-space: nowrap; }
.mock-direct-tabs { display: flex; gap: 2.5cqw; margin-top: 2.2cqw; border-bottom: 1px solid #e1e5ef; font-size: var(--demo-small); }
.mock-direct-tabs > * { padding-bottom: .85cqw; }
.mock-direct-tabs > b { border-bottom: 1px solid #425ed0; color: #243fa4; }
.mock-direct-filter { margin-block: 1.3cqw; padding: 1cqw; border: 1px solid #e0e3eb; border-radius: .7cqw; color: #5d6376; background: #fff; font-size: var(--demo-small); }
.mock-direct-table { width: 100%; table-layout: fixed; border-collapse: collapse; color: #252a3d; background: #fff; font-size: var(--demo-small); text-align: left; }
.mock-direct-table :is(th, td) { overflow: hidden; padding: 1cqw .65cqw; border-bottom: 1px solid #e6e8ef; text-overflow: ellipsis; white-space: nowrap; }
.mock-direct-table th:first-child { width: 43%; }
.mock-direct-table th:nth-child(2) { width: 31%; }
.mock-direct-table td span { padding: .3cqw .6cqw; border-radius: .65cqw; color: #176b41; background: #e5f8ec; }

.mock-terminal { color: #b8c1d1; background: #1b1f27; }
.mock-terminal .mock-browser { border-color: #384252; background: #242a34; }
.mock-terminal-body { display: grid; grid-template-columns: 24% minmax(0, 1fr); min-height: 0; }
.mock-terminal-tree, .mock-terminal-log { display: grid; align-content: start; min-width: 0; overflow: hidden; padding: 2.1cqw; }
.mock-terminal-tree { gap: .95cqw; border-right: 1px solid #363f4e; background: #222834; font-size: var(--demo-small); white-space: nowrap; }
.mock-terminal-tree strong, .mock-terminal-log strong { color: #f1f5fb; font-size: var(--demo-body); }
.mock-terminal-log { gap: 1.5cqw; background: #161b23; }
.mock-terminal-log pre { margin: 0; color: #c6d3e5; font: 400 clamp(4px, 1.5cqw, 10px)/1.52 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.mock-terminal-log pre b { color: #80c5fc; }
.mock-terminal-log pre span { color: #c2f291; }

.mock-design { color: #313740; background: #fafafb; font: 400 var(--demo-small)/1.28 Arial, sans-serif; }
.mock-design-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8cqw; min-height: 6cqw; padding: .6cqw 1.8cqw; border-bottom: 1px solid #e1e4e8; background: #fff; }
.mock-design-head > b { font-size: clamp(6px, 2.8cqw, 15px); }
.mock-design-head > strong { justify-self: end; padding: .7cqw 1cqw; border-radius: .65cqw; color: #fff; background: #287bf0; }
.mock-design-body { display: grid; grid-template-columns: minmax(0, .87fr) minmax(0, 2.62fr) minmax(0, .78fr); min-height: 0; }
.mock-design-layers, .mock-design-inspect { display: grid; align-content: start; gap: 1.3cqw; overflow: hidden; padding: 1.5cqw .8cqw; background: #fff; white-space: nowrap; }
.mock-design-layers { border-right: 1px solid #e0e4e9; }
.mock-design-inspect { border-left: 1px solid #e0e4e9; }
.mock-design-layers .is-selected { color: #225aa6; background: #e4efff; }
.mock-design-inspect > div { display: flex; gap: .55cqw; }
.mock-design-canvas { display: grid; grid-template-columns: minmax(0, 1fr) 22%; align-content: center; align-items: start; gap: 1.9cqw; min-width: 0; overflow: hidden; padding: 2.6cqw 1.8cqw; background: #e3e6ea; }
.mock-design-frame > span, .mock-design-phone > span { display: block; margin-bottom: .5cqw; color: #505965; font-size: var(--demo-small); white-space: nowrap; }
.mock-design-art { display: grid; grid-template-columns: 54% minmax(0, 1fr); min-height: 16cqw; outline: 1px solid #4f98ff; background: #f8f9ef; }
.mock-design-art img, .mock-design-phone img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.mock-design-art > div, .mock-design-phone > div { display: grid; align-content: center; gap: .95cqw; padding: 1cqw; }
.mock-design-art small { font-size: clamp(3.5px, 1.15cqw, 8px); }
.mock-design-art b { font-size: clamp(6px, 2.8cqw, 16px); }
.mock-design-art i, .mock-design-phone i { display: block; height: .6cqw; background: #bdc5b3; }
.mock-design-art em, .mock-design-phone em { padding: .65cqw; color: #1c2513; background: #c7f444; font: 700 clamp(3.8px, 1.23cqw, 8px)/1 Arial, sans-serif; }
.mock-design-phone > div { gap: .6cqw; min-height: 13cqw; background: #f8f9ef; }
.mock-design-phone img { height: 6cqw; }

.hero-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; }
.hero-stage:not(.is-ready) .hero-photo-controls { visibility: hidden; }
.hero-photo-controls {
  position: absolute;
  z-index: 3;
  inset: auto clamp(8px, 1.05vw, 20px) clamp(8px, 1.05vw, 20px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.hero-switcher, .hero-arrows .icon-button {
  border: 1px solid #889671;
  color: var(--white);
  background: rgb(19 23 16 / .94);
  box-shadow: 0 5px 20px rgb(5 8 3 / .25);
  backdrop-filter: blur(8px);
}
.hero-switcher { display: flex; pointer-events: auto; }
.hero-switcher-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: clamp(142px, 8vw, 172px);
  padding-inline: 13px;
  border-right: 1px solid #4a5541;
  font-size: clamp(12px, .75vw, 15px);
  font-weight: 700;
  white-space: nowrap;
}
.hero-index {
  --index-width: clamp(40px, 2.75vw, 53px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--slide-count, 4), var(--index-width));
}
.hero-index::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: var(--index-width);
  background: var(--lime);
  transform: translateX(calc(var(--active-slide, 0) * 100%));
  transition: transform .34s cubic-bezier(.22, .8, .25, 1);
}
.hero-index button {
  min-height: clamp(40px, 2.8vw, 51px);
  padding: 0;
  border: 0;
  color: #d5ddce;
  background: transparent;
  font: 700 clamp(12px, .72vw, 15px)/1 var(--mono);
  transition: color .2s ease;
}
.hero-index button + button { border-left: 1px solid #4a5541; }
.hero-index button:hover { color: var(--lime); }
.hero-index button[aria-current="true"] { color: var(--dark); }
.hero-index button:focus-visible { outline-offset: -4px; }
.hero-arrows { display: flex; gap: 5px; pointer-events: auto; }
.hero-arrows .icon-button { width: clamp(42px, 2.85vw, 53px); height: clamp(42px, 2.85vw, 53px); }
.hero-arrows .icon-button:hover { border-color: var(--lime); color: var(--dark); background: var(--lime); }

@media (max-width: 1050px) {
  .hero-switcher-name { position: absolute; width: 1px; height: 1px; min-width: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
}

.service-layout,
.about-layout,
.contact-layout,
.brief-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 5.25vw, 90px);
}

.service-stamp { display: flex; align-items: center; gap: 11px; margin-top: clamp(24px, 6vh, 62px); color: var(--muted); }
.service-stamp svg { width: 47px; height: 47px; }
.service-stamp .mono { font-size: 10px; line-height: 1.6; }
.services-list { border-top: 1px solid var(--line); }
.services-list details { border-bottom: 1px solid var(--line); }
.services-list summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas: "number title icon" "number price icon";
  gap: 3px 12px;
  align-items: center;
  align-content: center;
  padding: 11px 0;
  min-height: clamp(56px, 7.8vh, 82px);
  list-style: none;
  cursor: pointer;
}
.services-list summary::-webkit-details-marker { display: none; }
.row-num { grid-area: number; color: var(--muted); font-size: 12px; }
.row-title { grid-area: title; font-size: clamp(20px, 2.06vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.045em; }
.row-price { grid-area: price; color: var(--muted); font-size: clamp(11px, 1.02vw, 15px); line-height: 1.24; }
.row-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  transition: color .2s ease, background .2s ease;
}
.row-icon .icon { width: 17px; height: 17px; transition: transform .22s ease; }
details[open] .row-icon { background: var(--dark); color: var(--lime); border-color: var(--dark); }
details[open] .row-icon .icon { transform: rotate(45deg); }
summary:hover .row-icon { border-color: var(--ink); }
.service-detail { padding: 0 35px 22px 44px; }
.service-detail p { max-width: 490px; color: var(--muted); font-size: 16px; line-height: 1.46; }
.service-detail .text-link { margin-top: 9px; font-size: 13px; }

.work-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
.work-copy h2 { font-size: clamp(60px, 6.45vw, 114px); }
.case-description { margin-top: clamp(24px, 6vh, 60px); }
.case-kind { color: var(--accent); font-size: 11px; text-transform: uppercase; }
.case-description h3 { margin-top: 7px; font-size: clamp(27px, 3.1vw, 55px); font-weight: 700; letter-spacing: -.055em; line-height: 1.03; }
.case-description p { min-height: 3em; max-width: 310px; margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.47; }
.case-open { margin-top: 17px; }
.case-side { min-width: 0; }
.case-frame { overflow: hidden; border: 1px solid #50564a; background: var(--dark); }
.case-browser {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 9px;
}
.case-browser > :last-child { justify-self: end; color: var(--accent); }
.browser-dots { display: flex; align-items: center; gap: 4px; }
.browser-dots i { width: 5px; height: 5px; border: 1px solid #8a9182; border-radius: 50%; }
.browser-dots i:first-child { background: var(--accent); border-color: var(--accent); }
.case-cover { position: relative; isolation: isolate; overflow: hidden; height: clamp(245px, 46vh, 550px); color: #181712; background: #bbae95; }
.case-cover img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-cover::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(244 220 177 / .52), transparent 58%); }
.case-frame[data-case="b2b"] .case-cover { color: var(--white); background: #14202d; }
.case-frame[data-case="beauty"] .case-cover { color: #fff0e8; background: #2a1629; }
.case-frame:is([data-case="b2b"], [data-case="beauty"]) .case-cover::after { background: linear-gradient(90deg, rgb(10 7 15 / .52), transparent 68%); }

.cover-copy {
  position: absolute;
  inset: 0 auto 0 5%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: clamp(6px, 1.5vh, 18px);
  max-width: 65%;
}
.cover-copy strong { font: 700 clamp(40px, 5.5vw, 105px)/.84 var(--sans); letter-spacing: -.08em; }
.cover-copy .mono { font-size: clamp(8px, .8vw, 11px); }
.cover-rule { width: 39px; height: 1px; background: currentColor; }
.cover-tag { opacity: .9; }
.case-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 14px; }
.case-count { color: var(--muted); font-size: 12px; }
.case-dots, .case-arrows { display: flex; gap: 5px; align-items: center; }
.case-dots button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}
.case-dots button::before { content: ""; width: 17px; height: 2px; background: #7e8676; }
.case-dots button:is(:hover, [aria-pressed="true"])::before { background: var(--accent); }
.case-arrows { justify-self: end; }
.icon-button {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 1px solid var(--line);
  color: inherit;
  background: transparent;
  transition: background .2s ease, border-color .2s ease;
}
.icon-button:hover { background: var(--lime); color: var(--dark); border-color: var(--lime); }

.screen-about {
  background-image: linear-gradient(118deg, #192014, transparent 56%),
    repeating-linear-gradient(90deg, transparent 0 115px, rgb(213 255 71 / .065) 115px 116px);
}
.screen-about .section-intro .button, .screen-contacts .section-intro .button { margin-top: 23px; }
.about-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.about-card { min-width: 0; min-height: clamp(146px, 21vh, 231px); padding: clamp(14px, 2.2vw, 34px); border: 1px solid #4b5742; background: #1f261a; }
.about-card-wide { grid-column: 1 / -1; min-height: clamp(132px, 18vh, 205px); background: #232c1b; }
.about-card > .mono { color: var(--lime); font-size: 10px; }
.about-card h3 { margin-top: 8px; font-size: clamp(24px, 2.5vw, 42px); line-height: 1.07; letter-spacing: -.055em; }
.about-card p { max-width: 470px; margin-top: 9px; color: var(--muted); font-size: 15px; line-height: 1.46; }

.screen-reviews {
  background-image: linear-gradient(90deg, transparent 49.95%, rgb(52 76 0 / .14) 50%, transparent 50.1%);
}
.reviews-intro { display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.reviews-intro h2 { margin-top: 16px; font-size: clamp(59px, 6.25vw, 108px); }
.reviews-intro .heading-accent { display: inline-block; padding: .055em .15em .105em; color: #fff; background: var(--dark); }
.reviews-intro .section-lead { flex: 0 1 290px; margin-bottom: 3px; font-size: 16px; }
.reviews-carousel { min-width: 0; margin-top: clamp(20px, 4.6vh, 45px); }
.reviews-swiper { width: 100%; }
.reviews-swiper .swiper-wrapper { align-items: stretch; }
.review-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  height: auto;
  min-height: clamp(207px, 28vh, 287px);
  padding: clamp(14px, 1.9vw, 30px);
  border: 1px solid #62772d;
  background: var(--paper);
  color: #191c15;
}
.review-card-head { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 6px 9px; }
.review-source { display: flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; }
.source-mark { display: grid; place-items: center; width: 29px; height: 29px; }
.source-mark img { width: 28px; height: 28px; object-fit: contain; }
.review-example { padding: 4px 6px; border: 1px solid #b9beb0; color: #505749; font-size: 9px; }
.review-body { padding-block: clamp(13px, 2.1vh, 22px); }
.review-topic { color: #1f2718; font-size: 16px; font-weight: 700; }
.review-quote { margin-top: 5px; color: #51584a; font-size: 16px; line-height: 1.48; }
.review-person { display: grid; gap: 1px; padding-top: 11px; border-top: 1px solid #c4c8bc; font-size: 13px; }
.review-person > span { color: #51584a; font-size: 11px; }
.reviews-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2.5vw, 30px);
  margin-top: 13px;
}
.reviews-carousel:not(.is-ready) .reviews-controls { display: none; }
.reviews-position { min-width: 91px; color: var(--ink); font-size: 11px; white-space: nowrap; }
.reviews-progress.swiper-pagination-progressbar {
  position: relative;
  inset: auto;
  width: 100%;
  height: 2px;
  background: #98ae49;
}
.reviews-progress .swiper-pagination-progressbar-fill { background: var(--ink); }
.reviews-arrows { display: flex; gap: 4px; }
.reviews-arrows .icon-button:hover { border-color: var(--ink); background: var(--ink); color: var(--lime); }
.reviews-swiper:not(.swiper-initialized) .swiper-wrapper { gap: 12px; overflow-x: auto; }
.reviews-swiper:not(.swiper-initialized) .review-card { flex: 0 0 calc((100% - 24px) / 3); }
@media (max-width: 980px) {
  .reviews-swiper:not(.swiper-initialized) .review-card { flex-basis: calc((100% - 12px) / 2); }
}
@media (max-width: 640px) {
  .reviews-swiper:not(.swiper-initialized) .review-card { flex-basis: 87%; }
}

.process-intro { display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.process-intro .section-lead { flex: 0 1 clamp(270px, 16.4vw, 420px); max-width: 420px; margin-bottom: 3px; }
.process-board { margin-top: clamp(25px, 5.25vh, 62px); border: 1px solid var(--line); }
.process-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.process-tabs button {
  position: relative;
  display: grid;
  gap: 13px;
  min-width: 0;
  min-height: clamp(72px, 11vh, 128px);
  padding: 14px clamp(8px, 1.5vw, 23px);
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: background .2s ease;
}
.process-tabs button:last-child { border-right: 0; }
.process-tabs button .mono { color: var(--muted); font-size: 11px; }
.process-tabs button strong { font-size: clamp(16px, 1.72vw, 32px); line-height: 1.15; letter-spacing: -.042em; }
.process-tabs .icon { position: absolute; top: 15px; right: 14px; width: 16px; height: 16px; opacity: .65; }
.process-tabs button:hover { background: #d1d1bf; }
.process-tabs [aria-selected="true"], .process-tabs [aria-selected="true"]:hover { background: var(--dark); color: var(--lime); }
.process-tabs [aria-selected="true"] .mono { color: var(--lime); }
.process-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(245px, 31vh, 390px);
  overflow: hidden;
  padding: clamp(24px, 3.25vw, 60px);
  background: var(--paper);
}
.phase-copy { max-width: 75%; }
.phase-copy h3 { font-size: clamp(27px, 3.45vw, 58px); line-height: 1.04; letter-spacing: -.06em; }
.phase-copy p { max-width: 670px; margin-top: clamp(12px, 1.3vh, 19px); color: var(--muted); font-size: clamp(16px, 1.4vw, 23px); line-height: 1.48; }
.phase-deliverable {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.05vw, 17px);
  margin-top: clamp(18px, 2.8vh, 32px);
  padding: clamp(9px, 1vw, 15px) clamp(12px, 1.35vw, 22px);
  border-left: 2px solid #54732a;
  color: #273618;
  background: #e5ecd7;
  font-size: clamp(17px, 1.18vw, 27px);
  font-weight: 700;
  line-height: 1.25;
}
.phase-deliverable .icon { width: clamp(24px, 1.55vw, 33px); height: clamp(24px, 1.55vw, 33px); padding: 4px; color: var(--dark); background: var(--lime); }
.phase-watermark {
  position: absolute;
  z-index: -1;
  right: 3%;
  bottom: -.27em;
  color: transparent;
  -webkit-text-stroke: 1px #b8beaa;
  font-size: clamp(130px, 22vw, 340px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.095em;
}

.screen-contacts {
  background-image: repeating-linear-gradient(135deg, transparent 0 46px, rgb(84 92 76 / .075) 46px 47px);
  background-size: 46% 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.contact-stack { display: grid; gap: 12px; min-width: 0; }
.contact-board { min-width: 0; border: 1px solid var(--line); background: #f8f7f0; font-style: normal; }
.contact-channel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  padding: clamp(16px, 2.35vw, 40px);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}
.contact-channel:hover { background: #e9efda; }
.contact-channel > .mono { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.contact-channel strong { font-size: clamp(22px, 3.1vw, 53px); line-height: 1.04; letter-spacing: -.052em; }
.contact-channel .icon { color: var(--accent); }
.contact-socials { padding: clamp(10px, 1.5vw, 18px) clamp(16px, 2.35vw, 40px); border-bottom: 1px solid var(--line); }
.contact-social-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4px, .65vw, 9px); }
.social-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  min-height: clamp(37px, 3.8vw, 54px);
  padding: 6px clamp(7px, 1.05vw, 15px);
  border: 1px solid var(--dark);
  color: var(--lime);
  background: var(--dark);
  font: 700 clamp(9px, 1.05vw, 15px)/1 var(--sans);
  letter-spacing: .045em;
  transition: background .2s ease, color .2s ease;
}
.social-link .icon { width: clamp(10px, 1.3vw, 18px); height: clamp(10px, 1.3vw, 18px); transition: transform .2s ease; }
.social-link:is(:hover, :focus-visible) { color: var(--dark); background: var(--lime); }
.social-link:hover .icon { transform: translate(2px, -2px); }
.contact-meta { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: clamp(13px, 1.7vw, 25px) clamp(16px, 2.35vw, 40px); font-size: 14px; }
.contact-meta small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 9px; }
.subscribe-form { display: grid; gap: 9px; padding: clamp(12px, 1.45vw, 24px) clamp(16px, 2.35vw, 40px); border: 1px solid var(--line); background: #f8f7f0; color-scheme: light; }
.subscribe-form h3 { font-size: clamp(17px, 1.35vw, 24px); letter-spacing: -.035em; }
.subscribe-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.subscribe-fields input { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); }
.subscribe-fields .button { min-height: 44px; gap: 8px; padding: 8px 11px; font-size: 13px; }
.subscribe-topics { display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 0; border: 0; font-size: 13px; }
.subscribe-topics input { accent-color: var(--accent); }
.subscribe-status { color: var(--accent); font-size: 13px; }
.subscribe-status.form-error { color: #932f27; }

.screen-brief {
  background-image: repeating-linear-gradient(119deg, transparent 0, transparent 32px, rgb(213 255 71 / .055) 33px, transparent 34px, transparent 63px);
  background-size: 47% 100%;
  background-position: left;
  background-repeat: no-repeat;
}
.brief-layout { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
.brief-intro h2 { font-size: clamp(56px, 5.95vw, 110px); }
.brief-intro h2 em { white-space: nowrap; }
.brief-intro .section-lead { max-width: 460px; }
.brief-form {
  --brief-fill: #1d221a;
  display: grid;
  gap: clamp(16px, 2.35vh, 29px);
  min-width: 0;
  padding: clamp(22px, min(3vw, 4vh), 50px);
  border: 1px solid #4b5741;
  background: var(--brief-fill);
  box-shadow: 0 16px 50px rgb(0 0 0 / .18);
}
.brief-form-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brief-form-head .mono {
  flex: none;
  padding: 6px 9px;
  border: 1px solid #566447;
  color: var(--lime);
  font-size: clamp(11px, .83vw, 15px);
  white-space: nowrap;
}
.brief-form-head strong { font-size: clamp(27px, 2.55vw, 48px); line-height: 1.08; letter-spacing: -.045em; }
.brief-step { display: grid; gap: clamp(13px, 1.65vh, 22px); min-width: 0; padding: 0; border: 0; }
.brief-form :is(.form-label, .form-fields > label, .brief-field) { font-size: clamp(15px, .95vw, 19px); }
.brief-form .form-label { font-weight: 700; }
.brief-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, .65vw, 12px); margin: 0; padding: 0; list-style: none; }
.brief-progress button {
  display: flex;
  align-items: center;
  gap: clamp(5px, .65vw, 12px);
  width: 100%;
  height: 100%;
  min-height: clamp(43px, 5.15vh, 58px);
  padding: 7px clamp(8px, 1vw, 16px);
  border: 1px solid #45503d;
  border-bottom-width: 2px;
  color: var(--white);
  background: #262e22;
  font-size: clamp(13px, .95vw, 18px);
  line-height: 1.15;
  text-align: left;
  transition: background .18s ease, border-color .18s ease;
}
.brief-progress .mono { flex: none; color: #bac7ae; font-size: clamp(10px, .72vw, 14px); }
.brief-progress button[aria-current="step"] { border-color: #798d53; border-bottom-color: var(--lime); color: var(--lime); background: #303b23; }
.brief-progress button[aria-current="step"] .mono { color: var(--lime); }
.brief-progress button[data-completed] { border-bottom-color: #9bb43f; }
.brief-progress button[data-completed]:hover { background: #303b23; }
.brief-progress button:disabled { color: #adb6a7; background: #242922; cursor: default; }
.brief-options-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 3px 12px; }
#brief-interest-count, .brief-task-meta, .brief-selection { color: var(--muted); font-size: clamp(13px, .8vw, 16px); }
#brief-interest-count { text-align: right; }
.interests { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); }
.interest-group { grid-column: span 3; display: grid; grid-template-rows: auto 1fr 1fr; gap: clamp(6px, .7vw, 12px); min-width: 0; }
.interest-group-title { color: var(--lime); font-size: clamp(11px, .74vw, 15px); text-transform: uppercase; }
.interests > label { grid-column: span 2; }
.interests label { position: relative; min-width: 0; }
.interests input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.interest-card {
  --mark-size: clamp(19px, 1.38vw, 25px);
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  height: 100%;
  min-height: clamp(60px, 7vh, 84px);
  padding: clamp(8px, .95vw, 15px) calc(var(--mark-size) + clamp(14px, 1.05vw, 26px)) clamp(8px, .95vw, 15px) clamp(10px, 1.1vw, 18px);
  border: 1px solid #535e49;
  color: var(--white);
  background: #262e23;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.interest-card::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: clamp(7px, .8vw, 12px);
  display: grid;
  place-items: center;
  width: var(--mark-size);
  height: var(--mark-size);
  transform: translateY(-50%);
  border: 1px solid #829276;
  color: #d2dec8;
  font: 700 clamp(13px, .9vw, 17px)/1 var(--mono);
}
.interest-card strong { font-size: clamp(16px, 1.05vw, 24px); line-height: 1.16; }
.interest-card small { color: #bdc9b5; font-size: clamp(12px, .8vw, 16px); line-height: 1.3; }
.interests label:hover .interest-card { border-color: #a8c079; background: #2d3827; }
.interests input:checked + .interest-card { border-color: var(--lime); background: #303d24; }
.interests input:checked + .interest-card::after { content: "✓"; border-color: var(--lime); color: var(--dark); background: var(--lime); }
.interests input:focus-visible + .interest-card { outline: 2px solid var(--lime); outline-offset: 2px; }
.brief-selection { padding: 9px 12px; border-left: 2px solid var(--lime); background: #293124; }
.brief-task-meta { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.brief-task-meta .mono { white-space: nowrap; }
.form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: clamp(10px, 1.3vw, 20px); }
.form-fields > label, .brief-field { display: grid; gap: 7px; min-width: 0; }
.brief-form :is(input:not([type="checkbox"], [type="hidden"]), textarea) {
  min-width: 0;
  width: 100%;
  min-height: clamp(47px, 5.15vh, 60px);
  padding: 10px clamp(11px, 1.15vw, 18px);
  border: 1px solid #59664e;
  border-radius: 0;
  background: var(--dark);
  font-size: clamp(16px, .95vw, 19px);
}
.brief-form :is(input, textarea)::placeholder { color: #a5ab9d; opacity: 1; }
.brief-form :is(input, textarea):focus-visible { outline: 2px solid var(--lime); outline-offset: 0; }
.brief-form textarea { resize: vertical; min-height: clamp(112px, 14vh, 175px); max-height: 260px; }
.brief-captcha { display: flex; flex-wrap: wrap; align-items: end; gap: 9px 14px; }
.brief-captcha img { margin-bottom: 4px; }
.brief-captcha label { flex: 1 1 120px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: clamp(13px, 1.55vh, 22px); border-top: 1px solid #424d3c; }
.form-actions .button { min-height: clamp(48px, 5.5vh, 62px); margin-left: auto; padding-inline: clamp(16px, 1.5vw, 25px); font-size: clamp(15px, 1.02vw, 18px); }
.form-actions .text-link { min-height: 38px; padding-block: 8px; }
.form-actions .text-link:hover .icon { transform: translateX(-3px); }
.brief-result { display: grid; gap: 5px; padding: 9px 13px; border-left: 2px solid currentColor; color: var(--lime); background: #283124; font-size: clamp(14px, .88vw, 17px); }
.brief-result.form-error { color: #ffc2a9; background: #342923; }

.studio-dialog {
  --ink: #191c15;
  --muted: #51584a;
  --accent: #263716;
  --line: #b9beb0;
  width: min(640px, calc(100% - 30px));
  max-height: calc(var(--screen-height) - 30px);
  padding: 0;
  border: 1px solid #78806f;
  color: var(--ink);
  background: var(--paper);
  color-scheme: light;
}
.studio-dialog::backdrop { background: rgb(10 12 9 / .76); backdrop-filter: blur(5px); }
.dialog-inner { position: relative; padding: clamp(24px, 5vw, 62px); }
.dialog-close { position: absolute; top: 12px; right: 12px; }
.dialog-inner .eyebrow { max-width: calc(100% - 35px); }
.dialog-inner h2 { margin-top: 18px; font-size: clamp(39px, 7vw, 73px); }
.dialog-brief { margin-top: 20px; color: var(--muted); }
.dialog-points { display: grid; gap: 10px; margin-block: 22px 26px; padding-left: 20px; }
.dialog-points li::marker { color: var(--accent); }
.account-page { max-width: 900px; }
.account-page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.account-page-head h1 { margin: 0; font-size: clamp(34px, 4.3vw, 66px); line-height: 1; letter-spacing: -.06em; }
.account-page .bx-auth-profile { overflow-x: auto; }
.h5script-page-content :is(.bx-auth, .bx-auth-profile) { max-width: 100%; }
.h5script-page-content :is(.bx-auth, .bx-auth-profile) a { color: var(--lime); }
.h5script-page-content :is(.bx-auth, .bx-auth-profile) :is(input[type="text"], input[type="password"], input[type="email"], select, textarea) {
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--slate);
  font: inherit;
}
.h5script-page-content :is(.bx-auth, .bx-auth-profile) input[type="submit"] {
  padding: 8px 12px;
  border: 1px solid transparent;
  color: var(--dark);
  background: var(--lime);
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-mouse-tread { animation: scroll-wheel 1.9s linear infinite; }
  @keyframes scroll-wheel {
    0%, 42% { transform: translateY(0); }
    75%, 100% { transform: translateY(3px); }
  }

  .screen[data-entered] :is(.hero-copy, .section-intro, .work-copy, .reviews-intro, .process-intro) {
    animation: screen-enter .46s cubic-bezier(.2, .7, .25, 1) both;
  }
  .screen[data-entered] :is(.hero-gallery, .services-list, .case-side, .about-board, .reviews-carousel, .process-board, .contact-stack, .brief-form) {
    animation: screen-enter .54s cubic-bezier(.2, .7, .25, 1) .06s both;
  }
  @keyframes screen-enter {
    from { opacity: .48; transform: translateY(13px); }
    to { opacity: 1; transform: none; }
  }

  .case-cover img:not([hidden]) { animation: cover-enter .48s cubic-bezier(.2, .7, .25, 1) both; }
  @keyframes cover-enter {
    from { opacity: .6; transform: scale(1.032); }
    to { opacity: 1; transform: scale(1); }
  }
}

@media (min-width: 1600px) {
  :root {
    --side: clamp(72px, 4.75vw, 145px);
    --shell-max: clamp(2400px, 79vw, 3000px);
    --header-height: clamp(82px, 4.15vw, 106px);
  }
  .brand { font-size: clamp(24px, 1.28vw, 33px); }
  .brand-mark { width: clamp(35px, 1.8vw, 46px); height: auto; }
  .site-nav { gap: clamp(23px, 1.45vw, 36px); }
  .site-nav a { font-size: clamp(15px, .76vw, 19px); }
  .header-cta, .header-account { min-height: clamp(43px, 2.1vw, 54px); padding-inline: clamp(12px, .8vw, 20px); font-size: clamp(13px, .65vw, 17px); }
  .screen-nav a { width: 42px; height: clamp(30px, 1.4vw, 36px); font-size: 12px; }
  .screen-nav a::after { width: 11px; }
  .screen-nav a[aria-current]::after { width: 21px; }
  .screen-footer { min-height: clamp(58px, 3vw, 75px); font-size: clamp(11px, .57vw, 14px); }
  .eyebrow { font-size: clamp(12px, .65vw, 16px); }
  :where(.h5script-home .h5script-site) h2 { font-size: clamp(114px, 7vw, 162px); }
  .section-lead { max-width: 470px; font-size: clamp(20px, 1.15vw, 27px); }
  .hero-copy h1 { font-size: clamp(122px, 7.4vw, 174px); }
  .hero-stage[data-hero-mode="support"] h1 { font-size: clamp(103px, 6.25vw, 150px); }
  .hero-lead { max-width: 570px; font-size: clamp(21px, 1.1vw, 28px); }
  .hero-gallery { width: 100%; max-width: max(600px, calc((var(--screen-height) - var(--header-height) - 136px) * 1.6)); justify-self: end; }
  .work-layout { gap: clamp(66px, 4.3vw, 108px); }
  .work-copy h2 { font-size: clamp(103px, min(6.4vw, 16.2vh), 156px); }
  .case-description h3 { font-size: clamp(49px, 3vw, 71px); }
  .case-description p { max-width: 500px; font-size: clamp(17px, .94vw, 24px); }
  .case-kind, .case-count { font-size: clamp(11px, .58vw, 14px); }
  .case-browser { min-height: clamp(34px, 1.7vw, 45px); font-size: clamp(9px, .52vw, 13px); }
  .case-cover { height: clamp(245px, min(55vh, 30vw), clamp(740px, 24vw, 930px)); }
  .cover-copy strong { font-size: clamp(86px, 5.25vw, 138px); }
  .cover-copy .mono { font-size: clamp(11px, .57vw, 14px); }
  .case-arrows .icon-button { width: clamp(43px, 2.25vw, 57px); height: clamp(43px, 2.25vw, 57px); }
  .row-price, .case-open { font-size: clamp(15px, .84vw, 20px); }
  .row-title { font-size: clamp(32px, 2vw, 48px); }
  .reviews-intro h2, .brief-intro h2 { font-size: clamp(100px, 6vw, 146px); }
}

@media (min-width: 1600px) and (max-height: 900px) {
  .hero-copy h1 { font-size: clamp(110px, 18vh, 158px); }
  .hero-stage[data-hero-mode="support"] h1 { font-size: clamp(95px, 16.25vh, 140px); }
  .case-description { margin-top: clamp(21px, 4vh, 36px); }
  .process-intro h2 { font-size: clamp(105px, 14.5vh, 134px); }
  .process-board { margin-top: clamp(22px, 3.4vh, 34px); }
  .process-panel { padding: clamp(23px, 3.65vh, 37px); }
  .phase-copy p { max-width: 800px; }
  .screen-brief .screen-body { padding-block: 18px; }
  .brief-form { gap: 16px; padding-block: 24px; }
  .interest-card { padding-block: 9px; }
}

@media (max-width: 1120px) {
  .screen-nav a { width: 30px; }
  .case-cover { height: clamp(245px, 42vh, 440px); }
}

@media (max-width: 900px) {
  :root { --side: clamp(20px, 5vw, 45px); --header-height: 69px; }
  .site-nav { gap: 19px; }
  .site-nav a { font-size: 13px; }
  .header-inner { gap: 15px; }
  .brand { gap: 7px; font-size: 21px; }
  .brand-mark { width: 31px; height: 31px; }
  .screen-nav { display: none; }
  .service-layout, .about-layout, .contact-layout, .brief-layout { gap: 23px; }
  .work-layout { gap: 24px; }
  :where(.h5script-home .h5script-site) h2, .work-copy h2, .reviews-intro h2, .brief-intro h2 { font-size: clamp(52px, 7.2vw, 73px); }
  .section-lead { margin-top: 18px; }
  .services-list summary { grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; }
  .service-detail { padding-left: 30px; }
  .service-detail p { font-size: 14px; }
  .row-icon { width: 33px; height: 33px; }
  .case-cover { height: clamp(222px, 36vh, 345px); }
}

@media (max-width: 1120px) {
  .brief-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .brief-intro h2 br { display: none; }
  .brief-intro .section-lead { max-width: 640px; }
  .screen-brief .screen-body { padding-bottom: 0; }
  .form-actions { position: sticky; z-index: 2; bottom: 0; padding-bottom: 8px; background: var(--brief-fill); }
  .header-inner { grid-template-columns: 1fr auto; }
  .site-nav {
    position: absolute;
    inset: calc(var(--header-height) - 1px) var(--side) auto;
    display: none;
    align-items: stretch;
    max-height: calc(var(--screen-height) - var(--header-height) - 15px);
    padding: 5px 16px;
    overflow-y: auto;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 10px 28px rgb(0 0 0 / .22);
  }
  .site-nav.is-open { display: grid; gap: 0; }
  .site-nav a { font-size: 15px; }
  .site-nav a + a { border-top: 1px solid var(--line); }
  .site-nav a[aria-current]::after { inset: 12px 0 12px auto; width: 2px; height: auto; }
  .header-cta { min-height: 36px; padding: 6px 8px; gap: 5px; font-size: 11px; }
  .header-cta .icon { width: 13px; height: 13px; }
  .header-account { min-height: 37px; font-size: 12px; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 37px; height: 37px; padding: 0; border: 1px solid var(--line); background: transparent; }
  .menu-toggle span { width: 16px; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
}

@media (max-width: 700px) {
  :root { --side: clamp(17px, 5vw, 33px); --header-height: 62px; }
  .header-inner { gap: 7px; }
  .header-actions { gap: 4px; }
  .header-cta { padding-inline: 5px; gap: 4px; font-size: 10.5px; }
  .header-account { width: 36px; min-height: 37px; padding: 0; }
  .header-account span { display: none; }
  .mobile-account {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 0;
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--ink);
    background: transparent;
    font: 400 15px/1.2 var(--sans);
    text-align: left;
  }
  .mobile-account .icon { width: 16px; height: 16px; color: var(--accent); }
  .screen-body { padding-block: 16px; }
  .screen-footer { grid-template-columns: auto 1fr; min-height: 45px; font-size: 10px; }
  .screen-footer .next-link { justify-self: end; min-height: 42px; gap: 7px; }
  .footer-end { display: none; }
  .eyebrow { font-size: 10px; }
  .signal { width: 6px; height: 6px; }
  .section-intro h2, .work-copy h2, .process-intro h2 { margin-top: 12px; }
  :where(.h5script-home .h5script-site) h2, .work-copy h2, .reviews-intro h2, .brief-intro h2 { font-size: clamp(42px, 11vw, 70px); }
  .section-lead { margin-top: 12px; font-size: 15px; }
  .button { min-height: 48px; padding: 9px 11px; gap: 10px; font-size: 13px; }
  .button .icon { width: 18px; height: 18px; }
  .text-link { font-size: 12px; }


  .service-layout, .about-layout, .contact-layout, .brief-layout, .work-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .service-stamp { display: none; }
  .services-list summary { gap: 2px 8px; min-height: 49px; padding-block: 5px; }
  .row-title { font-size: clamp(17px, 5vw, 27px); }
  .row-price { font-size: 11px; }
  .service-detail { padding: 0 3px 12px 30px; }
  .service-detail .text-link { margin-top: 5px; }

  .work-layout { gap: 15px; }
  .work-copy h2 br { display: none; }
  .case-description { margin-top: 12px; }
  .case-kind { font-size: 9px; }
  .case-description h3 { margin-top: 4px; font-size: 29px; }
  .case-description p { min-height: 0; max-width: 385px; margin-top: 5px; font-size: 14px; }
  .case-open { margin-top: 7px; }
  .case-cover { height: clamp(156px, 28vh, 270px); }
  .cover-copy strong { font-size: clamp(35px, 9vw, 64px); }
  .case-browser { min-height: 26px; }
  .case-controls { margin-top: 6px; }
  .case-arrows .icon-button { width: 38px; height: 38px; }


  .process-intro { display: block; }
  .process-intro .section-lead { margin-bottom: 0; }
  .process-board { margin-top: 17px; }
  .process-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-tabs button { min-height: 61px; gap: 5px; padding: 8px 10px; }
  .process-tabs button:nth-child(even) { border-right: 0; }
  .process-tabs button strong { font-size: clamp(14px, 3.85vw, 20px); }
  .process-tabs .icon { top: 7px; right: 7px; width: 13px; height: 13px; }
  .process-panel { min-height: 225px; padding: 19px; }
  .phase-copy { max-width: 96%; }
  .phase-copy p { margin-top: 10px; }

}

@media (max-width: 360px) {
  .brand { gap: 5px; font-size: 18px; }
  .brand-mark { width: 27px; height: 27px; }
  .header-inner { gap: 7px; }
  .header-actions { gap: 4px; }
}

@media (max-width: 340px) {
  .header-cta { font-size: 0; gap: 0; justify-content: center; width: 33px; }
}

@media (max-height: 640px) and (min-width: 701px) {
  :root { --header-height: 59px; }
  .screen-body { padding-block: 15px; }
  .screen-footer { min-height: 43px; }
  .service-stamp { margin-top: 17px; }
  .case-description { margin-top: 16px; }
}

@media (max-height: 670px) and (max-width: 700px) {
  .screen-body { padding-block: 9px; }
  :is(.screen-hero, .screen-services) .screen-body { padding-block: 6px; }
  .screen-brief .screen-body { padding-top: 6px; }
  .section-intro h2, .work-copy h2, .process-intro h2 { margin-top: 8px; }
  :where(.h5script-home .h5script-site) h2, .work-copy h2, .reviews-intro h2, .brief-intro h2 { font-size: clamp(36px, 10vw, 48px); }
  .section-lead { margin-top: 8px; font-size: 14px; }
  .service-layout, .about-layout, .contact-layout, .brief-layout { gap: 12px; }
  .work-layout { gap: 10px; }

  .services-list summary { min-height: 42px; padding-block: 3px; }
  .row-title { font-size: 17px; }
  .row-price { font-size: 10.5px; }
  .service-detail { padding-bottom: 5px; }
  .service-detail p { font-size: 12.5px; line-height: 1.35; }

  .case-cover { height: clamp(144px, 26vh, 175px); }
  .case-open { margin-top: 5px; }


}

@media (max-width: 900px) {
  .hero-stage { gap: 20px; }
  .hero-copy h1 { font-size: clamp(56px, 7.55vw, 76px); }
  .hero-stage[data-hero-mode="support"] h1 { font-size: clamp(47px, 6.3vw, 64px); }
}

@media (max-width: 700px) {
  .hero-stage { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .hero-copy { padding: 0; }
  .hero-copy h1 { margin-top: 12px; font-size: clamp(43px, 13.1vw, 78px); }
  .hero-stage[data-hero-mode="support"] h1 { font-size: clamp(40px, 11.6vw, 72px); }
  .hero-lead { margin-top: 13px; font-size: 15px; }
  .hero-actions { gap: 9px 14px; margin-top: 15px; }
  .hero-arrows .icon { width: 16px; height: 16px; }
  .reviews-intro { display: block; }
  .reviews-intro h2 { margin-top: 10px; }
  .reviews-intro .section-lead { font-size: 14px; }
  .reviews-carousel { margin-top: 17px; }
  .reviews-controls { gap: 12px; margin-top: 8px; }
  .reviews-position { min-width: 56px; font-size: 10px; }
  .reviews-arrows .icon-button { width: 35px; height: 35px; }
  .review-quote { font-size: 14px; }
  .review-card { min-height: 194px; }
  .screen-about .section-intro .button, .screen-contacts .section-intro .button { margin-top: 13px; }
  .about-board { gap: 6px; }
  .about-card { min-height: 123px; padding: 10px; }
  .about-card-wide { min-height: 100px; }
  .about-card h3 { margin-top: 3px; font-size: clamp(18px, 5vw, 28px); }
  .about-card p { margin-top: 5px; font-size: 13px; }
  .contact-meta { font-size: 13px; }
  .screen-brief { background-size: 100% 100%; }
  .brief-form { gap: 15px; padding: clamp(14px, 3.7vw, 23px); }
  .brief-form-head strong { font-size: clamp(25px, 5.75vw, 34px); }
  .brief-step { gap: 13px; }
  .brief-progress button { min-height: 44px; }
  .interests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interest-group { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 7px 8px; }
  .interest-group-title { grid-column: 1 / -1; }
  .interests > label { grid-column: auto; }
  .interests > label:last-child { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .brief-progress button { flex-direction: column; align-items: start; justify-content: center; gap: 3px; }
  .interest-card { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; padding: 10px; }
  .interest-card::after { --mark-size: 16px; position: static; grid-area: 2 / 2; align-self: end; transform: none; }
  .interest-card strong { grid-column: 1 / -1; font-size: clamp(14px, 3.85vw, 17px); letter-spacing: -.02em; }
  .interest-card small { grid-area: 2 / 1; }
  .form-fields:first-of-type { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
  .interests, .interest-group { grid-template-columns: minmax(0, 1fr); }
  .interest-group { grid-template-rows: auto; }
}

@media (max-height: 670px) and (max-width: 700px) {
  .hero-stage { gap: 9px; }
  .hero-copy h1 { font-size: clamp(39px, 12.2vw, 60px); }
  .hero-stage[data-hero-mode="support"] h1 { font-size: clamp(36px, 10.9vw, 54px); }
  .hero-lead { margin-top: 10px; }
  .hero-actions { margin-top: 10px; }
  .hero-actions .button { min-height: 42px; }
  .hero-actions .text-link { font-size: 11px; }
  .reviews-intro h2 { font-size: clamp(36px, 10vw, 48px); }
  .about-card { min-height: 109px; }
  .about-card-wide { min-height: 85px; }
}

@media (max-width: 340px) {
  .hero-actions { column-gap: 8px; }
  .about-board { grid-template-columns: minmax(0, 1fr); }
  .about-card {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 7px;
    min-height: 0;
    padding: 8px;
  }
  .about-card > .mono { display: none; }
  .about-card h3 { margin: 0; font-size: 15px; }
  .about-card p { margin: 0; font-size: 12px; line-height: 1.3; }
}

@media (max-width: 340px) and (max-height: 620px) {
  .hero-stage { row-gap: 7px; }
  .hero-lead { margin-top: 8px; font-size: 14px; }
  .hero-actions { margin-top: 8px; }
  .screen-about .section-intro .button { min-height: 42px; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* End */
/* /bitrix/templates/h5script/studio.css?179421917662672 */