/* собрано versiya.py из css/style.css, css/uslugi.css, css/etapy.css, css/hero.css, css/kejsy.css, css/navigaciya.css, css/zayavka.css, css/raboty.css — не править, правятся исходники */
/* style.css */
:root {
  --studio: #E9EBEE;
  --graphite: #16181C;
  --second: #4A4F57;
  --alu: #C4C9D1;
  --signal: #FF5A1F;
  --font: 'Geologica', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --pad: clamp(20px, 3.3vw, 48px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2v17l4.5-4.2 3 6.7 2.8-1.2-2.9-6.6h6.1z' fill='%2316181C' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M3.7 3.6v4.4h4.9z' fill='%23FF5A1F'/%3E%3C/svg%3E") 3 2, default;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-tap-highlight-color: transparent;
  cursor: var(--arrow);
  background: var(--studio);
  overscroll-behavior: none;
  scrollbar-width: thin;
  scrollbar-color: var(--alu) transparent;
}
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-thumb { background: var(--alu); border-radius: 3px; }
body {
  font-family: var(--font);
  color: var(--graphite);
  background: radial-gradient(130% 95% at 42% 28%, #F3F4F6 0%, #E9EBEE 52%, #DFE2E6 100%) fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a, button, label, .chip { cursor: var(--arrow); color: inherit; }
input, textarea { cursor: text; }
button { font: inherit; background: none; border: 0; }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#tone { position: fixed; inset: 0; background: #17191D; opacity: 0; z-index: 0; pointer-events: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
#track { position: relative; z-index: 0; pointer-events: none; }
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  pointer-events: none;
  transition: background-color .25s, color .3s;
}
.solidtop .top { background: var(--studio); }
.dark .top, .dark .about-text { color: var(--studio); }
.dark .about-name { color: #AEB3BB; }
.top > * { pointer-events: auto; }
.logo { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; text-decoration: none; padding: 12px 0; display: inline-block; }
.top-right { display: flex; align-items: center; gap: 12px; }
.layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; visibility: hidden; }
.ia { pointer-events: auto; }
#L-hero { opacity: 1; visibility: visible; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 24px; border-radius: 12px;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.btn-dark { background: var(--graphite); color: var(--studio); }
@media (hover: hover) and (pointer: fine) { .btn-dark:hover { background: #2A2D33; } }
.btn-dark:active { background: #000; }
@font-face {
  font-family: 'Geologica Fallback'; font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial');
  size-adjust: 100.5%; ascent-override: 97.5%; descent-override: 27.5%; line-gap-override: 0%;
}
.hero-text { position: absolute; left: var(--pad); bottom: clamp(24px, 2.5vw, 40px); }
.offer {
  font-family: 'Geologica', 'Geologica Fallback', system-ui, sans-serif;
  font-weight: 600; font-size: clamp(36px, 4vw, 64px); line-height: .94; letter-spacing: -0.035em;
  text-wrap: balance;
}
.offer .nw { white-space: nowrap; }   
.offer-l2 { display: block; }   
.case-text { position: absolute; left: 63%; width: min(400px, 31vw); }
.case-text { top: calc(50% - var(--case-h, 240px) / 2); }
.case-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin: 0 0 14px -10px; }
.case-count { font-size: 12px; color: var(--second); min-width: 6ch; text-align: center; }
.case-arrow { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--second); transition: color .2s, background-color .2s; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { .case-arrow:hover { color: var(--graphite); background: rgba(22, 24, 28, .06); } }
.case-arrow:active { background: rgba(22, 24, 28, .1); }
.case-arrow:focus-visible { outline: 1.5px solid var(--graphite); outline-offset: 1px; }
.case-arrow:disabled { opacity: .3; pointer-events: none; }   
.case-name { font-size: clamp(30px, 3vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.case-phrase { margin-top: 16px; font-size: 18px; line-height: 1.45; color: var(--second); max-width: 26ch; min-height: calc(3 * 1.45em); }
.case-fig { margin-top: 22px; font-size: 15px; color: var(--graphite); }
.drops-row { display: none; }
#L-opyt { --op-x: clamp(64px, 6vw, 112px); }
.op-cl, .op-cr { position: absolute; inset: 0; overflow: hidden; will-change: transform; }   
.bands { position: absolute; inset: 0; overflow: hidden; perspective: 1400px; will-change: transform; }
.bands-inner { position: absolute; left: 0; right: 0; top: 0; will-change: transform; transform-origin: var(--op-x) 50%; }
.band { height: 50vh; min-height: 260px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-content: center; align-items: center; padding: 0 var(--op-x); position: relative; overflow: visible clip; isolation: isolate; }
.band::before { content: ''; position: absolute; inset: -8px -40px; z-index: -1; background-image: var(--bg, none); background-size: 100% 100%; transform: translate3d(var(--btx, 0px), var(--bty, 0px), 0); will-change: transform; }
.claim b { display: block; font-weight: 600; font-size: clamp(56px, 7.4vw, 124px); line-height: .9; letter-spacing: -0.05em; }
.claim span { display: block; margin-top: 12px; font-size: 18px; color: var(--second); }
.band-k { display: block; font-size: 12px; color: var(--second); margin-bottom: 10px; }
.band-body p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; max-width: 34ch; color: var(--graphite); text-wrap: balance; }
.band-4 { color: var(--studio); }
.band-4 .claim span, .band-4 .band-k { color: #C9CDD3; }
.band-4 .band-body p { color: var(--studio); }
.band-4[data-v="b"] .claim b { font-size: clamp(40px, 5.6vw, 92px); white-space: nowrap; }
.about-text { position: absolute; left: 58%; top: 50%; transform: translateY(-50%); width: min(470px, 36vw); }
.about-phrase { font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; text-wrap: balance; }
.about-more { margin-top: 16px; font-size: 16px; line-height: 1.55; opacity: .78; text-wrap: pretty; }
.about-name { margin-top: 22px; font-size: 13px; color: var(--second); }
#L-cases, #L-form { will-change: opacity; }
.order { display: flex; flex-direction: column; gap: 14px; }
.order-title { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.03em; margin-bottom: 8px; }
.slot { display: block; border-radius: 12px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--alu); }
.slot input, .slot textarea { width: 100%; border: 0; outline: 0; background: transparent; font: 500 18px/1.4 var(--font); letter-spacing: -0.01em; color: var(--graphite); padding: 13px 16px; resize: none; display: block; }
.slot textarea { min-height: 78px; }
.slot input::placeholder, .slot textarea::placeholder { color: #6B717A; }
.slot:focus-within { box-shadow: inset 0 0 0 1.5px var(--graphite); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; color: var(--second); box-shadow: inset 0 0 0 1px var(--alu); transition: background-color .2s, color .2s; }
.chip[aria-pressed="true"] { background: var(--graphite); color: var(--studio); box-shadow: none; }
.order-foot { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.order-done { font-size: 13px; }
.tags { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; opacity: 0; will-change: transform, opacity; display: flex; flex-direction: column; }
.drop-tag { transform-origin: 50% 0; white-space: nowrap; text-align: center; }
.badge {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  font-size: 11px; line-height: 1.4; padding: 3px 7px; border-radius: 5px;
  background: var(--graphite); color: var(--studio);
  opacity: 0; transition: opacity .15s;
}
.badge.on { opacity: 1; }
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  .top { padding: 12px 16px; }
  .top-right { gap: 4px; }
  .hero-text { left: 16px; right: 16px; bottom: 28px; }
  .offer { font-size: min(34px, 8.9vw); }   
  .offer-l2 { display: inline; }   
  .case-text { left: 16px; right: 16px; width: auto; top: calc(100% - 176px - var(--case-h, 200px)); }   
  .case-nav { margin: 0 0 6px -10px; }
  .case-arrow { width: 44px; height: 44px; }
  .case-phrase { font-size: 16px; margin-top: 10px; }
  .case-fig { margin-top: 12px; font-size: 13.5px; }
  .drops-row { display: flex; position: absolute; left: 0; right: 0; bottom: 24px; gap: 14px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .drops-row::-webkit-scrollbar { display: none; }
  .drops-row a { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; font-size: 11px; font-family: var(--mono); width: 84px; text-align: center; }
  .drops-row img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 4px 10px rgba(22,24,28,.18); }
  #L-opyt { --op-x: 16px; }
  .band { grid-template-columns: 1fr; gap: 16px; padding: 64px var(--op-x) 0; }
  .claim b { font-size: 60px; }
  .band-4[data-v="b"] .claim b { font-size: 44px; }
  .claim span { font-size: 15px; margin-top: 6px; }
  .band-body p { font-size: 15px; }
  .about-text { left: 16px; right: 16px; width: auto; top: auto; bottom: 40px; transform: none; }
  .about-phrase { font-size: 25px; }
  .about-more { font-size: 14px; margin-top: 10px; }
  .about-more + .about-more { display: none; }   
  .order { gap: 10px; }
  .order-title { font-size: 26px; margin-bottom: 2px; }
  .slot input, .slot textarea { font-size: 17px; padding: 12px 14px; }
  .slot textarea { min-height: 70px; }
  .chip { height: 44px; font-size: 13px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .chip { transition-duration: .2s; }
}
#L-services .uslugi { position: absolute; left: var(--pad); right: var(--pad); top: var(--us-top); will-change: transform; }   
#L-process .proc-root { position: absolute; inset: 0; will-change: transform; --et-top: 96px; }   
@media (max-height: 799px) { #L-process .proc-root { --et-top: 80px; } }
#L-process .proc-root.et-narrow { inset: 0 0 auto 0; padding-top: calc(var(--top-h, 86px) + 16px); }   
#L-process .cut-line { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--graphite); transform-origin: 50% 0; opacity: 0; pointer-events: none; z-index: 2; }   
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  #L-services .uslugi { left: 16px; right: 16px; top: 0; transform: none; padding-top: 72px; padding-bottom: 32px; }
  #L-process .proc-root.et-narrow { --top-h: 68px; }   
}
/* uslugi.css */
.uslugi {
  --us-line: 1px;
  --us-leader: 18px;
  --us-top: 96px;
  --us-rest-ratio: 0.57;
  --us-stage-ratio: 1;
  --us-rest-mob: 180px;
  --us-stage-mob: 232px;
}
@media (max-height: 799px) { .uslugi { --us-top: 80px; } }
.uslugi .us-h {
  font-size: clamp(40px, 4.4vw, 72px); font-weight: 600; line-height: .92; letter-spacing: -0.035em;
}
.uslugi .us-row { position: relative; margin-top: 4px; }
.uslugi .us-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.uslugi .us-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uslugi .us-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.uslugi .us-stage {
  position: relative; width: 100%; height: 0; z-index: 1;
  padding-bottom: calc(var(--us-stage-ratio) * 100%);
}
.uslugi .us-hit {
  position: absolute; inset: 0 8%; border-radius: 20px; z-index: 2;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.uslugi .us-hit:focus { outline: none; }
.uslugi .us-hit:focus-visible { outline: 2px solid var(--graphite); outline-offset: 0; }
.uslugi .us-text { position: relative; z-index: 1; width: 100%; max-width: 300px; padding: 12px 12px 0; }
.uslugi .us-text h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.uslugi .us-lines { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--second); }
.uslugi .us-lines span { display: block; }
.uslugi .us-kinds { margin-top: 10px; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--graphite); visibility: hidden; }
.uslugi .is-open .us-kinds { visibility: visible; }
.uslugi .us-parts { list-style: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; }
.uslugi .us-parts.us-vis { visibility: visible; }
.uslugi .us-parts li {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.3; white-space: nowrap; color: var(--graphite);
  opacity: 0; will-change: transform, opacity;
}
.uslugi .us-parts li::before { content: ''; flex: none; width: var(--us-leader); height: var(--us-line); background: var(--graphite); }
.uslugi .us-parts li.us-left::before { order: 1; }
.uslugi .us-n { color: var(--second); min-width: 1ch; }
.uslugi.us-below { --us-stage-ratio: 0.78; }
.uslugi.us-below .us-parts { position: static; display: none; visibility: visible; width: 100%; max-width: 300px; margin-top: 12px; padding: 0 12px; z-index: auto; }
.uslugi.us-below .is-open .us-parts { display: block; }
.uslugi.us-below .us-parts li {
  position: static; justify-content: center; opacity: 1 !important; transform: none !important; white-space: normal;
  padding: 8px 0; font-size: 12px; border-top: var(--us-line) solid var(--alu);
}
.uslugi.us-below .us-parts li:last-child { border-bottom: var(--us-line) solid var(--alu); }
.uslugi.us-below .us-parts li::before { display: none; }
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  .uslugi .us-h { font-size: 40px; }
  .uslugi .us-list { grid-template-columns: 1fr; row-gap: 28px; }
  .uslugi .us-item { align-items: stretch; text-align: left; }
  .uslugi .us-stage { padding-bottom: 0; height: var(--us-stage-mob); }
  .uslugi .us-hit { inset: 0; }
  .uslugi .us-text { padding: 0; max-width: none; }
  .uslugi .us-text h3 { font-size: 21px; }
  .uslugi .us-lines { font-size: 15px; margin-top: 6px; }
  .uslugi .us-kinds { display: none; }
  .uslugi .is-open .us-kinds { display: block; font-size: 13px; margin-top: 12px; }
}
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  .uslugi .us-parts { position: static; display: none; visibility: visible; margin-top: 12px; z-index: auto; }
  .uslugi .is-open .us-parts { display: block; }
  .uslugi .us-parts li {
    position: static; opacity: 1 !important; transform: none !important; white-space: normal;
    gap: 12px; padding: 11px 0; font-family: var(--font); font-size: 15px; line-height: 1.4;
    border-top: var(--us-line) solid var(--alu);
  }
  .uslugi .us-parts li:last-child { border-bottom: var(--us-line) solid var(--alu); }
  .uslugi .us-parts li::before { display: none; }
  .uslugi .us-n { font-family: var(--mono); font-size: 13px; }
}
.uslugi.us-no3d .us-stage { height: auto; padding-bottom: 0; }
.uslugi.us-no3d .us-hit { position: static; display: block; width: 100%; height: 44px; }
.uslugi.us-no3d .us-parts { position: static; display: none; visibility: visible; margin-top: 12px; width: 100%; text-align: left; }
.uslugi.us-no3d .is-open .us-parts { display: block; }
.uslugi.us-no3d .us-parts li { position: static; opacity: 1; transform: none; white-space: normal; padding: 10px 0; border-top: var(--us-line) solid var(--alu); }
.uslugi.us-no3d .us-parts li::before { display: none; }
/* etapy.css */
.etapy {
  --et-graphite: var(--graphite, #16181C);
  --et-second: var(--second, #4A4F57);
  --et-signal: var(--signal, #FF5A1F);
  --et-font: var(--font, 'Geologica', system-ui, sans-serif);
  --et-pad: clamp(20px, 3.3vw, 48px);
  --et-top: 82px;                  
  --et-slab: #DCDFE3;
  --et-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --et-text: 84px;                 
  --et-line: 1.5px;                
  position: relative; width: 100%; height: 100%;
  font-family: var(--et-font); color: var(--et-graphite);
  -webkit-font-smoothing: antialiased;
}
@media (max-height: 799px) { .etapy { --et-top: 68px; } }
.etapy *, .etapy *::before, .etapy *::after { box-sizing: border-box; margin: 0; padding: 0; }
.etapy button { font: inherit; color: inherit; background: none; border: 0; text-align: inherit; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.etapy .et-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.etapy .et-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.etapy .et-ov { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.etapy .et-ov button { pointer-events: auto; }
.etapy .et-pathwrap, .etapy .et-path, .etapy .et-g { position: static; list-style: none; }
.etapy .et-strip { display: none; }
.etapy .et-head { position: absolute; left: var(--et-pad); top: var(--et-top); max-width: 900px; }
.etapy .et-ttl { font-size: clamp(40px, 4.4vw, 72px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.92; }
.etapy .et-lead { margin-top: 14px; font-size: 17px; line-height: 1.4; color: var(--et-second); white-space: nowrap; }
.etapy .et-now { position: absolute; left: 0; top: 0; font-size: 16px; line-height: 1.5; color: var(--et-graphite); white-space: nowrap; pointer-events: none; transition: opacity .08s linear; }
.etapy .et-now.is-out { opacity: 0; }
.etapy .et-slot { display: none; }
.etapy .et-btn { position: absolute; left: 0; top: 0; border-radius: 14px; }
.etapy .et-btn:focus { outline: none; }
.etapy .et-btn:focus-visible { outline: 2px solid var(--et-graphite); outline-offset: 2px; }
.etapy .et-lbl { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.etapy .et-name { position: relative; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.etapy .et-name::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: var(--et-line); background: var(--et-graphite); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--et-ease); }
.etapy .et-g.is-on .et-name::after { transform: scaleX(1); }
.etapy .et-chk { position: absolute; left: 0; top: 0; visibility: hidden; }   
.etapy .et-lead:empty { display: none; }
.etapy .et-chk ul { list-style: none; display: flex; gap: 10px; font-size: 13px; line-height: 1.35; white-space: nowrap; }
.etapy .et-chk li { position: relative; color: var(--et-second); transition: color .2s var(--et-ease); }
.etapy .et-chk li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: var(--et-line); background: var(--et-graphite); transform: scaleX(var(--u, 0)); transform-origin: left; }
.etapy .et-chk li.on { color: var(--et-graphite); }
.etapy .et-streams { display: none; }
.etapy .et-rail { display: contents; }
.etapy .et-pl { position: absolute; left: 0; top: 0; display: flex; pointer-events: auto; }
.etapy .et-pl-t { display: flex; flex-direction: column; align-items: center; text-align: center; }
.etapy .et-pl b { position: relative; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.etapy .et-pl b::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--et-line); background: var(--et-graphite);
  transform: scaleX(var(--hl, 0)); transform-origin: left;
}
.etapy .et-plate { display: none; flex: none; width: 6px; height: 20px; border-radius: 2px; background: var(--et-graphite); transition: transform .25s var(--et-ease), box-shadow .25s var(--et-ease); }
.etapy .et-pl.is-bump .et-pl-t, .etapy .et-pl.is-bump .et-plate { animation: etBump .26s var(--et-ease); }
@keyframes etBump { 30% { transform: translateY(-2px); } 65% { transform: translateY(1px); } }
.etapy .et-pl.is-izm { pointer-events: none; }
.etapy .et-pl.is-izm .et-pl-t { flex-direction: row; align-items: baseline; gap: 8px; white-space: nowrap; }
.etapy .et-pl.is-izm b { color: var(--et-second); }
.etapy .et-eng { position: absolute; left: 0; top: 0; font-size: 14px; line-height: 1.15; color: rgba(22, 24, 28, .66); text-shadow: 0 1px 0 rgba(255, 255, 255, .3); pointer-events: none; white-space: nowrap; }
.etapy .et-ball { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.etapy .et-ov > .et-ball { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; pointer-events: auto; z-index: 3; }
.etapy.is-dragging, .etapy.is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.etapy.et-tight .et-name { font-size: 22px; }
.etapy.et-narrow { height: auto; }
.etapy.et-narrow .et-gl, .etapy.et-narrow .et-eng { display: none; }
.etapy.et-narrow .et-ov { position: relative; inset: auto; padding: 0 16px 28px; pointer-events: auto; }
.etapy.et-narrow .et-head { position: relative; left: auto; top: auto; }
.etapy.et-narrow .et-lead { font-size: 16px; margin-top: 10px; white-space: normal; }
.etapy.et-narrow .et-rail { display: block; }
.etapy.et-narrow .et-pathwrap { position: relative; display: block; margin-top: 10px; padding-top: 25px; }
.etapy.et-narrow .et-strip { display: block; position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.etapy.et-narrow .et-strip .et-ball { pointer-events: auto; }
.etapy.et-narrow .et-ball-hit { fill: transparent; }
.etapy.et-narrow .et-ball-v { transition: transform .18s var(--et-ease); }
.etapy.et-narrow .et-ball.is-lift .et-ball-v { transform: scale(1.15); }
.etapy.et-narrow .et-ball-band { fill: none; stroke: #5A6068; stroke-width: 1.3; }
.etapy.et-narrow .et-path { position: relative; }
.etapy.et-narrow .et-g { position: relative; }
.etapy.et-narrow .et-g + .et-g { margin-top: 12px; }
.etapy.et-narrow .et-g[data-g="oblik"] { padding-bottom: 26px; }   
.etapy.et-narrow .et-btn {
  position: relative; display: block; width: 100%; min-height: 52px; padding: 5px 0 5px var(--et-text);
  border-radius: 12px; transform: none !important;
}
.etapy.et-narrow .et-btn:focus-visible { outline-offset: 0; }
.etapy.et-narrow .et-lbl { position: static; display: block; width: auto !important; transform: none !important; }
.etapy.et-narrow .et-name { display: inline; font-size: 20px; }
.etapy.et-narrow .et-chk { display: none; position: relative; transform: none !important; width: auto !important; margin: 6px 0 2px var(--et-text); }
.etapy.et-narrow .et-chk ul { flex-wrap: wrap; gap: 4px 10px; font-size: 16px; white-space: normal; }
.etapy.et-narrow .et-slot { display: block; min-height: calc(2 * 1.3 * 16px); margin: 2px 0 0 var(--et-text); }
.etapy.et-narrow .et-now { position: static; transform: none !important; white-space: normal; line-height: 1.3; }
.etapy.et-narrow .et-streams { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 4px; font-size: 16px; line-height: 1.3; color: var(--et-graphite); }
.etapy.et-narrow .et-streams > span { display: inline-flex; align-items: center; gap: 7px; }
.etapy .et-st-s { display: block; width: 8px; height: 14px; border-radius: 2px; background: #B7BCC3; }
.etapy .et-st-t { display: flex; flex-direction: column; gap: 2px; }
.etapy .et-st-t b { display: block; width: 5px; height: 5px; border-radius: 50%; }
.etapy.et-narrow .et-pl, .etapy.et-narrow .et-pl.is-izm { position: relative; transform: none !important; max-width: none !important; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0 4px var(--et-text); }
.etapy.et-narrow .et-btn .et-pl.is-izm { padding: 0; min-height: 0; }
.etapy.et-narrow .et-pl.is-izm b { font-size: 16px; }
.etapy.et-narrow .et-plate { display: block; }
.etapy.et-narrow .et-pl.is-open .et-plate { transform: translateY(-3px); box-shadow: 0 4px 6px rgba(22, 24, 28, .25); }
.etapy.et-narrow .et-pl-t, .etapy.et-narrow .et-pl.is-izm .et-pl-t { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; text-align: left; white-space: normal; }
.etapy.et-narrow .et-pl b { font-size: 16px; }
@media (min-width: 760px) { .etapy.et-narrow .et-ov { max-width: calc(560px + 2 * var(--et-pad)); padding-left: var(--et-pad); padding-right: var(--et-pad); } }
.etapy .et-s-slab { fill: var(--et-slab); }
.etapy .et-s-gate { fill: var(--et-graphite); transition: transform .2s var(--et-ease); }
.etapy .et-s-seam { fill: none; stroke: var(--et-signal); stroke-width: 2; opacity: 0; }
.etapy .et-s-loop { fill: none; stroke: #CDD2D8; stroke-width: 6; stroke-dasharray: 0 1; }
.etapy .et-s-rel rect { fill: #B7BCC3; }
.etapy .et-s-cal { fill: none; stroke: #EEF0F2; stroke-width: 1.4; }
.etapy .et-s-cal.on { stroke: #FFFFFF; }
@media (prefers-reduced-motion: reduce) {
  .etapy .et-now, .etapy .et-name::after, .etapy .et-s-gate, .etapy .et-plate, .etapy .et-ball-v { transition-duration: .01s; }
  .etapy .et-pl.is-bump .et-pl-t, .etapy .et-pl.is-bump .et-plate { animation: none; }
}
/* hero.css */
#L-hero .hero-next {
  position: absolute; right: var(--pad); bottom: calc(var(--pad) + 4px);
  height: 44px; padding: 0 16px; border-radius: 10px;
  font-family: var(--mono); font-size: 13px; color: var(--graphite); background: var(--studio);
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity .2s, transform .25s var(--ease);
}
#L-hero .hero-next:focus { outline: none; }
#L-hero .hero-next:focus-visible { opacity: 1; transform: none; pointer-events: auto; outline: 1.5px solid var(--graphite); outline-offset: 2px; }
#L-hero .hero-note { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--graphite); white-space: nowrap; opacity: 0; pointer-events: none; will-change: transform, opacity; }
#L-hero .hero-note.hero-note-port { font-size: 13px; color: var(--second); }
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  #L-hero .hero-next { right: 16px; top: 112px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #L-hero .hero-next { transition-duration: .2s; }
}
:root {
  --kp-hi: rgba(255, 255, 255, .95);
  --kp-warm: rgba(255, 238, 220, .9);
  --kp-cold: rgba(238, 244, 255, .95);
  --kp-edge: rgba(70, 75, 84, .45);
  --kp-m1: #C9CDD3; --kp-m2: #AEB3BA; --kp-m3: #A3A8AF; --kp-m4: #9EA3AA; --kp-m5: #B4B8BE;
  --kp-t-fall: .45s;
  --kp-t-hop: 2.2s;
  --kp-t-blik: 2.8s;
}
.kaplya { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.kaplya.kp-out { opacity: 0; }
.kaplya i, .kaplya picture { position: absolute; display: block; }
.kaplya img { display: block; width: 100%; height: 100%; }
.kp-shadow { transform-origin: 30% 30%; will-change: transform, opacity; opacity: 0; }
.kp-go .kp-shadow { opacity: 1;
  animation: kpShadow var(--kp-t-fall) cubic-bezier(.55, 0, 1, .45) both,
    kpHopShadow var(--kp-t-hop) linear var(--kp-t-fall) infinite; }
.kp-fall { transform: translateY(var(--kp-fall, -100vh)); }
.kp-go .kp-fall { transform: none; animation: kpFall var(--kp-t-fall) cubic-bezier(.55, 0, 1, .45) both; will-change: transform; }
.kp-breath { inset: 0; transform-origin: 50% 96%; will-change: transform; }
.kp-go .kp-breath { animation: kpHop var(--kp-t-hop) linear var(--kp-t-fall) infinite; }
.kp-squat { inset: 0; transform-origin: 50% 96%; }
.kp-body { inset: 2%; border-radius: 50%;
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%, transparent 66%, var(--kp-edge) 100%),
    radial-gradient(ellipse 20% 16% at 26% 31%, var(--kp-hi), transparent 72%),
    radial-gradient(ellipse 22% 14% at 46% 22%, var(--kp-hi), transparent 72%),
    radial-gradient(ellipse 18% 17% at 77% 36%, var(--kp-cold), transparent 72%),
    radial-gradient(ellipse 16% 13% at 35% 39%, var(--kp-warm), transparent 72%),
    radial-gradient(ellipse 22% 17% at 50% 46%, var(--kp-hi), transparent 72%),
    linear-gradient(180deg, var(--kp-m1) 0%, var(--kp-m2) 30%, var(--kp-m3) 55%, var(--kp-m4) 80%, var(--kp-m5) 100%); }
.kp-img { inset: 0; overflow: hidden; }
.kp-img picture { left: 0; top: 0; width: 200%; height: 100%; }
.kp-b picture { left: -100%; }
.kp-b { opacity: 0; }
.kp-go .kp-b { animation: kpBlik var(--kp-t-blik) ease-in-out .3s infinite alternate; will-change: opacity; }
@keyframes kpFall { from { transform: translateY(var(--kp-fall, -100vh)); } to { transform: none; } }
@keyframes kpShadow { from { transform: scale(.4); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes kpHop {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  6% { transform: scale(1.09, .87); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  13% { transform: translateY(-2%) scale(.97, 1.04); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  26% { transform: translateY(-11%) scale(.995, 1.005); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  38% { transform: translateY(-1%) scale(.98, 1.025); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  42% { transform: scale(1.06, .92); animation-timing-function: ease-in-out; }
  46.5% { transform: translateY(-2.5%) scale(.985, 1.02); animation-timing-function: cubic-bezier(.45, 0, .7, .5); }
  50% { transform: none; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  56% { transform: scale(1.06, .92); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  62% { transform: translateY(-1.5%) scale(.98, 1.03); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  74% { transform: translateY(-6%) scale(.997, 1.003); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  85% { transform: translateY(-.5%) scale(.99, 1.015); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  89% { transform: scale(1.04, .95); animation-timing-function: ease-in-out; }
  95% { transform: translateY(-1.5%) scale(.99, 1.012); animation-timing-function: cubic-bezier(.45, 0, .7, .5); }
  100% { transform: none; }
}
.kp-take .kp-breath { animation: kpTake .6s linear both; }
@keyframes kpTake {
  0% { transform: none; }
  8.3% { transform: scale(1.172, .728); }
  16.7% { transform: scale(1.219, .653); }
  25% { transform: scale(1.209, .668); }
  33.3% { transform: scale(1.178, .717); }
  50% { transform: scale(1.108, .829); }
  75% { transform: scale(1.042, .934); }
  100% { transform: scale(1.015, .977); }
}
@keyframes kpHopShadow {
  0% { transform: none; opacity: 1; }
  6% { transform: scale(1.05, 1); opacity: 1; }
  26% { transform: scale(.8); opacity: .72; }
  42% { transform: scale(1.04, 1); opacity: 1; }
  46.5% { transform: scale(.97); opacity: .95; }
  50% { transform: none; opacity: 1; }
  56% { transform: scale(1.04, 1); }
  74% { transform: scale(.88); opacity: .82; }
  89% { transform: scale(1.03, 1); opacity: 1; }
  95% { transform: scale(.98); opacity: .97; }
  100% { transform: none; opacity: 1; }
}
}
@keyframes kpBlik { from { opacity: 0; } to { opacity: 1; } }
.kaplya.kp-repeat .kp-fall { display: none; }          
.kaplya.kp-rm *, .kaplya.kp-rm { animation: none !important; }
.kp #gl { opacity: 0; }
/* kejsy.css */
#L-cases .link-all {
  --la-cycle: 3.4s;          
  --la-runs: 3;              
  --la-heat: .35s;           
  position: absolute; left: 63%; bottom: calc(19.5vh + 14px);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 2px 12px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.2;
  text-decoration: none; color: var(--graphite);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.link-all .la-n { margin-left: -3px; font-size: 12px; color: var(--second); }
.link-all:focus { outline: none; }
.link-all:focus-visible { outline: 1.5px solid var(--graphite); outline-offset: 4px; border-radius: 6px; }
.link-all .la-seam { position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px; border-radius: 1px; background: var(--graphite); pointer-events: none; }
.link-all .la-seam i {
  position: absolute; left: 0; top: -0.75px; width: 46%; height: 3px; border-radius: 2px; opacity: 0;
  background: var(--signal);
}
.link-all.la-live .la-seam i { animation: laSweep var(--la-cycle) var(--ease) var(--la-heat) var(--la-runs); }
@keyframes laSweep {
  0% { transform: translateX(-50%); opacity: 0; }
  5% { opacity: 1; }
  24% { opacity: 1; }
  30%, 100% { transform: translateX(167%); opacity: 0; }
}
.link-all .la-glow {
  position: absolute; left: -18px; right: -18px; top: -6px; bottom: -8px; z-index: -1; pointer-events: none;
  border-radius: 999px; opacity: 0; transition: opacity var(--la-heat) var(--ease);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--signal) 22%, transparent), transparent);
}
@media (hover: hover) and (pointer: fine) {
  .link-all:hover .la-glow { opacity: 1; }
}
.link-all:focus-visible .la-glow, .link-all:active .la-glow { opacity: 1; }
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  #L-cases .link-all { left: 16px; bottom: 124px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  #L-cases .link-all { bottom: 16px; }
  #L-cases .drops-row { display: none; }
  #L-cases .case-text { top: calc(100% - 68px - var(--case-h, 200px)); }
}
@media (prefers-reduced-motion: reduce) {
  .link-all.la-live .la-seam i { animation: none; }
  .link-all .la-glow { transition-duration: var(--t-fast); }
}
/* navigaciya.css */
@property --mr { syntax: '<length>'; inherits: false; initial-value: 0px; }
:root {
  --milk-hi: #F3F4F6;        
  --milk-lo: #DFE2E6;
  --metal-hi: #FFFFFF;       
  --metal-mid: #CBD0D7;
  --metal-lo: #6E747D;
  --graphite-2: #2A2D33;     
  --second-dark: #AEB3BB;    
  --shade: color-mix(in srgb, var(--graphite) 16%, transparent);
  --shade-soft: color-mix(in srgb, var(--graphite) 7%, transparent);
  --metal-drop: radial-gradient(circle at 34% 30%, var(--metal-hi) 0, var(--metal-mid) 44%, var(--metal-lo) 100%);
  --t-fast: .2s;             
  --t-move: .3s;             
  --t-open: .22s;            
  --t-fade: .18s;
}
.top-ofis {
  display: inline-flex; align-items: center; height: 40px; padding: 0 12px;
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--second);
  touch-action: manipulation;
}
.top-zayavka {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px 0 15px; border-radius: 999px;
  background: var(--graphite); color: var(--studio); font-size: 14px; font-weight: 500;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.top-zayavka .drop-ico { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--metal-drop); transition: transform var(--t-move) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .top-ofis:hover { color: var(--graphite); transition: color var(--t-fast); }
  .top-zayavka:hover { background: var(--graphite-2); transition: background-color var(--t-fast); }
  .top-zayavka:hover .drop-ico { transform: scale(1.3); }
}
.top-zayavka:active { background: var(--graphite-2); }
.top-zayavka:focus-visible, .top-ofis:focus-visible { outline: 1.5px solid var(--graphite); outline-offset: 3px; }
.dark .top-ofis { color: var(--second-dark); }
.dark .top-zayavka { background: var(--studio); color: var(--graphite); }
@media (hover: hover) and (pointer: fine) {
  .dark .top-ofis:hover { color: var(--studio); }
  .dark .top-zayavka:hover { background: var(--milk-lo); }
}
@media (pointer: coarse) { .top-zayavka, .top-ofis { height: 44px; } }   
.rail { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 21; }
.rail-toggle { display: none; }
.rail-list { list-style: none; display: flex; flex-direction: column; }
.rail-list a {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 34px; text-decoration: none; touch-action: manipulation;
}
.rail-list a:focus { outline: none; }
.rail-dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--second);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio) 70%, transparent);
  transform: scale(.43); transition: transform var(--t-move) var(--ease), background-color var(--t-move);
}
.rail-list a[aria-current] .rail-dot { transform: none; background: var(--metal-drop); box-shadow: 0 2px 5px var(--shade); }
.rail-lbl {
  position: absolute; right: 100%; top: 50%; margin-top: -14px; height: 28px;
  display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--studio) 92%, transparent); color: var(--second);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-move) var(--ease), color var(--t-fast);
}
.rail-list a[aria-current] .rail-lbl { color: var(--graphite); }
.rail:focus-within .rail-lbl, .rail.say a[aria-current] .rail-lbl { opacity: 1; transform: none; }
.rail-list a:focus-visible .rail-lbl { box-shadow: 0 0 0 1.5px var(--graphite); }
@media (hover: hover) and (pointer: fine) {
  .rail-lbl { pointer-events: auto; }
  .rail:hover .rail-lbl { opacity: 1; transform: none; }
  .rail-list a:hover .rail-lbl { color: var(--graphite); }
  .rail-list a:not([aria-current]):hover .rail-dot { transform: scale(.7); }
}
.dark .rail-dot { background: var(--second-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--graphite) 60%, transparent); }
.dark .rail-lbl { background: color-mix(in srgb, var(--graphite) 90%, transparent); color: var(--second-dark); }
.dark .rail-list a[aria-current] .rail-lbl { color: var(--studio); }
@media (hover: hover) and (pointer: fine) { .dark .rail-list a:hover .rail-lbl { color: var(--studio); } }
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  .rail { top: 68px; right: 0; transform: none; }
  .rail-toggle {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 84px;
    color: var(--graphite); touch-action: manipulation; -webkit-user-select: none; user-select: none;
  }
  .rail-toggle:focus-visible { outline: 1.5px solid var(--graphite); outline-offset: -4px; border-radius: 12px; }
  .rail-mini { display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .rail-mini i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--second); transform: scale(.75);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--studio) 70%, transparent); transition: transform var(--t-move) var(--ease);
  }
  .rail-mini i.on { transform: scale(1.6); background: var(--metal-drop); box-shadow: 0 1px 2px var(--shade); }
  .rail-x { display: none; }
  .rail.open .rail-mini { display: none; }
  .rail.open .rail-x { display: block; }
  .dark .rail-toggle { color: var(--studio); }
  .dark .rail-mini i { background: var(--second-dark); box-shadow: none; }
  .rail-list {
    position: absolute; top: 0; right: 46px; width: 214px; padding: 8px; border-radius: 26px;
    background: radial-gradient(140% 100% at 30% 0%, var(--milk-hi), var(--studio) 60%, var(--milk-lo));
    box-shadow: 0 18px 44px var(--shade), 0 3px 10px var(--shade-soft);
    transform-origin: 100% 0; opacity: 0; visibility: hidden; transform: scale(.94);
    transition: opacity var(--t-fade) ease-out, transform var(--t-open) var(--ease), visibility 0s linear var(--t-open);
  }
  .rail.open .rail-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .rail-list a { width: auto; height: 48px; justify-content: space-between; padding: 0 12px 0 16px; border-radius: 999px; }
  .rail-list a[aria-current] { background: var(--shade-soft); }
  .rail-list a:active { background: var(--shade-soft); }
  .rail-lbl { position: static; margin: 0; height: auto; padding: 0; background: none; opacity: 1; transform: none; font-size: 16px; }
  .rail-list a:focus-visible { box-shadow: inset 0 0 0 1.5px var(--graphite); }
  .rail-list a:focus-visible .rail-lbl { box-shadow: none; }
  .dark .rail-lbl { background: none; color: var(--second); }
  .dark .rail-list a[aria-current] .rail-lbl { color: var(--graphite); }
  .dark .rail-dot { background: var(--second); box-shadow: none; }
}
.melt {
  --mx: 50%; --my: 50%;
  position: fixed; inset: 0; z-index: 15; pointer-events: none;
  background:
    radial-gradient(circle at var(--mx) var(--my), transparent calc(var(--mr) - 160px), color-mix(in srgb, var(--alu) 55%, transparent) calc(var(--mr) - 80px), transparent calc(var(--mr) - 24px)),
    radial-gradient(130% 95% at 42% 28%, var(--milk-hi) 0%, var(--studio) 52%, var(--milk-lo) 100%);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--mr) - 90px), transparent var(--mr));
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--mr) - 90px), transparent var(--mr));
}
.melt[hidden] { display: none; }
.melt.melt-rm { -webkit-mask-image: none; mask-image: none; background: radial-gradient(130% 95% at 42% 28%, var(--milk-hi) 0%, var(--studio) 52%, var(--milk-lo) 100%); }
/* zayavka.css */
.order-title { margin: 0 0 4px; }
.order-fields { display: flex; flex-direction: column; gap: inherit; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld-pair { display: flex; flex-direction: column; gap: inherit; }
.fld-lbl { font-size: 13px; line-height: 1.3; color: var(--second); }
.fld-lbl:has(i) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fld-lbl i { font-style: normal; font-size: 11.5px; color: color-mix(in srgb, var(--second) 85%, var(--studio)); white-space: nowrap; }
.fld-err { font-size: 12.5px; color: var(--graphite); }
.fld-err[hidden] { display: none; }
.fld .chips { margin-top: 0; }
.fld.is-empty .slot { box-shadow: inset 0 0 0 1.5px var(--graphite); }
.slot input[type="tel"] { font-family: var(--mono); font-weight: 400; font-size: 17px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.slot input.tel-blank { color: #6B717A; }
.order-done:empty { display: none; }
.order, .bz-form { position: relative; }
.order-accepted { display: none; }
.is-accepted > :is(.order-title, .order-fields) { visibility: hidden; }
.is-accepted > .order-accepted { display: flex; flex-direction: column; justify-content: center; position: absolute; inset: 0; }
.order-accepted-big { font-size: 64px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.order-accepted-line { font-size: 16px; color: var(--second); margin-top: 12px; }
.order-accepted-line .nw { white-space: nowrap; }
.top-zayavka.sent .drop-ico { box-shadow: 0 0 0 1.5px var(--signal); }
:is(.bz, .order-plate) .slot input { padding: 11px 16px; }
:is(.bz, .order-plate) .slot textarea { padding: 11px 16px; min-height: 60px; }
:is(.bz, .order-plate) .chips { gap: 6px; }
:is(.bz, .order-plate) .chip { height: 38px; padding: 0 9px; font-size: 12.5px; }
:is(.bz, .order-plate) .order-foot { margin-top: 2px; }
:is(.bz, .order-plate) .order-foot .btn { width: 100%; height: 52px; justify-content: center; }
:is(.bz, .order-plate) .btn:disabled { opacity: .55; }
@media (pointer: coarse) { :is(.bz, .order-plate) .chip { height: 44px; } }
.bz-scrim { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--studio) 55%, transparent); }
.bz {
  --rim: 10px;
  position: fixed; z-index: 61; right: var(--pad); top: calc(var(--vvt, 0px) + 84px);
  width: min(540px, calc(100vw - 24px)); max-height: calc(var(--vvh, 100dvh) - 108px);
  display: flex; flex-direction: column;
  outline: none; border-radius: 20px;
  filter: drop-shadow(0 16px 30px var(--shade-soft)) drop-shadow(0 2px 6px var(--shade-soft));
}
.bz[hidden], .bz-scrim[hidden] { display: none; }
.bz-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.bz-face {
  position: relative; margin: var(--rim); min-height: 0; flex: 0 1 auto; border-radius: 10px; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(170deg, #F6F7F8 0%, #EEF0F2 60%, #E8EAED 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--graphite) 8%, transparent);
  padding: 26px 24px 22px;
}
.bz-flat { background: linear-gradient(160deg, var(--metal-hi) 0%, #CBD0D7 38%, #9EA4AD 100%); }
.bz-form { display: flex; flex-direction: column; gap: 12px; }
.bz .order-title { font-size: 30px; line-height: 1.05; letter-spacing: -0.03em; padding-right: 44px; }
.bz .slot { border-radius: 12px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--alu); }
.bz .slot:focus-within { box-shadow: inset 0 0 0 1.5px var(--graphite); }
.bz .fld.is-empty .slot { box-shadow: inset 0 0 0 1.5px var(--graphite); }
.bz-close {
  position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--second);
  transition: color var(--t-fast), background-color var(--t-fast); touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .bz-close:hover { color: var(--graphite); background: var(--shade-soft); } }
.bz-close:active { background: var(--shade-soft); }
.bz-close:focus-visible { outline: 1.5px solid var(--graphite); outline-offset: 0; }
:is(.bz, .order-plate):not(.bz-flat) :is(.order-title, .fld, .order-foot, .order-accepted) { transition: opacity 180ms ease-out; }
.pouring :is(.order-title, .fld, .order-foot, .order-accepted):not(.bz-row-in) { opacity: 0; }
.order-plate {
  --rim: 10px;
  position: absolute; left: 50%; top: calc(50% + 44px); transform: translate(-50%, -50%);
  width: min(540px, calc(100% - 2 * var(--pad))); border-radius: 20px;
  filter: drop-shadow(0 16px 30px var(--shade-soft)) drop-shadow(0 2px 6px var(--shade-soft));
}
.order-plate:has(> .bz-gl) { filter: none; }
.order-plate:has(> .bz-gl)::before {
  content: ''; position: absolute; inset: var(--pl-iy, 1px) var(--pl-ix, 1px); z-index: -1; border-radius: 20px; pointer-events: none;
  box-shadow: 0 16px 60px var(--shade-soft), 0 2px 12px var(--shade-soft);
  opacity: var(--pour, 1); will-change: opacity;   
}
.order-plate .bz-face { overflow: visible; }
.order-plate .order { gap: 12px; }
.order-plate .order-title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; }
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  .bz { --rim: 8px; left: 12px; right: 12px; width: auto; top: calc(var(--vvt, 0px) + 12px); max-height: calc(var(--vvh, 100dvh) - 24px); border-radius: 18px; }
  .bz-face, .order-plate .bz-face { padding: 18px 16px 16px; }
  .bz .order-title { font-size: 24px; }
  .bz-form, .order-plate .order { gap: 8px; }
  :is(.bz, .order-plate) .fld { gap: 4px; }
  :is(.bz, .order-plate) .slot input { font-size: 17px; padding: 11px 14px; }
  :is(.bz, .order-plate) .slot textarea { font-size: 17px; padding: 11px 14px; min-height: 52px; }
  :is(.bz, .order-plate) .order-foot .btn { height: 50px; }
  .bz-close { top: 6px; right: 6px; width: 44px; height: 44px; }
  .order-plate { --rim: 8px; top: auto; bottom: 8px; transform: translateX(-50%); width: calc(100% - 24px); border-radius: 18px; }
  :is(.bz, .order-plate) .order-accepted-big { font-size: 48px; }
}
@media (max-width: 760px) and (max-height: 759px) {
  .order-plate { left: 12px; right: 52px; width: auto; transform: none; }
  .order-plate .order { gap: 6px; }
}
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  :is(.bz, .order-plate) .fld-err { font-size: 11.5px; line-height: 1.15; }
  :is(.bz-form, .order-plate .order):has(.fld-err:not([hidden])) { gap: 4px; }
  :is(.bz-form, .order-plate .order):has(.fld-err:not([hidden])) .order-title { margin-bottom: 0; }
  :is(.bz-form, .order-plate .order):has(.fld-err:not([hidden])) .fld-lbl { line-height: 1; }
}
@media (max-width: 760px) and (max-height: 665px) {
  .bz { --rim: 8px; top: calc(var(--vvt, 0px) + 8px); max-height: calc(var(--vvh, 100dvh) - 16px); }
  .bz-face, .order-plate .bz-face { padding: 14px 16px 12px; }
  :is(.bz, .order-plate) .order-title { font-size: 22px; margin-bottom: 3px; }
  .bz-form, .order-plate .order { gap: clamp(5px, 1.1vh, 8px); }
  :is(.bz, .order-plate) .fld { gap: 3px; }
  :is(.bz, .order-plate) .fld-lbl { line-height: 1.15; }
  :is(.bz, .order-plate) .slot input { padding-top: 10px; padding-bottom: 10px; }
  :is(.bz, .order-plate) .slot textarea { height: 44px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  :is(.bz, .order-plate) .order-foot { margin-top: 0; }
  :is(.bz, .order-plate) .order-foot .btn { height: 46px; }
  :is(.bz, .order-plate) .fld .chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: -3px -16px; padding: 3px 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
  :is(.bz, .order-plate) .chips::-webkit-scrollbar { display: none; }
  :is(.bz, .order-plate) .chip { flex: none; white-space: nowrap; }
  .bz-face:has(.fld-err:not([hidden])) { padding-top: 10px; padding-bottom: 10px; }
  :is(.bz-form, .order-plate .order):has(.fld-err:not([hidden])) .order-foot .btn { height: 44px; }
}
@media (max-width: 760px) and (min-height: 600px) and (max-height: 665px) {
  :is(.bz, .order-plate) .slot textarea { height: 68px; }
}
@media (max-height: 820px) and (min-width: 761px) {
  .bz { top: calc(var(--vvt, 0px) + 72px); max-height: calc(var(--vvh, 100dvh) - 84px); }
  .bz-face, .order-plate .bz-face { padding: clamp(14px, 2.6vh, 26px) 24px clamp(12px, 2.2vh, 22px); }
  .bz-form, .order-plate .order { gap: clamp(6px, 1.25vh, 12px); }
  :is(.bz, .order-plate) .fld { gap: 4px; }
  :is(.bz, .order-plate) .order-title { font-size: clamp(22px, 4.2vh, 34px); margin-bottom: 2px; }
  :is(.bz, .order-plate) .slot input { padding-top: clamp(7px, 1.35vh, 11px); padding-bottom: clamp(7px, 1.35vh, 11px); }
  :is(.bz, .order-plate) .slot textarea { height: clamp(40px, 7vh, 60px); min-height: 0; padding-top: clamp(7px, 1.35vh, 11px); padding-bottom: clamp(7px, 1.35vh, 11px); }
  :is(.bz, .order-plate) .order-foot .btn { height: clamp(44px, 7.5vh, 52px); }
}
@media (max-height: 560px) and (min-width: 761px) {
  .bz { top: calc(var(--vvt, 0px) + 12px); max-height: calc(var(--vvh, 100dvh) - 24px); }
}
/* raboty.css */
.allworks {
  --rb-metal: linear-gradient(140deg, #F6F7F8 0%, #DCDFE4 26%, #C4C9D1 52%, #AFB5BE 76%, #CDD1D7 100%);
  --rb-edge: #8E949D;                 
  --rb-hi: rgba(255, 255, 255, .9);   
  --rb-lo: color-mix(in srgb, var(--graphite) 20%, transparent);
  --rb-sh: color-mix(in srgb, var(--graphite) 17%, transparent);
  --rb-sh-drop: color-mix(in srgb, var(--graphite) 34%, transparent);
  --rb-screen: #D8DBE0;               
  --rb-hot: #FFE1CF;                  
  --rb-t: 1.4s;
  --rb-ease: cubic-bezier(.45, 0, .2, 1);   
  --rb-t-shot: .5s;                   
  --rb-crest: rgba(255, 255, 255, .78);   
  --rb-crest-glow: rgba(255, 255, 255, .3);
  --rb-trough: color-mix(in srgb, var(--graphite) 13%, transparent);   
  --rb-t-in: .24s;                    
  --rb-t-text: .17s;                  
  --rb-t-say: .32s;                   
  position: fixed; inset: 0; z-index: 50; overflow-x: hidden; overflow-y: auto; padding: 0 var(--pad);   
  background: var(--studio);
  scrollbar-width: thin; scrollbar-color: var(--alu) transparent;   
  opacity: 0; transition: opacity var(--rb-t-in) var(--ease);
}
.allworks.rb-in { opacity: 1; }
.aw-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; background: var(--studio); }
.aw-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: normal; padding: 12px 0; }
.aw-back { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-right: -12px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--second); touch-action: manipulation; }
.aw-back svg { flex: none; }
@media (hover: hover) and (pointer: fine) { .aw-back:hover { color: var(--graphite); transition: color var(--t-fast); } }
@media (pointer: coarse) { .aw-back { height: 44px; } }
.aw-back:focus { outline: none; }
.aw-back:focus-visible { outline: 1.5px solid var(--graphite); outline-offset: -3px; }
.rb-stage { position: relative; }
.rb-text { position: absolute; z-index: 4; }
.rb-nav { margin: 0 0 14px -10px; }
.allworks .case-arrow { width: 44px; height: 44px; }
.rb-say { transition: opacity var(--rb-t-say) var(--rb-ease); }
.rb-say.is-out { opacity: 0; }
.rb-say .case-name { font-size: var(--name, 40px); white-space: nowrap; }   
.rb-say .case-phrase { max-width: 32ch; min-height: 0; margin-top: 14px; }
.rb-say .case-fig { margin-top: 16px; }
.rb-measure { visibility: hidden; pointer-events: none; left: -10000px; top: 0; }
.rb-it {
  position: absolute; z-index: 1; display: block; padding: 0; transform-origin: 50% 50%;
  transition: transform calc(var(--rb-t) * .42) var(--rb-ease), clip-path calc(var(--rb-t) * .36) var(--rb-ease);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.rb-it.is-cur { z-index: 3; touch-action: pan-y;
  transition: transform calc(var(--rb-t) * .42) var(--rb-ease) calc(var(--rb-t) * .32), clip-path calc(var(--rb-t) * .4) var(--rb-ease) calc(var(--rb-t) * .6); }
.rb-it.is-went { z-index: 2;
  transition: clip-path calc(var(--rb-t) * .36) var(--rb-ease), transform calc(var(--rb-t) * .42) var(--rb-ease) calc(var(--rb-t) * .3); }
.rb-body { position: absolute; inset: 0; display: block; background: var(--rb-metal); box-shadow: inset 1px 1px 0 var(--rb-hi), inset -1px 0 0 var(--rb-lo); }
.rb-face {
  position: absolute; left: var(--rim); right: var(--rim); top: var(--rim); bottom: calc(var(--rim) + var(--th));
  display: block; overflow: hidden; border-radius: 8px; background: var(--rb-screen);
}
.rb-face::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 3px var(--rb-lo), inset 0 0 0 1px color-mix(in srgb, var(--graphite) 14%, transparent); }
.rb-shot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; visibility: hidden; }
.rb-shot.on { visibility: visible; }
.rb-edge { position: absolute; left: 0; right: 0; bottom: 0; height: var(--th); background: var(--rb-edge);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 35%, transparent); transition: opacity calc(var(--rb-t) * .16) var(--rb-ease); }
.rb-seam { position: absolute; left: 16px; right: 16px; bottom: calc(var(--th) - 1px); height: 1.5px; border-radius: 1px;
  background: var(--signal); overflow: hidden; pointer-events: none; transition: opacity calc(var(--rb-t) * .16) var(--rb-ease); }
