/* COTRY WEB STUDIO — site CSS · версия 3 · 07.08.2026
   Вставлять: Настройки сайта → Вставка кода → Пользовательские CSS-стили.
   БЕЗ тегов . Шрифты подключать отдельно: Настройки сайта → Шрифты
   (Archivo, Chakra Petch, IBM Plex Mono). Работает только на опубликованной
   странице. Скобочный CTA btn start намеренно не описан. */

/* Force text-style (non-emoji) rendering for arrow glyphs like ↗ → on iOS/iPadOS/Safari 17.4+ */
html {
  font-variant-emoji: text;
}

/* ---------- 1. ТОКЕНЫ ---------- */
:root {
  --c-page:            #FFFFFF;
  --c-paper:           #F3F2EF;
  --c-sand:            #E5E2D9;
  --c-ink:             #111318;

  --c-text:            #111318;
  --c-text-secondary:  #666660;
  --c-text-on-ink:     #FFFFFF;
  --c-text-soft-ink:   #B8B8B2;
  --c-text-muted-ink:  #8A8A85;

  --c-accent-light:    #6F0097;
  --c-accent-dark:     #C77FE8;
  --c-accent-pale:     #E8D6EE;

  --c-hairline:        #B8B8B2;
  --c-hairline-ink:    rgba(255, 255, 255, .10);

  --c-grid:            rgba(238, 224, 243, .35);
  --c-grid-major:      rgba(232, 214, 238, .53);
  --grid-step:         40px;
  --grid-step-major:   200px;

  --f-display: Chakra, 'Chakra Petch', system-ui, sans-serif;
  --f-text:    'Archivo', system-ui, sans-serif;
  --f-mono:    IBMPlexMono, 'IBM Plex Mono', ui-monospace, monospace;

  --pad-x:      40px;
  --sec-y:     120px;
  --gutter:     36px;

  --t-fast: .18s ease;
  --t-base: .20s ease;
}

/* ---------- 2. ФОН СТРАНИЦЫ + КЛЕТОЧКА ---------- */
body, .t-body { background-color: var(--c-page); }

#allrecords {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  background-image: none !important;
}

/* Клеточка — отдельный ФИКСИРОВАННЫЙ слой во весь экран.
   Раньше четыре градиента лежали на #allrecords (1920 x 20098 px) и
   перерисовывались плитками при каждом скролле, а однопиксельные линии
   дрожали на дробных смещениях. Теперь слой рисуется один раз, живёт
   отдельным композитным слоем и при прокрутке не двигается. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  background-image:
    repeating-linear-gradient(to right,  var(--c-grid-major) 0 1px, transparent 1px var(--grid-step-major)),
    repeating-linear-gradient(to bottom, var(--c-grid-major) 0 1px, transparent 1px var(--grid-step-major)),
    repeating-linear-gradient(to right,  var(--c-grid) 0 1px, transparent 1px var(--grid-step)),
    repeating-linear-gradient(to bottom, var(--c-grid) 0 1px, transparent 1px var(--grid-step));
}

/* без этой строки сетки не видно: артборд Zero Block белый и закрывает её */
.t396__artboard { background-color: transparent !important; }
.t-rec { background-color: transparent; }

/* блоку, которому сетка не нужна, вернуть белый — впиши его ID */
/* #rec1234567890 .t396__artboard { background-color: var(--c-page) !important; } */

@media screen and (max-width: 959px) { :root { --grid-step: 32px; --grid-step-major: 160px; } }
@media screen and (max-width: 639px) { :root { --grid-step: 28px; --grid-step-major: 140px; } }
@media screen and (max-width: 479px) { :root { --grid-step: 24px; --grid-step-major: 120px; } }

/* ---------- 3. ТИПОГРАФИКА ---------- */
.cotry-h1, .cotry-h1 .tn-atom {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(40px, 5.7vw, 68px);
  line-height: 106%; letter-spacing: -.03em; color: var(--c-text);
}
.cotry-h2, .cotry-h2 .tn-atom {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(32px, 4.3vw, 52px);
  line-height: 120%; letter-spacing: -.02em; color: var(--c-text);
}
.cotry-h3, .cotry-h3 .tn-atom {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 120%; letter-spacing: 0; color: var(--c-text);
}
.cotry-h4, .cotry-h4 .tn-atom {
  font-family: var(--f-text); font-weight: 700;
  font-size: 24px; line-height: 120%; color: var(--c-text);
}
.cotry-h5, .cotry-h5 .tn-atom {
  font-family: var(--f-text); font-weight: 600;
  font-size: 22px; line-height: 120%; letter-spacing: -.01em; color: var(--c-text);
}
.cotry-body-l, .cotry-body-l .tn-atom {
  font-family: var(--f-text); font-weight: 400;
  font-size: 17px; line-height: 155%; color: var(--c-text);
}
.cotry-body, .cotry-body .tn-atom {
  font-family: var(--f-text); font-weight: 400;
  font-size: 16px; line-height: 155%; color: var(--c-text);
}
.cotry-label, .cotry-label .tn-atom {
  font-family: var(--f-text); font-weight: 600;
  font-size: 16px; line-height: 155%; color: var(--c-text);
}
.cotry-eyebrow, .cotry-eyebrow .tn-atom {
  font-family: var(--f-mono); font-weight: 500;
  font-size: 16px; line-height: 110%; letter-spacing: .20em;
  text-transform: uppercase; color: var(--c-accent-light);
}
.cotry-caption-16, .cotry-caption-16 .tn-atom {
  font-family: var(--f-mono); font-weight: 500;
  font-size: 16px; line-height: 110%; letter-spacing: 0;
}
.cotry-caption, .cotry-caption .tn-atom {
  font-family: var(--f-mono); font-weight: 500;
  font-size: 14px; line-height: 140%; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-text-secondary);
}
.cotry-caption--sentence .tn-atom { text-transform: none; }
.cotry-list, .cotry-list .tn-atom {
  font-family: var(--f-mono); font-weight: 500;
  font-size: 14px; line-height: 200%; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-accent-light);
}
.cotry-number, .cotry-number .tn-atom {
  font-family: var(--f-mono); font-weight: 500;
  font-size: 28px; line-height: normal; color: var(--c-accent-light);
}
.cotry-wordmark, .cotry-wordmark .tn-atom {
  font-family: var(--f-display); font-weight: 500;
  font-size: 11px; letter-spacing: .34em; line-height: normal;
}
.cotry-muted, .cotry-muted .tn-atom { color: var(--c-text-secondary); }

/* ---------- 4. КОНТЕКСТ «НА ЧЁРНОМ» ---------- */
.cotry-on-ink { background-color: var(--c-ink); color: var(--c-text-on-ink); }
.cotry-on-ink .t396__artboard { background-color: var(--c-ink) !important; }

.cotry-on-ink .cotry-h1 .tn-atom,
.cotry-on-ink .cotry-h2 .tn-atom,
.cotry-on-ink .cotry-h3 .tn-atom,
.cotry-on-ink .cotry-h4 .tn-atom,
.cotry-on-ink .cotry-h5 .tn-atom,
.cotry-on-ink .cotry-body .tn-atom,
.cotry-on-ink .cotry-body-l .tn-atom,
.cotry-on-ink .cotry-label .tn-atom { color: var(--c-text-on-ink); }

.cotry-on-ink .cotry-eyebrow .tn-atom,
.cotry-on-ink .cotry-list .tn-atom,
.cotry-on-ink .cotry-number .tn-atom { color: var(--c-accent-dark); }

.cotry-on-ink .cotry-muted .tn-atom,
.cotry-on-ink .cotry-caption .tn-atom { color: var(--c-text-soft-ink); }

.cotry-on-ink .cotry-hairline { border-color: var(--c-hairline-ink); }

