/* Шрифты макета с нашего домена вместо fonts.googleapis.com: без DNS и TLS до чужого хоста на первом экране. Наборы latin, latin-ext, cyrillic, cyrillic-ext — браузер качает только нужные по unicode-range. */
/* Основной шрифт — Ubuntu (Ubuntu Font Licence 1.0, текст в UFL.txt рядом). В Ubuntu нет строчной ə, без которой не обходится ни одно азербайджанское слово: она добавлена — повёрнутая e, как она и рисуется в этом шрифте. Изменённый шрифт по §2(c) лицензии называется «Ubuntu derivative Neomax». Семь азербайджанских букв (Ə ə Ş ş Ğ ğ İ) лежат и в наборах latin: иначе каждая AZ-страница качала бы ещё четыре файла latin-ext (~160 КБ) ради них одних. */
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ubuntu-400-cyrillic-ext.a9d09ab6d1.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ubuntu-400-cyrillic.c861127045.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ubuntu-400-latin-ext.c9a6c22076.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ubuntu-400-latin.2fa43a6789.woff2) format('woff2');unicode-range:U+0000-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ubuntu-500-cyrillic-ext.3985441a30.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ubuntu-500-cyrillic.7141e2f1c6.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ubuntu-500-latin-ext.e63b945e90.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ubuntu-500-latin.d50a76bc36.woff2) format('woff2');unicode-range:U+0000-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ubuntu-700-cyrillic-ext.f6be9c6684.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ubuntu-700-cyrillic.0cb2c5c2d5.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ubuntu-700-latin-ext.f961b8e65f.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Ubuntu derivative Neomax';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ubuntu-700-latin.55c4bf1621.woff2) format('woff2');unicode-range:U+0000-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Моноширинные подписи — Ubuntu Mono (та же лицензия UFL 1.0). В нём тоже нет строчной ə: добавлена в latin-ext, эти файлы по §2(c) называются «Ubuntu Mono derivative Neomax». size-adjust 110 %: Ubuntu Mono мельче Martian Mono, под который размеры подписей подбирал дизайнер. */
@font-face{font-family:'Ubuntu Mono derivative Neomax';font-style:normal;font-weight:400;font-display:swap;size-adjust:110%;src:url(/assets/fonts/ubuntumono-400-cyrillic-ext.6b5eef8c01.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Ubuntu Mono derivative Neomax';font-style:normal;font-weight:400;font-display:swap;size-adjust:110%;src:url(/assets/fonts/ubuntumono-400-cyrillic.7a2bf90e3d.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Ubuntu Mono derivative Neomax';font-style:normal;font-weight:400;font-display:swap;size-adjust:110%;src:url(/assets/fonts/ubuntumono-400-latin-ext.2940b8a1af.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Ubuntu Mono derivative Neomax';font-style:normal;font-weight:400;font-display:swap;size-adjust:110%;src:url(/assets/fonts/ubuntumono-400-latin.4df032fad4.woff2) format('woff2');unicode-range:U+0000-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Ubuntu Mono derivative Neomax';font-style:normal;font-weight:700;font-display:swap;size-adjust:110%;src:url(/assets/fonts/ubuntumono-700-cyrillic-ext.69a6d4379d.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Ubuntu Mono derivative Neomax';font-style:normal;font-weight:700;font-display:swap;size-adjust:110%;src:url(/assets/fonts/ubuntumono-700-cyrillic.ded71a5b86.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Ubuntu Mono derivative Neomax';font-style:normal;font-weight:700;font-display:swap;size-adjust:110%;src:url(/assets/fonts/ubuntumono-700-latin-ext.0196da28f0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Ubuntu Mono derivative Neomax';font-style:normal;font-weight:700;font-display:swap;size-adjust:110%;src:url(/assets/fonts/ubuntumono-700-latin.e9bb17db35.woff2) format('woff2');unicode-range:U+0000-00FF, U+011E-011F, U+0130-0131, U+0152-0153, U+015E-015F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   neomax — design system
   Large, calm, brand-led: the neomax wordmark carries the hero,
   the stack radar is an arch of orbits, and the small square +
   bar from the logo underline marks structure everywhere.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --paper: #F1F3F8;
  --paper-2: #E7EBF3;
  --card: #FFFFFF;
  --ink: #0A1131;
  --ink-2: #4A5373;
  --ink-3: #7B85A2;
  --line: #DDE2EC;
  --line-2: #C8CFDD;

  --cobalt: #0033A0;
  --azure: #0072CE;
  --azure-ink: #005FB8;
  --ion: #5FD0FF;
  --flare: #FF6A2B;

  --night: #040A22;
  --night-2: #0A1538;
  --night-3: #14234F;
  --on-night: #E9EEF9;
  --on-night-2: #98A5C8;
  --night-line: rgba(150, 180, 255, .14);

  --hdr-bg: rgba(255, 255, 255, .88);
  --logo-a: #0072CE;
  --logo-b: #0033A0;
  --shadow: 0 1px 2px rgba(10, 17, 49, .05), 0 18px 40px -18px rgba(10, 17, 49, .22);
  --chapter-edge: transparent;

  --f-body: 'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-knot: 'Geologica', system-ui, sans-serif;

  --r-xl: clamp(24px, 3vw, 40px);
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;

  --gut: clamp(16px, 3.2vw, 72px);
  --maxw: 2400px;
  --chapter-m: clamp(8px, 1vw, 14px);
  --sec-y: clamp(96px, 11vw, 176px);
  --hdr-top: clamp(68px, 9.6svh, 104px);
  --hdr-nav: 0px;
  --hdr-h: calc(var(--hdr-top) + var(--hdr-nav));

  --ease: cubic-bezier(.2, .75, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #15171C;
  --paper-2: #1E2128;
  --card: #1C1F25;
  --ink: #E9EEF9;
  --ink-2: #A3AECC;
  --ink-3: #6E7A9C;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --azure-ink: #58B0FA;
  --hdr-bg: rgba(21, 23, 28, .86);
  --logo-a: #2F95EC;
  --logo-b: #E9EEF9;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .7);
  --chapter-edge: rgba(255, 255, 255, .07);
  --night: #15171C;
  --night-2: #1E2128;
  --night-3: #2A2D35;
  --night-line: rgba(255, 255, 255, .1);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 32px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.55 var(--f-body);
  font-variation-settings: 'SHRP' 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--azure); color: #fff; }
:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 6px; }
.is-night :focus-visible, .on-night :focus-visible { outline-color: var(--ion); }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--fill { fill: currentColor; stroke: none; }
.ic-mono { font: 600 11px/1 var(--f-mono); letter-spacing: -.02em; }
.glyph { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; transition: top .2s; }
.skip:focus { top: 16px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: calc(var(--sec-y) * .6); }
.chapter {
  margin-inline: var(--chapter-m);
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--chapter-edge);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.is-night { background: var(--night); color: var(--on-night); }

/* ---------- type ---------- */
.mono { font-family: var(--f-mono); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13px/1 var(--f-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--azure-ink);
}
.eyebrow::before { content: ''; width: 9px; height: 9px; background: currentColor; flex: none; }
.is-night .eyebrow, .on-night .eyebrow { color: var(--ion); }

.h1, .h2, .h3 {
  font-family: var(--f-body);
  font-variation-settings: 'SHRP' 100;
  text-wrap: balance;
}
.h1 { font-weight: 650; font-size: clamp(44px, 7.6vw, 136px); line-height: .96; letter-spacing: -.05em; }
.h2 { font-weight: 650; font-size: clamp(36px, 5.6vw, 96px); line-height: .98; letter-spacing: -.045em; }
.h3 { font-weight: 600; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -.028em; }
.lead { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.55; color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
.is-night .lead { color: var(--on-night-2); }
.knot-num {
  font-family: var(--f-body);
  font-weight: 650;
  font-variation-settings: 'SHRP' 100;
  line-height: .9;
  letter-spacing: -.055em;
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--cobalt); --btn-fg: #fff; --btn-bd: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 64px; padding: 0 10px 0 30px;
  border-radius: 18px;
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: inset 0 0 0 1px var(--btn-bd);
  font-weight: 500; font-size: 18px; letter-spacing: -.005em; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.btn__go {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
  transition: transform .45s var(--ease), background-color .3s;
}
.btn__go .ic { width: 20px; height: 20px; }
.btn:hover { --btn-bg: var(--azure); }
.btn:hover .btn__go { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--night); }
.btn--light .btn__go { background: var(--night); color: #fff; }
.btn--light:hover { --btn-bg: var(--ion); }
.btn--line { --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: var(--line-2); padding: 0 30px; }
.btn--line:hover { --btn-bg: var(--paper-2); }
.is-night .btn--line, .on-night .btn--line { --btn-bd: rgba(233, 238, 249, .25); }
.is-night .btn--line:hover, .on-night .btn--line:hover { --btn-bg: rgba(233, 238, 249, .08); }
.btn--sm { height: 44px; padding: 0 8px 0 18px; font-size: 15px; border-radius: 12px; gap: 10px; }
.btn--sm .btn__go { width: 30px; height: 30px; border-radius: 8px; }
.btn--block { width: 100%; justify-content: space-between; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: 19px; color: var(--ink);
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.link-arrow .ic { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover .ic { transform: translateX(4px); }
.is-night .link-arrow, .on-night .link-arrow { color: var(--on-night); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: 500 12.5px/1 var(--f-mono); letter-spacing: .02em;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip .ic { width: 16px; height: 16px; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo svg { height: 28px; width: auto; }
.hdr .logo svg { height: 31px; }
.logo .lg-a { fill: var(--logo-a); }
.logo .lg-b { fill: var(--logo-b); }
.logo .lg-u0 { stop-color: var(--logo-a); }
.logo .lg-u1 { stop-color: var(--logo-b); }

/* ---------- header: two rows on top of the page, no plate (like the reference) ---------- */
.hdr { position: absolute; inset: 0 0 auto; z-index: 60; color: var(--ink); }
.hdr--dark { color: #fff; }
.hdr--dark .logo { --logo-a: #2F95EC; --logo-b: #FFFFFF; }
.hdr.is-menu { position: fixed; color: #fff; }
.hdr.is-menu .logo { --logo-a: #2F95EC; --logo-b: #FFFFFF; }
.hdr__top { display: flex; align-items: center; gap: 24px; height: var(--hdr-top); }
.hdr .logo svg { height: 36px; }
.hdr__act { display: flex; align-items: center; gap: 6px; }
.hdr__phone {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 12px;
  margin-right: 28px;
  font-size: 18px; font-weight: 500; letter-spacing: -.005em;
  transition: color .25s;
}
.hdr__phone .ic { width: 22px; height: 22px; color: var(--azure); }
.hdr--dark .hdr__phone .ic { color: #3D9BEA; }
.hdr__phone:hover { color: var(--azure-ink); }
.hdr--dark .hdr__phone:hover { color: var(--ion); }
.hdr__nav { display: flex; justify-content: center; align-items: center; gap: clamp(18px, 2.4vw, 44px); margin-inline: auto; }
.hdr__link {
  position: relative;
  font-size: 19px; font-weight: 650; letter-spacing: -.01em;
  padding: 10px 0;
  transition: color .25s, opacity .25s;
}
.hdr__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--azure); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.hdr__link:hover::after, .hdr__link.is-active::after { transform: scaleX(1); }
.hdr--dark .hdr__link::after { background: #3D9BEA; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 999px;
  display: grid; place-items: center;
  color: inherit; opacity: .85;
  transition: background-color .25s, opacity .25s;
}
.icon-btn:hover { opacity: 1; background: color-mix(in oklab, currentColor 10%, transparent); }
.theme-btn .ic--sun { display: none; }
[data-theme="dark"] .theme-btn .ic--sun { display: block; }
[data-theme="dark"] .theme-btn .ic--moon { display: none; }

/* outline pill, like "Оставить заявку" in the reference */
.btn--pill {
  --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: currentColor;
  height: 64px; padding: 0 40px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--btn-bd);
  font-weight: 500;
}
.btn--pill:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
.hdr--dark .btn--pill:hover, .hdr.is-menu .btn--pill:hover { --btn-bg: #fff; --btn-fg: var(--night); --btn-bd: #fff; }
.hdr__cta { margin-left: 14px; }

.lang { position: relative; }
.lang__btn {
  height: 48px; padding: 0 12px 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--f-mono); letter-spacing: .04em; color: inherit; opacity: .85;
  transition: background-color .25s, opacity .25s;
}
.lang__btn:hover { opacity: 1; background: color-mix(in oklab, currentColor 10%, transparent); }
.lang__btn .ic { width: 17px; height: 17px; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 170px; padding: 6px;
  border-radius: 16px;
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .25s, transform .3s var(--ease);
}
.lang.is-open .lang__menu { opacity: 1; transform: none; pointer-events: auto; }
.lang__item {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 500; text-align: left;
}
.lang__item span { font: 500 11px var(--f-mono); color: var(--ink-3); }
.lang__item:hover { background: var(--paper-2); }
.lang__item[aria-current="true"] { color: var(--azure-ink); }
.burger { display: none; }

/* mobile menu */
.mnav {
  position: fixed; inset: 0; z-index: 55;
  background: var(--night); color: var(--on-night);
  padding: calc(var(--hdr-h) + 40px) var(--gut) 32px;
  display: flex; flex-direction: column; gap: 28px;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s var(--ease-io), visibility 0s .6s;
}
.mnav.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .6s var(--ease-io), visibility 0s; }
.mnav__links { display: flex; flex-direction: column; }
.mnav__link {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--night-line);
  font-size: clamp(30px, 8vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05;
  font-variation-settings: 'SHRP' 100;
}
.mnav__link .ic { width: 22px; height: 22px; color: var(--on-night-2); align-self: center; }
.mnav__row { display: flex; gap: 8px; flex-wrap: wrap; }
.mnav__lang {
  height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--night-line);
  font: 500 12px var(--f-mono); letter-spacing: .06em;
}
.mnav__lang[aria-current="true"] { background: var(--on-night); color: var(--night); }
.mnav__foot { margin-top: auto; display: grid; gap: 6px; font-size: 15px; color: var(--on-night-2); }
.mnav__foot a { color: var(--on-night); font-size: 20px; font-weight: 500; }

/* ---------- hero (static) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100vh; height: 100svh;
  min-height: 460px;
  display: flex; flex-direction: column;
  padding-top: var(--hdr-h);
  background: #1A1D23; color: var(--on-night);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: inset 0 -1px 0 var(--chapter-edge);
}
/* giant neomax wordmark — the logo itself, cut by the bottom edge through its underline */
/* the wordmark letters span the whole screen, edge to edge, fully visible */
.hero__brand {
  flex: none;
  padding: 0 var(--brand-pad) clamp(10px, 2svh, 24px);
  line-height: 0;
  display: flex; justify-content: center;
}
.hero__brand svg { width: 100%; height: auto; display: block; }
.hero {
  --brand-pad: clamp(8px, 1.2vw, 24px);
  --brand-h: calc((100vw - var(--brand-pad) * 2) / 6.592);
}

/* grey translucent letters with a b/w photo visible only inside them, like the reference */
.hero__brand .hb-base { fill: #FFFFFF; fill-opacity: .07; }
.hero__brand .hb-photo { opacity: .3; mix-blend-mode: screen; }

/* backdrop: graphite field lit softly from the top right */
.hero__bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(47, 143, 232, .22), transparent 70%),
    radial-gradient(45% 50% at 12% 0%, rgba(255, 255, 255, .05), transparent 70%),
    linear-gradient(180deg, #1E2128 0%, #1A1D23 55%, #15171C 100%);
  /* fades into the page background below */
}

.hero__inner {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(8px, 2svh, 32px);
}
.hero__tags { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.hero__geo { font: 500 13px/1 var(--f-mono); letter-spacing: .06em; color: var(--on-night-2); }
.hero__title {
  margin: 0 0 clamp(16px, 4svh, 56px);
  color: #fff;
  /* whatever height the wordmark leaves: three lines + buttons row */
  font-size: clamp(30px, min(7.6vw, calc((100svh - var(--hdr-h) - var(--brand-h) - 24svh) / 3.2)), 132px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.05em;
}
.hero__title span { display: block; }
/* reference layout: buttons on the left, the lead sits beside them */
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2.4svh, 28px) 64px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__lead { max-width: 34ch; margin: 0; color: rgba(255, 255, 255, .86); font-size: clamp(15px, min(1.5vw, 2.3svh), 22px); line-height: 1.45; }
.hero__lead b { color: #fff; font-weight: 700; white-space: nowrap; }
.btn--blue {
  --btn-bg: #2D8CE6; --btn-fg: #fff;
  height: clamp(48px, 6.8svh, 72px); padding: 0 clamp(30px, 3vw, 52px); border-radius: 999px;
  font-size: clamp(16px, 2svh, 19px); font-weight: 500;
}
.btn--blue:hover { --btn-bg: #4BA2F0; }
.hero .btn--pill { height: clamp(48px, 6.8svh, 72px); padding: 0 clamp(26px, 2.6vw, 44px); font-size: clamp(16px, 2svh, 19px); color: #fff; }

.live {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 13px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ion);
}
.live::before { content: ''; width: 9px; height: 9px; background: var(--flare); }

/* ---------- section head ---------- */
.shead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 24px 72px;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 96px);
}
.shead__main { display: grid; gap: 22px; }
.shead__side { display: grid; gap: 22px; justify-items: start; }
.shead__side .lead { font-size: clamp(18px, 1.4vw, 21px); }
.shead--solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- services index ---------- */
.svc-list { border-top: 1px solid var(--line); counter-reset: svc; }
.svc {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: 76px minmax(0, 1.15fr) minmax(0, 1fr) 176px 64px;
  align-items: center; gap: 32px;
  padding: 36px 20px;
  border-bottom: 1px solid var(--line);
  transition: color .35s var(--ease);
}
.svc::before {
  content: ''; position: absolute; inset: -1px 0; z-index: -1;
  background: var(--cobalt);
  border-radius: 14px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.svc__glyph { color: var(--azure); transition: color .35s, transform .5s var(--ease); }
.svc__glyph .glyph { width: 50px; height: 50px; }
.svc__name { font-size: clamp(26px, 3.2vw, 48px); font-weight: 650; letter-spacing: -.04em; line-height: 1.04; font-variation-settings: 'SHRP' 100; }
.svc__desc { color: var(--ink-2); font-size: 18px; line-height: 1.45; transition: color .35s; }
.svc__price { font: 500 15px/1.3 var(--f-mono); color: var(--ink); white-space: nowrap; }
.svc__price small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 4px; transition: color .35s; }
.svc__go {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .35s, color .35s, box-shadow .35s, transform .5s var(--ease);
}
.svc__go .ic { transform: rotate(-45deg); transition: transform .5s var(--ease); }
.svc:hover, .svc:focus-visible { color: #fff; }
.svc:hover::before, .svc:focus-visible::before { transform: scaleX(1); }
.svc:hover .svc__glyph, .svc:focus-visible .svc__glyph { color: var(--ion); transform: scale(1.08); }
.svc:hover .svc__desc, .svc:focus-visible .svc__desc { color: rgba(255, 255, 255, .78); }
.svc:hover .svc__price small, .svc:focus-visible .svc__price small { color: rgba(255, 255, 255, .6); }
.svc:hover .svc__go, .svc:focus-visible .svc__go { background: #fff; color: var(--cobalt); box-shadow: none; }
.svc:hover .svc__go .ic, .svc:focus-visible .svc__go .ic { transform: rotate(0); }
.svc:focus-visible { outline-offset: -2px; border-radius: 14px; }

/* expanded service cards (services page) */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc-card {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  padding: 36px;
  border-radius: 28px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .5s var(--ease), box-shadow .4s;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.svc-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.svc-card__glyph { width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; background: var(--paper-2); color: var(--azure); }
.svc-card__glyph .glyph { width: 38px; height: 38px; }
.svc-card__feats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.svc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.svc-card p { color: var(--ink-2); font-size: 18px; }

/* ---------- cases ---------- */
.cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.case { grid-column: span 6; display: flex; flex-direction: column; gap: 22px; }
.cases--editorial .case:nth-child(4n+1), .cases--editorial .case:nth-child(4n+4) { grid-column: span 7; }
.cases--editorial .case:nth-child(4n+2), .cases--editorial .case:nth-child(4n+3) { grid-column: span 5; }
.case__art {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(340px, 42vw, 640px);
  border-radius: 32px;
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in oklab, var(--c2) 38%, transparent), transparent 60%),
    var(--c1);
}
.case__art::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.case__knots { display: none;
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(color-mix(in oklab, var(--c2) 40%, transparent) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 65%);
  mask-image: linear-gradient(200deg, #000, transparent 65%);
}
.case__badge {
  position: absolute; left: 20px; top: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 13px/1 var(--f-mono); letter-spacing: .04em;
}
.case__go {
  position: absolute; right: 20px; top: 20px; z-index: 2;
  width: 60px; height: 60px; border-radius: 18px;
  display: grid; place-items: center;
  background: #fff; color: var(--night);
  transform: scale(.6) rotate(-45deg); opacity: 0;
  transition: transform .5s var(--ease), opacity .3s;
}
.case:hover .case__go, .case:focus-visible .case__go { transform: none; opacity: 1; }
.case__stage { position: absolute; inset: 0; transition: transform .8s var(--ease); }
.case:hover .case__stage { transform: translateY(-10px) scale(1.015); }
.case__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
.case__title { font-size: clamp(30px, 3.4vw, 52px); font-weight: 650; letter-spacing: -.045em; line-height: 1.05; font-variation-settings: 'SHRP' 100; }
.case__desc { grid-column: 1 / -1; color: var(--ink-2); max-width: 52ch; }
.case__svc { font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: 8px; text-align: right; }
.case__tech { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- interface mocks (case art) ---------- */
.mk {
  position: absolute; z-index: 1;
  background: #fff; color: #0A1131;
  border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .04);
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 10px; line-height: 1.3;
}
.mk--site { left: 10%; right: -6%; top: 15%; bottom: -12%; }
.mk__bar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 12px; background: #F2F4F9; border-bottom: 1px solid #E4E8F0; }
.mk__bar i { width: 7px; height: 7px; border-radius: 50%; background: #D2D8E4; }
.mk__url { margin-left: 10px; height: 17px; padding: 0 10px; border-radius: 6px; background: #fff; display: flex; align-items: center; gap: 6px; font: 500 8.5px/1 var(--f-mono); color: #7B85A2; box-shadow: 0 0 0 1px #E4E8F0; }
.mk__url::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--c2); }
.mk__body { position: absolute; inset: 30px 0 0; display: grid; grid-template-columns: 22% 1fr; }
.mk__side { background: #F7F8FB; border-right: 1px solid #EDF0F5; padding: 14px 12px; display: grid; align-content: start; gap: 9px; }
.mk__side b { display: block; height: 9px; width: 70%; border-radius: 3px; background: var(--c2); opacity: .9; margin-bottom: 8px; }
.mk__main { padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.mk__h { font-size: 13px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk__h em { font: 500 8.5px var(--f-mono); font-style: normal; color: #7B85A2; }
.ln { display: block; height: 6px; border-radius: 3px; background: #E7EBF2; }
.ln--c { background: color-mix(in oklab, var(--c2) 70%, #fff); }
.ln--d { background: #C9D0DE; }
.mk-row { display: flex; align-items: center; gap: 8px; }
.mk-grid { display: grid; gap: 8px; }
.mk-kpi { padding: 10px; border-radius: 10px; background: #F5F7FB; display: grid; gap: 6px; }
.mk-kpi strong { font-size: 15px; letter-spacing: -.03em; font-weight: 600; }
.mk-kpi small { font: 500 7.5px var(--f-mono); color: #7B85A2; text-transform: uppercase; letter-spacing: .05em; }
.mk-pill { display: inline-flex; align-items: center; height: 15px; padding: 0 7px; border-radius: 999px; font: 600 7.5px/1 var(--f-mono); background: color-mix(in oklab, var(--c2) 20%, #fff); color: color-mix(in oklab, var(--c2) 70%, #000); white-space: nowrap; }
.mk-pill--n { background: #EEF1F6; color: #6B7591; }
.mk-tbl { display: grid; gap: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #EDF0F5; }
.mk-tbl > div { display: grid; grid-template-columns: 1.4fr 1fr .8fr; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid #EDF0F5; }
.mk-tbl > div:first-child { border-top: 0; background: #F7F8FB; }
.mk-svg { width: 100%; height: auto; display: block; }
.mk-av { width: 18px; height: 18px; border-radius: 6px; background: var(--c2); flex: none; opacity: .85; }
.mk-av--n { background: #DCE1EB; }
.mk-btn { height: 22px; border-radius: 7px; background: var(--c2); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 9px; }

.mk--phone {
  width: 34%; aspect-ratio: 9 / 18.5; height: auto;
  border-radius: 26px;
  border: 5px solid #0A0E1C;
  background: #fff;
  padding: 18px 10px 10px;
  display: grid; align-content: start; gap: 9px;
}
.mk--phone::before { content: ''; position: absolute; top: 5px; left: 50%; width: 34%; height: 6px; border-radius: 4px; background: #0A0E1C; transform: translateX(-50%); }
.mk--p1 { left: 18%; top: 14%; }
.mk--p2 { left: 50%; top: 24%; }
.mk--phone .mk__h { font-size: 12px; }
.mk-food { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: #F6F7FA; }
.mk-food i { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--c2), color-mix(in oklab, var(--c2) 40%, #000)); }
.mk-food strong { font-size: 9px; }
.mk-qr { width: 70%; margin: 4px auto; aspect-ratio: 1; display: grid; grid-template-columns: repeat(21, 1fr); gap: 0; }
.mk-qr i { aspect-ratio: 1; }
.mk-qr i.on { background: #0A1131; border-radius: 1px; }

/* product mock frame */
.mk--prod { left: 8%; right: 8%; top: 18%; bottom: -10%; }

/* ---------- products ---------- */
.prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.prod {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: transform .6s var(--ease), box-shadow .4s;
}
.prod:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.prod .case__art { height: clamp(300px, 28vw, 440px); border-radius: 0; }
.prod__body { padding: 34px 34px 36px; display: grid; gap: 12px; flex: 1; align-content: start; }
.prod__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prod__name { font-size: clamp(32px, 3vw, 44px); font-weight: 650; letter-spacing: -.045em; font-variation-settings: 'SHRP' 100; }
.prod__body p { color: var(--ink-2); }
.prod__foot { margin-top: 10px; }

/* ---------- radar (static, x5.tech-style rings + axes) ---------- */
.radar { background: #15171C; color: var(--on-night); padding-block: clamp(40px, 5vw, 80px) clamp(40px, 5vw, 72px); }
.rd { position: relative; }
.rd__stage { position: relative; user-select: none; -webkit-user-select: none; }
.rd__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rd-ring { fill: none; stroke-width: 1.2; }
.rd-axis { stroke: #3D9BEA; stroke-opacity: .55; stroke-width: 1.2; }
.rd-rlabel { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; fill: rgba(233, 238, 249, .5); text-anchor: middle; }
.rd-qlabel { font: 500 13px/1 var(--f-mono); letter-spacing: .08em; fill: rgba(233, 238, 249, .6); }
.rd__layer { position: absolute; inset: 0; }

/* heading block sits inside the radar, top-left, like the reference */
.rd__head { position: absolute; left: 0; top: clamp(24px, 4vw, 64px); z-index: 3; display: grid; gap: 18px; justify-items: start; width: fit-content; max-width: min(560px, 38%); }
.rd__head .h2 { font-size: clamp(36px, 4.2vw, 72px); }
.rd__head .lead { font-size: clamp(16px, 1.25vw, 19px); color: var(--on-night-2); max-width: 34ch; }
.rd__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rd-tab {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: var(--on-night-2); font-size: 16px; font-weight: 500;
  transition: background-color .25s, color .25s;
}
.rd-tab b { font: 500 12px/1 var(--f-mono); opacity: .7; }
.rd-tab:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.rd-tab[aria-selected="true"] { background: #2D8CE6; color: #fff; box-shadow: none; }
.rd-tab[aria-selected="true"] b { opacity: .85; }

/* badge: round icon + dark pill label */
.rd-b {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; align-items: center;
  transform: translate(var(--x, 0), var(--y, 0)) translate(-30px, -50%);
}
.rd-b[hidden] { display: none; }
.rd-b.is-flip { flex-direction: row-reverse; transform: translate(var(--x, 0), var(--y, 0)) translate(calc(-100% + 30px), -50%); }
.rd-b__ic {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  box-shadow: 0 0 0 5px #15171C;
  transition: box-shadow .25s;
}
.rd-b__ic .ic { width: 28px; height: 28px; }
.rd-b__ic .ic-mono { font-size: 14px; }
.rd-b[data-ring="adopt"] .rd-b__ic, .rd-card__ic[data-ring="adopt"] { background: #5FD0FF; color: #0A1131; }
.rd-b[data-ring="trial"] .rd-b__ic, .rd-card__ic[data-ring="trial"] { background: #2D8CE6; color: #fff; }
.rd-b[data-ring="assess"] .rd-b__ic, .rd-card__ic[data-ring="assess"] { background: #22344F; color: #8CC8FF; }
.rd-b[data-ring="hold"] .rd-b__ic, .rd-card__ic[data-ring="hold"] { background: #2A2D35; color: #8A93A8; }
.rd-b__lbl {
  height: 52px; padding: 0 22px; margin-left: -8px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  background: #24272F;
  color: #fff; font-size: 19px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  position: relative; z-index: -1;
  padding-left: 26px;
}
.rd-b.is-flip .rd-b__lbl { margin-left: 0; margin-right: -8px; padding-left: 22px; padding-right: 26px; }
.rd-b:hover .rd-b__ic, .rd-b.is-sel .rd-b__ic { box-shadow: 0 0 0 5px #15171C, 0 0 0 7px #5FD0FF; }
.rd-b:hover .rd-b__lbl, .rd-b.is-sel .rd-b__lbl { background: #2E323C; }
.rd-b:focus-visible { outline: none; }

/* "All": icons only, name on hover */
.rd.is-all .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-23px, -50%); }
.rd.is-all .rd-b__ic { width: 46px; height: 46px; }
.rd.is-all .rd-b__ic .ic { width: 22px; height: 22px; }
.rd.is-all .rd-b__lbl { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; height: 40px; padding: 0 14px; font-size: 15px; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .2s; }
.rd.is-all .rd-b:hover .rd-b__lbl, .rd.is-all .rd-b.is-sel .rd-b__lbl { opacity: 1; }
.rd.is-all .rd-b:hover { z-index: 4; }

/* tech card */
.rd__card {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: 360px; padding: 26px;
  border-radius: 26px;
  background: #1F2229;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .7);
  display: grid; gap: 16px;
}
.rd__card[hidden] { display: none; }
.rd-card__head { display: flex; align-items: center; gap: 16px; padding-right: 28px; }
.rd-card__ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.rd-card__ic .ic { width: 28px; height: 28px; }
.rd-card__name { font-size: 30px; font-weight: 650; letter-spacing: -.04em; line-height: 1.02; }
.rd-card__cat { font: 500 12px/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--on-night-2); margin-top: 6px; }
.rd-card__desc { color: var(--on-night-2); font-size: 17px; line-height: 1.5; }
.rd-card__ring { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.rd-card__ring .ring-tag { flex: none; }
.rd-card__projects { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-card__projects a { font: 500 13px/1 var(--f-mono); padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; }
.rd-card__projects a:hover { background: rgba(255, 255, 255, .14); }
.rd-card__close { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--on-night-2); }
.rd-card__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.rd-card__close .ic { width: 18px; height: 18px; }
.rd-card__label { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-2); }

.ring-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 9px; font: 600 11.5px/1 var(--f-mono); letter-spacing: .1em; }
.ring-tag--adopt { background: rgba(95, 208, 255, .16); color: #5FD0FF; }
.ring-tag--trial { background: rgba(45, 140, 230, .28); color: #8CC8FF; }
.ring-tag--assess { box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .45); color: #8CC8FF; }
.ring-tag--hold { box-shadow: inset 0 0 0 1px rgba(138, 147, 168, .45); color: #8A93A8; }


@media (max-width: 1499px) {
  .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-26px, -50%); }
  .rd-b.is-flip { transform: translate(var(--x, 0), var(--y, 0)) translate(calc(-100% + 26px), -50%); }
  .rd-b__ic { width: 52px; height: 52px; }
  .rd-b__ic .ic { width: 24px; height: 24px; }
  .rd-b__lbl { height: 46px; font-size: 17px; padding: 0 18px 0 22px; }
}
@media (max-width: 980px) {
  .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-20px, -50%); }
  .rd-b__ic { width: 40px; height: 40px; box-shadow: 0 0 0 3px #15171C; }
  .rd-b__ic .ic { width: 20px; height: 20px; }
  .rd.is-all .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-13px, -50%); }
  .rd.is-all .rd-b__ic { width: 26px; height: 26px; box-shadow: 0 0 0 2px #15171C; }
  .rd.is-all .rd-b__ic .ic { width: 14px; height: 14px; }
  .rd-b__lbl { display: none; }
  .rd__card { position: relative; left: auto !important; top: auto !important; width: auto; margin-top: 12px; }

  .rd__head { position: static; max-width: none; margin-bottom: 24px; }
}
@media (max-width: 760px) {
  .rd__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .rd-tab { flex: none; height: 42px; font-size: 15px; }
}

/* ---------- partners ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee + .marquee { margin-top: 14px; }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 48s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 56s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }
.partner {
  display: inline-flex; align-items: center; gap: 16px;
  height: 124px; padding: 0 40px 0 28px;
  border-radius: 28px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  flex: none;
}
.partner__mark {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c);
  font-family: var(--f-body); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -.04em;
}
.partner__name { font-size: 32px; font-weight: 650; letter-spacing: -.045em; font-variation-settings: 'SHRP' 100; }

/* ---------- blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.post { display: flex; flex-direction: column; gap: 18px; }
.post[hidden] { display: none; }
.post__cover {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: 28px;
  background: var(--c1);
}
.post__cover {
  background:
    radial-gradient(90% 90% at 100% 0%, color-mix(in oklab, var(--c2) 75%, transparent), transparent 65%),
    linear-gradient(160deg, var(--c1) 30%, color-mix(in oklab, var(--c1) 60%, var(--c2)));
}
.post__word {
  position: absolute; left: 22px; right: 22px; top: 18px;
  color: #fff; opacity: .95;
  font-size: clamp(40px, 4.6vw, 72px); font-weight: 650; letter-spacing: -.05em; line-height: .95;
  font-variation-settings: 'SHRP' 100;
  transition: transform .8s var(--ease);
}
.post:hover .post__word { transform: translateY(-4px); }
.post__type {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px 0 10px; border-radius: 10px;
  background: rgba(4, 10, 34, .55); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 11px/1 var(--f-mono); letter-spacing: .04em;
}
.post__type .ic { width: 14px; height: 14px; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font: 500 13px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.post__meta span::before { content: '# '; color: var(--azure); }
.post__title { font-size: clamp(22px, 2.2vw, 32px); font-weight: 650; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; transition: color .3s; }
.post:hover .post__title { color: var(--azure-ink); }

.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 40px; }
.seg { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--paper-2); gap: 2px; flex-wrap: wrap; }
.seg__btn { height: 50px; padding: 0 22px; border-radius: 12px; font-size: 17px; font-weight: 500; color: var(--ink-2); transition: background-color .25s, color .25s, box-shadow .25s; }
.seg__btn:hover { color: var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.select {
  height: 58px; padding: 0 48px 0 20px; border-radius: 16px;
  border: 1px solid var(--line-2); background: var(--card);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 17px) 21px;
  background-size: 5px 5px; background-repeat: no-repeat;
  font-size: 17px; font-weight: 500; cursor: pointer;
}

/* ---------- about (cobalt chapter) ---------- */
.about { background: var(--cobalt); color: #fff; }
.about::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 100% 0%, rgba(95, 208, 255, .28), transparent 70%);
}
.about .eyebrow { color: #fff; }
.about .eyebrow::before { background: var(--flare); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.about__text { display: grid; gap: 26px; }
.about__text p { color: rgba(255, 255, 255, .8); font-size: clamp(18px, 1.6vw, 23px); max-width: 52ch; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .2); }
.stat { padding: 24px 18px 28px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); display: grid; gap: 12px; align-content: start; }
.stat + .stat:not(:nth-child(3n+1)) { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .2); }
.stat__n { font-size: clamp(64px, 8.4vw, 148px); color: #fff; }
.stat__l { font-size: 17px; color: rgba(255, 255, 255, .74); line-height: 1.35; }

.process { margin-top: clamp(64px, 8vw, 120px); }
.process__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.process__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.process__list::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(255, 255, 255, .25); }
.pstep { position: relative; padding: 32px 22px 0 0; display: grid; gap: 10px; align-content: start; }
.pstep::before { content: ''; position: absolute; left: 0; top: 0; width: 9px; height: 9px; background: #fff; }
.pstep:last-child::before { background: var(--flare); }
.pstep__n { font: 500 13px/1 var(--f-mono); letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.pstep__t { font-size: clamp(24px, 2.2vw, 32px); font-weight: 650; letter-spacing: -.04em; font-variation-settings: 'SHRP' 100; }
.pstep__d { font-size: 17px; color: rgba(255, 255, 255, .74); line-height: 1.45; }

/* ---------- contacts + brief ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact__info { display: grid; gap: 34px; position: sticky; top: 110px; }
.contact__big { display: grid; gap: 6px; }
.contact__big a {
  font-size: clamp(30px, 3.9vw, 58px); font-weight: 650; letter-spacing: -.045em; line-height: 1.08; font-variation-settings: 'SHRP' 100;
  width: fit-content;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .5s var(--ease), color .3s;
}
.contact__big a:hover { background-size: 100% 2px; color: var(--azure-ink); }
.contact__rows { display: grid; border-top: 1px solid var(--line); }
.contact__row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact__row dt { font: 500 12.5px/1.9 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.contact__row dd { margin: 0; font-weight: 500; font-size: 19px; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.social {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-2);
  transition: background-color .3s, color .3s, box-shadow .3s, transform .4s var(--ease);
}
.social .ic { width: 20px; height: 20px; }
.social:hover { background: var(--ink); color: var(--paper); box-shadow: none; transform: translateY(-2px); }
.on-night .social { box-shadow: inset 0 0 0 1px var(--night-line); color: var(--on-night-2); }
.on-night .social:hover { background: var(--on-night); color: var(--night); }

.brief {
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.brief__head { display: grid; gap: 10px; margin-bottom: 28px; }
.brief__head p { color: var(--ink-2); }
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; }
.field__label { font: 500 12.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.field__input {
  width: 100%;
  height: 62px; padding: 0 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 18px;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
textarea.field__input { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.field__input::placeholder { color: var(--ink-3); }
.field__input:hover { border-color: var(--line-2); }
.field__input:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 4px color-mix(in oklab, var(--azure) 18%, transparent); background: var(--card); }
.field__input[aria-invalid="true"] { border-color: #E5484D; }
.field__err { font-size: 13px; color: #E5484D; display: none; }
.field__input[aria-invalid="true"] + .field__err { display: block; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.pick legend { margin-bottom: 10px; padding: 0; }
.pick__opt { position: relative; }
.pick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pick__opt span {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 18px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 16px; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.pick__opt span::before { content: ''; width: 6px; height: 6px; background: var(--line-2); transition: background-color .25s; }
.pick__opt input:checked + span { background: var(--ink); color: var(--paper); box-shadow: none; }
.pick__opt input:checked + span::before { background: var(--flare); }
.pick__opt input:focus-visible + span { outline: 2px solid var(--azure); outline-offset: 2px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.form__note { font-size: 14.5px; color: var(--ink-3); max-width: 36ch; }
.form__note a { text-decoration: underline; text-underline-offset: 3px; }
.form__done { display: none; padding: 28px 0 8px; gap: 14px; }
.form.is-sent > :not(.form__done) { display: none; }
.form.is-sent .form__done { display: grid; }
.form__done-mark { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--cobalt); color: #fff; }
.form__done-mark .ic { width: 26px; height: 26px; }
.form__done p { color: var(--ink-2); }
.form__status { font-size: 14px; color: #E5484D; min-height: 1em; }

/* ---------- footer ---------- */
.ftr { background: var(--night); color: var(--on-night); margin: var(--chapter-m); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--chapter-edge); overflow: hidden; position: relative; isolation: isolate; }
.ftr__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-block: clamp(64px, 8vw, 120px) clamp(48px, 5vw, 72px); border-bottom: 1px solid var(--night-line); }
.ftr__cta .h2 { color: #fff; max-width: 14ch; }
.ftr__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 56px; }
.ftr__brand { display: grid; gap: 22px; align-content: start; }
.ftr__brand p { color: var(--on-night-2); font-size: 17px; max-width: 30ch; }
.ftr__col { display: grid; gap: 12px; align-content: start; }
.ftr__col h4 { font: 500 12.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-2); margin-bottom: 6px; }
.ftr__col a { font-size: 17px; color: var(--on-night); width: fit-content; transition: color .25s; }
.ftr__col a:hover { color: var(--ion); }
.ftr__mark { padding-inline: var(--gut); max-width: calc(var(--maxw) + var(--gut) * 2); margin-inline: auto; }
.ftr__mark svg { width: 100%; height: auto; }
.ftr__mark .lg-a, .ftr__mark .lg-b { fill: var(--night-3); }
.ftr__mark .lg-bar { fill: var(--night-3); }
.ftr__mark .lg-fill { fill: url(#ftrBar); transform-origin: 229.8px 0; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
.ftr__mark .lg-dot { fill: var(--flare); }
.ftr__bottom { border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 28px 32px; font-size: 14px; color: var(--on-night-2); }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ftr__legal a:hover { color: var(--on-night); }
.ftr .logo { --logo-a: #2F95EC; --logo-b: #E9EEF9; }
.ftr .socials { gap: 6px; }
.ftr .social { width: 40px; height: 40px; border-radius: 11px; }

/* ---------- modal (native dialog) ---------- */
.modal {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0; border: 0;
  border-radius: var(--r-xl);
  background: var(--card); color: var(--ink);
  box-shadow: 0 40px 120px -20px rgba(4, 10, 34, .6);
  overflow: auto;
}
.modal::backdrop { background: rgba(4, 10, 34, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open] { animation: modal-in .5s var(--ease); }
.modal[open]::backdrop { animation: fade-in .4s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
.modal__in { padding: clamp(24px, 4vw, 40px); position: relative; }
.modal__close { position: absolute; right: 16px; top: 16px; }
.modal .brief__head { padding-right: 48px; }

/* ---------- subpages ---------- */
.phead { padding-top: calc(var(--hdr-h) + 12px + clamp(56px, 8vw, 104px)); padding-bottom: clamp(40px, 5vw, 72px); }
.phead__crumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 28px; }
.phead__crumbs a:hover { color: var(--ink); }
.phead__crumbs span::before { content: '/'; margin-right: 10px; color: var(--line-2); }
.phead__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 64px; align-items: end; }
.phead .h1 { font-size: clamp(46px, 7.6vw, 136px); }

.dhero { padding-top: calc(var(--hdr-h) + 12px + clamp(48px, 7vw, 96px)); padding-bottom: clamp(48px, 6vw, 88px); border-radius: 0 0 var(--r-xl) var(--r-xl); position: relative; overflow: hidden; isolation: isolate; }
.dhero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dhero__text { display: grid; gap: 24px; justify-items: start; }
.dhero__text .h1 { color: #fff; font-size: clamp(46px, 6.8vw, 120px); }
.dhero__back { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-night-2); transition: color .25s; }
.dhero__back:hover { color: var(--on-night); }
.dhero__back .ic { width: 16px; height: 16px; }
.dhero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dhero__price { font: 500 13px/1 var(--f-mono); color: var(--on-night-2); }
.dhero__price b { font-family: var(--f-body); font-size: 48px; color: #fff; font-weight: 650; letter-spacing: -.04em; margin: 0 6px; }
.dhero__art { position: relative; aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(80% 80% at 70% 20%, rgba(95, 208, 255, .35), transparent 60%), linear-gradient(160deg, #0A1538, #0033A0); box-shadow: inset 0 0 0 1px var(--night-line); }
.dhero__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dhero__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.dhero__glyph .glyph { width: 42%; height: 42%; stroke-width: 1.1; }
.dhero__art--case { aspect-ratio: 4 / 3.4; background: var(--c1); }

.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.metric { padding: 28px 24px 8px 0; display: grid; gap: 12px; }
.metric + .metric { padding-left: 24px; border-left: 1px solid var(--line); }
.metric__n { font-size: clamp(64px, 8vw, 140px); color: var(--cobalt); }
[data-theme="dark"] .metric__n { color: var(--ion); }
.metric__l { color: var(--ink-2); }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { padding: 34px; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 14px; align-content: start; }
.tile__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--azure); }
.tile__ic .glyph { width: 24px; height: 24px; }
.tile p { color: var(--ink-2); font-size: 17.5px; }
.tile--feature { background: var(--cobalt); color: #fff; box-shadow: none; }
.tile--feature p { color: rgba(255, 255, 255, .78); }
.tile--feature .tile__ic { background: rgba(255, 255, 255, .14); color: #fff; }

.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.feat { display: flex; align-items: center; gap: 16px; padding: 28px 18px 28px 0; border-bottom: 1px solid var(--line); font-size: 21px; font-weight: 500; }
.feat:not(:nth-child(3n+1)) { padding-left: 16px; border-left: 1px solid var(--line); }
.feat i { width: 9px; height: 9px; background: var(--azure); flex: none; }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.tier { position: relative; padding: 38px; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 18px; }
.tier--hot { background: var(--night); color: var(--on-night); box-shadow: none; }
.tier__tag { font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tier--hot .tier__tag { color: var(--ion); }
.tier__badge { position: absolute; right: 22px; top: 22px; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--flare); color: #fff; font: 600 10px/26px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.tier__price { font-family: var(--f-body); font-size: 64px; line-height: .9; font-weight: 650; letter-spacing: -.05em; }
.tier__price small { font: 500 13px var(--f-mono); color: var(--ink-3); margin-left: 6px; }
.tier--hot .tier__price small { color: var(--on-night-2); }
.tier ul { display: grid; gap: 10px; flex: 1; }
.tier li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; }
.tier li::before { content: ''; width: 6px; height: 6px; background: var(--azure); flex: none; transform: translateY(-2px); }
.tier--hot li::before { background: var(--ion); }
.tier--hot .btn--line { --btn-bd: rgba(233, 238, 249, .25); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px 4px;
  font-size: clamp(20px, 2.1vw, 30px); font-weight: 650; letter-spacing: -.03em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .4s var(--ease); width: 22px; height: 22px; color: var(--azure); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding: 0 4px 32px; color: var(--ink-2); max-width: 70ch; font-size: 19px; }

.band { padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end; }
.band .h2 { color: #fff; max-width: 18ch; }
.band p { color: var(--on-night-2); margin-top: 14px; }

/* case page */
.case-info { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.case-info__lead { font-size: clamp(24px, 2.8vw, 42px); line-height: 1.3; letter-spacing: -.025em; font-weight: 500; text-wrap: pretty; }
.case-info__side { display: grid; gap: 20px; padding: 28px; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.case-info__side p { color: var(--ink-2); }
.case-info__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 18px 0 14px;
  border-radius: 14px; background: var(--ink); color: var(--paper);
  transition: transform .3s var(--ease), background-color .3s;
}
.store:hover { transform: translateY(-2px); }
.store .ic { width: 24px; height: 24px; }
.store span { display: grid; font-size: 11px; line-height: 1.2; opacity: .85; }
.store b { font-size: 16px; font-weight: 600; opacity: 1; }
.shots-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.shots-wrap { position: relative; }
.shots-next {
  position: absolute; top: calc(50% - 6px); right: var(--peek, 0px); z-index: 2;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #0A1131;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45);
  transform: translateY(-50%);
  transition: background-color .25s, color .25s, right .35s var(--ease);
}
.shots-next[hidden] { display: none; }
.shots-next .ic { width: 24px; height: 24px; transition: transform .35s var(--ease); }
.shots-next:hover { background: #2D8CE6; color: #fff; }
.shots-next.is-back .ic { transform: rotate(180deg); }
.shots-next:focus-visible { outline: 2px solid #5FD0FF; outline-offset: 3px; }
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 620px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.shot { position: relative; scroll-snap-align: start; aspect-ratio: 16 / 10.5; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 90% at 80% 0%, color-mix(in oklab, var(--c2) 38%, transparent), transparent 60%), var(--c1); }
.shot__cap { position: absolute; left: 16px; bottom: 16px; z-index: 3; }
.shot__play { position: absolute; inset: 0; margin: auto; z-index: 3; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: #fff; color: var(--night); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .5); transition: transform .4s var(--ease); }
.shot:hover .shot__play { transform: scale(1.06); }
.shot__play .ic { width: 28px; height: 28px; }
.shot--video::after { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(4, 10, 34, .35); }

/* project stack: category pills above, tiles with the name and one oversized faint logo cut by the edge */
.tcats { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 24px; }
.tcat { height: 46px; padding: 0 20px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.tcat:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.tcat[aria-pressed="true"] { background: #2D8CE6; color: #fff; box-shadow: none; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.tcard {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(104px, 7vw, 124px); padding: 20px 22px;
  border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .4s var(--ease), box-shadow .3s;
}
.tcard[hidden] { display: none; }
.tcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.tcard__name { position: relative; font-size: clamp(17px, 1.2vw, 20px); font-weight: 650; letter-spacing: -.01em; }
.tcard__mark {
  position: absolute; right: -18px; bottom: -26px; z-index: -1;
  width: clamp(96px, 7vw, 116px); aspect-ratio: 1;
  display: grid; place-items: end;
  color: var(--ink); opacity: .08;
  transition: opacity .3s, color .3s, transform .4s var(--ease);
}
.tcard__mark .ic { width: 100%; height: 100%; }
.tcard__mark .ic-mono { font: 700 clamp(76px, 6vw, 100px)/.8 var(--f-body); letter-spacing: -.06em; }
.tcard:hover .tcard__mark { color: #2D8CE6; opacity: .3; transform: translate(-6px, -6px); }

.next-case { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding-block: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.next-case__t { font-size: clamp(36px, 5.4vw, 88px); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variation-settings: 'SHRP' 100; transition: color .3s; }
.next-case:hover .next-case__t { color: var(--azure-ink); }

/* legal */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal__toc { position: sticky; top: 110px; display: grid; gap: 4px; }
.legal__toc a { padding: 12px 14px; border-radius: 12px; font-size: 16px; color: var(--ink-2); transition: background-color .25s, color .25s; }
.legal__toc a:hover { background: var(--paper-2); color: var(--ink); }
.prose { max-width: 72ch; font-size: 19px; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.025em; margin-top: 48px; scroll-margin-top: 110px; font-variation-settings: 'SHRP' 100; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { display: grid; gap: 10px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ''; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; background: var(--azure); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--azure-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose__meta { font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee__track > [aria-hidden="true"] { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .burger { display: grid; }
  .hdr__act { margin-left: auto; }
  .hdr__phone span { display: none; }
  .hdr__phone { margin-right: 0; }
  .svc { grid-template-columns: 56px minmax(0, 1fr) 150px 56px; }
  .svc__desc { grid-column: 2 / 3; grid-row: 2; margin-top: -16px; }
  .svc__price { grid-row: 1 / span 2; grid-column: 3; }
  .svc__go { grid-row: 1 / span 2; grid-column: 4; }
  .svc__glyph { grid-row: 1 / span 2; align-self: start; padding-top: 4px; }
  .ftr__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .hdr__act .lang, .hdr__cta { display: none; }
  .shead, .phead__grid { grid-template-columns: minmax(0, 1fr); }
  .cases .case, .cases--editorial .case:nth-child(n) { grid-column: 1 / -1; }
  .prods { grid-template-columns: minmax(0, 1fr); }
  .prod { display: grid; grid-template-columns: 1fr 1fr; }
  .prod .case__art { height: 100%; min-height: 300px; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__grid, .contact, .case-info, .dhero__grid, .legal { grid-template-columns: minmax(0, 1fr); }
  .contact__info, .legal__toc { position: static; }
  .process__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .process__list::before { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .pstep { padding: 0 0 28px 36px; }
  .pstep::before { top: 6px; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .feat:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line); }
  .ftr__cta, .band { grid-template-columns: minmax(0, 1fr); }
  .dhero__art { max-width: 520px; width: 100%; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  :root { --hdr-top: 68px; --hdr-nav: 0px; }
  .hdr__nav, .hdr__act .btn, .hdr__act .lang, .hdr__phone { display: none; }
  .burger { display: grid; }
  .logo svg, .hdr .logo svg { height: 22px; }
  .hero__title { font-size: clamp(30px, min(10vw, 6.2svh), 48px); }
  .hero__foot, .hero__cta { width: 100%; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { flex: 1 1 auto; height: clamp(46px, 6.6svh, 58px); padding: 0 24px; }
  .hero__lead { font-size: clamp(14px, 2svh, 17px); }
  .svc { grid-template-columns: 40px minmax(0, 1fr) 48px; gap: 8px 14px; padding: 26px 6px; }
  .svc__glyph .glyph { width: 32px; height: 32px; }
  .svc__desc { grid-column: 2 / 3; grid-row: 2; margin-top: 0; font-size: 16px; }
  .svc__price { grid-column: 2 / 3; grid-row: 3; margin-top: 6px; }
  .svc__price small { display: inline; margin-left: 4px; }
  .svc__go { grid-column: 3; grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 14px; align-self: center; }
  .svc__glyph { grid-row: 1 / span 3; }
  .case__art { height: 340px; border-radius: 24px; }
  .case__meta { grid-template-columns: minmax(0, 1fr); }
  .case__svc { text-align: left; padding-top: 0; grid-row: 1; }
  .prod { display: flex; }
  .prod .case__art { height: 260px; min-height: 0; }
  .posts { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat + .stat:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .stat:nth-child(2n) { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .2); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .contact__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .partner { height: 92px; padding: 0 26px 0 18px; }
  .partner__mark { width: 48px; height: 48px; font-size: 24px; }
  .partner__name { font-size: 24px; }
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metric + .metric { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .tiles, .feats, .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .feat:nth-child(2n) { padding-left: 0; border-left: 0; }
  .shots { grid-auto-columns: 88%; }
  .filters { flex-direction: column; align-items: stretch; }
  .mk--site { left: 6%; right: -20%; }
  .mk--phone { width: 42%; }
  .mk--p1 { left: 8%; }
  .mk--p2 { left: 46%; }
}

@media (max-width: 420px) {
  .stat__n { font-size: 58px; }
  .ftr__cols { grid-template-columns: minmax(0, 1fr); }
}

/* adjacent light sections share one gap */
.sec + .sec { padding-top: 0; }
.h1, .h2 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.phead--legal .h1 { font-size: clamp(32px, 5.2vw, 76px); }
.form__status:empty { display: none; }

@media (max-width: 1500px) and (min-width: 1181px) {
  .hdr__phone span { display: none; }
  .hdr__phone { margin-right: 4px; }
  .hdr__cta { padding: 0 28px; }
}

/* hero: centered composition */
.hero__inner { align-items: center; text-align: center; }
.hero__title { margin-inline: auto; }
.hero__foot { justify-content: center; }
.hero__lead { text-align: left; }
@media (max-width: 760px) {
  .hero__inner { align-items: stretch; }
  .hero__lead { text-align: center; }
}

/* outline pill on dark backgrounds: fills white, text turns graphite */
.hero .btn--pill:hover, .hero .btn--pill:focus-visible { --btn-bg: #fff; --btn-bd: #fff; color: #1A1D23; }

/* light theme: the hero turns light too, and so does the header above it */
:root:not([data-theme="dark"]) .hero { background: #F6F8FC; color: var(--ink); }
:root:not([data-theme="dark"]) .hero__bg {
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(0, 114, 206, .12), transparent 70%),
    radial-gradient(45% 50% at 12% 0%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 55%, var(--paper) 100%);
}
:root:not([data-theme="dark"]) .hero__title { color: var(--ink); }
:root:not([data-theme="dark"]) .hero__lead { color: var(--ink-2); }
:root:not([data-theme="dark"]) .hero__lead b { color: var(--ink); }
:root:not([data-theme="dark"]) .hero__brand .hb-base { fill: #0A1131; fill-opacity: .05; }
:root:not([data-theme="dark"]) .hero__brand .hb-photo { opacity: .22; mix-blend-mode: multiply; }
:root:not([data-theme="dark"]) .hero .btn--pill { color: var(--ink); }
:root:not([data-theme="dark"]) .hero .btn--pill:hover,
:root:not([data-theme="dark"]) .hero .btn--pill:focus-visible { --btn-bg: var(--ink); --btn-bd: var(--ink); color: #fff; }

:root:not([data-theme="dark"]) .hdr--hero:not(.is-menu) { color: var(--ink); }
:root:not([data-theme="dark"]) .hdr--hero:not(.is-menu) .logo { --logo-a: #0072CE; --logo-b: #0033A0; }
:root:not([data-theme="dark"]) .hdr--hero:not(.is-menu) .hdr__phone .ic { color: var(--azure); }
:root:not([data-theme="dark"]) .hdr--hero:not(.is-menu) .hdr__phone:hover { color: var(--azure-ink); }
:root:not([data-theme="dark"]) .hdr--hero:not(.is-menu) .hdr__link::after { background: var(--azure); }
:root:not([data-theme="dark"]) .hdr--hero:not(.is-menu) .btn--pill:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }

/* services index: two columns */
.svc-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 56px);
  border-top: 0; border-bottom: 1px solid var(--line);
}
.svc-list .svc {
  grid-template-columns: 60px minmax(0, 1fr) auto 56px;
  grid-template-areas: "g n p o" "g d p o";
  align-items: center;
  gap: 8px 24px;
  padding: 32px 18px;
  border-top: 1px solid var(--line); border-bottom: 0;
}
.svc-list .svc__glyph { grid-area: g; align-self: start; padding-top: 4px; }
.svc-list .svc__glyph .glyph { width: 42px; height: 42px; }
.svc-list .svc__name { grid-area: n; font-size: clamp(24px, 2.1vw, 38px); }
.svc-list .svc__desc { grid-area: d; margin: 0; font-size: 16.5px; }
.svc-list .svc__price { grid-area: p; text-align: right; }
.svc-list .svc__go { grid-area: o; width: 56px; height: 56px; border-radius: 16px; }
@media (max-width: 1180px) {
  .svc-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .svc-list .svc {
    grid-template-columns: 40px minmax(0, 1fr) 48px;
    grid-template-areas: "g n o" "g d o" "g p o";
    gap: 6px 14px; padding: 24px 6px;
  }
  .svc-list .svc__glyph .glyph { width: 30px; height: 30px; }
  .svc-list .svc__price { text-align: left; margin-top: 4px; }
  .svc-list .svc__go { width: 48px; height: 48px; border-radius: 14px; }
}
.svc--ask { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.svc-list .svc--ask { grid-template-areas: "g n n o" "g d d o"; }
.svc--ask .svc__glyph .glyph { stroke-width: 1.4; }
.svc--ask .svc__name { color: var(--azure-ink); }
.svc--ask:hover .svc__name, .svc--ask:focus-visible .svc__name { color: #fff; }
@media (max-width: 1180px) { .svc--ask { display: none; } }

/* no square markers before labels */
.eyebrow::before, .about .eyebrow::before, .live::before, .rd-tab::before, .pick__opt span::before { content: none; display: none; }
.eyebrow, .live, .rd-tab, .pick__opt span { gap: 0; }
.rd-tab b { margin-left: 10px; }

/* home page: case cards without the tech chips */
#projects .case__tech { display: none; }

/* about stats: number size follows the column width, so "100%" never overflows */
.stats { container-type: inline-size; }
.stat__n { font-size: clamp(44px, 10.5cqi, 140px); white-space: nowrap; }
.stat { min-width: 0; }
@media (max-width: 760px) { .stat__n { font-size: clamp(40px, 16cqi, 96px); } }
@media (max-width: 420px) { .stat__n { font-size: clamp(40px, 16cqi, 96px); } }

/* contacts: messengers as labelled buttons (the full social set lives only in the footer) */
.messengers { display: flex; flex-wrap: wrap; gap: 10px; }
.messenger {
  display: inline-flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 26px 0 20px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  font-size: 18px; font-weight: 500;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.messenger .ic { width: 22px; height: 22px; }
.messenger:hover { background: #2D8CE6; color: #fff; box-shadow: none; }

@media (max-width: 760px) {
  .shots-next { width: 52px; height: 52px; }
}

/* hero on phones: left-aligned, anchored above the wordmark, buttons in one compact row */
@media (max-width: 760px) {
  .hero__inner { align-items: flex-start; justify-content: flex-end; text-align: left; padding-bottom: clamp(20px, 4.5svh, 44px); }
  .hero__title { margin: 0 0 clamp(14px, 2.4svh, 22px); font-size: clamp(30px, min(11.2vw, 6.4svh), 50px); line-height: .96; }
  .hero__foot { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 3.4svh, 30px); }
  .hero__lead { order: -1; text-align: left; max-width: 32ch; font-size: clamp(15px, 2.1svh, 17px); line-height: 1.5; }
  .hero__cta { display: flex; flex-wrap: nowrap; gap: 8px; width: auto; }
  .hero__cta .btn { flex: none; height: 50px; padding: 0 22px; font-size: 15px; }
}
@media (max-width: 359px) {
  .hero__cta .btn { padding: 0 16px; font-size: 14px; }
}
@media (max-width: 760px) {
  .hero__bg {
    background:
      radial-gradient(90% 55% at 100% 0%, rgba(47, 143, 232, .34), transparent 70%),
      radial-gradient(70% 40% at 0% 30%, rgba(95, 208, 255, .07), transparent 70%),
      linear-gradient(180deg, #1E2128 0%, #1A1D23 55%, #15171C 100%);
  }
  :root:not([data-theme="dark"]) .hero__bg {
    background:
      radial-gradient(90% 55% at 100% 0%, rgba(0, 114, 206, .16), transparent 70%),
      linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 55%, var(--paper) 100%);
  }
}

/* ---------- phones: swipe rails instead of long stacks ---------- */
.svc-tabs { display: none; }
@media (max-width: 760px) {
  .rail-m {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .rail-m::-webkit-scrollbar { display: none; }
  .rail-m > * { scroll-snap-align: start; grid-column: auto !important; min-width: 0; }
  .js .rail-m > .rv { opacity: 1; transform: none; }
  .cases.rail-m .case__art { aspect-ratio: 4 / 3.6; }

  /* process: five step cards to swipe through */
  .process__list.rail-m { grid-auto-columns: 74%; gap: 10px; }
  .process__list.rail-m::before { display: none; }
  .process__list.rail-m .pstep { padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
  .process__list.rail-m .pstep::before { display: none; }

  /* services: tabs + one panel */
  #svcList { display: none; }
  .svc-tabs { display: grid; gap: 14px; }
  .svc-tabs__bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut); }
  .svc-tabs__bar::-webkit-scrollbar { display: none; }
  .svc-tabs__tab { flex: none; height: 42px; font-size: 15px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
  .svc-tabs__tab[aria-selected="true"] { background: #2D8CE6; color: #fff; box-shadow: none; }
  .svc-tabs__panel { display: grid; gap: 14px; justify-items: start; padding: 24px 22px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
  .svc-tabs__top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .svc-tabs__glyph { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--paper-2); color: var(--azure); }
  .svc-tabs__glyph .glyph { width: 28px; height: 28px; }
  .svc-tabs__name { font-size: 26px; font-weight: 650; letter-spacing: -.035em; line-height: 1.1; }
  .svc-tabs__desc { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
  .svc-tabs__feats { display: flex; flex-wrap: wrap; gap: 6px; }
  .svc-tabs__more { height: 50px; padding: 0 26px; font-size: 15px; margin-top: 4px; }
  .svc-tabs__ask { display: grid; gap: 4px; text-align: left; padding: 18px 22px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); color: var(--azure-ink); font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
  .svc-tabs__ask span { color: var(--ink-2); font-size: 15px; font-weight: 400; letter-spacing: 0; }
}

/* radar legend: phones and tablets only */
.rd__legend { display: none; }
@media (max-width: 980px) {
  .rd__legend { display: grid; gap: 14px; margin-top: 8px; }
  .rd-lg { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; }
  .rd-lg .ring-tag { justify-content: center; height: 28px; }
  .rd-lg p { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 4px; }
  .rd-lg button { font-size: 15px; color: var(--on-night); line-height: 1.3; }
  .rd-lg button:hover { color: #5FD0FF; }
}

/* ---------- phones: hero like the reference ---------- */
.hero__ico { display: none; }
@media (max-width: 760px) {
  /* hero: content flows from the top; "see cases" sits at the bottom like the reference's download link */
  .hero__inner { justify-content: flex-start; padding-top: clamp(28px, 7svh, 72px); padding-bottom: clamp(16px, 3svh, 28px); }
  .hero__title { font-size: clamp(32px, min(11.4vw, 6.6svh), 52px); margin-bottom: clamp(16px, 3svh, 28px); }
  .hero__foot { flex: 1 1 auto; gap: 0; }
  .hero__lead { margin-bottom: clamp(22px, 4svh, 36px); }
  .hero__cta { display: contents; }
  .hero__cta .btn--blue { height: 56px; padding: 0 40px; font-size: 16px; }
  .hero__cta .hero__cases {
    margin-top: auto; height: auto; padding: 0; gap: 14px;
    box-shadow: none; background: none; font-size: 16px; font-weight: 500;
  }
  .hero .hero__cases:hover, .hero .hero__cases:focus-visible { --btn-bg: transparent; color: inherit; }
  .hero__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #2D8CE6; color: #fff; }
  .hero__ico .ic { width: 22px; height: 22px; }
}

/* footer on phones: brand on top, link columns two per row */
@media (max-width: 760px) {
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; padding-block: 44px; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__col a { font-size: 16px; }
}

/* ---------- services dropdown in the request form ---------- */
.pick--dd { display: block; }
.dd { position: relative; }
.dd__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; cursor: pointer; }
.dd__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.dd.has-val .dd__val { color: var(--ink); }
.dd__btn .ic { width: 20px; height: 20px; flex: none; color: var(--ink-3); transition: transform .3s var(--ease); }
.dd.is-open .dd__btn { border-color: var(--azure); box-shadow: 0 0 0 4px color-mix(in oklab, var(--azure) 18%, transparent); }
.dd.is-open .dd__btn .ic { transform: rotate(180deg); }
.dd__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  max-height: 320px; overflow-y: auto; padding: 6px;
  border-radius: 16px; background: var(--card);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2);
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s;
}
.dd.is-open .dd__menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s, transform .25s var(--ease); }
.dd__opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; cursor: pointer; font-size: 16px; }
.dd__opt:hover { background: var(--paper-2); }
.dd__opt input { position: absolute; opacity: 0; pointer-events: none; }
.dd__box { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); color: transparent; transition: background-color .2s, color .2s, box-shadow .2s; }
.dd__box .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.dd__opt input:checked + .dd__box { background: #2D8CE6; color: #fff; box-shadow: none; }
.dd__opt input:focus-visible + .dd__box { outline: 2px solid var(--azure); outline-offset: 2px; }
/* phones: "see cases" sits right next to "start a project" */
@media (max-width: 760px) {
  .hero__cta { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; }
  .hero__cta .btn--blue { height: 54px; padding: 0 26px; font-size: 15px; }
  .hero__cta .hero__cases { margin-top: 0; gap: 10px; font-size: 15px; white-space: nowrap; }
  .hero__ico { width: 44px; height: 44px; }
}
@media (max-width: 374px) {
  .hero__cta { gap: 10px; }
  .hero__cta .btn--blue { padding: 0 20px; }
}
@media (max-width: 760px) { .hero__foot { justify-content: flex-start; } }
/* wherever the burger is shown, the theme switch lives only inside the menu */
@media (max-width: 1180px) { .hdr__act .theme-btn { display: none; } }

/* phones: the wordmark stacked in two lines fills the lower part of the hero */
.hero__brand .hero__stack { display: none; }
@media (max-width: 760px) {
  .hero__brand { padding: 0 var(--gut) clamp(14px, 2.4svh, 24px); justify-content: flex-start; }
  .hero__brand svg:not(.hero__stack) { display: none; }
  .hero__brand .hero__stack { display: block; width: min(100%, calc((100svh - 480px) * 1.634)); min-width: 180px; }
}
/* phones: the text block sits in the middle of the space between the header and the wordmark */
@media (max-width: 760px) {
  .hero__inner { justify-content: center; padding-top: clamp(12px, 2svh, 24px); }
  .hero__foot { flex: none; }
}

/* touch screens: no blue tap flash or focus ring after a tap (keyboard focus on desktop stays visible) */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  :focus-visible, .on-night :focus-visible, .is-night :focus-visible { outline: none; }
}
@media (max-width: 760px) { .hero__brand .hero__stack { max-width: 560px; } }
@media (max-width: 760px) { .hero__foot { max-width: 100%; } }
@media (max-width: 359px) {
  .hero__cta { flex-wrap: wrap; gap: 12px 14px; }
  .hero__cta .btn--blue { height: 50px; padding: 0 22px; font-size: 14px; }
  .hero__lead { font-size: 14px; }
  .hero__ico { width: 40px; height: 40px; }
}
@media (max-width: 760px) {
  .svc-tabs { grid-template-columns: minmax(0, 1fr); }
  .svc-tabs__feats .chip { white-space: normal; height: auto; min-height: 34px; line-height: 1.3; padding-block: 6px; }
  .ftr__col a { overflow-wrap: anywhere; }
}
@media (max-width: 359px) { .ftr__col a { font-size: 14.5px; } }

/* radar: the badge layer must not swallow taps meant for the heading and tabs */
.rd__layer { pointer-events: none; }
.rd-b { pointer-events: auto; }
@media (max-width: 980px) { .rd__head { position: relative; z-index: 4; } }

/* larger burger */
@media (max-width: 1180px) {
  .burger { width: 52px; height: 52px; margin-right: -8px; }
  .burger .ic { width: 32px; height: 32px; stroke-width: 1.8; }
}

/* ---------- radar on phones/tablets: x5.tech-style labelled badges along arcs ---------- */
.rd.is-compact .rd-b, .rd.is-compact.is-all .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-22px, -50%); }
.rd.is-compact .rd-b.is-flip, .rd.is-compact.is-all .rd-b.is-flip { transform: translate(var(--x, 0), var(--y, 0)) translate(calc(-100% + 22px), -50%); }
.rd.is-compact .rd-b__ic, .rd.is-compact.is-all .rd-b__ic { width: 44px; height: 44px; box-shadow: 0 0 0 4px #15171C; }
.rd.is-compact .rd-b__ic .ic, .rd.is-compact.is-all .rd-b__ic .ic { width: 21px; height: 21px; }
.rd.is-compact .rd-b__ic .ic-mono { font-size: 12px; }
.rd.is-compact .rd-b__lbl, .rd.is-compact.is-all .rd-b__lbl {
  display: inline-flex; position: relative; left: auto; top: auto; transform: none;
  opacity: 1; pointer-events: auto; z-index: -1;
  height: 38px; margin-left: -8px; padding: 0 14px 0 18px; font-size: 15px;
}
.rd.is-compact .rd-b.is-flip .rd-b__lbl { margin-left: 0; margin-right: -8px; padding: 0 18px 0 14px; }
.rd.is-compact .rd-b:hover .rd-b__ic, .rd.is-compact .rd-b.is-sel .rd-b__ic { box-shadow: 0 0 0 4px #15171C, 0 0 0 6px #5FD0FF; }
.rd.is-compact .rd-rlabel { font-size: 10px; }
/* phones, "All": icons only, the name comes with the card on tap */
.rd.is-compact.is-all .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-20px, -50%); }
.rd.is-compact.is-all .rd-b__ic { width: 40px; height: 40px; }
.rd.is-compact.is-all .rd-b__ic .ic { width: 19px; height: 19px; }
.rd.is-compact.is-all .rd-b__lbl { display: none; }

/* desktop, "All": names stay visible (x5.tech style), 52px icons */
.rd.is-all:not(.is-compact) .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-26px, -50%); }
.rd.is-all:not(.is-compact) .rd-b.is-flip { transform: translate(var(--x, 0), var(--y, 0)) translate(calc(-100% + 26px), -50%); }
.rd.is-all:not(.is-compact) .rd-b__ic { width: 52px; height: 52px; }
.rd.is-all:not(.is-compact) .rd-b__ic .ic { width: 24px; height: 24px; }
.rd.is-all:not(.is-compact) .rd-b__lbl {
  position: relative; left: auto; top: auto; transform: none; opacity: 1; pointer-events: auto; z-index: -1;
  height: 46px; margin-left: -8px; padding: 0 18px 0 22px; font-size: 17px;
}
.rd.is-all:not(.is-compact) .rd-b.is-flip .rd-b__lbl { margin-left: 0; margin-right: -8px; padding: 0 22px 0 18px; }

/* ---------- static radar: no hover, no taps; phones use smaller labelled badges ---------- */
.rd__layer, .rd-b { pointer-events: none; }
.rd.is-compact.is-all .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-16px, -50%); }
.rd.is-compact.is-all .rd-b.is-flip { transform: translate(var(--x, 0), var(--y, 0)) translate(calc(-100% + 16px), -50%); }
.rd.is-compact.is-all .rd-b__ic { width: 32px; height: 32px; box-shadow: 0 0 0 3px #15171C; }
.rd.is-compact.is-all .rd-b__ic .ic { width: 16px; height: 16px; }
.rd.is-compact.is-all .rd-b__ic .ic-mono { font-size: 10px; }
.rd.is-compact.is-all .rd-b__lbl {
  display: inline-flex; position: relative; left: auto; top: auto; transform: none; opacity: 1; z-index: -1;
  height: 28px; margin-left: -6px; padding: 0 10px 0 13px; font-size: 13px;
}
.rd.is-compact.is-all .rd-b.is-flip .rd-b__lbl { margin-left: 0; margin-right: -6px; padding: 0 13px 0 10px; }

/* ---------- back to top: progress ring + arrow that swaps on hover and flies up on click ---------- */
.totop {
  --p: 0;
  position: fixed; right: clamp(16px, 2vw, 32px); bottom: clamp(16px, 2vw, 32px); z-index: 55;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(30, 33, 40, .82); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(24px) scale(.85); pointer-events: none;
  transition: opacity .35s, transform .45s var(--ease), background-color .25s;
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop__ring circle { fill: none; stroke-width: 2.5; }
.totop__track { stroke: rgba(255, 255, 255, .12); }
.totop__bar { stroke: #2D8CE6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); transition: stroke-dashoffset .15s linear; }
.totop__arrows { position: relative; width: 22px; height: 22px; overflow: hidden; }
.totop__arrows .ic { position: absolute; inset: 0; width: 22px; height: 22px; stroke-width: 2; transition: transform .45s var(--ease); }
.totop__arrows .ic + .ic { transform: translateY(130%); }
.totop:hover { background: #2D8CE6; }
.totop:hover .totop__bar { stroke: #fff; }
.totop:hover .totop__arrows .ic:first-child { transform: translateY(-130%); }
.totop:hover .totop__arrows .ic + .ic { transform: none; }
.totop.is-fly .totop__arrows .ic { animation: totop-fly .6s var(--ease); }
@keyframes totop-fly { 0% { transform: none; } 45% { transform: translateY(-140%); } 46% { transform: translateY(140%); } 100% { transform: none; } }
.totop:focus-visible { outline: 2px solid #5FD0FF; outline-offset: 3px; }
:root:not([data-theme="dark"]) .totop { background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 14px 34px -16px rgba(10, 17, 49, .35), inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) .totop__track { stroke: rgba(10, 17, 49, .1); }
:root:not([data-theme="dark"]) .totop:hover { background: #2D8CE6; color: #fff; }
@media (max-width: 760px) { .totop { width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .totop.is-fly .totop__arrows .ic { animation: none; } }

/* service rows: when the blue rounded hover plate shows, hide the divider lines that touch it,
   so no line ends stick out of its rounded corners */
.svc-list { border-bottom: 0; }
.svc-list .svc { transition: color .35s var(--ease), border-color .3s; }
.svc-list .svc:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.svc-list .svc:hover, .svc-list .svc:focus-visible { border-color: transparent; }
@media (min-width: 1181px) {
  .svc-list .svc:hover + * + .svc, .svc-list .svc:focus-visible + * + .svc { border-top-color: transparent; }
}
@media (max-width: 1180px) {
  .svc-list .svc:nth-last-child(2) { border-bottom: 0; }
  .svc-list .svc:hover + .svc, .svc-list .svc:focus-visible + .svc { border-top-color: transparent; }
}

/* ============================================================
   Дополнения к main.css для боевой сборки (generate-v2).
   main.css макета не трогаем — всё, что понадобилось сверх него,
   лежит здесь и склеивается с ним в один файл при сборке.
   ============================================================ */

/* Настоящие обложки и скриншоты вместо мок-интерфейсов (HANDOFF.md: «ставить <img> внутрь .case__stage»). */
.case__img, .shot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Плитки разной ширины при одной высоте: скриншот вписывается целиком (contain), а не обрезается.
   Свободные поля заливаются цветом фона самой картинки (генератор берёт его из угла файла),
   без цветного свечения макета — иначе на стыке видна граница картинки. */
.case__art--img, .shot--img { background: var(--c1); }
.shot--video .shot__img { z-index: 0; }

/* Длинный текст кейса: первый абзац крупно (.case-info__lead), остальное — обычным текстом. */
.case-info__more { margin-top: 28px; }

/* Переключатель языков — ссылки, а не кнопки: у ссылки нет встроенного центрирования. */
a.mnav__lang { display: inline-flex; align-items: center; }

/* Скрытое поле-ловушка для ботов в форме заявки. */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Вкладки услуг на телефоне: панели теперь в разметке, видна одна. */
.svc-tabs__panel[hidden] { display: none; }

/* Фильтр кейсов прячет карточки атрибутом hidden, но .case { display: flex } его перебивал. */
.case[hidden] { display: none; }

/* Метка на обложке («İkinci Redizayn», «Экран 2»): в макете белая на белом полупрозрачном —
   под тёмные подложки. На светлых скриншотах её не видно, поэтому на плитках с картинкой
   подложка метки тёмная (графит макета), текст остаётся белым. */
.case__art--img .case__badge, .shot--img .case__badge { background: rgba(21, 23, 28, .72); color: #fff; }

/* «Нам доверяют»: настоящие логотипы вместо букв (DESIGN-NOTES.md, п. 4) — серые, цвет при наведении.
   Логотипы растровые, на белом фоне и без прозрачности. Фон убирается смешиванием с плиткой:
   в светлой теме multiply (белое исчезает), в тёмной — инверсия и screen (белое становится
   чёрным и исчезает, рисунок светлеет). hue-rotate(180deg) после инверсии возвращает цветам
   их оттенок, поэтому при наведении в тёмной теме логотип тоже цветной.
   --flip — логотип светлым по чёрному (LaLiga): у него всё наоборот. */
.partner--logo { width: 248px; padding: 0 28px; justify-content: center; }
.partner__logo { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .62; transition: filter .3s, opacity .3s; }
.partner--logo:hover .partner__logo { filter: none; opacity: 1; }
.partner__logo--flip { filter: invert(1) hue-rotate(180deg) grayscale(1); }
.partner--logo:hover .partner__logo--flip { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .partner__logo { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg) grayscale(1); opacity: .7; }
:root[data-theme="dark"] .partner--logo:hover .partner__logo { filter: invert(1) hue-rotate(180deg); opacity: 1; }
:root[data-theme="dark"] .partner__logo--flip { filter: grayscale(1); }
:root[data-theme="dark"] .partner--logo:hover .partner__logo--flip { filter: none; }
@media (max-width: 760px) { .partner--logo { width: 184px; padding: 0 20px; } }

/* Фильтры (проекты, блог) в тёмной теме: выбранная кнопка получала --card (#1C1F25) — темнее
   подложки --paper-2 (#1E2128), и выбор почти не читался. Здесь — приподнятый графит макета
   (--night-3) с тонкой обводкой, как у светлой темы, где кнопка светлее подложки. */
:root[data-theme="dark"] .seg__btn[aria-pressed="true"] { background: var(--night-3); color: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 16px rgba(0, 0, 0, .35); }

/* Переключатель темы — свитч с живого neomax.az (public_html/assets/css/neomax.css, «Beeline style»),
   вместо кнопки-иконки макета: катящийся ползунок, луна ↔ солнце, неон при наведении. */
.theme-toggle { background: none; border: 0; cursor: pointer; padding: 0; line-height: 0; display: inline-grid; place-items: center; min-width: 45px; min-height: 44px; }
.theme-toggle__track { position: relative; display: block; width: 45px; height: 21px; border-radius: 999px; background: #000; border: 1px solid transparent; transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
:root[data-theme="dark"] .theme-toggle__track { background: #fff; }
/* шапка поверх тёмной шапки страницы (услуга, кейс) и мобильное меню: чёрная дорожка на тёмном — нужна кромка */
:root:not([data-theme="dark"]) .hdr--dark .theme-toggle__track, :root:not([data-theme="dark"]) .mnav .theme-toggle__track { border-color: rgba(255, 255, 255, .35); }
@media (hover: hover) {
  .theme-toggle:hover .theme-toggle__track { box-shadow: 0 0 18px 1px rgba(64, 124, 255, .7), 0 0 5px rgba(64, 124, 255, .55); border-color: rgba(64, 124, 255, .8); }
  :root:not([data-theme="dark"]) .theme-toggle:hover .theme-toggle__track { box-shadow: 0 0 18px 1px rgba(254, 200, 10, .7), 0 0 5px rgba(254, 200, 10, .55); border-color: rgba(254, 200, 10, .8); }
}
.theme-toggle:focus-visible { outline: 2px solid #5AA6F0; outline-offset: 2px; border-radius: 999px; }
.theme-toggle__thumb { position: absolute; top: 50%; left: 3px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; transform: translate(21px, -50%); transition: transform .42s cubic-bezier(.65, .05, .25, 1); }
:root[data-theme="dark"] .theme-toggle__thumb { transform: translateY(-50%); }
.theme-toggle svg { grid-area: 1 / 1; width: 15px; height: 15px; display: block; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.tt-moon { fill: #0e1830; stroke: none; opacity: 0; transform: scale(.3) rotate(90deg); }
.tt-sun { fill: #fec80a; stroke: #fec80a; stroke-width: 1.8; stroke-linecap: round; opacity: 1; }
:root[data-theme="dark"] .tt-moon { opacity: 1; transform: none; }
:root[data-theme="dark"] .tt-sun { opacity: 0; transform: scale(.3) rotate(-90deg); }
.mnav__theme { align-self: center; margin-left: 6px; }

/* Счётчик символов под «О проекте» (лимит 400 — столько принимает обработчик заявки, как на старом сайте). */
.field__count { justify-self: end; font: 500 12px/1 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); transition: color .2s; }
.field__count.is-near { color: #FF6A2B; }

/* Радар на телефоне: подписи у всех, пока на радаре не больше 40 технологий (галочка
   «Показывать на радаре» в панели). Больше — radar.js включает is-lean: подписи остаются у кольца
   Adopt, остальные иконками, иначе радар растягивается на несколько экранов. */
.rd.is-lean .rd-b:not([data-ring="adopt"]) .rd-b__lbl { display: none; }

/* Бейджи радара приходят в разметке, а места им считает radar.js (частями, не блокируя страницу).
   Пока раскладки нет — их не видно, иначе на миг они лежат кучей в углу. */
.rd:not(.is-placed) .rd__layer { visibility: hidden; }

/* ============================================================
   Палитра — DESIGN-NOTES.md, п. 1 (одобрено владельцем 07.10.2026)
   Было: три тёмных фона (графит, тёмно-синий, кобальт), шесть синих,
   семь почти одинаковых светло-серых и случайный оранжевый.
   Стало: один графит #15171C / #1E2128 для всех тёмных блоков,
   графитовый текст, нейтральный светлый фон, один синий #1A6FCC
   (наведение и ссылки на светлом — #155DAD), тот же синий светлее #5AA6F0 —
   для текста, значков и фокуса на тёмном. Голубого #5FD0FF и второго синего
   #1F7FE0 больше нет (просьба владельца 15.10.2026). Оранжевого нет.
   ============================================================ */
:root {
  --paper: #F4F5F7;
  --paper-2: #E9EBEF;
  --ink: #14161B;
  --ink-2: #4B505C;
  --ink-3: #6B707C;                /* подписи, плейсхолдеры, крошки: 4,6 : 1 (было #7B808C — 3,6) */
  --line: #E1E4E9;
  --line-2: #CDD1D9;
  --cobalt: #1A6FCC;               /* фон кнопок и плашек с белым текстом: 5,0 : 1 (было #1A6FCC — 4,06, ниже нормы WCAG) */
  --azure: #1A6FCC;
  --azure-ink: #155DAD;            /* тот же синий темнее — для текста ссылок на светлом (контраст ≥ 4.5) */
  --ion: #5AA6F0;                  /* в макете голубой #5FD0FF — акценты и фокус на тёмном */
  --flare: #5AA6F0;                /* оранжевый убран; там, где он оставался маркером на тёмном, — голубой */
  --night: #15171C;
  --night-2: #1E2128;
  --night-3: #2A2D35;
  --on-night-2: #A4A9B6;
  --night-line: rgba(255, 255, 255, .1);
}
:root[data-theme="dark"] { --azure: #1A6FCC; --azure-ink: #5AA6F0; --ink-2: #A9AEBB; --ink-3: #8A909D; }

/* кнопки: один синий, наведение — он же темнее. Только у обычной синей кнопки: у светлой, контурной
   и «таблетки» наведение своё (макет), и общее правило его перебивало — тёмный текст на синем. */
.btn:not(.btn--light):not(.btn--line):not(.btn--pill):hover { --btn-bg: #155DAD; }
/* светлая кнопка на тёмных блоках: при наведении — основной синий с белым текстом (решение владельца;
   в макете был голубой #5AA6F0 с тёмным текстом) */
/* Светлая кнопка при наведении — как синяя кнопка формы (просьба владельца
   15.10.2026): фон становится чуть темнее своего же цвета, а не синим, и
   квадратик со стрелкой сдвигается вправо (.btn:hover .btn__go в main.css). */
.btn--light:hover { --btn-bg: #E2E5EA; --btn-fg: var(--night); }
.btn--blue { --btn-bg: #1A6FCC; }
.btn--blue:hover { --btn-bg: #155DAD; }

/* синие, зашитые прямо в правилах макета (#2D8CE6, #3D9BEA, #4BA2F0) → один синий */
.hdr--dark .hdr__phone .ic, .hdr--dark .hdr__link::after { color: #5AA6F0; }
.hdr--dark .hdr__link::after { background: #1A6FCC; }
.rd-tab[aria-selected="true"], .tcat[aria-pressed="true"], .svc-tabs__tab[aria-selected="true"],
.dd__opt input:checked + .dd__box, .hero__ico { background: #1A6FCC; }
.messenger:hover, .shots-next:hover, .totop:hover, :root:not([data-theme="dark"]) .totop:hover { background: #1A6FCC; }
.tcard:hover .tcard__mark { color: #1A6FCC; }
.totop__bar { stroke: #1A6FCC; }
.svc:hover .svc__go, .svc:focus-visible .svc__go { color: #1A6FCC; }

/* тёмно-синий текст макета (#0A1131) в светлых местах → графит */
.shots-next { color: #14161B; }
:root:not([data-theme="dark"]) .hero__brand .hb-base { fill: #14161B; }

/* hero: один графит в тёмной теме, нейтральный светлый — в светлой */
.hero { background: #15171C; }
:root:not([data-theme="dark"]) .hero { background: #F7F8FA; }

/* «О нас» остаётся единственным цветным блоком — синий логотипа (DESIGN-NOTES, п. 6) */
.about { background: #0033A0; }

/* счётчик символов у лимита — без оранжевого */
.field__count.is-near { color: #E5484D; }

/* ---------- радар ----------
   Бейджи одного вида на всех кольцах: графитовый кружок и светлая иконка. Кольцо читается
   по положению, а не по яркости заливки — раньше дальние кольца почти сливались с фоном
   (контраст 1,3 : 1). Основной стек (Adopt) отмечен тонким голубым ободком. */
.radar { background: #15171C; }
.rd-b .rd-b__ic, .rd-b[data-ring] .rd-b__ic { background: #23262E; color: #E9EEF9; box-shadow: 0 0 0 5px #15171C, inset 0 0 0 1px rgba(255, 255, 255, .1); }
.rd-b[data-ring="adopt"] .rd-b__ic { background: #1E2B3A; color: #fff; box-shadow: 0 0 0 5px #15171C, inset 0 0 0 1.5px #5AA6F0; }
.rd-b__lbl { background: #1E2128; color: #E9EEF9; }
@media (max-width: 980px) { .rd-b .rd-b__ic, .rd-b[data-ring] .rd-b__ic { box-shadow: 0 0 0 3px #15171C, inset 0 0 0 1px rgba(255, 255, 255, .1); } .rd-b[data-ring="adopt"] .rd-b__ic { box-shadow: 0 0 0 3px #15171C, inset 0 0 0 1.5px #5AA6F0; } }
.rd.is-compact .rd-b .rd-b__ic { box-shadow: 0 0 0 4px #15171C, inset 0 0 0 1px rgba(255, 255, 255, .1); }
.rd.is-compact .rd-b[data-ring="adopt"] .rd-b__ic { box-shadow: 0 0 0 4px #15171C, inset 0 0 0 1.5px #5AA6F0; }
.rd-b:hover .rd-b__ic { box-shadow: 0 0 0 5px #15171C, inset 0 0 0 1.5px #5AA6F0; }
/* линии: один цвет и одна прозрачность для всех колец; ось чуть заметнее */
.rd-ring { stroke: rgba(233, 238, 249, .16); stroke-opacity: 1; }
.rd-axis { stroke: rgba(233, 238, 249, .22); stroke-opacity: 1; }
.rd-core-dot { fill: #5AA6F0; }
.rd-rlabel { fill: rgba(233, 238, 249, .55); }

/* Блоки с анимацией появления (.rv) приезжают снизу на 28 px. При перезагрузке браузер восстанавливал
   прокрутку и выбирал такой блок «якорем» (scroll anchoring), пока тот ещё был сдвинут, а после
   анимации подкручивал страницу вслед за ним — с каждым обновлением сайт уезжал вниз на 28 px.
   Анимируемые блоки якорем не выбираются; якорем становятся неподвижные элементы. */
.rv { overflow-anchor: none; }

/* Плитка-иллюстрация в шапке страницы услуги: вместо пиктограммы на синем градиенте — сцена на сером
   (payload/src/lib/v2/serviceArt.ts), тот же серый, что у обложек кейсов. */
.dhero__art--svc { background: #D9DCE1; box-shadow: none; }
.svc-art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Шапка на невысоких экранах (ноутбуки 15.6″ с масштабом 125%: окно ~1536×730).
   Высота шапки в макете — 9.6svh, но не меньше 68px, а кнопка «Отправить заявку»
   всегда 64px и логотип 36px: кнопке оставалось по 3px сверху и снизу, и она
   липла к краю окна. Шапка — не ниже 80px, кнопка и логотип уменьшаются вместе
   с ней, чтобы вокруг всегда было не меньше ~14px воздуха. */
@media (min-width: 981px) {
  :root { --hdr-top: clamp(80px, 9.6svh, 104px); }
  .hdr__cta { height: clamp(48px, calc(var(--hdr-top) - 28px), 64px); font-size: clamp(16px, calc(var(--hdr-top) * .19), 18px); }
  .hdr .logo svg { height: clamp(30px, calc(var(--hdr-top) * .4), 36px); }
}

/* Шапка страниц кейса и услуги (.dhero) — в макете «всегда тёмная» (.is-night),
   и при светлой теме страница светлела, а верх оставался графитовым: выглядело
   так, будто тема не переключилась. Теперь она следует теме, как hero главной.
   Цвета ночных блоков здесь заданы переменными, поэтому их достаточно
   переопределить на самом блоке; меню над ней светлеет через .hdr--hero. */
:root:not([data-theme="dark"]) .dhero.is-night {
  --night: #FFFFFF;
  --on-night: var(--ink);
  --on-night-2: var(--ink-2);
  --ion: var(--azure-ink);
  --night-line: var(--line-2);
}
:root:not([data-theme="dark"]) .dhero .dhero__text .h1, :root:not([data-theme="dark"]) .dhero__price b { color: var(--ink); }
:root:not([data-theme="dark"]) .dhero .btn--line { --btn-bd: var(--line-2); }
:root:not([data-theme="dark"]) .dhero .btn--line:hover { --btn-bg: var(--paper-2); }
:root:not([data-theme="dark"]) .dhero .btn--light { --btn-bg: var(--ink); --btn-fg: #fff; }
:root:not([data-theme="dark"]) .dhero .btn--light .btn__go { background: #fff; color: var(--ink); }
:root:not([data-theme="dark"]) .dhero .btn--light:hover { --btn-bg: #2A2D35; --btn-fg: #fff; }
.dhero, .dhero .dhero__text .h1 { transition: background-color .3s var(--ease), color .3s var(--ease); }

/* Строка услуги при наведении: синяя заливка — прямоугольником, без
   скруглённых углов (просьба владельца 15.10.2026). */
.svc::before { border-radius: 0; }
/* …и пиктограмма услуги на синей заливке — белая, а не голубая. */
.svc:hover .svc__glyph, .svc:focus-visible .svc__glyph { color: #fff; }

/* Шрифт — Ubuntu вместо Geologica (решение владельца 15.10.2026). Надпись
   neomax в hero не шрифт, а контуры логотипа — её это не касается.
   Моноширинные подписи — Ubuntu Mono из той же семьи вместо Martian Mono
   (выбор владельца 15.10.2026). */
/* Пока Ubuntu грузится, текст рисуется Arial, подогнанным под метрики Ubuntu
   (ширина букв, высота строки): при подмене шрифта строки не переносятся иначе
   и блоки не прыгают (CLS на страницах кейсов был 0,13–0,15). Значения
   посчитаны по таблицам шрифтов: средняя ширина букв Ubuntu к Arial, высоты
   hhea Ubuntu, делённые на тот же коэффициент. */
@font-face { font-family: 'Ubuntu fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; size-adjust: 104%; ascent-override: 89.5%; descent-override: 18.1%; line-gap-override: 2.7%; }
@font-face { font-family: 'Ubuntu fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 100.3%; ascent-override: 92.9%; descent-override: 18.9%; line-gap-override: 2.8%; }
:root {
  /* Моноширинный в подписях убран (16.10.2026): все подписи — Ubuntu. */
  --f-mono: var(--f-body);
  --f-body: 'Ubuntu derivative Neomax', 'Ubuntu', 'Ubuntu fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-knot: 'Ubuntu derivative Neomax', 'Ubuntu', 'Ubuntu fallback', system-ui, sans-serif;
}

/* Без анимации появления при прокрутке (просьба владельца 15.10.2026): блоки
   .rv видны сразу, без сдвига и проявления. */
.js .rv { opacity: 1; transform: none; transition: none; }

/* Кнопка «наверх»: над нижней полосой подвала, а не поверх ссылок на ней
   (--lift считает site.js при прокрутке). */
.totop { bottom: calc(clamp(16px, 2vw, 32px) + var(--lift, 0px)); }
.totop.is-on.is-end { opacity: 0; transform: translateY(24px) scale(.85); pointer-events: none; }

/* Кнопка «Отправить заявку» в шапке — ниже (просьба владельца 15.10.2026):
   48 px на всех экранах вместо 52–64 px. */
@media (min-width: 981px) {
  .hdr__cta { height: 48px; font-size: 16px; padding: 0 26px; }
}

/* Лайтбокс скриншотов кейса (в макете его не было, логика — site.js). */
.shot--img { cursor: zoom-in; }
.shot--img:focus-visible { outline: 2px solid #5AA6F0; outline-offset: 3px; }
html.is-lbox { overflow: hidden; }
.lbox { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; gap: 8px; padding: 64px 16px 24px; background: rgba(10, 11, 14, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: lboxIn .25s var(--ease); touch-action: pan-y; }
.lbox[hidden] { display: none; }
@keyframes lboxIn { from { opacity: 0; } }
.lbox__fig { margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 14px; min-height: 0; }
/* не во весь экран: крупный, но с воздухом вокруг */
.lbox__img { max-width: min(100%, 1100px); max-height: min(100%, 74vh); width: auto; height: auto; object-fit: contain; border-radius: 12px; background: #D9DCE1; user-select: none; -webkit-user-drag: none; }
.lbox__cap { font: 500 12.5px/1.4 var(--f-mono); color: #A4A9B6; text-align: center; max-width: 80ch; }
.lbox__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; justify-self: center; color: #fff; background: rgba(255, 255, 255, .1); transition: background-color .25s; }
.lbox__btn:hover { background: #1A6FCC; }
.lbox__btn:focus-visible { outline: 2px solid #5AA6F0; outline-offset: 3px; }
.lbox__btn .ic { width: 22px; height: 22px; }
.lbox__prev .ic { transform: rotate(180deg); }
.lbox__close { position: absolute; top: 12px; right: 16px; }
@media (max-width: 760px) {
  /* на телефоне стрелки — парой под картинкой, картинка — на всю ширину */
  .lbox { grid-template-columns: minmax(0, 1fr); padding: 64px 12px 92px; }
  .lbox__fig { grid-column: 1; grid-row: 1; }
  .lbox__prev, .lbox__next { position: absolute; bottom: 24px; }
  .lbox__prev { left: calc(50% - 64px); }
  .lbox__next { left: calc(50% + 12px); }
}
.lbox__btn:disabled { opacity: .3; cursor: default; }
.lbox__btn:disabled:hover { background: rgba(255, 255, 255, .1); }

/* Правая колонка заголовка страницы — той же ширины и с тем же промежутком,
   что у заголовков секций (460 px, 72 px): подзаголовки справа начинаются с
   одной линии по всей странице. */
@media (min-width: 981px) { .phead__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 72px; } }

/* ============================================================
   Правки по аудиту 15.10.2026 — без изменения вида страниц
   (вёрстка и цвета те же; чинится то, что ломалось или было
   недоступно с клавиатуры и экранного диктора).
   ============================================================ */

/* Фокус с клавиатуры на тач-экранах. main.css гасил обводку для всех
   (hover: none) — у iPad и Android с клавиатурой пропадал любой видимый
   фокус. Касание кнопок и ссылок :focus-visible не включает, так что после
   тапа обводки по-прежнему нет. Поля ввода показывают фокус своей рамкой. */
@media (hover: none) {
  :focus-visible { outline: 2px solid var(--azure); }
  .on-night :focus-visible, .is-night :focus-visible { outline: 2px solid var(--ion); }
  .field__input:focus-visible { outline: none; }
}
/* Блок, к которому прокрутила ссылка «Услуги», «О нас»…: фокус ставит site.js,
   чтобы следующий Tab шёл по блоку; рамка вокруг целой секции не нужна. */
[tabindex="-1"]:focus { outline: none; }

/* Меню языков: закрытое было только прозрачным — три невидимые ссылки
   ловили Tab, а слово «Русский» в нём заставляло азербайджанскую страницу
   качать кириллический шрифт. Теперь закрытое меню не отрисовывается вовсе
   (display: none); появление и исчезание анимируются как прежде
   (@starting-style, allow-discrete — браузеры без них просто без анимации). */
.lang__menu { display: none; transition: opacity .25s, transform .3s var(--ease), display .3s allow-discrete; }
.lang.is-open .lang__menu { display: block; }
@starting-style { .lang.is-open .lang__menu { opacity: 0; transform: translateY(-6px); } }

/* Заголовок страницы услуги или кейса с очень длинным словом
   («Proseslərin avtomatlaşdırılması»): для азербайджанского у браузеров нет
   переносов, слово вылезало за край колонки и под картинку. Колонка больше не
   растягивается под слово, а размер заголовка уменьшается ровно настолько,
   чтобы самое длинное слово (его длину --lw ставит pages.ts) поместилось.
   С обычными словами размер прежний. */
.dhero__text { grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
/* Заголовок шапки кейса и услуги чуть меньше макетного (просьба владельца 15.10.2026):
   было clamp(46px, 6.8vw, 120px). */
.dhero__text .h1 { font-size: clamp(40px, 5.8vw, 100px); }
.dhero__text .h1[style*="--lw"] { font-size: min(clamp(40px, 5.8vw, 100px), calc(100cqi / (var(--lw) * .5))); }
/* Переносы в крупных заголовках — только у длинных слов: «пер-вый», «вто-рой» не рвём. */
.h1, .h2 { hyphenate-limit-chars: 10 4 4; }

/* Плашка «Обсудим ваш проект?» на телефоне: длинная русская кнопка
   («Получить консультацию») не помещалась, квадратик со стрелкой выпадал за
   кнопку. Кнопка — во всю ширину, подпись слева, стрелка справа, как в
   мобильном меню; так же и в подвале. */
@media (max-width: 760px) {
  .band { padding: 28px 18px; }
  .band .btn, .ftr__cta .btn { justify-content: space-between; padding-left: 22px; }
  .band .btn { font-size: 16px; }
}

/* Подвал на узких телефонах: «Ресурсы» и «Контакты» — в один ряд (просьба
   владельца 15.10.2026). Чтобы адрес почты не рвался в половине ширины
   («support@neomax.a / z»), ссылки контактов на узких экранах чуть мельче. */
@media (max-width: 420px) { .ftr__col:last-child a { font-size: 14.5px; overflow-wrap: normal; } }
@media (max-width: 359px) { .ftr__col:last-child a { font-size: 13.5px; } }

/* Цифры «О нас» на телефоне: в правой колонке линия и отступ были только у «9»
   — правило трёх колонок макета перебивало правило двух. */
@media (max-width: 760px) {
  .stats .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats .stat:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .2); }
}

/* Лента партнёров: стиль набора логотипов — классом, а не атрибутом style
   (тот перебивал «уменьшить движение»: логотипы шли дважды и уезжали за край). */
.marquee__set { display: flex; gap: 14px; }
@media (prefers-reduced-motion: reduce) {
  .marquee__set { flex-wrap: wrap; }
  .marquee__set[aria-hidden="true"] { display: none; }
}

/* Строки услуг на главной: строка тянется по соседней, и промежуток между
   названием и описанием гулял (8, 20, 35 px). Содержимое — по центру строки. */
.svc-list .svc { align-content: center; }

/* Обводка фокуса светло-синим #5AA6F0 на светлом фоне почти не видна (1,6 : 1) —
   в светлой теме синяя. */
:root:not([data-theme="dark"]) .theme-toggle:focus-visible,
:root:not([data-theme="dark"]) .shot--img:focus-visible,
:root:not([data-theme="dark"]) .shots-next:focus-visible,
:root:not([data-theme="dark"]) .totop:focus-visible { outline-color: var(--azure); }
:root:not([data-theme="dark"]) .mnav .theme-toggle:focus-visible,
:root:not([data-theme="dark"]) .hdr--dark .theme-toggle:focus-visible { outline-color: #5AA6F0; }

/* Радар: место под него — сразу, а не когда radar.js разложит бейджи (он
   грузится, только когда блок близко). Без этого страница ниже радара прыгала
   на 600–900 px, и ссылки «О нас», «Контакты» останавливались на радаре.
   Высоты — замеренные итоговые для ~40 технологий; radar.js потом ставит точную. */
.rd__stage { height: 840px; }
@media (max-width: 980px) { .rd__stage { height: 575px; } }
/* Телефоны (до 760 px) — по замерам 16.10.2026 после уменьшения значков. */
@media (max-width: 760px) { .rd__stage { height: clamp(560px, calc(780px - (100vw - 600px) * 1.4), 780px); } }
@media (max-width: 599px) { .rd__stage { height: clamp(650px, calc(860px - (100vw - 500px) * 2.1), 860px); } }
@media (max-width: 429px) { .rd__stage { height: 930px; } }
@media (max-width: 359px) { .rd__stage { height: 1230px; } }

/* Окно заявки открыто — страница под ним не прокручивается (как под меню и лайтбоксом). */
html:has(dialog[open]) { overflow: hidden; }

/* Режим высокой контрастности Windows: невыбранные услуги показывали галочку
   (она прозрачная цветом, а в этом режиме цвета системные), выбранный фильтр
   не отличался от остальных. */
@media (forced-colors: active) {
  .dd__opt input:not(:checked) + .dd__box .ic { visibility: hidden; }
  .seg__btn[aria-pressed="true"], .svc-tabs__tab[aria-selected="true"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}

/* Без JavaScript на телефоне — весь список услуг, а не одна вкладка. */
@media (max-width: 760px) {
  html:not(.js) #svcList { display: grid; }
  html:not(.js) .svc-tabs { display: none; }
}

/* Заголовки колонок подвала — h2 (были h4 сразу после h2 страницы), вид прежний. */
.ftr__col .ftr__h { font: 500 12.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-2); margin-bottom: 6px; }

/* ============================================================
   Контраст по WCAG AA (решение владельца 15.10.2026, п. 1 аудита).
   Синий с белым текстом — #1A6FCC (переменная --cobalt выше),
   серые подписи темнее (--ink-3), красный ошибок — свой для каждой темы,
   вторичный текст на синем — почти белый.
   ============================================================ */
.field__input[aria-invalid="true"] { border-color: #D93036; }
.field__err, .form__status, .field__count.is-near { color: #D93036; }
:root[data-theme="dark"] .field__input[aria-invalid="true"] { border-color: #F06A6E; }
:root[data-theme="dark"] .field__err, :root[data-theme="dark"] .form__status, :root[data-theme="dark"] .field__count.is-near { color: #F06A6E; }
.tile--feature p, .svc:hover .svc__desc, .svc:focus-visible .svc__desc { color: rgba(255, 255, 255, .94); }

/* «Другие услуги» внизу страницы услуги (п. 3 аудита): ссылки на остальные
   восемь — раньше на ИТ-аутсорсинг, поддержку, брендинг и мобильную разработку
   почти ничего не ссылалось. Плашки — как метка услуги в шапке кейса, крупнее. */
.svc-more { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-more__link { height: 52px; padding: 0 20px 0 16px; gap: 10px; font: 500 16px/1 var(--f-body); letter-spacing: 0; color: var(--ink); border-color: var(--line-2); transition: background-color .25s, color .25s, border-color .25s; }
.svc-more__link .glyph { width: 24px; height: 24px; color: var(--azure); transition: color .25s; }
.svc-more__link:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.svc-more__link:hover .glyph { color: #fff; }
@media (max-width: 760px) { .svc-more__link { height: 46px; font-size: 15px; white-space: normal; } }

/* Первый абзац кейса — крупный лид. Длинный (из панели приходит по 60–90 слов)
   крупным кеглем занимал 8–10 строк; такой набирается спокойнее (п. 4 аудита). */
.case-info__lead--long { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.4; letter-spacing: -.015em; }

/* Шапка при прокрутке вверх (п. 6 аудита). В макете шапка стоит только наверху
   страницы — на длинной главной до меню было не добраться. Ниже первого экрана
   шапка прячется; стоит потянуть страницу вверх — выезжает сверху на фоне темы.
   Классы ставит site.js; is-armed включает анимацию уже после закрепления,
   чтобы шапка не проезжала по экрану в момент переключения. */
.hdr.is-sticky { position: fixed; transform: translateY(-100%); background: color-mix(in oklab, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.hdr.is-sticky.is-armed { transition: transform .35s var(--ease); }
.hdr.is-sticky.is-shown { transform: none; }
.hdr.is-sticky .hdr__top { height: 72px; }
@media (min-width: 981px) { .hdr.is-sticky .hdr__top { height: 80px; } }
/* на тёмных шапках (главная, кейс, услуга) в тёмной теме фон — графит макета */
:root[data-theme="dark"] .hdr.is-sticky { background: rgba(21, 23, 28, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
/* открытое меню — шапка как и была над ним, без подложки */
.hdr.is-sticky.is-menu { transform: none; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Кнопка паузы ленты партнёров (WCAG 2.2.2: бегущее дольше 5 секунд должно
   останавливаться; раньше лента замирала только под мышью). Под «уменьшить
   движение» лента и так стоит — кнопка не нужна. */
.marquee-ctl { display: flex; justify-content: flex-end; margin-top: 16px; }
.marquee-toggle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s, color .25s; }
.marquee-toggle:hover { background: var(--paper-2); color: var(--ink); }
.marquee-toggle .ic { width: 18px; height: 18px; grid-area: 1 / 1; }
.marquee-toggle [data-play], .marquee-toggle[aria-pressed="true"] .marquee-toggle__pause { display: none; }
.marquee-toggle[aria-pressed="true"] [data-play] { display: block; }
#partners.is-paused .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-ctl { display: none; } }

/* Цифры в «О нас» компактнее (просьба владельца 15.10.2026): были до 140 px
   и занимали полблока рядом с текстом. */
.stat { padding: 18px 16px 22px 0; gap: 8px; }
.stat__n { font-size: clamp(34px, 7cqi, 88px); }
.stat__l { font-size: 15px; }
@media (max-width: 760px) { .stat__n { font-size: clamp(32px, 11cqi, 60px); } .stat { padding-block: 16px 18px; } }

/* «Поддержка после запуска» под цифрами «О нас» (просьба владельца 15.10.2026):
   Help Desk, мониторинг, бэкапы, хостинг — две колонки на синем блоке. */
.about__side { display: grid; gap: clamp(28px, 3vw, 44px); min-width: 0; }
.care__title { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.015em; color: #fff; margin-bottom: 18px; }
.care__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.care__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-items: start; align-content: start; }
.care__ic { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; }
.care__ic .glyph { width: 22px; height: 22px; }
.care__t { font-weight: 600; font-size: 16px; color: #fff; }
.care__d { font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
@media (max-width: 560px) { .care__list { grid-template-columns: minmax(0, 1fr); } }

/* Ссылки подвала при наведении — основной синий сайта, а не светло-синий
   (просьба владельца 15.10.2026). */
.ftr__col a:hover { color: var(--cobalt); }

/* Телефон в шапке над тёмным первым экраном: иконка и наведение — основной
   синий сайта, а не голубой из макета (как ссылки подвала, просьба владельца 15.10.2026). */
.hdr--dark .hdr__phone .ic { color: var(--cobalt); }
.hdr--dark .hdr__phone:hover { color: var(--cobalt); }

/* Голубой #5FD0FF, зашитый в правилах макета, → светло-синий сайта #5AA6F0
   (один набор синих, просьба владельца 15.10.2026). */
.rd-card__ic[data-ring="adopt"] { background: #5AA6F0; color: #0A1131; }
.rd-b.is-sel .rd-b__ic { box-shadow: 0 0 0 5px #15171C, 0 0 0 7px #5AA6F0; }
.rd.is-compact .rd-b:hover .rd-b__ic, .rd.is-compact .rd-b.is-sel .rd-b__ic { box-shadow: 0 0 0 4px #15171C, 0 0 0 6px #5AA6F0; }
.ring-tag--adopt { background: rgba(90, 166, 240, .16); color: #5AA6F0; }
.rd-lg button:hover { color: #5AA6F0; }
.shots-next:focus-visible, .totop:focus-visible { outline-color: #5AA6F0; }
.about::before { background: radial-gradient(60% 70% at 100% 0%, rgba(90, 166, 240, .28), transparent 70%); }
.dhero__art { background: radial-gradient(80% 80% at 70% 20%, rgba(90, 166, 240, .35), transparent 60%), linear-gradient(160deg, #0A1538, #0033A0); }

/* Логотип на тёмном: «neo» — фирменный синий логотипа #0072CE, как в светлой теме,
   а не светлый #2F95EC из макета, который выглядел бирюзовым (просьба владельца 15.10.2026). */
:root[data-theme="dark"], .hdr--dark .logo, .hdr.is-menu .logo, .ftr .logo { --logo-a: #0072CE; }

/* ============================================================
   Без «ИИ-шаблонов» (16.10.2026, п. 1–2 разбора дизайна).
   ============================================================ */

/* п. 1. Услуги на главной (образец владельца 16.10.2026): чипы второстепенных
   услуг сверху, «Ключевые направления» — плитки 2×2, отделённые от фона только
   тоном: название и стрелка сверху, описание прижато к низу. Без иконок, рамок
   и теней. На телефоне плитки в одну колонку, чипы переносятся. */
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(36px, 4vw, 56px); padding: 0; list-style: none; }
/* Чипы заметнее (просьба владельца 16.10.2026: «остались в тени»): текст в полный
   цвет и крупнее, синяя стрелка — видно, что это ссылки; при наведении — синяя заливка. */
.svc-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 18px 10px 20px; border: 0; border-radius: 14px;
  background: var(--paper-2); color: var(--ink); font: 500 17px/1.3 var(--f-body); text-align: left;
  transition: background-color .25s, color .25s;
}
.svc-chip .ic { flex: none; width: 16px; height: 16px; color: #155DAD; transition: color .25s, transform .3s var(--ease); }
:root[data-theme="dark"] .svc-chip .ic { color: #5AA6F0; }
.svc-chip:hover, .svc-chip:focus-visible, :root[data-theme="dark"] .svc-chip:hover, :root[data-theme="dark"] .svc-chip:focus-visible { background: var(--cobalt); color: #fff; }
.svc-chip:hover .ic, .svc-chip:focus-visible .ic, :root[data-theme="dark"] .svc-chip:hover .ic { color: #fff; transform: translateX(3px); }
.svc-chip--ask, :root[data-theme="dark"] .svc-chip--ask { background: var(--cobalt); color: #fff; }
.svc-chip--ask .ic, :root[data-theme="dark"] .svc-chip--ask .ic { color: #fff; }
.svc-chip--ask:hover, .svc-chip--ask:focus-visible, :root[data-theme="dark"] .svc-chip--ask:hover { background: #155DAD; }
@media (prefers-reduced-motion: reduce) { .svc-chip:hover .ic, .svc-chip:focus-visible .ic { transform: none; } }
.svc-key { margin: 0 0 16px; font-size: 18px; font-weight: 600; color: var(--ink); }

/* Услуги на главной — все в две колонки, анимация как у Red Collar (16.10.2026). */
#svcList.kds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); }
.kd {
  --kd-free: calc(clamp(150px, 13vw, 220px) + 24px); /* место под иконку: ни линия, ни название на неё не заходят */
  position: relative; isolation: isolate; display: grid; align-content: start;
  padding: clamp(32px, 3.4vw, 52px) 0 clamp(28px, 3vw, 44px);
  width: 100%; border: 0; background: none; text-align: left; color: var(--ink);
}
.kd__name { position: relative; display: block; perspective: 900px; -webkit-font-smoothing: antialiased; font-size: clamp(32px, 3.4vw, 56px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; padding-bottom: clamp(16px, 1.6vw, 24px); }
.kd__ln { display: block; transform-style: preserve-3d; margin-right: var(--kd-free); }
.kd__ln--b { position: absolute; left: 0; top: 0; right: 0; margin-right: var(--kd-free); color: #155DAD; }
:root[data-theme="dark"] .kd__ln--b { color: #5AA6F0; }
.kd__w { display: inline-block; white-space: nowrap; }
/* Точь-в-точь как у Red Collar (замерено 16.10.2026): ось поворота отнесена вглубь
   на 0.29 em — буква перекатывается «по барабану», а не сплющивается. */
.kd__l {
  display: inline-block; transform-style: preserve-3d; transform-origin: 50% 50% -.29em;
  transition: transform calc(.4s + var(--i) * .0333s) cubic-bezier(.25, .1, .25, 1), opacity calc(.4s + var(--i) * .0333s) cubic-bezier(.25, .1, .25, 1);
}
.kd__ln--b .kd__l { opacity: 0; transform: rotate3d(1, 0, 0, -75deg) translateY(-.1125em) scaleY(1.2); }
.kd:hover .kd__ln--a .kd__l, .kd:focus-visible .kd__ln--a .kd__l { opacity: 0; transform: rotate3d(1, 0, 0, 75deg) translateY(.1125em) scaleY(1.2); }
.kd:hover .kd__ln--b .kd__l, .kd:focus-visible .kd__ln--b .kd__l { opacity: 1; transform: none; transition-delay: .15s; }
/* Линия кончается до иконки — не перечёркивает её (просьба владельца 16.10.2026). */
.kd__rule { height: 1px; margin-right: var(--kd-free); background: var(--ink); opacity: .5; transition: opacity .3s, background-color .3s; }
.kd__desc { margin-top: 16px; max-width: 44ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.kd .svc__price { display: none; }
.kd__ic {
  position: absolute; z-index: -1; right: 0; top: 50%; width: clamp(150px, 13vw, 220px); aspect-ratio: 1;
  color: color-mix(in srgb, var(--ink) 7%, transparent);
  transform: translateY(-50%) perspective(700px) rotateY(0deg) rotate(0deg);
  transition: color .4s, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.kd__ic .glyph, .kd__ic .ic { width: 100%; height: 100%; stroke-width: 1.2; }
.kd:hover .kd__ic, .kd:focus-visible .kd__ic { color: rgba(26, 111, 204, .32); transform: translateY(-50%) perspective(700px) rotateY(360deg) rotate(-10deg) scale(1.08); }
:root[data-theme="dark"] .kd:hover .kd__ic, :root[data-theme="dark"] .kd:focus-visible .kd__ic { color: rgba(90, 166, 240, .3); }
.kd:hover .kd__rule, .kd:focus-visible .kd__rule { opacity: 1; background: #1A6FCC; }
.kd--ask .kd__ln--a { color: #155DAD; }
:root[data-theme="dark"] .kd--ask .kd__ln--a { color: #5AA6F0; }
.kd:focus-visible { outline-offset: 6px; border-radius: 6px; }
@media (max-width: 1023px) { #svcList.kds { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .kd { padding: 22px 0; }
  .kd__name { font-size: clamp(26px, 7.2vw, 40px); padding-bottom: 12px; }
  .kd__desc { margin-top: 12px; font-size: 16px; }
  .kd { --kd-free: 110px; }
  .kd__ic { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .kd__l, .kd__ic { transition-duration: 0s !important; transition-delay: 0s !important; }
  .kd:hover .kd__ic { transform: translateY(-50%); }
}
/* п. 2. Подписи без моноширинного, капса и разрядки: обычный регистр,
   не мельче 14 px. Шрифт сменился через --f-mono выше. */
.eyebrow, .live, .case__svc, .rd-card__cat, .rd-card__label, .ring-tag, .rd-rlabel, .rd-qlabel,
.contact__row dt, .field__label, .ftr__col h4, .ftr__col .ftr__h, .phead__crumbs, .dhero__back,
.tier__tag, .tier__badge, .prose__meta, .post__meta, .post__type, .mk-kpi small,
.chip, .case__badge, .lang__btn, .mnav__lang, .hero__geo, .pstep__n, .field__count, .lbox__cap, .svc__price {
  text-transform: none; letter-spacing: 0;
}
.case__svc, .rd-card__cat, .rd-card__label, .ring-tag, .contact__row dt, .field__label,
.ftr__col h4, .ftr__col .ftr__h, .phead__crumbs, .dhero__back, .tier__tag, .prose__meta,
.post__type, .chip, .case__badge, .field__count, .lbox__cap, .mnav__lang { font-size: 14px; }
.rd-rlabel { font-size: 14px; }
.ftr__col h4, .ftr__col .ftr__h { font-weight: 600; }

/* ============================================================
   Страница услуги без ИИ-шаблонов (16.10.2026).
   ============================================================ */
/* Первый экран: колонка текста шире и заголовок меньше — в две строки, а не в три;
   подложка иллюстрации — ровный синий логотипа вместо радиального градиента. */
@media (min-width: 1181px) { .dhero__grid:has(.dhero__art--svc) { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
.dhero__grid:has(.dhero__art--svc) .h1 { font-size: clamp(40px, 4.8vw, 76px); }
.dhero__art--svc { background: #0033A0; }

/* «С какими задачами приходят» — плитки 2×2 тоном подложки, без иконок. */
.pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pain { display: grid; grid-template-rows: auto 1fr; gap: 40px; min-height: 200px; padding: 26px 26px 28px; border-radius: 24px; background: var(--paper-2); }
.pain__t { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.pain__d { align-self: end; margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 44ch; }

/* «Что входит в услугу» — чипы без ссылок. */
.svc-feats { margin-bottom: 0; }
.svc-chip--static { cursor: default; }
.svc-chip--static:hover, :root[data-theme="dark"] .svc-chip--static:hover { background: var(--paper-2); color: var(--ink); }

/* «Почему neomax» — список крупным шрифтом в две колонки: название слева, текст справа. */
.whys { display: grid; gap: clamp(20px, 2.4vw, 32px); margin: 0; }
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(32px, 5vw, 96px); align-items: baseline; }
.why__t { font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.why__d { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

/* Один кейс по услуге — на всю ширину: обложка слева, текст справа (а не полкарточки и пустота). */
.cases--solo .case { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cases--solo .case__meta { grid-template-columns: minmax(0, 1fr); }
.cases--solo .case__svc { text-align: left; padding-top: 0; }

@media (max-width: 760px) {
  .pains { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pain { min-height: 0; gap: 16px; padding: 20px 20px 22px; border-radius: 20px; }
  .pain__d { font-size: 16px; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .why__d { font-size: 16px; }
  .cases--solo .case { display: flex; align-items: stretch; }
}

/* ============================================================
   Радар (16.10.2026): кольца словами клиента, значок — одна плоская
   плашка (иконка + название) без светящихся колец, основной стек
   выделен заливкой, редкое — приглушено. На телефоне значки меньше,
   и радар короче (площадь на значок — PHONE_SMALL_NAMED в radar.js).
   ============================================================ */
.rd-b { border-radius: 999px; background: #1E2128; transition: background-color .2s; }
.rd-b .rd-b__ic, .rd-b[data-ring] .rd-b__ic, .rd.is-compact .rd-b .rd-b__ic, .rd.is-compact .rd-b[data-ring] .rd-b__ic,
.rd-b:hover .rd-b__ic, .rd-b.is-sel .rd-b__ic, .rd.is-compact .rd-b:hover .rd-b__ic, .rd.is-compact .rd-b.is-sel .rd-b__ic {
  box-shadow: none; background: rgba(255, 255, 255, .07); color: #E9EEF9;
}
.rd-b__lbl, .rd-b:hover .rd-b__lbl, .rd-b.is-sel .rd-b__lbl, .rd.is-compact .rd-b__lbl, .rd.is-compact.is-all .rd-b__lbl { background: transparent; margin-left: 0; padding-left: 12px; color: #E9EEF9; }
.rd-b.is-flip .rd-b__lbl, .rd.is-compact .rd-b.is-flip .rd-b__lbl { margin-right: 0; padding-right: 12px; }
.rd-b[data-ring="adopt"] { background: #1A6FCC; }
.rd-b[data-ring="adopt"] .rd-b__ic, .rd.is-compact .rd-b[data-ring="adopt"] .rd-b__ic { background: rgba(255, 255, 255, .16); color: #fff; }
.rd-b[data-ring="adopt"] .rd-b__lbl { color: #fff; font-weight: 600; }
.rd-b[data-ring="trial"] { background: #1E2B3A; }
.rd-b[data-ring="assess"] .rd-b__lbl { color: #C3C8D3; }
.rd-b[data-ring="hold"] { background: #1B1E24; }
.rd-b[data-ring="hold"] .rd-b__lbl, .rd-b[data-ring="hold"] .rd-b__ic, .rd.is-compact .rd-b[data-ring="hold"] .rd-b__ic { color: #A4A9B6; }
.rd-b:hover { background: #2A2E37; }
.rd-b[data-ring="adopt"]:hover { background: #155DAD; }
.rd-rlabel { fill: rgba(233, 238, 249, .72); font-weight: 600; }
@media (max-width: 760px) {
  .rd.is-compact .rd-b, .rd.is-compact.is-all .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-17px, -50%); }
  .rd.is-compact .rd-b.is-flip, .rd.is-compact.is-all .rd-b.is-flip { transform: translate(var(--x, 0), var(--y, 0)) translate(calc(-100% + 17px), -50%); }
  .rd.is-compact .rd-b__ic, .rd.is-compact.is-all .rd-b__ic { width: 34px; height: 34px; }
  .rd.is-compact .rd-b__ic .ic, .rd.is-compact.is-all .rd-b__ic .ic { width: 17px; height: 17px; }
  .rd.is-compact .rd-b__lbl, .rd.is-compact.is-all .rd-b__lbl { height: 34px; font-size: 13.5px; padding: 0 12px 0 6px; }
  .rd.is-compact .rd-b.is-flip .rd-b__lbl { padding: 0 6px 0 12px; }
}

/* ============================================================
   Страница кейса и чипы на телефоне (16.10.2026, просьбы владельца).
   ============================================================ */
/* Стрелка вниз у «Скриншоты» / «Технологии» — только в телефонном наборе под фото. */
.btn__down { display: none; }
.dhero__actions--m { display: none; }
@media (max-width: 760px) {
  .dhero__text .dhero__actions { display: none; }
  .dhero__actions--m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dhero__actions--m .btn { width: 100%; min-height: 64px; height: auto; padding: 12px 14px 12px 16px; gap: 8px; justify-content: space-between; text-align: left; font-size: 16px; line-height: 1.25; white-space: normal; border-radius: 16px; }
  .dhero__actions--m .btn__down { display: inline-grid; flex: none; }
  .dhero__actions--m .btn__down .ic { width: 18px; height: 18px; transform: rotate(90deg); opacity: .75; }
  .dhero__actions--m .btn--consult { grid-column: 1 / -1; min-height: 56px; --btn-bg: var(--cobalt); --btn-fg: #fff; --btn-bd: var(--cobalt); background: var(--cobalt); color: #fff; }
  .dhero__actions--m .btn--consult .btn__go { background: transparent; color: #fff; }
  /* одна кнопка-якорь из двух — во всю ширину */
  .dhero__actions--m .btn--line:first-child:nth-last-child(2) { grid-column: 1 / -1; }

  /* App Store и Google Play — в ряд; «Открыть вебсайт» — во всю ширину под ними. */
  .case-info__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .case-info__btns .store { min-width: 0; padding: 0 12px; gap: 10px; }
  .case-info__btns .store b { font-size: 15px; }
  .case-info__btns .btn, .case-info__btns .store:only-child { grid-column: 1 / -1; }

  /* Скриншоты: без круглой стрелки и полосы прокрутки — листаются пальцем. */
  .shots-next { display: none; }
  .shots { scrollbar-width: none; padding-bottom: 0; }
  .shots::-webkit-scrollbar { display: none; }

  /* Технологии проекта — фильтр одной полосой (листается вбок), карточки в две колонки. */
  .tcats { display: flex; flex-wrap: nowrap; gap: 4px; padding: 5px; border-radius: 16px; background: var(--paper-2); overflow-x: auto; scrollbar-width: none; }
  .tcats::-webkit-scrollbar { display: none; }
  .tcats .tcat { flex: none; height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--ink-2); font-size: 15px; font-weight: 600; }
  .tcats .tcat[aria-pressed="true"], :root[data-theme="dark"] .tcats .tcat[aria-pressed="true"] { background: var(--cobalt); color: #fff; box-shadow: none; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tcard { height: 112px; padding: 16px; }
  .tcard__name { font-size: 16px; }
  .tcard__mark { width: 84px; right: -12px; bottom: -18px; }

  /* Чипы услуг тянутся на всю строку — справа не остаётся пустоты. */
  .svc-chips > li { flex: 1 1 auto; display: flex; }
  .svc-chips .svc-chip { flex: 1 1 auto; justify-content: space-between; }
}
/* Подпись экрана на скриншоте — полупрозрачная, внизу слева. */
.shot__cap.case__badge { top: auto; left: 14px; bottom: 14px; background: rgba(20, 22, 27, .42); -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
/* Телефон: от первого экрана (кейс, услуга) до следующей секции было ~144 px пустоты — теперь 72 (просьба владельца 16.10.2026). */
@media (max-width: 760px) {
  .dhero { padding-bottom: 32px; }
  .dhero + .sec { padding-top: 40px; }
}

/* ============================================================
   Шапка и меню как у Dalee (владелец, 16.10.2026): в шапке логотип,
   телефон с почтой и кнопка «Меню»; разделы, язык, тема и заявка —
   в большой скруглённой панели поверх страницы.
   ============================================================ */
.hdr__top { justify-content: space-between; }
.hdr__contacts { display: grid; gap: 2px; margin-left: auto; margin-right: clamp(20px, 3vw, 48px); font-size: 16px; font-weight: 500; line-height: 1.3; }
.hdr__contacts a { transition: color .2s; }
.hdr__contacts a:hover { color: #1A6FCC; }
.hdr--dark .hdr__contacts a:hover { color: #5AA6F0; }
.menu-btn {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 150px; height: 60px; padding: 0 20px 0 24px; border: 0; border-radius: 16px;
  background: #14161B; color: #fff; font: 600 17px/1 var(--f-body); cursor: pointer;
  transition: background-color .3s linear, color .3s linear;
}
.menu-btn__t { display: grid; }
.menu-btn__t > span { grid-area: 1 / 1; transition: opacity .2s; }
.menu-btn__close, .menu-btn > .ic { opacity: 0; }
.menu-btn > .ic { position: absolute; right: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px; transition: opacity .2s; }
.menu-btn__dots { transition: opacity .2s; }
/* открыто: та же кнопка на том же месте — белая «Закрыть ×», как у Dalee */
.menu-btn[aria-expanded="true"], :root[data-theme="dark"] .menu-btn[aria-expanded="true"] { background: #fff; color: #14161B; }
.menu-btn[aria-expanded="true"]:hover, :root[data-theme="dark"] .menu-btn[aria-expanded="true"]:hover { background: #E9EEF9; }
.menu-btn[aria-expanded="true"] .menu-btn__open, .menu-btn[aria-expanded="true"] .menu-btn__dots { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__close, .menu-btn[aria-expanded="true"] > .ic { opacity: 1; }
/* шапка над панелью: логотип и контакты прячутся, остаётся кнопка */
.hdr.is-menu { z-index: 95; }
.hdr.is-menu .logo, .hdr.is-menu .hdr__contacts { visibility: hidden; opacity: 0; }
:root[data-theme="dark"] .menu-btn { background: #2A2E37; }
/* наведение — тот же цвет чуть светлее (16.10.2026: синий при наведении залипал
   на телефоне после нажатия, и кнопка была то синей, то чёрной) */
@media (hover: hover) {
  .menu-btn:not([aria-expanded="true"]):hover { background: #2A2E37; }
  :root[data-theme="dark"] .menu-btn:not([aria-expanded="true"]):hover { background: #363B46; }
}
.menu-btn__dots { display: grid; grid-template-columns: repeat(2, 9px); gap: 6px; }
.menu-btn__dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; transition: transform .35s var(--ease); }
.menu-btn:hover .menu-btn__dots i:nth-child(1) { transform: translate(2px, 2px); }
.menu-btn:hover .menu-btn__dots i:nth-child(2) { transform: translate(-2px, 2px); }
.menu-btn:hover .menu-btn__dots i:nth-child(3) { transform: translate(2px, -2px); }
.menu-btn:hover .menu-btn__dots i:nth-child(4) { transform: translate(-2px, -2px); }

.mpanel {
  /* на 20% уже прежних 1320 px (просьба владельца 16.10.2026) */
  position: fixed; z-index: 90; top: 12px; right: 12px; bottom: 12px; left: auto; width: min(calc(100% - 24px), 1056px);
  display: flex; flex-direction: column; gap: 24px;
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3.4vw, 48px) clamp(24px, 3vw, 40px);
  border-radius: 32px; background: #1E2128; color: #E9EEF9;
  box-shadow: 0 0 0 100vmax rgba(8, 9, 12, .55);
  opacity: 0; visibility: hidden; overflow-y: auto; overscroll-behavior: contain;
  transition: opacity .3s linear, visibility 0s .3s;
}
/* Проявляется вместе с затемнением страницы, без выезда — как у Dalee (замерено 16.10.2026). */
.mpanel.is-open { opacity: 1; visibility: visible; transition: opacity .3s linear, visibility 0s; }
.mpanel__top { display: flex; align-items: flex-start; gap: clamp(24px, 4vw, 72px); padding-right: 170px; min-height: 60px; }
.mpanel__contacts { display: grid; gap: 2px; font-size: 18px; font-weight: 500; line-height: 1.35; }
.mpanel__contacts a:hover { color: #5AA6F0; }
.mpanel__addr { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.35; color: #E9EEF9; }
.mpanel__prefs { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mpanel__lang { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: #A4A9B6; transition: background-color .2s, color .2s; }
.mpanel__lang:hover { color: #fff; }
.mpanel__lang[aria-current="true"] { background: #2A2E37; color: #fff; }
.mpanel__theme { margin-left: 8px; }
:root:not([data-theme="dark"]) .mpanel .theme-toggle__track { border-color: rgba(255, 255, 255, .35); }
.mpanel__links { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; }
.mpanel__link {
  display: inline-flex; align-items: center; gap: .18em;
  font-size: clamp(44px, 6.2vw, 100px); font-weight: 600; letter-spacing: -.04em; line-height: 1.04;
  color: rgba(233, 238, 249, .38); transition: color .2s;
}
.mpanel__link:hover, .mpanel__link:focus-visible, .mpanel__link.is-active { color: #fff; }
/* Стрелка ↗ при наведении, как у Dalee (у них красная — у нас синий сайта). */
.mpanel__link .ic { width: .5em; height: .5em; stroke-width: 2.6; color: #5AA6F0; opacity: 0; transform: translate(-.15em, .15em); transition: opacity .2s, transform .3s var(--ease); }
.mpanel__link:hover .ic, .mpanel__link:focus-visible .ic { opacity: 1; transform: none; }
.prods-empty { display: grid; gap: 24px; justify-items: start; max-width: 60ch; }
.prods-empty p { margin: 0; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; color: var(--ink-2); }
.mpanel__cta { width: 100%; height: 64px; justify-content: center; padding: 0 24px; background: #1A6FCC; color: #fff; border-radius: 18px; font-size: 18px; font-weight: 600; }
.mpanel__cta:hover { background: #155DAD; }
@media (max-width: 760px) {
  .hdr__contacts { display: none; }
  .menu-btn { height: 48px; min-width: 124px; gap: 16px; padding: 0 14px 0 18px; font-size: 16px; border-radius: 14px; }
  .menu-btn > .ic { right: 14px; width: 22px; height: 22px; margin-top: -11px; }
  .mpanel__top { padding-right: 132px; }
  .menu-btn__dots { grid-template-columns: repeat(2, 7px); gap: 5px; }
  .menu-btn__dots i { width: 7px; height: 7px; }
  .mpanel { top: 8px; right: 8px; bottom: 8px; left: 8px; width: auto; border-radius: 24px; gap: 20px; }
  .mpanel__top { flex-wrap: wrap; gap: 14px 24px; }
  .mpanel__contacts, .mpanel__addr { font-size: 16px; }
  .mpanel__addr { display: none; }
  .mpanel__top { flex-direction: row; }
  .mpanel__contacts { order: -2; }
  .mpanel__prefs { width: 100%; margin-left: 0; }
  .mpanel__link { font-size: clamp(36px, 11vw, 56px); }
  .mpanel__cta { height: 56px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mpanel, .mpanel.is-open { transition-duration: 0s; }
  .mpanel__link .ic { transform: none; transition-duration: 0s; }
}

/* Кнопка «Меню» всегда на экране, как у Dalee (владелец, 16.10.2026): шапка
   закреплена; ниже начала страницы от неё остаётся только кнопка — без подложки,
   логотип и контакты прячутся, при прокрутке вниз кнопка не уезжает. */
.hdr { position: fixed; }
.hdr.is-sticky, :root[data-theme="dark"] .hdr.is-sticky { transform: none; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.hdr.is-sticky .menu-btn { pointer-events: auto; }
.hdr .logo, .hdr .hdr__contacts { transition: opacity .25s, visibility 0s; }
.hdr.is-sticky .logo, .hdr.is-sticky .hdr__contacts { visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s; }
/* Плавающая кнопка видна на любом фоне (тёмные блоки — радар, «О нас»). */
.hdr.is-sticky .menu-btn:not([aria-expanded="true"]) { box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* Меню: одна сетка отступов для кнопки и панели (аудит 16.10.2026).
   Кнопка стояла по сетке шапки (поле страницы, высота шапки от высоты окна),
   панель — от края окна, поэтому «Закрыть» налезала на верхний край панели,
   справа от неё было 60px, а сверху 7, и верхняя строка не совпадала с кнопкой.
   Теперь, как у Dalee, всё считается от трёх величин:
     --off — отступ кнопки от верха и правого края окна (одинаковый);
     --pm  — отступ панели от краёв окна;
     --pg  — поле панели = --off − --pm, поэтому кнопка сидит в углу панели
             с равным полем сверху и справа, и тем же полем отбиты ссылки,
             верхняя строка и кнопка заявки.
   Высота шапки = 2 × --off + высота кнопки: логотип по центру кнопки. */
:root { --off: 12px; --pm: 0px; --mb-h: 44px; --mb-w: 124px; --pg: calc(var(--off) - var(--pm)); }
@media (min-width: 981px) {
  :root { --off: clamp(24px, 2.4vw, 36px); --pm: clamp(8px, .7vw, 12px); --mb-h: 52px; --mb-w: 168px; --hdr-top: calc(var(--off) * 2 + var(--mb-h)); }
}
@media (max-width: 980px) { :root { --hdr-top: calc(var(--off) * 2 + var(--mb-h)); } }
.hdr .wrap { padding-right: var(--off); }
.hdr.is-sticky .hdr__top { height: var(--hdr-top); }
.menu-btn, .menu-btn[aria-expanded] { width: var(--mb-w); min-width: 0; height: var(--mb-h); padding: 0 calc(var(--mb-h) * .34) 0 calc(var(--mb-h) * .4); gap: 12px; border-radius: 14px; font-size: 16px; }
.menu-btn > .ic { right: calc(var(--mb-h) * .3); }
@media (min-width: 981px) { .menu-btn, .menu-btn[aria-expanded] { border-radius: 16px; font-size: 17px; } }
.mpanel {
  top: var(--pm); right: var(--pm); bottom: var(--pm); left: auto;
  width: min(calc(100% - var(--pm) * 2), 1056px);
  padding: var(--pg); gap: var(--pg);
  /* скругление панели = скругление кнопки + поле: углы концентричны */
  border-radius: calc(16px + var(--pg));
}
.mpanel__top { min-height: var(--mb-h); align-items: center; padding-right: calc(var(--mb-w) + clamp(24px, 3vw, 48px)); }
.mpanel__prefs { gap: 4px; }
.mpanel__lang { height: 40px; }
.mpanel__theme { margin-left: 12px; }
@media (max-width: 980px) {
  .mpanel { left: 0; width: auto; border-radius: 0; }
  .menu-btn__dots { grid-template-columns: repeat(2, 7px); gap: 5px; }
  .menu-btn__dots i { width: 7px; height: 7px; }
  .menu-btn > .ic { width: 22px; height: 22px; margin-top: -11px; }
}
@media (max-width: 760px) {
  .mpanel { gap: 20px; }
  :root { --mb-w: 136px; }
  .mpanel__top { padding-right: calc(var(--mb-w) + 16px); row-gap: 12px; }
  /* у переключателя языков поле внутри плашки — сдвигаем ряд, чтобы «RU»
     стояло по одной линии с телефоном и ссылками */
  .mpanel__prefs { width: calc(100% + 12px); margin-left: -12px; }
}

/* Полоса прокрутки, как на dalee.ru (там Locomotive Scroll, .c-scrollbar):
   системная скрыта, вместо неё site.js рисует .sbar — колея 11px у правого
   края, бегунок 7px со скруглением, появляется на время прокрутки и при
   наведении на край, гаснет за .3 с; при наведении колея шире в 1.45 раза.
   Бегунок белый в режиме difference — виден и на светлых, и на тёмных
   блоках. Без JS и на тач-экранах полоса остаётся системной. */
html.has-sbar { scrollbar-width: none; }
html.has-sbar::-webkit-scrollbar { display: none; }
.sbar { position: fixed; z-index: 120; top: 0; right: 0; bottom: 0; width: 11px; opacity: 0; transform-origin: center right; transition: opacity .3s, transform .3s; mix-blend-mode: difference; }
.sbar.is-on, .sbar:hover, .sbar.is-drag { opacity: 1; }
.sbar:hover, .sbar.is-drag { transform: scaleX(1.45); }
.sbar__thumb { position: absolute; top: 0; right: 0; width: 7px; margin: 2px; border-radius: 10px; background: #fff; opacity: .5; cursor: grab; }
.sbar.is-drag .sbar__thumb { cursor: grabbing; }
html.is-lbox .sbar, html:has(dialog[open]) .sbar, body:has(.hdr.is-menu) .sbar { display: none; }

/* Открытое меню: шапка лежит над панелью ради кнопки «Закрыть», но её
   прозрачная полоса во всю ширину перехватывала клики по верхней строке
   панели (языки, тема, контакты). Клики пропускаем насквозь, кроме кнопки. */
.hdr.is-menu { pointer-events: none; }
.hdr.is-menu .menu-btn { pointer-events: auto; }

/* Страница «Услуги» (по мотивам dalee.ru/services, 16.10.2026): огромное слово
   во всю ширину и направления в две колонки — каждое статьёй под тонкой
   линией, без карточек и иконок. Стрелка ↗ и ссылка «Подробнее» ведут на
   страницу услуги; десятая клетка — «Не нашли нужное?». */
.svxh { padding-top: calc(var(--hdr-h) + clamp(24px, 3vw, 48px)); padding-bottom: clamp(48px, 7vw, 120px); }
.svxh__t { margin: clamp(24px, 4vw, 64px) 0 0; font-size: clamp(64px, 15.5vw, 280px); font-weight: 600; line-height: .86; letter-spacing: -.055em; color: var(--ink); }
.svxh__lead { max-width: 34ch; margin: clamp(24px, 3vw, 40px) 0 0 auto; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.45; color: var(--ink-2); }
.svxs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.svx { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 2.4vw, 36px) 0 clamp(48px, 5vw, 80px); border-top: 1px solid var(--line-2); }
.svx__t { width: 100%; margin: 0; font-size: clamp(28px, 2.7vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.svx__t a { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; transition: color .2s; }
.svx__t .ic { flex: none; width: .8em; height: .8em; margin-top: .12em; stroke-width: 2.2; color: #1A6FCC; transition: transform .35s var(--ease); }
.svx__t a:hover { color: #1A6FCC; }
.svx__t a:hover .ic { transform: translate(.1em, -.1em); }
.svx__d { max-width: 52ch; margin: 18px 0 0; font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.svx__long { max-width: 62ch; margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.svx__feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; width: 100%; max-width: 640px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; color: var(--ink); }
.svx__feats li { position: relative; padding-left: 18px; }
.svx__feats li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: #1A6FCC; }
.svx__more { margin-top: auto; padding-top: 28px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
.svx__more:hover { color: #1A6FCC; text-decoration-color: currentColor; }
.svx--ask .svx__d { color: var(--ink-2); font-weight: 400; }
.svx__btn { margin-top: auto; }
.svx--ask .svx__d + .svx__btn { margin-top: 28px; }
:root[data-theme="dark"] .svx__t .ic, :root[data-theme="dark"] .svx__feats li::before { color: #5AA6F0; background: #5AA6F0; }
:root[data-theme="dark"] .svx__t .ic { background: none; }
:root[data-theme="dark"] .svx__t a:hover, :root[data-theme="dark"] .svx__more:hover { color: #5AA6F0; }
:root[data-theme="dark"] .svx { border-top-color: rgba(233, 238, 249, .16); }
@media (max-width: 860px) {
  .svxs { grid-template-columns: minmax(0, 1fr); }
  .svxh__lead { margin-left: 0; }
}
@media (max-width: 480px) {
  .svx__feats { grid-template-columns: minmax(0, 1fr); }
  .svx__d { font-size: 18px; }
}

/* Первый экран главной как у Dalee (владелец, 16.10.2026, вариант «neomax как
   у Dalee»): огромное «neomax» с Баку в буквах стоит первым, во всю ширину, и
   само служит логотипом — маленький логотип шапки у верха главной спрятан.
   Под словом по левому краю заголовок, справа описание и две кнопки той же
   формы, что «Меню». Без свечения: ровный фон. Высота — по содержимому, а не
   100svh: ниже уже видно начало услуг. */
.hdr--home:not(.is-sticky):not(.is-menu) .logo { visibility: hidden; opacity: 0; }
.hero--d { height: auto; min-height: 0; padding-top: var(--hdr-h); padding-bottom: clamp(48px, 6vw, 112px); }
.hero--d .hero__bg { display: none; }
/* слово по сетке страницы — левый край совпадает с заголовком под ним */
.hero--d .hero__brand { order: 0; padding: clamp(4px, 1vw, 16px) var(--gut) 0; }
/* буквы — фотография Баку, а не тень на фоне */
.hero--d .hero__brand .hb-base { fill: #FFFFFF; fill-opacity: .06; }
.hero--d .hero__brand .hb-photo { opacity: .78; mix-blend-mode: normal; }
:root:not([data-theme="dark"]) .hero--d .hero__brand .hb-base { fill: #14161B; fill-opacity: 1; }
:root:not([data-theme="dark"]) .hero--d .hero__brand .hb-photo { opacity: .62; mix-blend-mode: screen; }
.hd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: end; gap: 32px clamp(32px, 5vw, 96px); margin-top: clamp(40px, 6vw, 104px); }
.hd__t { margin: 0; font-size: clamp(44px, 6.6vw, 132px); font-weight: 700; line-height: .95; letter-spacing: -.05em; color: #fff; }
.hd__t span { display: block; }
.hd__side { display: grid; gap: clamp(24px, 2.4vw, 36px); padding-bottom: .4em; }
.hd__lead { margin: 0; max-width: 36ch; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.45; color: rgba(233, 238, 249, .78); }
.hd__lead b { color: #fff; font-weight: 600; white-space: nowrap; }
.hd__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hd__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--mb-h); padding: 0 22px 0 24px; border: 0; border-radius: 16px; font: 600 17px/1 var(--f-body); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.hd__btn .ic { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.hd__btn:hover .ic { transform: translateX(3px); }
.hd__btn--main { background: #1A6FCC; color: #fff; }
.hd__btn--main:hover { background: #155DAD; }
.hd__btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(233, 238, 249, .32); }
.hd__btn--line:hover { background: #fff; color: #14161B; box-shadow: inset 0 0 0 1px #fff; }
:root:not([data-theme="dark"]) .hd__t { color: var(--ink); }
:root:not([data-theme="dark"]) .hd__lead { color: var(--ink-2); }
:root:not([data-theme="dark"]) .hd__lead b { color: var(--ink); }
:root:not([data-theme="dark"]) .hd__btn--line { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(10, 17, 49, .25); }
:root:not([data-theme="dark"]) .hd__btn--line:hover { background: #14161B; color: #fff; box-shadow: inset 0 0 0 1px #14161B; }
@media (max-width: 980px) {
  .hd { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hd__side { padding-bottom: 0; }
}
@media (max-width: 760px) {
  .hero--d .hero__brand { padding: 8px var(--gut) 0; }
  .hero--d .hero__brand .hero__stack { width: 100%; max-width: 560px; min-width: 0; }
  .hd { margin-top: 32px; gap: 20px; }
  .hd__t { font-size: clamp(38px, 11.5vw, 56px); }
  .hd__lead { font-size: 17px; }
  .hd__cta { flex-wrap: nowrap; gap: 10px; }
  .hd__btn { flex: 1 1 auto; height: 52px; padding: 0 16px; gap: 10px; font-size: 16px; justify-content: center; white-space: nowrap; }
}
@media (max-width: 374px) {
  .hd__cta { flex-wrap: wrap; }
  .hd__btn .ic { display: none; }
}

/* Слово «neomax» не во всю ширину, а до начала кнопки «Начать проект»
   (владелец, 16.10.2026): правый край слова = левый край правой колонки
   (описание и кнопки), колонка — 520px от правого поля страницы. */
@media (min-width: 981px) {
  /* правая колонка уже на средних экранах, иначе слово на 1024px мельчает */
  .hero--d { --hd-side: clamp(340px, 34vw, 520px); }
  .hd { grid-template-columns: minmax(0, 1fr) var(--hd-side); }
  .hero--d .hero__brand { padding-right: calc(var(--gut) + var(--hd-side)); }
  .hd { margin-top: clamp(32px, 4vw, 72px); }
}

/* Список услуг на главной, узкие телефоны: «администрирование» одним словом
   не влезало между полем и иконкой справа, страница уезжала вбок (RU, 360–390px). */
@media (max-width: 480px) { .kd__name { font-size: clamp(18px, 6.2vw, 28px); } }
@media (max-width: 340px) { .kd__name { font-size: 18px; } }

/* Первый экран целиком — hero (владелец, 16.10.2026): высота экрана, слово
   «neomax» наверху, заголовок с описанием и кнопками прижаты к низу экрана. */
.hero--d { height: auto; min-height: 100vh; min-height: 100svh; }
.hero--d .hd { margin-top: auto; padding-top: clamp(32px, 4vw, 72px); }

/* Иконка услуги выше своей строки и заходит на соседние: наведение на её край
   засчитывалось соседней строке, и анимировались чужие иконки. Иконка мышь не
   ловит — строка реагирует только на собственную площадь. */
.kd__ic { pointer-events: none; }
/* Пересечения линий в иконке были темнее (видно на «окне» и «гарнитуре»):
   полупрозрачным был цвет линий, и там, где линии ложатся друг на друга,
   прозрачность складывалась. Теперь линии непрозрачные, а бледной делается
   иконка целиком — стыков не видно. */
.kd__ic { color: var(--ink); opacity: .07; transition: color .4s, opacity .4s, transform .9s cubic-bezier(.2, .7, .2, 1); }
.kd:hover .kd__ic, .kd:focus-visible .kd__ic { color: #1A6FCC; opacity: .32; }
:root[data-theme="dark"] .kd:hover .kd__ic, :root[data-theme="dark"] .kd:focus-visible .kd__ic { color: #5AA6F0; opacity: .3; }

/* слово «neomax» на главной опускается к заголовку при прокрутке (site.js) */
.hero--d .hero__brand { position: relative; z-index: 1; will-change: transform; }

/* Телефон (владелец, 16.10.2026): слово «neo/max» не под кнопкой «Меню», а
   внизу экрана, прямо над заголовком — одной группой с текстом и кнопками. */
@media (max-width: 760px) {
  .hero--d .hero__brand { margin-top: auto; padding-top: 24px; }
  .hero--d .hd { margin-top: 0; padding-top: 24px; }
}

/* Меню на телефоне как у Dalee (владелец, 16.10.2026): не на весь экран, а
   шторка сверху по высоте содержимого — скругление снизу, под ней видна
   затемнённая страница (тень-подложка .mpanel). Адрес снова показан. */
@media (max-width: 760px) {
  .mpanel { bottom: auto; max-height: 100%; max-height: 100dvh; border-radius: 0 0 28px 28px; gap: 28px; padding: var(--pg) 16px 16px; }
  .mpanel__top { padding-right: calc(var(--mb-w) + 12px); }
  .mpanel__addr { display: block; flex-basis: 100%; }
  .mpanel__links { margin-top: 8px; }
  .mpanel__prefs { width: calc(100% + 12px); margin-left: -12px; }
}

/* Шторка меню на телефоне — порядок (16.10.2026): наверху только контакты
   (телефон и почта, тише под ними адрес), затем разделы; языки и тема —
   настройки, а не контакты: одной строкой внизу над кнопкой заявки, языки
   простым текстом без плашки, тема справа. Отступы — из одной шкалы 8/16/24. */
@media (max-width: 760px) {
  .mpanel { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; }
  .mpanel__top { display: contents; }
  .mpanel__contacts { order: 1; gap: 4px; padding-right: calc(var(--mb-w) + 12px); min-height: var(--mb-h); align-content: center; font-size: 17px; }
  .mpanel__addr { order: 2; display: block; margin-top: 8px; font-size: 15px; color: #A4A9B6; }
  .mpanel__links { order: 3; margin-top: 24px; }
  .mpanel__prefs { order: 4; width: auto; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid rgba(233, 238, 249, .1); gap: 0; }
  .mpanel__lang { height: 40px; padding: 0 14px 0 0; border-radius: 0; background: none; font-size: 16px; color: #8A90A0; }
  .mpanel__lang[aria-current="true"] { background: none; color: #fff; }
  .mpanel__theme { margin-left: auto; }
  .mpanel__cta { order: 5; margin-top: 16px; }
}
/* телефон: «neo/max» по центру экрана (владелец, 16.10.2026) */
@media (max-width: 760px) { .hero--d .hero__brand { justify-content: center; } }
/* светлая тема, телефон: небо над Баку в «neo» почти белое и сливалось с фоном —
   «e» терялась; фото в буквах темнее */
@media (max-width: 760px) { :root:not([data-theme="dark"]) .hero--d .hero__stack .hb-photo { opacity: .42; } }

/* Открытое меню (владелец, 16.10.2026): страница под ним слегка размыта и не
   листается — ни колесом, ни пальцем (overflow на html, а не только на body:
   иначе мобильный браузер всё равно прокручивает). */
html.is-menu-open { overflow: hidden; overscroll-behavior: none; }
html.is-menu-open body { overflow: hidden; touch-action: none; }
html.is-menu-open .mpanel { touch-action: pan-y; }
body::after {
  content: ''; position: fixed; inset: 0; z-index: 89; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .3s linear, visibility 0s .3s;
}
html.is-menu-open body::after { opacity: 1; visibility: visible; transition: opacity .3s linear, visibility 0s; }
@media (prefers-reduced-motion: reduce) { body::after { transition-duration: 0s; } }

/* Слово «neomax» в первом экране. Тёмная тема: под фото в буквах светлая
   подложка — тёмные места снимка (берег, здания) больше не сливаются с фоном,
   и перемычка «e» видна так же ясно, как буква «a». Телефон: слово по центру
   свободного места между кнопкой «Меню» и заголовком. */
:root[data-theme="dark"] .hero--d .hero__brand .hb-base { fill: #fff; fill-opacity: .34; }
:root[data-theme="dark"] .hero--d .hero__brand .hb-photo { opacity: .6; }
@media (max-width: 760px) {
  .hero--d .hero__brand { margin-block: auto; padding-top: 0; }
  .hero--d .hd { padding-top: 0; }
}


/* ============================================================
   Светлая тема: радар, меню и подвал больше не остаются тёмными
   (владелец, 16.10.2026). Ночные цвета этих блоков частью заданы
   переменными (--night, --on-night…) — их переопределяем на блоке,
   остальное (значки радара, панель меню) — явными правилами.
   ============================================================ */
/* радар */
:root:not([data-theme="dark"]) .radar { background: #FFFFFF; color: var(--ink); --on-night: var(--ink); --on-night-2: var(--ink-2); --night-line: var(--line); --ion: #1A6FCC; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) .rd-ring { stroke: rgba(10, 17, 49, .13); }
:root:not([data-theme="dark"]) .rd-axis { stroke: rgba(10, 17, 49, .16); }
:root:not([data-theme="dark"]) .rd-rlabel, :root:not([data-theme="dark"]) .rd-qlabel { fill: rgba(10, 17, 49, .62); }
:root:not([data-theme="dark"]) .rd-tab { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
:root:not([data-theme="dark"]) .rd-tab:hover { background: var(--paper-2); color: var(--ink); }
:root:not([data-theme="dark"]) .rd-tab[aria-selected="true"] { background: #1A6FCC; color: #fff; box-shadow: none; }
:root:not([data-theme="dark"]) .rd-b { background: #F1F3F8; }
:root:not([data-theme="dark"]) .rd-b .rd-b__ic, :root:not([data-theme="dark"]) .rd-b[data-ring] .rd-b__ic, :root:not([data-theme="dark"]) .rd.is-compact .rd-b .rd-b__ic, :root:not([data-theme="dark"]) .rd.is-compact .rd-b[data-ring] .rd-b__ic, :root:not([data-theme="dark"]) .rd-b:hover .rd-b__ic, :root:not([data-theme="dark"]) .rd-b.is-sel .rd-b__ic, :root:not([data-theme="dark"]) .rd.is-compact .rd-b:hover .rd-b__ic, :root:not([data-theme="dark"]) .rd.is-compact .rd-b.is-sel .rd-b__ic { background: rgba(10, 17, 49, .06); color: var(--ink); box-shadow: none; }
:root:not([data-theme="dark"]) .rd-b__lbl, :root:not([data-theme="dark"]) .rd-b:hover .rd-b__lbl, :root:not([data-theme="dark"]) .rd-b.is-sel .rd-b__lbl, :root:not([data-theme="dark"]) .rd.is-compact .rd-b__lbl, :root:not([data-theme="dark"]) .rd.is-compact.is-all .rd-b__lbl { color: var(--ink); background: transparent; }
:root:not([data-theme="dark"]) .rd-b:hover { background: #E3E8F1; }
:root:not([data-theme="dark"]) .rd-b[data-ring="adopt"] { background: #1A6FCC; }
:root:not([data-theme="dark"]) .rd-b[data-ring="adopt"]:hover { background: #155DAD; }
:root:not([data-theme="dark"]) .rd-b[data-ring="adopt"] .rd-b__ic, :root:not([data-theme="dark"]) .rd.is-compact .rd-b[data-ring="adopt"] .rd-b__ic { background: rgba(255, 255, 255, .18); color: #fff; }
:root:not([data-theme="dark"]) .rd-b[data-ring="adopt"] .rd-b__lbl { color: #fff; }
:root:not([data-theme="dark"]) .rd-b[data-ring="trial"] { background: #E4EEFA; }
:root:not([data-theme="dark"]) .rd-b[data-ring="trial"]:hover { background: #D6E5F7; }
:root:not([data-theme="dark"]) .rd-b[data-ring="assess"] .rd-b__lbl { color: var(--ink-2); }
:root:not([data-theme="dark"]) .rd-b[data-ring="hold"] { background: #F6F7FA; }
:root:not([data-theme="dark"]) .rd-b[data-ring="hold"] .rd-b__lbl, :root:not([data-theme="dark"]) .rd-b[data-ring="hold"] .rd-b__ic, :root:not([data-theme="dark"]) .rd.is-compact .rd-b[data-ring="hold"] .rd-b__ic { color: var(--ink-3); }
:root:not([data-theme="dark"]) .rd-b.is-sel { box-shadow: 0 0 0 2px #1A6FCC; }
:root:not([data-theme="dark"]) .rd__card { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -20px rgba(10, 17, 49, .28); }
:root:not([data-theme="dark"]) .rd-card__ic[data-ring] { background: rgba(10, 17, 49, .06); color: var(--ink); }
:root:not([data-theme="dark"]) .rd-card__ic[data-ring="adopt"] { background: #1A6FCC; color: #fff; }
:root:not([data-theme="dark"]) .rd-card__projects a { background: var(--paper); color: var(--ink); }
:root:not([data-theme="dark"]) .rd-card__projects a:hover { background: var(--paper-2); }
:root:not([data-theme="dark"]) .rd-card__close:hover { background: var(--paper-2); color: var(--ink); }
:root:not([data-theme="dark"]) .ring-tag--adopt { background: rgba(26, 111, 204, .12); color: #155DAD; }
:root:not([data-theme="dark"]) .ring-tag--trial { background: rgba(26, 111, 204, .07); color: #1A6FCC; }
:root:not([data-theme="dark"]) .ring-tag--assess { box-shadow: inset 0 0 0 1px rgba(26, 111, 204, .4); color: #1A6FCC; }
:root:not([data-theme="dark"]) .ring-tag--hold { box-shadow: inset 0 0 0 1px rgba(10, 17, 49, .22); color: var(--ink-3); }
:root:not([data-theme="dark"]) .rd-lg button:hover { color: #1A6FCC; }
/* подвал */
:root:not([data-theme="dark"]) .ftr { --night: #FFFFFF; --night-3: #E4E8F0; --on-night: var(--ink); --on-night-2: var(--ink-2); --night-line: var(--line); --ion: #1A6FCC; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) .ftr__cta .h2 { color: var(--ink); }
:root:not([data-theme="dark"]) .ftr .logo { --logo-a: #0072CE; --logo-b: #0033A0; }
/* меню */
:root:not([data-theme="dark"]) .mpanel { background: #FFFFFF; color: var(--ink); box-shadow: 0 0 0 100vmax rgba(10, 17, 49, .3), inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) .mpanel__addr { color: var(--ink-2); }
:root:not([data-theme="dark"]) .mpanel__contacts a:hover { color: #1A6FCC; }
:root:not([data-theme="dark"]) .mpanel__lang { color: var(--ink-3); }
:root:not([data-theme="dark"]) .mpanel__lang:hover { color: var(--ink); }
:root:not([data-theme="dark"]) .mpanel__lang[aria-current="true"] { background: var(--paper-2); color: var(--ink); }
:root:not([data-theme="dark"]) .mpanel__link { color: rgba(10, 17, 49, .3); }
:root:not([data-theme="dark"]) .mpanel__link:hover, :root:not([data-theme="dark"]) .mpanel__link:focus-visible, :root:not([data-theme="dark"]) .mpanel__link.is-active { color: var(--ink); }
:root:not([data-theme="dark"]) .mpanel__link .ic { color: #1A6FCC; }
:root:not([data-theme="dark"]) .mpanel .theme-toggle__track { border-color: rgba(10, 17, 49, .25); }
/* «Закрыть» на белой панели — тёмная (на тёмной панели она белая) */
:root:not([data-theme="dark"]) .menu-btn[aria-expanded="true"] { background: #14161B; color: #fff; }
:root:not([data-theme="dark"]) .menu-btn[aria-expanded="true"]:hover { background: #2A2E37; }
@media (max-width: 760px) {
  :root:not([data-theme="dark"]) .mpanel__lang[aria-current="true"] { background: none; }
  :root:not([data-theme="dark"]) .mpanel__prefs { border-top-color: rgba(10, 17, 49, .1); }
}

/* Услуги на главной, телефон — плашками, как у Dalee (владелец, 16.10.2026):
   серая подложка, в ней по плашке на услугу (название + ↗), плашки встают
   по нескольку в ряд, сколько влезет. Без описаний, линий и фоновых иконок;
   «Не нашли нужное?» — синей плашкой с плюсом. На компьютере — прежний список. */
.kd__go { display: none; }
@media (max-width: 760px) {
  #svcList.kds { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 24px; background: #1E2128; }
  #svcList .kd { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 14px 14px 14px 18px; border-radius: 16px; background: #2A2E37; box-shadow: inset 0 0 0 1px rgba(233, 238, 249, .08); color: #E9EEF9; transition: background-color .2s; }
  #svcList .kd:hover { background: #343944; }
  #svcList .kd__rule, #svcList .kd__desc, #svcList .kd__ic, #svcList .kd__ln--b { display: none; }
  #svcList .kd__name { padding: 0; perspective: none; font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
  #svcList .kd__ln { margin: 0; }
  #svcList .kd__l { transition: none; }
  #svcList .kd:hover .kd__ln--a .kd__l { opacity: 1; transform: none; }
  #svcList .kd__go { display: grid; flex: none; color: #5AA6F0; }
  #svcList .kd__go .ic { width: 18px; height: 18px; stroke-width: 2.4; }
  #svcList .kd--ask { background: #1A6FCC; box-shadow: none; color: #fff; }
  #svcList .kd--ask .kd__ln--a { color: #fff; }
  #svcList .kd--ask .kd__go { color: #fff; }
  :root:not([data-theme="dark"]) #svcList.kds { background: #E7EBF3; }
  :root:not([data-theme="dark"]) #svcList .kd:not(.kd--ask) { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  :root:not([data-theme="dark"]) #svcList .kd__go { color: #1A6FCC; }
  :root:not([data-theme="dark"]) #svcList .kd--ask .kd__go { color: #fff; }
}
/* шторка меню на телефоне: больше воздуха между адресом и разделами (владелец, 16.10.2026) */
@media (max-width: 760px) { .mpanel__links { margin-top: 72px; } }
/* светлая тема: на синих значках радара текст белый — общее правило подписей
   (тёмный текст) было специфичнее и перекрывало его на телефоне (is-compact) */
:root:not([data-theme="dark"]) .rd .rd-b[data-ring="adopt"] .rd-b__lbl,
:root:not([data-theme="dark"]) .rd.is-compact .rd-b[data-ring="adopt"] .rd-b__lbl,
:root:not([data-theme="dark"]) .rd.is-compact.is-all .rd-b[data-ring="adopt"] .rd-b__lbl { color: #fff; }

/* Радар на телефоне меньше (владелец, 16.10.2026): значки компактнее — иконка
   28px, подпись 12.5px, — но читаются; площадь на значок в radar.js тоже меньше. */
@media (max-width: 760px) {
  .rd.is-compact .rd-b, .rd.is-compact.is-all .rd-b { transform: translate(var(--x, 0), var(--y, 0)) translate(-14px, -50%); }
  .rd.is-compact .rd-b.is-flip, .rd.is-compact.is-all .rd-b.is-flip { transform: translate(var(--x, 0), var(--y, 0)) translate(calc(-100% + 14px), -50%); }
  .rd.is-compact .rd-b__ic, .rd.is-compact.is-all .rd-b__ic { width: 28px; height: 28px; }
  .rd.is-compact .rd-b__ic .ic, .rd.is-compact.is-all .rd-b__ic .ic { width: 15px; height: 15px; }
  .rd.is-compact .rd-b__ic .ic-mono { font-size: 10px; }
  .rd.is-compact .rd-b__lbl, .rd.is-compact.is-all .rd-b__lbl { height: 28px; font-size: 12.5px; font-weight: 600; padding: 0 10px 0 5px; }
  .rd.is-compact .rd-b.is-flip .rd-b__lbl { padding: 0 5px 0 10px; }
}
/* запас высоты радара до отрисовки (чтобы страница не прыгала) — под новые значки, замерено 16.10.2026 */
@media (max-width: 760px) { .rd__stage { height: 600px; } }
@media (max-width: 599px) { .rd__stage { height: 650px; } }
@media (max-width: 429px) { .rd__stage { height: 770px; } }
@media (max-width: 374px) { .rd__stage { height: 870px; } }
@media (max-width: 339px) { .rd__stage { height: 915px; } }

/* Фильтр (проекты, блог) — крупным текстом, как разделы в меню (владелец,
   16.10.2026, вариант 1): без дорожки и «приподнятой» плашки; неактивные
   пункты приглушены, активный — полным цветом. На телефоне строка листается вбок. */
.seg { display: flex; flex-wrap: wrap; gap: 6px clamp(20px, 2.2vw, 36px); padding: 0; border-radius: 0; background: none; }
.seg .seg__btn, :root[data-theme="dark"] .seg .seg__btn, .seg .seg__btn[aria-pressed="true"], :root[data-theme="dark"] .seg .seg__btn[aria-pressed="true"] {
  height: auto; padding: 6px 0; border-radius: 0; background: none; box-shadow: none;
  font-size: clamp(20px, 1.7vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  color: color-mix(in srgb, var(--ink) 40%, transparent); transition: color .2s;
}
.seg .seg__btn:hover, :root[data-theme="dark"] .seg .seg__btn:hover { color: var(--ink); }
.seg .seg__btn[aria-pressed="true"], :root[data-theme="dark"] .seg .seg__btn[aria-pressed="true"] { color: var(--ink); }
.seg .seg__btn:focus-visible { outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) {
  .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + var(--gut) * 2); max-width: none; min-width: 0; align-self: stretch; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .seg::-webkit-scrollbar { display: none; }
  .seg .seg__btn, :root[data-theme="dark"] .seg .seg__btn, .seg .seg__btn[aria-pressed="true"], :root[data-theme="dark"] .seg .seg__btn[aria-pressed="true"] { flex: none; font-size: 20px; white-space: nowrap; }
}

/* Радар: значки статичны — при наведении цвет не меняется (владелец, 16.10.2026).
   Нажатие по-прежнему открывает карточку технологии. */
.rd-b, .rd-b:hover { background: #1E2128; }
.rd-b[data-ring="adopt"], .rd-b[data-ring="adopt"]:hover { background: #1A6FCC; }
.rd-b[data-ring="trial"], .rd-b[data-ring="trial"]:hover { background: #1E2B3A; }
.rd-b[data-ring="hold"], .rd-b[data-ring="hold"]:hover { background: #1B1E24; }
:root:not([data-theme="dark"]) .rd-b, :root:not([data-theme="dark"]) .rd-b:hover { background: #F1F3F8; }
:root:not([data-theme="dark"]) .rd-b[data-ring="adopt"], :root:not([data-theme="dark"]) .rd-b[data-ring="adopt"]:hover { background: #1A6FCC; }
:root:not([data-theme="dark"]) .rd-b[data-ring="trial"], :root:not([data-theme="dark"]) .rd-b[data-ring="trial"]:hover { background: #E4EEFA; }
:root:not([data-theme="dark"]) .rd-b[data-ring="hold"], :root:not([data-theme="dark"]) .rd-b[data-ring="hold"]:hover { background: #F6F7FA; }
.rd-b { transition: none; }

/* Кейс: между первым экраном и текстом кейса было ~270px пустоты (владелец,
   16.10.2026) — шапка и первый блок подтянуты. */
@media (min-width: 761px) {
  .dhero { padding-bottom: clamp(32px, 3vw, 48px); }
  .dhero + .sec { padding-top: clamp(32px, 3.4vw, 64px); }
}

/* Фильтр технологий на странице кейса — тем же крупным текстом, что фильтр
   проектов (вариант 1), вместо обведённых «таблеток» и серой дорожки. */
.tcats, :root[data-theme="dark"] .tcats { display: flex; flex-wrap: wrap; gap: 6px clamp(20px, 2.2vw, 36px); margin: -8px 0 28px; padding: 0; border-radius: 0; background: none; }
.tcats .tcat, .tcats .tcat[aria-pressed="true"], :root[data-theme="dark"] .tcats .tcat, :root[data-theme="dark"] .tcats .tcat[aria-pressed="true"] {
  height: auto; padding: 6px 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline-offset: 4px;
  font-size: clamp(20px, 1.7vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  color: color-mix(in srgb, var(--ink) 40%, transparent); transition: color .2s;
}
.tcats .tcat:hover, :root[data-theme="dark"] .tcats .tcat:hover, .tcats .tcat[aria-pressed="true"], :root[data-theme="dark"] .tcats .tcat[aria-pressed="true"] { color: var(--ink); }
@media (max-width: 760px) {
  .tcats, :root[data-theme="dark"] .tcats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + var(--gut) * 2); margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .tcats .tcat, .tcats .tcat[aria-pressed="true"], :root[data-theme="dark"] .tcats .tcat, :root[data-theme="dark"] .tcats .tcat[aria-pressed="true"] { flex: none; font-size: 20px; white-space: nowrap; }
}

/* Логотипы клиентов, тёмная тема (владелец, 16.10.2026, вариант 1): без цвета.
   Файлы рассчитаны на светлый фон, и инверсия искажала фирменные цвета
   (тёмно-синий становился голубым). Теперь логотип всегда светлый и одноцветный,
   при наведении — ярче и плитка чуть светлеет. Цвет остаётся в светлой теме. */
:root[data-theme="dark"] .partner__logo,
:root[data-theme="dark"] .partner--logo:hover .partner__logo { filter: invert(1) grayscale(1) contrast(1.15); }
:root[data-theme="dark"] .partner__logo--flip,
:root[data-theme="dark"] .partner--logo:hover .partner__logo--flip { filter: grayscale(1) contrast(1.15); }
:root[data-theme="dark"] .partner__logo { opacity: .6; }
:root[data-theme="dark"] .partner--logo:hover .partner__logo { opacity: 1; filter: invert(1) grayscale(1) contrast(1.15) brightness(1.25); }
:root[data-theme="dark"] .partner--logo:hover .partner__logo--flip { filter: grayscale(1) contrast(1.15) brightness(1.25); }
:root[data-theme="dark"] .partner--logo { transition: background-color .3s; }
:root[data-theme="dark"] .partner--logo:hover { background: color-mix(in srgb, var(--card) 88%, #fff); }

/* ============================================================
   Страница услуги по мотивам SimbirSoft (владелец, 16.10.2026: «так
   аккуратнее и подойдёт под стиль сайта»). Первый экран в две колонки
   (заголовок, суть, кнопка | обложка); «Что делаем» — список слева,
   карточка выбранного пункта справа (site.js), на телефоне раскрывается
   под пунктом; что входит и другие услуги — плашками; призыв в рамке со
   значком услуги; стек колонками; форматы работы карточками.
   ============================================================ */
main:has(.svp-hero) .sec--tight { padding-block: clamp(40px, 4.6vw, 80px); }
.svp-hero { padding-top: calc(var(--hdr-h) + clamp(16px, 2vw, 32px)); padding-bottom: clamp(16px, 2vw, 32px); }
.svp-hero .phead__crumbs a:hover { color: var(--ink); }
.svp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.svp-hero__grid--solo { grid-template-columns: minmax(0, 860px); }
.svp-hero__t { margin: clamp(20px, 2.4vw, 36px) 0 0; max-width: 16ch; font-size: clamp(36px, 3.9vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.svp-hero__d { margin: 24px 0 0; max-width: 560px; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.svp-hero__cta { margin-top: clamp(28px, 2.6vw, 40px); }
.svp-hero__fig { margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-2); }
.svp-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }

.svp-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 3vw, 44px); }
.svp-head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; }
.svp-h2 { margin: 0; font-size: clamp(30px, 2.8vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; color: var(--ink); }
.svp-head__x { max-width: 62ch; margin: 0; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* «Что делаем»: пункты слева, карточка выбранного справа (открыта одна). */
.svw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(var(--n), auto) 1fr; column-gap: clamp(24px, 3vw, 48px); }
.svw__item:first-child .svw__q { border-top: 1px solid var(--line-2); }
.svw__item { display: contents; }
.svw__q { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 28px 24px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; transition: background-color .25s, color .25s; }
.svw__t { font-size: clamp(21px, 1.7vw, 27px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
.svw__q .ic { width: 20px; height: 20px; color: var(--azure-ink); transition: transform .35s var(--ease); }
.svw__q:hover { color: var(--ink); }
.svw__q:focus-visible { outline: 2px solid var(--azure); outline-offset: -2px; }
.svw__item.is-on .svw__q { background: var(--card); color: var(--ink); }
.svw__item.is-on .svw__q .ic { transform: rotate(45deg); }
.svw__a { grid-column: 2; grid-row: 1 / -1; align-self: start; padding: clamp(24px, 2.6vw, 40px); border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.js .svw__item:not(.is-on) .svw__a { display: none; }
.js .svw__item.is-on .svw__a { animation: svw-in .35s var(--ease); }
@keyframes svw-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .js .svw__item.is-on .svw__a { animation: none; } }
.svw__fig { margin: 0 0 28px; overflow: hidden; border-radius: var(--r-md); background: var(--paper-2); }
.svw__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.svw__text { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.svw__note { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* плашки: что входит (просто текст) и другие услуги (ссылки) */
.svp-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.svp-pill { display: inline-flex; align-items: center; min-height: 64px; padding: 14px 32px; border-radius: 999px; background: var(--paper-2); font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.svp-pill--link { color: var(--azure-ink); transition: background-color .25s, color .25s; }
.svp-pill--link:hover { background: var(--azure-ink); color: #fff; }
:root[data-theme="dark"] .svp-pill--link:hover { color: var(--paper); }

/* призыв в рамке */
.svp-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: clamp(32px, 4.4vw, 80px); border: 1px solid var(--azure-ink); border-radius: var(--r-lg); }
.svp-box__main { display: grid; justify-items: start; gap: 16px; }
.svp-box__t { max-width: 22ch; margin: 0; font-size: clamp(28px, 2.6vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.svp-box__x { max-width: 52ch; margin: 0 0 12px; font-size: 19px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.svp-box__art { display: block; width: clamp(140px, 14vw, 220px); margin-right: clamp(0px, 3vw, 56px); color: var(--azure-ink); }
.svp-box__art svg { display: block; width: 100%; height: auto; }

/* стек: колонки, в каждой технологии плашками */
.svp-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 48px; }
.svp-col__t { margin: 0 0 18px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.svp-col__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.svp-tech { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 20px 8px 14px; border-radius: 999px; background: var(--paper-2); font-size: 17px; font-weight: 500; color: var(--ink); }
.svp-tech .ic { flex: none; width: 24px; height: 24px; }

/* форматы работы карточками */
.svp-fmts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.svp-fmt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 2.6vw, 40px); border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.svp-fmt__t { margin: 0; font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--azure-ink); }
.svp-fmt__w { flex: 1; margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.svp-fmt__btn { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: 600 17px/1.3 var(--f-body); color: var(--ink); cursor: pointer; }
.svp-fmt__btn .ic { width: 18px; height: 18px; color: var(--azure-ink); transition: transform .35s var(--ease); }
.svp-fmt__btn:hover .ic { transform: translateX(4px); }

@media (max-width: 980px) {
  .svp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .svp-hero__img { aspect-ratio: 16 / 10; }
  /* «Что делаем» — раскрывающийся список: карточка под своим пунктом */
  .svw { display: block; }
  .svw__item { display: block; border-bottom: 1px solid var(--line-2); }
  .svw__q { border-bottom: 0; padding: 20px 4px; gap: 16px; }
  .svw__item.is-on .svw__q { background: transparent; }
  .svw__a { margin: 0 0 20px; }
}
@media (max-width: 760px) {
  .svp-hero__t { font-size: clamp(32px, 8.6vw, 44px); }
  .svp-hero__t[style*="--lw"] { font-size: min(clamp(32px, 8.6vw, 44px), calc((100vw - 32px) / (var(--lw) * .56))); }
  .svp-hero__img { aspect-ratio: 4 / 3; }
  .svw__text { font-size: 17px; }
  .svw__note { font-size: 16px; }
  .svp-pill { min-height: 52px; padding: 12px 22px; font-size: 17px; }
  .svp-box { grid-template-columns: minmax(0, 1fr); }
  .svp-box__art { display: none; }
  .svp-box__x { font-size: 17px; }
  .svp-stack { gap: 32px; }
  .svp-tech { min-height: 44px; padding: 6px 16px 6px 10px; gap: 8px; font-size: 15px; }
  .svp-tech .ic { width: 20px; height: 20px; }
}

/* ============================================================
   Главная: слово «neomax» уменьшается в логотип, как у Dalee (16.10.2026).
   site.js закрепляет надпись (position: fixed) и на прокрутке уменьшает её до
   логотипа шапки; --p — доля пути 0…1. Фото в буквах растворяется, буквы
   становятся ровного цвета; .is-gone — слово погасло: у нас под ним проходит
   заголовок (у Dalee там пусто), поэтому гаснет, как только встало на место.
   ============================================================ */
.hero--d .hero__brand { --po: .62; --fo: 1; }
:root[data-theme="dark"] .hero--d .hero__brand { --po: .6; --fo: .34; }
.hero--d .hero__brand.is-fly { z-index: 58; will-change: auto; }
.hero--d .hero__brand.is-fly svg { z-index: 58; will-change: transform; transition: opacity .25s, visibility 0s; }
/* сильнее правил темы выше (:root:not([data-theme=dark]) …) */
:root:is([data-theme]) .hero--d .hero__brand.is-fly svg g.hb-photo { opacity: calc(var(--po) * (1 - var(--p, 0))); }
:root:is([data-theme]) .hero--d .hero__brand.is-fly svg g.hb-base { fill-opacity: calc(var(--fo) + (1 - var(--fo)) * var(--p, 0)); }
.hero--d .hero__brand.is-gone svg { visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
/* копия логотипа шапки, в которую слово перетекает под конец */
.hero--d .hero__brand .hero__logo { z-index: 58; display: block; pointer-events: none; transition: opacity .25s, visibility 0s; }
/* пока открыто меню, слово не лезет поверх панели */
html.is-menu-open .hero--d .hero__brand.is-fly svg { opacity: 0; visibility: hidden; }
.hero__logo .lg-a { fill: var(--logo-a); }
.hero__logo .lg-b { fill: var(--logo-b); }
.hero__logo .lg-u0 { stop-color: var(--logo-a); }
.hero__logo .lg-u1 { stop-color: var(--logo-b); }

/* Кнопка «Меню» — не чёрная, а серая и чуть прозрачная (владелец, 16.10.2026);
   размытие под ней держит надпись читаемой поверх любого фона. */
.menu-btn:not([aria-expanded="true"]) { background: rgba(48, 52, 62, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="dark"] .menu-btn:not([aria-expanded="true"]) { background: rgba(72, 77, 90, .62); }
@media (hover: hover) {
  .menu-btn:not([aria-expanded="true"]):hover { background: rgba(48, 52, 62, .92); }
  :root[data-theme="dark"] .menu-btn:not([aria-expanded="true"]):hover { background: rgba(72, 77, 90, .82); }
}

/* ============================================================
   Главная: «Услуги» — серая панель, которая наезжает на первый экран,
   как .home-services у Dalee (16.10.2026; измерено: фон #F1F1F1 на белом,
   скругление 42px, во всю ширину). Логотип в углу держится, пока панель
   не подойдёт к нему (site.js), и гаснет под ней.
   ============================================================ */
.hero--d { border-radius: 0; box-shadow: none; }
.hero--d + #services { position: relative; z-index: 2; margin-top: calc(var(--r-xl) * -1); background: var(--paper-2); border-radius: clamp(28px, 3vw, 42px); }
:root[data-theme="dark"] .hero--d + #services { background: #1E2128; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
@media (max-width: 760px) { .hero--d + #services { border-radius: 28px; } }

/* меню: кнопка заявки чуть дальше от последнего раздела — хвосты букв
   («Haqqımızda») почти касались её (владелец, 16.10.2026) */
@media (min-width: 761px) { .mpanel__cta { flex: none; margin-top: 16px; } }
/* после серой панели «Услуги» у следующего раздела свой верхний отступ:
   общее правило обнуляло его между секциями, и «Кейсы» прилипали к панели */
.hero--d + #services + .sec { padding-top: clamp(64px, 7vw, 120px); }

/* Светлая тема: фон не белый, а чуть сероватый (владелец, 16.10.2026).
   Все светлые фоны сдвинуты на пару тонов вместе, разница между ними та же;
   белые карточки остаются белыми. */
:root { --paper: #EFF0F2; --paper-2: #E4E6EA; --line: #DCDFE4; --line-2: #C8CCD3; }
:root:not([data-theme="dark"]) .hero { background: #F2F3F5; }

/* Перекат букв в «Услугах» — медленнее, примерно в 1,5 раза (владелец,
   16.10.2026: «у Red Collar анимация спокойнее»): было .4s + 33 мс на букву,
   задержка .15s */
.kd__l { transition-duration: calc(.6s + var(--i) * .05s); }
.kd:hover .kd__ln--b .kd__l, .kd:focus-visible .kd__ln--b .kd__l { transition-delay: .2s; }
/* ещё чуть серее (владелец, 16.10.2026, второй шаг) */
:root { --paper: #EAEBEE; --paper-2: #DFE1E5; --line: #D6D9DF; --line-2: #C2C6CE; }
:root:not([data-theme="dark"]) .hero { background: #EEEFF2; }
/* «Меню» ещё чуть прозрачнее (владелец, 16.10.2026) */
.menu-btn:not([aria-expanded="true"]) { background: rgba(48, 52, 62, .66); }
:root[data-theme="dark"] .menu-btn:not([aria-expanded="true"]) { background: rgba(72, 77, 90, .5); }
@media (hover: hover) {
  .menu-btn:not([aria-expanded="true"]):hover { background: rgba(48, 52, 62, .84); }
  :root[data-theme="dark"] .menu-btn:not([aria-expanded="true"]):hover { background: rgba(72, 77, 90, .74); }
}