.rb-seam i { position: absolute; left: 0; top: 0; width: 38%; height: 100%; background: var(--rb-hot); opacity: 0; }
.rb-lit .rb-seam i { animation: rbSweep 1.5s var(--ease) 1; }
@keyframes rbSweep {
  0% { transform: translateX(-60%); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateX(270%); opacity: 0; }
}
.rb-marks { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; gap: 5px; }
.rb-marks i { width: 14px; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--graphite) 45%, transparent); transition: background-color var(--rb-t-shot) var(--ease); }
.rb-marks i.on { background: #FFFFFF; }
.rb-marks i:only-child { display: none; }
.rb-ring { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.rb-crest { box-shadow: 0 0 0 1.5px var(--rb-crest), 0 0 22px 5px var(--rb-crest-glow), inset 0 0 26px 8px var(--rb-trough); }
.rb-trail { box-shadow: 0 0 0 1px var(--rb-crest-glow), inset 0 0 18px 4px color-mix(in srgb, var(--graphite) 7%, transparent); }
.rb-ball {
  position: absolute; top: 0; bottom: 0; left: calc(50% - var(--ph) / 2); width: var(--ph); border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity calc(var(--rb-t) * .3) var(--rb-ease);
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .55) 7%, transparent 19%),
    radial-gradient(ellipse 58% 26% at 50% 90%, rgba(255, 255, 255, .4), transparent 70%),
    radial-gradient(circle closest-side at 50% 50%, transparent 58%, color-mix(in srgb, var(--graphite) 30%, transparent) 90%, color-mix(in srgb, var(--graphite) 52%, transparent) 100%);
}
.rb-it:not(.is-cur) .rb-ball { opacity: 1; }
.rb-it.is-cur .rb-ball { transition-delay: calc(var(--rb-t) * .62); }   
.rb-it:not(.is-cur) .rb-edge, .rb-it:not(.is-cur) .rb-seam { opacity: 0; }
.rb-it.is-cur .rb-edge, .rb-it.is-cur .rb-seam { transition-duration: calc(var(--rb-t) * .18); transition-delay: calc(var(--rb-t) * .82); }
.rb-it:focus { outline: none; }
.rb-it:focus-visible .rb-ball { opacity: 1; box-shadow: inset 0 0 0 calc(2.5px / var(--s, 1)) var(--graphite); }
.rb-it.is-cur:focus-visible .rb-ball { opacity: 0; }
.rb-it.is-cur:focus-visible .rb-body { box-shadow: inset 0 0 0 2px var(--graphite); }
@media (hover: hover) and (pointer: fine) {
  .rb-it:not(.is-cur):hover .rb-ball { box-shadow: inset 0 0 0 calc(1.5px / var(--s, 1)) var(--second); }
}
.rb-sh {
  position: absolute; z-index: 0; height: 36px; pointer-events: none; transform-origin: 50% 50%;
  background: radial-gradient(closest-side, var(--rb-sh), transparent);
  transition: transform calc(var(--rb-t) * .42) var(--rb-ease) calc(var(--rb-t) * .3);   
}
.rb-sh.is-cur { transition-delay: calc(var(--rb-t) * .32); }
.rb-sh.is-drop { background: radial-gradient(closest-side, var(--rb-sh-drop), transparent); }
.rb-dent {
  position: absolute; z-index: 0; width: var(--d); height: var(--d); border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--graphite) 4%, transparent);
  box-shadow: inset 1px 2px 4px var(--rb-sh), inset 0 0 0 1px color-mix(in srgb, var(--graphite) 8%, transparent);
}
.rb-lbl {
  position: absolute; z-index: 2; width: var(--lbl-w); font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--second);
  cursor: var(--arrow); -webkit-user-select: none; user-select: none; transition: opacity var(--rb-t-text) var(--ease);
}
.rb-lbl.is-cur { opacity: 0; pointer-events: none; }
.rb-root:not(.is-compact) .rb-lbl.is-went { transition-duration: var(--rb-t-say); transition-delay: calc(var(--rb-t) * .62); }   
@media (hover: hover) and (pointer: fine) { .rb-lbl:hover { color: var(--graphite); } }
.is-compact .rb-lbl { width: auto; white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: var(--graphite); color: var(--studio);
  opacity: 0; pointer-events: none; }
.is-compact .rb-lbl.is-tip:not(.is-cur) { opacity: 1; }
.is-compact .rb-lbl wbr { display: none; }
.rb-now, .rb-now * { transition: none !important; }
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  .allworks { padding: 0 16px; }
  .aw-head { padding: 12px 0; }   
  .rb-nav { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .allworks { --rb-t: .01s; --rb-t-shot: .01s; --rb-t-say: .01s; transition-duration: .01s; }
}
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  html .case-count, html .link-all .la-n, html .band-k, html .rb-k, html .fld-lbl i { font-size: 13px; }
  html .drops-row a { font-size: 13px; width: 92px; line-height: 1.25; }
  html :is(.bz, .order-plate) .chip { font-size: 13px; }
  html .rb-lbl { font-size: 13px; }
  html :is(.bz, .order-plate) .fld-err { font-size: 13px; }
}
@media (pointer: coarse) { html .logo { min-height: 44px; display: inline-flex; align-items: center; padding: 0; } }
@media (max-width: 760px), (max-aspect-ratio: 17/20) and (max-width: 1024px) {
  html .fld-lbl:has(i) { flex-wrap: wrap; row-gap: 0; }
  html .fld-lbl:has(i) i { margin-left: auto; }
}