/* ---------- 5. КНОПКИ ---------- */
.cotry-btn .tn-atom, a.cotry-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 280px; min-height: 61px;
  padding: 18px 34px; border-radius: 0;
  font-family: var(--f-text); font-weight: 600;
  font-size: 16px; line-height: 155%; letter-spacing: 0;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base),
              border-color var(--t-base), box-shadow var(--t-base);
}
.cotry-btn--primary .tn-atom, a.cotry-btn--primary {
  background-color: var(--c-ink); color: var(--c-text-on-ink); border: none;
}
.cotry-btn--primary .tn-atom:hover, a.cotry-btn--primary:hover {
  background-color: var(--c-ink); color: var(--c-accent-dark);
  box-shadow: 0 4px 14px rgba(17, 19, 24, .14);
}
.cotry-btn--secondary .tn-atom, a.cotry-btn--secondary {
  background-color: transparent; color: var(--c-text);
  border: 1px solid var(--c-ink);
}
.cotry-btn--secondary .tn-atom:hover, a.cotry-btn--secondary:hover {
  background-color: var(--c-ink); color: var(--c-accent-dark);
  border-color: var(--c-ink); box-shadow: 0 4px 14px rgba(17, 19, 24, .14);
}
.cotry-on-ink .cotry-btn--secondary .tn-atom {
  color: var(--c-text-on-ink); border-color: var(--c-text-on-ink);
}
.cotry-on-ink .cotry-btn--secondary .tn-atom:hover {
  background-color: var(--c-text-on-ink); color: var(--c-ink);
  border-color: var(--c-text-on-ink); box-shadow: none;
}
.cotry-btn .tn-atom:active, a.cotry-btn:active { box-shadow: none; }
.cotry-btn.is-disabled .tn-atom, a.cotry-btn[aria-disabled='true'] {
  opacity: .40; pointer-events: none; box-shadow: none;
}
.cotry-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
@media screen and (max-width: 639px) { .cotry-btn-row { flex-direction: column; } }
@media screen and (max-width: 479px) {
  .cotry-btn .tn-atom, a.cotry-btn { width: 300px; min-width: 0; }
}

.t-btn, .t-submit {
  min-width: 280px !important; min-height: 61px !important;
  padding: 18px 34px !important; border-radius: 0 !important;
  font-family: var(--f-text) !important; font-weight: 600 !important;
  font-size: 16px !important; line-height: 155% !important;
  background-color: var(--c-ink) !important; color: var(--c-text-on-ink) !important;
  border: none !important;
  transition: color var(--t-base), box-shadow var(--t-base) !important;
}
.t-btn:hover, .t-submit:hover {
  background-color: var(--c-ink) !important; color: var(--c-accent-dark) !important;
  box-shadow: 0 4px 14px rgba(17, 19, 24, .14) !important;
}

/* ---------- 6. ССЫЛКИ ---------- */
.t-text a, .t-descr a, .t-name a, .t-uptitle a,
.t-text a:link, .t-descr a:link, .tn-atom a {
  color: inherit !important;
  text-decoration: none !important;
  text-decoration-color: rgba(17, 19, 24, .32) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.t-text a:hover, .t-descr a:hover, .t-name a:hover,
.t-uptitle a:hover, .tn-atom a:hover {
  color: var(--c-accent-light) !important;
  text-decoration-color: var(--c-accent-light) !important;
}
.cotry-on-ink .t-text a, .cotry-on-ink .t-descr a, .cotry-on-ink .tn-atom a {
  text-decoration-color: rgba(255, 255, 255, .38) !important;
}
.cotry-on-ink .t-text a:hover,
.cotry-on-ink .t-descr a:hover,
.cotry-on-ink .tn-atom a:hover {
  color: var(--c-accent-dark) !important;
  text-decoration-color: var(--c-accent-dark) !important;
}

.cotry-textlink, .cotry-textlink .tn-atom {
  font-family: var(--f-text); font-weight: 600; font-size: 16px;
  color: var(--c-text); text-decoration: none;
  transition: color var(--t-fast);
}
.cotry-textlink .tn-atom:hover, a.cotry-textlink:hover { color: var(--c-accent-light); }
.cotry-on-ink .cotry-textlink .tn-atom:hover { color: var(--c-accent-dark); }

.cotry-nav-link, .cotry-nav-link .tn-atom {
  font-family: var(--f-text); font-weight: 600; font-size: 16px;
  color: var(--c-text); text-decoration: none;
  transition: color var(--t-fast);
}
.cotry-nav-link .tn-atom:hover { color: var(--c-accent-light); }
.cotry-nav-link.is-active .tn-atom { color: var(--c-accent-light); }

.cotry-footer-link, .cotry-footer-link .tn-atom {
  color: var(--c-text-soft-ink); text-decoration: none;
  transition: color var(--t-fast);
}
.cotry-footer-link .tn-atom:hover, a.cotry-footer-link:hover { color: var(--c-text-on-ink); }

/* ---------- 7. КАРТОЧКИ, ВКЛАДКИ, СТРЕЛКИ ---------- */
.cotry-card {
  background-color: var(--c-paper); border-radius: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.cotry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(17, 19, 24, .08);
}
.cotry-card .cotry-number .tn-atom,
.cotry-card .cotry-h4 .tn-atom { transition: color var(--t-fast); }
.cotry-card .cotry-number .tn-atom { color: var(--c-text-secondary); }
.cotry-card .cotry-h4 .tn-atom     { color: var(--c-text-secondary); }
.cotry-card:hover .cotry-number .tn-atom,
.cotry-card.is-active .cotry-number .tn-atom { color: var(--c-accent-light); }
.cotry-card:hover .cotry-h4 .tn-atom,
.cotry-card.is-active .cotry-h4 .tn-atom { color: var(--c-text); }

.cotry-arrow {
  color: var(--c-text-secondary); display: inline-block;
  transition: transform var(--t-fast), color var(--t-fast);
}
.cotry-case:hover .cotry-arrow {
  color: var(--c-accent-light); transform: translate(2px, -2px);
}

.cotry-tab .tn-atom {
  color: var(--c-text-soft-ink); cursor: pointer;
  transition: color var(--t-fast);
}
.cotry-tab .tn-atom:hover,
.cotry-tab.is-active .tn-atom { color: var(--c-accent-dark); }

.cotry-carousel-btn {
  color: var(--c-text-secondary);
  transition: color var(--t-fast), transform var(--t-fast);
}
.cotry-carousel-btn:hover { color: var(--c-accent-light); }
.cotry-carousel-btn--prev:hover { transform: translateX(-2px); }
.cotry-carousel-btn--next:hover { transform: translateX(2px); }

/* ---------- 8. ЛИНИИ И FAQ ---------- */
.cotry-hairline { border: 0; border-top: 1px solid var(--c-hairline); }
.cotry-faq-row {
  border-bottom: 1px solid var(--c-hairline); cursor: pointer;
  transition: background-color var(--t-fast);
}
.cotry-faq-row:hover .cotry-faq-q .tn-atom { color: var(--c-accent-light); }
.cotry-faq-q .tn-atom { transition: color var(--t-fast); }
.cotry-faq-toggle .tn-atom { color: var(--c-accent-light); }

/* ---------- 9. ФОРМЫ ---------- */
.cotry-form input, .cotry-form textarea,
.t-input, .t-input-group textarea {
  font-family: var(--f-text) !important;
  font-size: 16px !important; line-height: 155% !important;
  color: var(--c-text) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--c-hairline) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  transition: border-color var(--t-fast) !important;
}
.cotry-form input::placeholder, .cotry-form textarea::placeholder,
.t-input::placeholder { color: var(--c-text-secondary) !important; }
.cotry-form input:focus, .cotry-form textarea:focus, .t-input:focus {
  outline: none !important;
  border-bottom-color: var(--c-accent-light) !important;
}

/* ---------- 10. РАСКЛАДКА ---------- */
.cotry-section { padding: var(--sec-y) var(--pad-x); }
.cotry-section--tight { padding-top: 90px; padding-bottom: 90px; }
.cotry-section--bleed { padding-left: 0; padding-right: 0; }
.cotry-section--bleed > .cotry-inner { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.cotry-stack { display: flex; flex-direction: column; }
.cotry-stack--40 { gap: 40px; }
.cotry-stack--60 { gap: 60px; }
.cotry-stack--80 { gap: 80px; }
.cotry-eyebrow + * { margin-top: 18px; }

@media screen and (max-width: 1199px) { :root { --pad-x: 40px; --sec-y: 120px; } }
@media screen and (max-width:  959px) { :root { --pad-x: 20px; --sec-y:  96px; } }
@media screen and (max-width:  639px) { :root { --pad-x: 20px; --sec-y:  80px; } }
@media screen and (max-width:  479px) { :root { --pad-x: 20px; --sec-y:  64px; } }
@media screen and (max-width:  359px) { :root { --pad-x: 10px; --sec-y:  56px; } }

/* ---------- 11. СИСТЕМНЫЕ МЕЛОЧИ ---------- */
::selection { background: var(--c-accent-pale); color: var(--c-ink); }
.cotry-on-ink ::selection { background: var(--c-accent-dark); color: var(--c-ink); }

a:focus-visible, button:focus-visible,
.cotry-btn .tn-atom:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-accent-light);
  outline-offset: 3px; border-radius: 0;
}
.cotry-on-ink a:focus-visible,
.cotry-on-ink button:focus-visible { outline-color: var(--c-accent-dark); }

img, video { border-radius: 0; }

@media (hover: none) {
  .cotry-btn .tn-atom:hover, a.cotry-btn:hover,
  .t-btn:hover, .t-submit:hover,
  .cotry-card:hover { box-shadow: none; transform: none; }
  .cotry-case:hover .cotry-arrow { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .cotry-card:hover { transform: none; }
  .cotry-case:hover .cotry-arrow { transform: none; }
}

/* --------- ZERO BLOCK · геометрия групп ---------
   Tilda рисует .tn-molecule с border:1px solid transparent и box-sizing:border-box.
   Из-за этого вложенный контент теряет 2px ширины и смещается на 1px
   на каждом уровне вложенности: строки выше на 2px, колонки уезжают от сетки.
   Со снятой рамкой геометрия совпадает с макетом Figma пиксель-в-пиксель.
   Ни одна группа на сайте видимый border не использует (проверено: 0 из 108).
   Если где-то понадобится рамка — задать её точечно по #rec... */
.t396 .tn-molecule { border-width: 0 !important; }


/* ============================================================
   HERO BUTTON BRACKETS [ ] — Zero Block rec2860222603 (Homepage)
   Added 17.08.2026. Spec: cotry-hero-button-css.md
   Zero Block classname (hero_btn / hero_br) is NOT emitted into the
   published HTML (verified 17.08.2026) — brackets are matched by their
   image instead: ...3665 = LEFT bracket, ...6237 = RIGHT bracket.
   Bracket is drawn with a border, the raster image is hidden.
   Result: 26px wide on all 7 breakpoints, height = button height.
   NB: :has() inside :has() is invalid CSS — do not rewrite nested.
   ============================================================ */
:root{--btn-accent:#6F0097;--btn-stroke:2px;--btn-shift:8px;--btn-speed:.28s}

/* COTRY-FIX-CTA-BRACKET-BLACK 19.08.2026: CTA quote "Let's build it" (rec2907346203) сидит на чёрной поверхности #111318 -> акцент по цветовому закону должен быть #C77FE8, а не белый-акцент #6F0097 */
:is(#rec2907346203,#rec4131799003,#rec4131802503) { --btn-accent: var(--c-accent-dark); }
.t396 .tn-molecule:has(> .tn-elem img[src*="tild3665-3631-4239-a566-646131623739"]){overflow:visible!important}
.t396 .tn-group:has(> .tn-molecule > .tn-elem img[src*="tild3665-3631-4239-a566-646131623739"]){overflow:visible!important}
.t396 .tn-elem:has(img[src*="tild3665-3631-4239-a566-646131623739"]),.t396 .tn-elem:has(img[src*="tild6237-6433-4536-b031-386466636263"]){align-self:stretch!important;height:auto!important;width:26px!important;min-width:26px!important;flex:0 0 26px!important;overflow:visible!important;transition:transform var(--btn-speed) cubic-bezier(.22,.61,.36,1)}
.t396 .tn-elem:has(img[src*="tild3665-3631-4239-a566-646131623739"])>.tn-atom,.t396 .tn-elem:has(img[src*="tild6237-6433-4536-b031-386466636263"])>.tn-atom{height:100%!important;width:100%!important;background:none!important;background-image:none!important;border-style:solid!important;border-color:var(--btn-accent)!important;border-width:var(--btn-stroke)!important;border-radius:0!important;box-sizing:border-box!important}
.t396 .tn-elem:has(img[src*="tild3665-3631-4239-a566-646131623739"]) img,.t396 .tn-elem:has(img[src*="tild6237-6433-4536-b031-386466636263"]) img{display:none!important}
.t396 .tn-elem:has(img[src*="tild3665-3631-4239-a566-646131623739"])>.tn-atom{border-right-width:0!important}
.t396 .tn-elem:has(img[src*="tild6237-6433-4536-b031-386466636263"])>.tn-atom{border-left-width:0!important}
.t396 .tn-molecule:hover>.tn-elem:has(img[src*="tild3665-3631-4239-a566-646131623739"]){transform:translateX(calc(-1 * var(--btn-shift)))}
.t396 .tn-molecule:hover>.tn-elem:has(img[src*="tild6237-6433-4536-b031-386466636263"]){transform:translateX(var(--btn-shift))}
@media (hover:none){.t396 .tn-molecule:hover>.tn-elem:has(img[src*="tild3665-3631-4239-a566-646131623739"]),.t396 .tn-molecule:hover>.tn-elem:has(img[src*="tild6237-6433-4536-b031-386466636263"]){transform:none}}
@media (max-width:640px){:root{--btn-shift:6px}}
@media (max-width:360px){:root{--btn-shift:4px}}
@media (prefers-reduced-motion:reduce){.t396 .tn-elem:has(img[src*="tild3665-3631-4239-a566-646131623739"]),.t396 .tn-elem:has(img[src*="tild6237-6433-4536-b031-386466636263"]){transition:none}}


/* ---------------------------------------------------------------------------
   12. NAV / SOCIAL / LANG LINKS + FOOTER + CONTACT DIVIDERS
   Session 18.08: header menu items (menu_elements/menu_social/menu_language)
   no longer underlined by default; underline appears only on hover/press, in
   the correct accent for the surface it sits on. Footer links never show an
   underline, hover is colour-only. Contact block dividers match FAQ shade.
   ------------------------------------------------------------------------ */
.menu_elements a,
.menu_social a,
.menu_language a {
  text-decoration: none !important;
}
.menu_elements a:hover,
.menu_social a:hover,
.menu_language a:hover,
.menu_elements a:active,
.menu_social a:active,
.menu_language a:active {
  text-decoration: none !important;
  text-decoration-color: var(--c-accent-light) !important;
  color: var(--c-accent-light) !important;
}

/* sticky (ink) header — lighter purple on hover/press */
:is(#rec2857709303,#rec4107117103,#rec4107120503) .menu_elements a:hover,
:is(#rec2857709303,#rec4107117103,#rec4107120503) .menu_social a:hover,
:is(#rec2857709303,#rec4107117103,#rec4107120503) .menu_language a:hover,
:is(#rec2857709303,#rec4107117103,#rec4107120503) .menu_elements a:active,
:is(#rec2857709303,#rec4107117103,#rec4107120503) .menu_social a:active,
:is(#rec2857709303,#rec4107117103,#rec4107120503) .menu_language a:active {
  text-decoration-color: var(--c-accent-dark) !important;
  color: var(--c-accent-dark) !important;
}

/* footer links — never underline; hover is colour-only, lighter purple (footer sits on ink) */
:is(#rec2860198403,#rec4107118303,#rec4107121203) a {
  text-decoration: none !important;
}
:is(#rec2860198403,#rec4107118303,#rec4107121203) a:hover {
  text-decoration: none !important;
  color: var(--c-accent-dark) !important;
}

/* contact block dividers — match the darker FAQ hairline shade */
.cotry-contact { --cc-border: #B8B8B2 !important; }


/* Hide Telegram link in both headers on EN version (JS adds .cotry-lang-en to  on non-/it,/ru paths); WA/BE shift left to close the gap. Keep TG in footer + IT/RU always. */
.cotry-lang-en :is(#rec2854806703,#rec4107116803,#rec4107120103) .tn-elem:has(> .tn-atom > a[href*="t.me"]),
.cotry-lang-en :is(#rec2857709303,#rec4107117103,#rec4107120503) .tn-elem:has(> .tn-atom > a[href*="t.me"]) {
  display: none !important;
}
.cotry-lang-en :is(#rec2854806703,#rec4107116803,#rec4107120103) .tn-elem:has(> .tn-atom > a[href*="wa.me"]) { left: 70px !important; }
.cotry-lang-en :is(#rec2854806703,#rec4107116803,#rec4107120103) .tn-elem:has(> .tn-atom > a[href*="behance"]) { left: 118px !important; }
.cotry-lang-en :is(#rec2857709303,#rec4107117103,#rec4107120503) .tn-elem:has(> .tn-atom > a[href*="wa.me"]) { left: 0 !important; }
.cotry-lang-en :is(#rec2857709303,#rec4107117103,#rec4107120503) .tn-elem:has(> .tn-atom > a[href*="behance"]) { left: 0 !important; }


/* Active-language "EN" highlight — consistent in both headers.
   Sticky header already has a working purple pill frame (Zero Block), just strip the stray underline it inherited.
   White header has no pill at all — add one (tight background, no padding, to avoid shifting the fixed-width absolute layout). */
:is(.tn-elem__28577093031786282454161000025,.tn-elem__41071171031786282454161000025,.tn-elem__41071205031786282454161000025) a {
  text-decoration: none !important;
}
:is(.tn-elem__28548067031786267575506000023,.tn-elem__41071168031786267575506000023,.tn-elem__41071201031786267575506000023) .tn-atom {
  background: var(--c-accent-light);
}
:is(.tn-elem__28548067031786267575506000023,.tn-elem__41071168031786267575506000023,.tn-elem__41071201031786267575506000023) a {
  color: #fff !important;
  text-decoration: none !important;
}


/* Чёрные горизонтальные "полоски"-табы (Services "Sites I build", Process "How it works",
   Portfolio filter) — высота выровнена по реальной высоте липкого чёрного хедера
   (:is(#rec2857709303,#rec4107117103,#rec4107120503) .t396__artboard) на тех же брейкпоинтах Tilda, замерено вживую из CSSOM:
   база >1859px = 84px, <=1859px = 94px, <=959px = 62px (держится константой до 320px).
   Пока полоски НЕ position:fixed (это Люба настроит отдельно) — z-index поднят на САМОЙ
   ВНЕШНЕЙ группе Zero Block, которая создаёт свой stacking context (все внутренние группы
   вложены в неё и не могут "пробить" её z-index:3 сами по себе). ВАЖНО: из-за этого во время
   прокрутки над хедером будет временно перекрывать не только сама полоска, а весь блок секции
   в момент прохождения через верх экрана — это ограничение вложенности stacking context в
   разметке Tilda, не баг CSS-подхода. Полная точечная изоляция только полоски потребует
   position:fixed (следующий шаг, который Люба сделает сама). */

/* Высота липких полос = высоте главного меню сайта, чтобы полоса
   перекрывала меню один-в-один: 70 на 1860, 54 на всех меньших.
   Проверено Любой по хедеру 21.08. */
#molecule-1786397444792000060,
#molecule-1786470477549000006,
#molecule-1786312317132000006 {
  height: 70px !important;
  min-height: 70px !important;
}
@media screen and (max-width: 1859px) {
  #molecule-1786397444792000060,
  #molecule-1786470477549000006,
  #molecule-1786312317132000006 {
    height: 54px !important;
    min-height: 54px !important;
  }
}
@media screen and (max-width: 959px) {
  #molecule-1786397444792000060,
  #molecule-1786470477549000006,
  #molecule-1786312317132000006 {
    height: 54px !important;
    min-height: 54px !important;
  }
}

/* Полоса табов «How it works»: z-index ставит скрипт в T123 и только на время залипания.
   Раньше высокий z-index стоял на всей группе секции — из-за этого заголовок секции
   всплывал поверх фиксированного меню сайта при скролле. 22.08 */



/* BUTTON BRACKETS — расширение 18.08.2026: та же анимация, что у HERO BUTTON BRACKETS (см. выше),
   применена к двум другим кнопкам со скобками на сайте, у которых картинки скобок — отдельные,
   с другими tild-хешами (каждая скобка была загружена как отдельная картинка, не переиспользована):
   1) CTA "Let's build it" (rec2907346203, кнопка "Start a project →")
   2) Process "How it works" (rec2930520703, кнопка "More info →")
   Переменные --btn-accent/--btn-stroke/--btn-shift/--btn-speed и media-запросы под --btn-shift
   уже объявлены в блоке HERO BUTTON BRACKETS выше (глобальные :root-переменные, повторно не объявляю). */

.t396 .tn-molecule:has(> .tn-elem img[src*="tild3632-6635-4239-a466-663861306461"]){overflow:visible!important}
.t396 .tn-group:has(> .tn-molecule > .tn-elem img[src*="tild3632-6635-4239-a466-663861306461"]){overflow:visible!important}
.t396 .tn-elem:has(img[src*="tild3632-6635-4239-a466-663861306461"]),
.t396 .tn-elem:has(img[src*="tild3361-3862-4233-b762-613966616266"]){
  align-self:stretch!important; height:auto!important;
  width:26px!important; min-width:26px!important; flex:0 0 26px!important;
  overflow:visible!important;
  transition:transform var(--btn-speed) cubic-bezier(.22,.61,.36,1)!important;
}
.t396 .tn-elem:has(img[src*="tild3632-6635-4239-a466-663861306461"])>.tn-atom,
.t396 .tn-elem:has(img[src*="tild3361-3862-4233-b762-613966616266"])>.tn-atom{
  height:100%!important; width:100%!important; background:none!important;
  border-style:solid!important; border-color:var(--btn-accent)!important; border-width:var(--btn-stroke)!important;
}
.t396 .tn-elem:has(img[src*="tild3632-6635-4239-a466-663861306461"])>.tn-atom{border-right-width:0!important}
.t396 .tn-elem:has(img[src*="tild3361-3862-4233-b762-613966616266"])>.tn-atom{border-left-width:0!important}
.t396 .tn-elem:has(img[src*="tild3632-6635-4239-a466-663861306461"]) img,
.t396 .tn-elem:has(img[src*="tild3361-3862-4233-b762-613966616266"]) img{display:none!important}
.t396 .tn-molecule:hover>.tn-elem:has(img[src*="tild3632-6635-4239-a466-663861306461"]){transform:translateX(calc(-1 * var(--btn-shift)))}
.t396 .tn-molecule:hover>.tn-elem:has(img[src*="tild3361-3862-4233-b762-613966616266"]){transform:translateX(var(--btn-shift))}


.t396 .tn-molecule:has(> .tn-elem img[src*="tild3432-6434-4533-b439-363737333732"]){overflow:visible!important}
.t396 .tn-group:has(> .tn-molecule > .tn-elem img[src*="tild3432-6434-4533-b439-363737333732"]){overflow:visible!important}
.t396 .tn-elem:has(img[src*="tild3432-6434-4533-b439-363737333732"]),
.t396 .tn-elem:has(img[src*="tild3865-3637-4365-a436-353639383133"]){
  align-self:stretch!important; height:auto!important;
  width:26px!important; min-width:26px!important; flex:0 0 26px!important;
  overflow:visible!important;
  transition:transform var(--btn-speed) cubic-bezier(.22,.61,.36,1)!important;
}
.t396 .tn-elem:has(img[src*="tild3432-6434-4533-b439-363737333732"])>.tn-atom,
.t396 .tn-elem:has(img[src*="tild3865-3637-4365-a436-353639383133"])>.tn-atom{
  height:100%!important; width:100%!important; background:none!important;
  border-style:solid!important; border-color:var(--btn-accent)!important; border-width:var(--btn-stroke)!important;
}
.t396 .tn-elem:has(img[src*="tild3432-6434-4533-b439-363737333732"])>.tn-atom{border-right-width:0!important}
.t396 .tn-elem:has(img[src*="tild3865-3637-4365-a436-353639383133"])>.tn-atom{border-left-width:0!important}
.t396 .tn-elem:has(img[src*="tild3432-6434-4533-b439-363737333732"]) img,
.t396 .tn-elem:has(img[src*="tild3865-3637-4365-a436-353639383133"]) img{display:none!important}
.t396 .tn-molecule:hover>.tn-elem:has(img[src*="tild3432-6434-4533-b439-363737333732"]){transform:translateX(calc(-1 * var(--btn-shift)))}
.t396 .tn-molecule:hover>.tn-elem:has(img[src*="tild3865-3637-4365-a436-353639383133"]){transform:translateX(var(--btn-shift))}



/* "Go back" на юридических страницах (/terms, /privacy, /cookies) — старая встроенная
   Tilda-кнопка (класс .btnviola: тёмно-индиговая заливка rgb(58,45,113), радиус 30px, Montserrat) —
   не имеет отношения к текущей дизайн-системе сайта. Приведена к Primary-кнопке
   по cotry-buttons-spec.md §2/§6 (тёмная заливка ink, radius 0, Archivo SemiBold,
   ховер — текст в акцент C77FE8 + тень). 18.08.2026. */
.btnviola .tn-molecule {
  background-color: #111318 !important;
  border-radius: 0 !important;
  min-width: 280px !important;
  padding: 18px 34px !important;
  height: auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: box-shadow .2s ease !important;
}
.btnviola .tn-atom {
  color: #FFFFFF !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 155% !important;
  letter-spacing: 0 !important;
  transition: color .2s ease !important;
}
.btnviola:hover .tn-molecule {
  background-color: #111318 !important;
  box-shadow: 0 4px 14px rgba(17,19,24,.14) !important;
}
.btnviola:hover .tn-atom {
  color: #C77FE8 !important;
}


/* ===== Фикс 18.08.2026: белая шапка — разрыв соц.сети->EN, лишний сдвиг WA/BE, белый EN ===== */

/* EN белым текстом в белой шапке — стабильный селектор по href (не по нестабильному tn-elem классу) */
:is(#rec2854806703,#rec4107116803,#rec4107120103) [data-elem-id="1787066606671000007"] a {
  color: #fff !important;
}

/* Разрыв соцсети → языки в белой шапке задаётся в Zero Block (Flexgapx), правило-затычка column-gap:50px !important снято 22.08 */

/* Убираем устаревшую компенсацию сдвига WA/BE (была нужна, когда TG был скрыт, но существовал в DOM; сейчас TG полностью удалён из белой шапки, и компенсация даёт лишний разрыв) */
.cotry-lang-en :is(#rec2854806703,#rec4107116803,#rec4107120103) .tn-elem:has(> .tn-atom > a[href*="wa.me"]),
.cotry-lang-en :is(#rec2854806703,#rec4107116803,#rec4107120103) .tn-elem:has(> .tn-atom > a[href*="behance"]) {
  left: 0 !important;
}


/* ===== Фикс 20.08.2026: залипший ховер стрелок галереи на тач-устройствах =====
   На iPad/телефоне :hover «прилипает» после тапа и держится до тапа в другом месте —
   стрелка выглядит постоянно нажатой. Ховер-эффект должен работать только там,
   где есть настоящий курсор; на тач обратную связь даёт :active (само нажатие).
   Значения покоя сняты с живого сайта: фон #FFFFFF, глиф #111318. */
@media (hover: none), (pointer: coarse) {
  .t396 .gallery-prev:hover,
  .t396 .gallery-next:hover { box-shadow: none !important; }
  .t396 .gallery-prev:hover .tn-molecule,
  .t396 .gallery-next:hover .tn-molecule { background-color: #FFFFFF !important; }
  .t396 .gallery-prev:hover .tn-atom,
  .t396 .gallery-next:hover .tn-atom { color: #111318 !important; }

  .t396 .gallery-prev:active .tn-molecule,
  .t396 .gallery-next:active .tn-molecule { background-color: #111318 !important; }
  .t396 .gallery-prev:active .tn-atom,
  .t396 .gallery-next:active .tn-atom { color: #C77FE8 !important; }
}
.t396 .gallery-prev,
.t396 .gallery-next { -webkit-tap-highlight-color: transparent; }


/* ═══════════ Боковое меню ME403N · :is(#rec3237791703,#rec4107117203,#rec4107120603) · 22.08.2026 ═══════════ */
/* Открывается ссылкой #menuopen (кнопки MENU в rec2857701303 и rec2857709303) */

/* 21.09.2026: было 30000 (расчёт на бар 22223) — бар с 09.09 поднят до 30500
   (--ct-sticky-z в движке табов rec3204696903), панель оказалась НИЖЕ бара и
   обрезалась им сверху при открытии поверх залипшей полосы. Подняли панель
   выше бара и артборда кнопки MENU (999999), но ниже попапов Tilda (10000002)
   и cookie-виджета (2147483000). */
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112,
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112__overlay { z-index: 999999 !important; }

:is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112 .t-menu-popover__container { padding: 48px 40px 0; }
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112__additional { padding: 32px 0 40px; gap: 24px; }

/* логотип: знак + Cotry + WEB STUDIO */
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112__logowrapper { margin-bottom: 40px; }
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112__logowrapper:not(:has(img))::before {
  content: ""; display: block; width: 34px; height: 34px; margin-bottom: 14px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzNCAzNCc+PHBhdGggZmlsbD0nI2ZmZmZmZicgZD0nTTE2LjkyODYgMTAuNDc4OEwxNi42MDkgNC4wNzY2QzE2LjQ3MyAxLjM1ODg3IDE1LjA0NSAwIDEyLjMyNSAwSDEuMDJDMC4zNCAwIDAgMC4zNCAwIDEuMDJWMTIuMzI1QzAgMTUuMDQ1IDEuMzU4ODcgMTYuNDczIDQuMDc2NiAxNi42MDlMMTAuNDc4OCAxNi45Mjg2QzE1LjAwNTMgMTcuMTU1MyAxNy4xNTUzIDE1LjAwNTMgMTYuOTI4NiAxMC40Nzg4WicvPjxwYXRoIGZpbGw9JyNmZmZmZmYnIGQ9J00yMy41MjEyIDE2LjkyODZMMjkuOTIzNCAxNi42MDlDMzIuNjQxMSAxNi40NzMgMzQgMTUuMDQ1IDM0IDEyLjMyNVYxLjAyQzM0IDAuMzQgMzMuNjYgMCAzMi45OCAwSDIxLjY3NUMxOC45NTUgMCAxNy41MjcgMS4zNTg4NyAxNy4zOTEgNC4wNzY2TDE3LjA3MTQgMTAuNDc4OEMxNi44NDQ3IDE1LjAwNTMgMTguOTk0NyAxNy4xNTUzIDIzLjUyMTIgMTYuOTI4NlonLz48cGF0aCBmaWxsPScjZmZmZmZmJyBkPSdNMTcuMDcxNCAyMy41MjEyTDE3LjM5MSAyOS45MjM0QzE3LjUyNyAzMi42NDExIDE4Ljk1NSAzNCAyMS42NzUgMzRIMzIuOThDMzMuNjYgMzQgMzQgMzMuNjYgMzQgMzIuOThWMjEuNjc1QzM0IDE4Ljk1NSAzMi42NDExIDE3LjUyNyAyOS45MjM0IDE3LjM5MUwyMy41MjEyIDE3LjA3MTRDMTguOTk0NyAxNi44NDQ3IDE2Ljg0NDcgMTguOTk0NyAxNy4wNzE0IDIzLjUyMTJaJy8+PHBhdGggZmlsbD0nI2ZmZmZmZicgZD0nTTEwLjQ3ODggMTcuMDcxNEw0LjA3NjYgMTcuMzkxQzEuMzU4ODcgMTcuNTI3IDAgMTguOTU1IDAgMjEuNjc1VjMyLjk4QzAgMzMuNjYgMC4zNCAzNCAxLjAyIDM0SDEyLjMyNUMxNS4wNDUgMzQgMTYuNDczIDMyLjY0MTEgMTYuNjA5IDI5LjkyMzRMMTYuOTI4NiAyMy41MjEyQzE3LjE1NTMgMTguOTk0NyAxNS4wMDUzIDE2Ljg0NDcgMTAuNDc4OCAxNy4wNzE0WicvPjwvc3ZnPg==") center / contain no-repeat;
}
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112__logo { line-height: 1.1; }
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112__logo::after {
  content: "WEB STUDIO"; display: block; margin-top: 4px;
  font-family: IBMPlexMono, 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 3.4px; color: #B8B8B2;
}
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112__logo a { text-decoration: none !important; }

/* пункты меню */
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu__link-item { display: inline-block; padding: 7px 0; text-decoration: none !important; transition: color .18s ease; }
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu__link-item:hover { color: #C77FE8 !important; text-decoration: none !important; }

/* соцсети */
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t-sociallinks__item svg * { fill: #B8B8B2 !important; transition: fill .18s ease; }
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t-sociallinks__item:hover svg * { fill: #C77FE8 !important; }

/* описание */
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu-popover__descr { letter-spacing: .4px; max-width: 300px; }

/* кнопка — по спеке кнопок сайта, контурная на ink */
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu-base__buttons,
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu-base__button { width: 100%; box-sizing: border-box; }
:is(#rec3237791703,#rec4107117203,#rec4107120603) .t-btn {
  display: flex; width: 100%; min-width: 0 !important; max-width: none;
  align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 61px; padding: 18px 34px; border-radius: 0 !important;
  font-weight: 600; line-height: 155%; text-decoration: none !important;
  transition: color .2s ease, border-color .2s ease;
}

/* ── адаптив ── */
@media screen and (max-width: 1199px) {
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112 { max-width: 400px; }
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu__link-item { font-size: 28px; }
}
@media screen and (max-width: 959px) {
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112 .t-menu-popover__container { padding: 40px 30px 0; }
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu__link-item { font-size: 26px; }
}
@media screen and (max-width: 639px) {
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112 { max-width: 100%; }
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112 .t-menu-popover__container { padding: 32px 24px 0; }
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu__link-item { font-size: 24px; padding: 6px 0; }
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu-base__buttons,
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu-base__button { width: 100%; box-sizing: border-box; }
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-btn {
    display: flex; width: 100%; min-width: 0 !important; max-width: none;
    box-sizing: border-box; align-items: center; justify-content: center;
  }
}
@media screen and (max-width: 479px) {
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112 .t-menu-popover__container { padding: 28px 20px 0; }
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu__link-item { font-size: 20px; }
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112__additional { padding: 24px 0 32px; gap: 20px; }
}
@media screen and (max-width: 359px) {
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112 .t-menu-popover__container { padding: 24px 10px 0; }
}
@media (hover: none) {
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-menu__link-item:hover { color: #FFFFFF !important; }
}


/* кнопка MENU (Fixed, rec2857701303): контейнер-артборд 300px не должен ловить клики по странице */
:is(#rec2857701303,#rec4107116903,#rec4107120203) .t396__artboard { pointer-events: none; }
:is(#rec2857701303,#rec4107116903,#rec4107120203) .t396__artboard .tn-elem { pointer-events: auto; }


/* Кнопка MENU (rec2857701303, ≥1200px) — всегда видна, контейнер не режет её по высоте */
@media screen and (min-width: 1200px) {
  :is(#rec2857701303,#rec4107116903,#rec4107120203) .t396__artboard,
  :is(#rec2857701303,#rec4107116903,#rec4107120203) .t396__filter,
  :is(#rec2857701303,#rec4107116903,#rec4107120203) .t396__carrier { height: 300px !important; overflow: visible !important; }
  :is(#rec2857701303,#rec4107116903,#rec4107120203) .t396__artboard { opacity: 1 !important; }
}


/* ═══ Скобочная кнопка «Start a project» (.ch__btn) ═══
   По ховеру, помимо разъезжающихся скобок, фраза подчёркивается 1px акцентом.
   Акцент — по поверхности: светлая → #6F0097, ink → #C77FE8. */
@media (hover: hover) and (pointer: fine) {
  .ch__btn .ch__btn-label {
    text-decoration-line: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color .18s ease;
  }
  .ch__btn:hover .ch__btn-label,
  .ch__btn:focus-visible .ch__btn-label {
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px;
    text-decoration-color: var(--c-accent, var(--c-accent-light, #6F0097)) !important;
  }
  .cotry-ink .ch__btn:hover .ch__btn-label,
  .cotry-on-ink .ch__btn:hover .ch__btn-label,
  [data-surface="ink"] .ch__btn:hover .ch__btn-label,
  :is(#rec2857709303,#rec4107117103,#rec4107120503) .ch__btn:hover .ch__btn-label,
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .ch__btn:hover .ch__btn-label {
    text-decoration-color: var(--c-accent-dark, #C77FE8) !important;
  }
}


/* Кнопка «Start a project» в боковом меню (ink-поверхность): по ховеру — тот же приём,
   что у скобочной кнопки на белом, но акцентом тёмной поверхности #C77FE8. */
@media (hover: hover) and (pointer: fine) {
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-btn .t-btnflex__text {
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color .18s ease, color .18s ease;
  }
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-btn:hover .t-btnflex__text,
  :is(#rec3237791703,#rec4107117203,#rec4107120603) .t-btn:focus-visible .t-btnflex__text {
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px;
    text-decoration-color: var(--c-accent-dark, #C77FE8) !important;
  }
}


/* ===== POPUP MAIN FORM (#mainform) =====
   Блок T1093 rec3401409303 -> Zero Block rec3401406503.
   Фуллскрин на всех ширинах + свой крестик (.cotry-popup-close, линк #closepopup). */
:is(#rec3401409303,#rec4107117303,#rec4107120703) .t-popup {
  background: #111318;
}
:is(#rec3401409303,#rec4107117303,#rec4107120703) .t-popup__bg { display: none !important; }
:is(#rec3401409303,#rec4107117303,#rec4107120703) .t-popup__close { display: none !important; }
:is(#rec3401409303,#rec4107117303,#rec4107120703) .t-popup__container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #111318 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
:is(#rec3401409303,#rec4107117303,#rec4107120703) .t-popup__container > .t-rec { width: 100%; }

/* крестик закрытия: прижимаем к правому краю контейнера сетки */
:is(#rec3401406503,#rec4107117403,#rec4107120803) .cotry-popup-close {
  left: auto !important;
  right: 40px !important;
}
:is(#rec3401406503,#rec4107117403,#rec4107120803) .cotry-popup-close .tn-atom {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}
@media screen and (max-width: 639px) {
  :is(#rec3401406503,#rec4107117403,#rec4107120803) .cotry-popup-close { right: 20px !important; }
}

/* --- попап: фон на всю ширину, контент по сетке сайта --- */
@media screen and (min-width: 1400px) {
  :is(#rec3401406503,#rec4107117403,#rec4107120803) .t396__artboard {
    padding-left: calc((100% - 1320px) / 2) !important;
    padding-right: calc((100% - 1320px) / 2) !important;
  }
  :is(#rec3401406503,#rec4107117403,#rec4107120803) .cotry-popup-close {
    right: calc((100% - 1320px) / 2) !important;
  }
}

/* --- попап: форма под UI-систему Cotry --- */
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-input {
  color: #ffffff !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,.35) !important;
}
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-input:focus { border-color: #C77FE8 !important; }
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-input::placeholder { color: rgba(184,184,178,.5) !important; }
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-input-title { color: #8A8A85 !important; }
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-submit {
  background-color: #ffffff !important;
  color: #111318 !important;
  border: 0 !important;
}
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-submit:hover,
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-submit:focus-visible {
  background-color: #ffffff !important;
  color: #6F0097 !important;
}
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-checkbox__labeltext {
  color: #B8B8B2 !important;
  font-size: 13px;
  line-height: 1.5;
}
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-checkbox__labeltext a {
  color: #B8B8B2 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184,184,178,.5);
}
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-checkbox__labeltext a:hover { color: #C77FE8 !important; }
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-checkbox__indicator {
  border-color: rgba(255,255,255,.5) !important;
  background-color: transparent !important;
}

/* попап: фильтр артборда оставлен — это затемнение поверх фонового фото */
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-checkbox__labeltext a {
  text-decoration: underline !important;
}

/* попап: подписи полей — как в контактной форме на главной (моно, капс) */
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t-input-title {
  font-family: 'IBMPlexMono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #8A8A85 !important;
}

/* попап: до 480 кнопка Send — во всю ширину контейнера минус внешние отступы */
@media screen and (max-width: 479px) {
  :is(#rec3401406503,#rec4107117403,#rec4107120803) .t-submit {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* попап: фоновое фото (Tilda не выносит bgimg артборда в публикацию — задаём здесь) */
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t396__carrier {
  background-image: url('https://static.tildacdn.net/tild3766-3766-4437-b833-323265366532/lyubov_kotrovskaya_w.webp') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}
/* на узких экранах фото сильнее уходит в фактуру — добавляем затемнения */
:is(#rec3401406503,#rec4107117403,#rec4107120803) .t396__filter {
  background-image: linear-gradient(to bottom, rgba(17,19,24,.86), rgba(17,19,24,.94)) !important;
}
@media screen and (max-width: 639px) {
  :is(#rec3401406503,#rec4107117403,#rec4107120803) .t396__filter {
    background-image: linear-gradient(to bottom, rgba(17,19,24,.9), rgba(17,19,24,.96)) !important;
  }
}

/* ===== CONTACT PAGE — form on ink panel (rec3467502703) ===== */
#rec3467502703 .t-input {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 0 !important;
}
#rec3467502703 .t-input:focus { border-color: #C77FE8 !important; }
#rec3467502703 .t-input::placeholder { color: #8A8A85 !important; opacity: 1 !important; }
#rec3467502703 .t-input::-webkit-input-placeholder { color: #8A8A85 !important; }
#rec3467502703 .t-submit {
  background-color: #ffffff !important;
  color: #111318 !important;
  border-radius: 0 !important;
  transition: color .2s ease !important;
}
#rec3467502703 .t-submit:hover { background-color: #ffffff !important; color: #6F0097 !important; }
#rec3467502703 .t-checkbox__control, #rec3467502703 .t-checkbox__indicator { border-color: rgba(255,255,255,.45) !important; }
#rec3467502703 .t-checkbox__control { color: #B8B8B2 !important; }
#rec3467502703 .t-checkbox__control a { color: #B8B8B2 !important; text-decoration: underline !important; }
#rec3467502703 .t-checkbox__control a:hover { color: #C77FE8 !important; }

/* ===== SIDE MENU ME403N — menu item size (rec3237791703) ===== */
:is(#rec3237791703,#rec4107117203,#rec4107120603) a.t-menu__link-item { font-size: 28px !important; }
@media screen and (max-width: 639px) {
  :is(#rec3237791703,#rec4107117203,#rec4107120603) a.t-menu__link-item { font-size: 22px !important; }
}

/* ===== CONTACT PAGE — no rounded corners (система Cotry: radius 0 везде) ===== */
#rec3467502703 .tn-molecule,
#rec3467502703 .tn-atom,
#rec3467502703 .t-input,
#rec3467502703 .t-submit,
#rec3467502703 .t-input-error,
#rec3467502703 .t-form__errorbox-wrapper,
#rec3467502703 .js-errorbox-all,
#rec3467502703 .t-form__successbox {
  border-radius: 0 !important;
}

/* Иконки контактов: скругление rx="5" зашито внутрь SVG-подложки (#F6F6F6).
   Закрашиваем углы тем же цветом — визуально подложка становится квадратной. */
#rec3467502703 .tn-elem[data-elem-type="image"] .tn-atom {
  background-color: #F6F6F6 !important;
  border-radius: 0 !important;
}


/* ---------- HERO 1200 (1200-1859): низ кнопки и полосы «код» вровень с низом фото · 01.09.2026 ---------- */
@media (min-width: 1200px){
  .cotry-hero{
    --capline: calc(.35 * var(--g1) + 1.4 * var(--fs-mono2));
  }
  .cotry-hero .ch__portrait img{ height: 100%; }
  .cotry-hero .ch__spacer--b{ height: var(--capline); }
}


/* Пустая обёртка блока раскрытия кейса (T123 «клевер») даёт 28px перед подвалом.
   Оверлей рисуется через position:fixed и от высоты обёртки не зависит. */
:is(#rec3412746003,#rec4131800703,#rec4131804203) { height: 0; }


/* faq-960-15 · 10.09.2026
   Наборный текст FAQ на брейкпоинте 960 (диапазон 960–1199) — 15px,
   как в Contact и хиро. В самом блоке rec2931990903 стили правятся через
   Vibe-редактор, поэтому правило живёт здесь, в CSS проекта. */
@media screen and (min-width:960px) and (max-width:1199px){
  .cotry-faq .cotry-faq__q-text,
  .cotry-faq .cotry-faq__answer,
  .ct-faq-nl{ font-size:14px !important; }
}


/* cotry-1200-13 : наборный 13px на брейкпоинте 1200 (диапазон 1200–1859).
   Только блоки главной — FAQ rec2931990903 и Контакты rec3067125003.
   Оба блока T1370 (кастомные), их CSS живёт в шаблоне блока, поэтому
   переопределение с привязкой к id записи, чтобы не задеть другие страницы. */
@media screen and (min-width:1200px) and (max-width:1859px){
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__q-text,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__answer,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__subtitle,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .ct-faq-nl{ font-size:1.0833cqw !important; } /* ≡13px при ширине 1200; cqw — родная единица автоскейла этого блока */
  :is(#rec3067125003,#rec4131800603,#rec4131804103) .cotry-contact__sub{ font-size:13px !important; }
  :is(#rec3067125003,#rec4131800603,#rec4131804103) .cotry-contact__submit{ font-size:13px !important; }
}


/* cotry-960-14 / 640-13 · 11.09.2026
   960-1199: диапазон НЕ скейлится (zoom≡1, размер фиксированный) → наборный 14px.
   640-959: всё растёт как ширина/640 → задаём базу 13px в относительных единицах,
   у FAQ это cqw (его родной автоскейл), у Contact vw. */
@media screen and (min-width:960px) and (max-width:1199px){
  :is(#rec3067125003,#rec4131800603,#rec4131804103) .cotry-contact__sub{ font-size:14px !important; }
  :is(#rec3166616903,#rec4131797503,#rec4131801003) .ch__based,
  :is(#rec3166616903,#rec4131797503,#rec4131801003) .ch__h2{ font-size:14px !important; }
}
@media screen and (min-width:640px) and (max-width:959px){
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__q-text,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__answer,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__subtitle,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .ct-faq-nl{ font-size:2.0313cqw !important; }
  :is(#rec3067125003,#rec4131800603,#rec4131804103) .cotry-contact__sub{ font-size:2.0313vw !important; }
}


/* cotry-mob-14 · 11.09.2026
   Мобильные: наборный = 14 на брейкпоинте и растёт так же, как Zero-блоки.
   Zero зумит содержимое в отношении ширина_окна / ширина_брейкпоинта,
   поэтому тут тот же коэффициент, но через vw (у этих блоков zoom всегда 1).
   480–639 → 14/480 = 2.9167 · 360–479 → 14/360 = 3.8889 · до 359 → 14/320 = 4.375 */
@media screen and (min-width:480px) and (max-width:639px){
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__q-text,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__answer,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__subtitle,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .ct-faq-nl,
  :is(#rec3067125003,#rec4131800603,#rec4131804103) .cotry-contact__sub,
  :is(#rec3166616903,#rec4131797503,#rec4131801003) .ch__based,
  :is(#rec3166616903,#rec4131797503,#rec4131801003) .ch__h2{ font-size:2.9167vw !important; }
}
@media screen and (min-width:360px) and (max-width:479px){
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__q-text,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__answer,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__subtitle,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .ct-faq-nl,
  :is(#rec3067125003,#rec4131800603,#rec4131804103) .cotry-contact__sub,
  :is(#rec3166616903,#rec4131797503,#rec4131801003) .ch__based,
  :is(#rec3166616903,#rec4131797503,#rec4131801003) .ch__h2{ font-size:3.8889vw !important; }
}
@media screen and (max-width:359px){
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__q-text,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__answer,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .cotry-faq__subtitle,
  :is(#rec2931990903,#rec4131800403,#rec4131803903) .ct-faq-nl,
  :is(#rec3067125003,#rec4131800603,#rec4131804103) .cotry-contact__sub,
  :is(#rec3166616903,#rec4131797503,#rec4131801003) .ch__based,
  :is(#rec3166616903,#rec4131797503,#rec4131801003) .ch__h2{ font-size:4.375vw !important; }
}


/* cotry-tabsbar-stuck-shadow · 11.09.2026
   Такая же тень, как у полосы видов в Portfolio (.ct-viewbar.ct-stuck):
   светлый просвет под чёрной линией в момент фиксации. */
.ct-tabsbar.ct-stuck,
.ct-bar-stuck .ct-tabsbar,
.ct-bar-rec .ct-tabsbar{ box-shadow:0 6px 20px rgba(17,19,24,.18) !important; }


/* cotry-portfolio-rec-sticky · 11.09.2026
   Полоса видов Portfolio — на тот же нативный sticky записи, что и полосы табов.
   JS-фиксация внутри zoom ломается в WebKit (баг 77998): полоса съезжала
   влево и пропадала на обратном скролле. */
:is(#rec2860269003,#rec4131701403,#rec4131768803,#rec4131797703,#rec4131801203){ --ct-rec-sticky:1; }


/* ===== Silktide: печенька переехала в правый нижний угол (16.09.2026) =====
   Тильдовский блок ошибки формы стоит fixed right:20px bottom:20px (z-index 10000),
   обёртка Silktide — z-index 99999, поэтому иконка перекрывала бы сообщение.
   Поднимаем errorbox над иконкой на всех ширинах. */
.js-errorbox-all.t-form__errorbox-wrapper { bottom: 84px !important; }


/* 21.09.2026: эйбрау (моно-лейблы над заголовками секций) на 640-959 — сверка с
   cotry-eyebrow-unify (03.09): унификация 1200-тира на fontsize 12 задела и нижние
   тиры БЕЗ собственного оверрайда 640 — они стали наследовать 12 вместо целевых 10
   (cotry-responsive-scale.md: эйбрау на 960/640/480/360/320 = 10px). Отсюда разнобой:
   Люба заметила «в вайб-блоках (FAQ/Contact, у них честные 10) эйбрау мельче, чем
   в остальных секциях». EXPERTISE/WHY ME/PROCESS уже имели свой оверрайд 640 = 10,
   остальные — нет. У RESULTS вдобавок эйбрау рисуется шрифтом Archivo вместо
   IBMPlexMono (12px не-моно вместо 10px моно) — самый заметный случай. */
@media (min-width:640px) and (max-width:959px){
  :is(#rec2860269003,#rec4131701403,#rec4131768803,#rec4131797703,#rec4131801203) .tn-elem[data-elem-id="1786312317131000004"] .tn-atom,
  :is(#rec2865021003,#rec4131798403,#rec4131801903) .tn-elem[data-elem-id="1786314856911000005"] .tn-atom,
  :is(#rec2900642603,#rec4131798703,#rec4131802203) .tn-elem[data-elem-id="1787549755274000020"] .tn-atom,
  :is(#rec2907346203,#rec4131799003,#rec4131802503) .tn-elem[data-elem-id="1786434453873000003"] .tn-atom,
  :is(#rec2907357003,#rec4131799203,#rec4131802703) .tn-elem[data-elem-id="1786434518110000003"] .tn-atom,
  :is(#rec2930510103,#rec4131799703,#rec4131803203) .tn-elem[data-elem-id="1786470445953000004"] .tn-atom,
  :is(#rec2860198403,#rec4107118303,#rec4107121203) .tn-elem[data-elem-id="1786283529718000025"] .tn-atom,
  :is(#rec2860198403,#rec4107118303,#rec4107121203) .tn-elem[data-elem-id="1786283529717000012"] .tn-atom,
  :is(#rec2860198403,#rec4107118303,#rec4107121203) .tn-elem[data-elem-id="1786283529718000019"] .tn-atom{
    font-size: 10px !important;
  }
  /* RESULTS: и размер, и не тот шрифт */
  :is(#rec2930513103,#rec4131800203,#rec4131803703) .tn-elem[data-elem-id="1786470522246000036"] .tn-atom{
    font-size: 10px !important;
    font-family: IBMPlexMono !important;
  }
}

/* 21.09.2026: html:has(.ct-bar-rec.ct-bar-stuck:not(.ct-bar-hide)) #t-header * { pointer-events:none !important }
   (правило из фикса MENU-кнопки под баром) глушит клики и по самой открытой панели
   меню .t3112/.t3112__overlay — она тоже лежит внутри #t-header (через :is(#rec3237791703,#rec4107117203,#rec4107120603)),
   поэтому крестик и пункты меню перестали кликаться, когда бар прилип. specificity
   блокирующего правила (ID 1, class 3) обычным #t-header .t3112 (ID 1, class 1) не
   перебить — добавили второй ID (:is(#rec3237791703,#rec4107117203,#rec4107120603)), это сразу выигрывает по ID-тиру. */
body.t3112__body_menushowed #t-header :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112,
body.t3112__body_menushowed #t-header :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112 *,
body.t3112__body_menushowed #t-header :is(#rec3237791703,#rec4107117203,#rec4107120603) .t3112__overlay {
  pointer-events: auto !important;
}

/* Белая шапка ≤1199: соцсети + языки прижаты к MENU, а не по центру.
   Контейнер шапки — flex space-between с тремя детьми в потоке (логотип | соцсети+языки | MENU);
   без этого правила средняя группа встаёт ровно посередине с одинаковыми дырами по бокам.
   margin-right = 24px зазора + 15px зона стрелки у плашки EN▾. 22.09.2026 */
@media screen and (max-width: 1199px) {
  :is(#rec2854806703,#rec4107116803,#rec4107120103) .tn-group[data-group-id="1786998243499000001"] {
    margin-left: auto !important;
    margin-right: 40px !important;
  }
}



/* ═══ 23.09.2026 · попап-зеро на IT/RU лежит в потоке страницы, пока скрипт попапа
   не перенесёт его в .t-popup__container — до этого он на весь экран и мелькает.
   Селектор перестаёт действовать сразу после переноса. ═══ */
#allrecords > #rec3401406503,
#allrecords > #rec4107117403,
#allrecords > #rec4107120803 { display: none !important; }


/* ═══ 23.09.2026 · переключатель языка на планшете (481–1199).
   Кнопка открывалась, меню создавалось в body с классом is-open,
   но правило @media (min-width:481px){.ctlang__menu{display:none}}
   гасило его на всём, что шире телефона. ═══ */
@media screen and (min-width:481px) and (max-width:1199px){
  .ctlang__menu.is-open{ display:block !important; }
}


/* ═══ 23.09.2026 · клик по переключателю языка до 1199.
   Внутри .ctlang__btn лежит ссылка текущего языка (например RU -> /ru).
   Клик попадал в неё и просто перезагружал ту же страницу, а обработчик
   открытия меню висит на самой кнопке. Отдаём клик кнопке. ═══ */
@media screen and (max-width:1199px){
  .ctlang__btn a{ pointer-events:none; }
}