@font-face{font-family:"Russo One";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/RussoOne-400-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Russo One";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/RussoOne-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,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:"Exo 2.0";font-style:normal;font-weight:100;font-display:swap;src:url("fonts/Exo2-100-cyrillic.woff2?v=2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Exo 2.0";font-style:normal;font-weight:100;font-display:swap;src:url("fonts/Exo2-100-latin.woff2?v=2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,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:"Exo 2.0";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Exo2-400-cyrillic.woff2?v=2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Exo 2.0";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Exo2-400-latin.woff2?v=2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,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:"Exo 2.0";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Exo2-600-cyrillic.woff2?v=2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Exo 2.0";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Exo2-600-latin.woff2?v=2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,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}

:root{
  --pink:oklch(49% .21 350);
  --pink-soft:oklch(58% .18 350);
  --pink-deep:oklch(35% .15 350);
  --brand-magenta-rgb:211 1 122;
  --brand-magenta:rgb(var(--brand-magenta-rgb));
  --brand-magenta-88:rgb(var(--brand-magenta-rgb) / .88);
  --brand-magenta-72:rgb(var(--brand-magenta-rgb) / .72);
  --brand-magenta-0:rgb(var(--brand-magenta-rgb) / 0);
  --on-magenta:oklch(98% .004 350);
  --on-magenta-muted:rgb(255 255 255 / .78);
  /* жёлтый на магенте один на весь сайт: 92% давало 4.06:1 при пороге 4.5 для обычного кегля */
  --on-magenta-accent:oklch(97% .15 96);
  --on-magenta-line:rgb(255 255 255 / .18);
  --yellow:oklch(92% .16 96);
  --cyan:oklch(78% .13 216);
  --ink:oklch(14% .025 255);
  --ink-soft:oklch(19% .03 255);
  --white:oklch(98% .004 350);
  /* Mean neutral background measured from desktop, tablet and mobile hero video. */
  --surface-light:#fafafa;
  --muted:oklch(78% .02 255);
  --line:color-mix(in oklch,var(--white) 14%,transparent);
  --body:"Exo 2.0",sans-serif;
  --display:"Russo One",sans-serif;
  /* высота вьюпорта, замороженная JS в px: Telegram-WebView реально ресайзит окно
     при скролле, и любые *vh-единицы там прыгают. Фолбэк - для отключённого JS */
  --vh100:100svh;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --pad:max(clamp(1.1rem,4vw,5rem),env(safe-area-inset-left),env(safe-area-inset-right));
  --z-header:30;
  --z-sticky:40;
}

*{box-sizing:border-box}
/* clip, а не hidden: hidden на предке превращает его в скролл-контейнер
   и ломает position:sticky у шапки; clip только отсекает без скролла */
html{scroll-padding-top:calc(5rem + env(safe-area-inset-top,0px));background:var(--ink);overflow-x:hidden;overflow-x:clip;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--body);font-weight:100;font-size:1rem;line-height:1.6;overflow-x:hidden;overflow-x:clip;overscroll-behavior-y:none}
.motion-paused *{animation-play-state:paused!important}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button,a{font:inherit}
a,button{touch-action:manipulation}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.028em;text-wrap:balance}
h1{font-size:clamp(2.75rem,5.8vw,5.5rem)}
h2{font-size:clamp(2.35rem,5vw,4.9rem)}
h3{font-size:clamp(1.3rem,2vw,2rem)}
p{text-wrap:pretty}
mark{color:inherit}
:focus-visible{outline:.16rem solid var(--cyan);outline-offset:.3rem}

.skip-link{position:fixed;left:1rem;top:1rem;z-index:100;padding:.75rem 1rem;border-radius:999px;background:var(--yellow);color:var(--ink);transform:translateY(-180%);transition:transform 180ms var(--ease-out)}
.skip-link:focus{transform:translateY(0)}
/* прогресс-бар живёт внутри sticky-шапки: не отдельный fixed-слой */
.scroll-progress{position:absolute;inset:0 0 auto;height:.15rem;z-index:60;pointer-events:none}
.scroll-progress span{display:block;width:100%;height:100%;background:var(--yellow);transform:scaleX(0);transform-origin:left center}

/* sticky вместо fixed: fixed - единственное исключение из стабильного лейаута
   мобильных браузеров (ресайзится вслед за тулбаром, дрожит в Telegram и iOS 26).
   Тень не в transition самой шапки (box-shadow - repaint каждый кадр перехода):
   статичная тень лежит на ::after и проявляется дешёвой opacity */
.site-header{position:sticky;top:0;z-index:var(--z-header);height:calc(5rem + env(safe-area-inset-top,0px));display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(.8rem,2vw,2rem);padding:.65rem var(--pad);padding-top:calc(.65rem + env(safe-area-inset-top,0px));background:rgb(var(--brand-magenta-rgb) / .96);border-bottom:1px solid transparent;transition:border-color 320ms var(--ease-out)}
.site-header::after{content:"";position:absolute;inset:0;box-shadow:0 .6rem 2.4rem rgb(var(--brand-magenta-rgb) / .24);opacity:0;transition:opacity 320ms var(--ease-out);pointer-events:none}
.site-header.is-scrolled{border-color:var(--on-magenta-line)}
.site-header.is-scrolled::after{opacity:1}
.brandmark{display:inline-flex;align-items:flex-start;gap:.28rem;height:2.5rem}
.brandmark img{width:8.6rem;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
/* приписка-трейдмарк у знака: Russo One, подвешена к верхней линии логотипа */
.brandmark b{margin-top:.12rem;font-family:var(--display);font-weight:400;font-size:.72rem;line-height:1;letter-spacing:.02em}
.site-header nav{justify-self:center;display:flex;gap:clamp(1.4rem,3vw,3.5rem)}
/* шапка лежит на магенте: тот же белый токен, что у остального текста на магенте.
   Серый --muted принадлежит тёмной секции и на магенте давал 3.49:1 против 4.88:1 */
.site-header nav a{position:relative;padding:.45rem 0;color:var(--on-magenta);font-weight:600;text-decoration:none}
.site-header nav a::after{content:"";position:absolute;inset:auto 0 .18rem;height:1px;background:var(--yellow);transform:scaleX(0);transform-origin:right;transition:transform 240ms var(--ease-out)}
.site-header nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
@media (hover:hover) and (pointer:fine){.site-header nav a:hover::after{transform:scaleX(1);transform-origin:left}}
/* переключатель языков: обычные ссылки, чтобы робот их обошёл. В шапке компактный,
   в подвале дублируется - на мобиле навигация в шапке скрыта медиазапросом */
.lang-switch{display:flex;align-items:center;gap:.15rem;font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.lang-switch a{padding:.35rem .45rem;border-radius:.5rem;color:color-mix(in oklch,var(--on-magenta) 62%,transparent);text-decoration:none;transition:color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.lang-switch a:hover{color:var(--on-magenta)}}
.lang-switch a[aria-current="page"]{color:var(--on-magenta-accent)}
.lang-switch span{color:color-mix(in oklch,var(--on-magenta) 28%,transparent)}
.lang-switch--footer{margin-right:auto;color:var(--muted)}
.lang-switch--footer a{color:color-mix(in oklch,var(--white) 58%,transparent)}
@media (hover:hover) and (pointer:fine){.lang-switch--footer a:hover{color:var(--white)}}
.lang-switch--footer a[aria-current="page"]{color:var(--yellow)}
.header-cta{display:flex;align-items:center;min-height:3.15rem;padding:.65rem 1.15rem;border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:600;text-decoration:none;user-select:none;-webkit-user-select:none;transition:transform 200ms var(--ease-out),background 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.header-cta:hover{transform:translateY(-.12rem);background:var(--white)}}

.nowrap{white-space:nowrap}
/* Reveal: скрытое состояние существует только при работающем JS (класс .js ставит
   инлайн-скрипт, у тега site.js есть onerror-страховка) и при разрешённом движении -
   без JS и при reduce весь контент виден сразу, переключение настройки на лету
   обрабатывает сам медиазапрос. Анимации без to-кадра: после проигрыша элемент
   возвращается к натуральным стилям, и reveal не конфликтует с hover-переходами
   (например translate у .layer-card). Слова каскадом: задержка из индекса --i,
   скрипт только режет текст; блок скрыт до разрезания, чтобы текст не мигал. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]:not(.is-in){opacity:0}
  .js [data-reveal].is-in{animation:reveal-in 400ms var(--ease-out) var(--rd,0s) backwards}
  .js .fde:not(.word-reveal){opacity:0}
  .js .word-reveal:not(.is-lit) .word{opacity:0}
  .js .word-reveal.is-lit .word{animation:word-in 340ms var(--ease-out) calc(var(--i)*16ms) backwards}
  /* проскоченное при быстром скролле или восстановлении позиции - мгновенно */
  .js .is-instant.is-in{animation:none}
  .js .word-reveal.is-instant.is-lit .word{animation:none}
}

.header-cta:active{transform:translateY(0) scale(.97);transition-duration:120ms}

.logo-ribbon{position:absolute;inset:auto 0 0;display:flex;align-items:center;min-height:var(--ribbon-h);background:var(--ink);border-block:1px solid color-mix(in oklch,var(--white) 18%,transparent);color:var(--yellow)}
.logo-window{position:relative;flex:1 1 auto;overflow:hidden;contain:paint;perspective:34rem}
/* размытие только по краям: маска на самой накладке делает blur сильным у кромки и сводит его к нулю к центру */
/* края гасятся градиентом с маской, без backdrop-filter: лента едет всегда,
   и размытие по ней означало бы постоянную работу компоновщика даже в покое */
.logo-window::before,.logo-window::after{content:"";position:absolute;inset-block:0;z-index:2;width:clamp(2.5rem,10%,7rem);pointer-events:none}
.logo-window::before{left:0;background:linear-gradient(90deg,var(--ink),transparent);-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)}
.logo-window::after{right:0;background:linear-gradient(270deg,var(--ink),transparent);-webkit-mask-image:linear-gradient(270deg,#000 40%,transparent);mask-image:linear-gradient(270deg,#000 40%,transparent)}
.logo-stage{transform:rotateX(18deg);transform-origin:center bottom}
.logo-track{display:flex;width:max-content;align-items:center;gap:clamp(2.4rem,4.5vw,4.4rem);padding:1.35rem clamp(1.5rem,3vw,3rem);animation:logo-loop 34s linear infinite;will-change:transform}
/* знак идёт маской: от файла берётся только альфа, цвет задаём сами */
/* --k выравнивает знаки по оптической массе: без него haval вчетверо тяжелее медианы, а euroopt вдвое легче */
.client-logo{flex:0 0 auto;height:calc(1.7rem * var(--k,1));aspect-ratio:var(--ratio);background:var(--yellow);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}

/* ---- мемфис-графика: тонкая линейная геометрия на полях секций и на стыках блоков ----
   Контраст даёт цвет (маджента, циан, чёрный), а не масса: обводки в 1-1.5 px,
   разреженные растры, никаких плотных заливок. Ничего не анимируется и не ловит указатель. */
.memphis{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* дыхание: анимируются ОТДЕЛЬНЫЕ свойства translate и rotate - они композируются
   с transform, где у каждой фигуры живёт её статический угол. Анимация transform
   этот угол затёрла бы. Периоды у всех разные, чтобы фигуры не засинхронились. */
.mem{position:absolute;animation:var(--mem-path,mem-breathe) var(--mem-dur,12s) cubic-bezier(.45,.05,.55,.95) var(--mem-delay,0s) infinite}
/* маленькие плоские заливки */
.mem--tri{background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.mem--half{background:currentColor;border-radius:999px 999px 0 0}
.mem--rule{background:currentColor}
/* всё линейное - строго волосяная линия в 1px */
.mem--ring{border:1px solid currentColor;border-radius:50%}
.mem--dots{background-image:radial-gradient(currentColor .085rem,transparent .095rem);background-size:1.05rem 1.05rem}
.mem--bars{background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px .58rem)}
.mem--zig{background:linear-gradient(45deg,#0000 calc(50% - .5px),currentColor calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)) 0 0/1.3rem 100%,linear-gradient(-45deg,#0000 calc(50% - .5px),currentColor calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)) .65rem 0/1.3rem 100%}

.system{position:relative;padding:clamp(6.5rem,10vw,10rem) var(--pad);background:var(--ink-soft);overflow:hidden;isolation:isolate}
.system::before{content:"";position:absolute;inset:12% 8% 3%;z-index:-1;background:radial-gradient(circle at 50% 58%,color-mix(in oklch,var(--pink) 17%,transparent),transparent 44%)}
/* стык system -> implementation: волосяная лесенка - сплошная линия по кромке и пунктир над ней */
.system::after{content:"";position:absolute;inset:auto 0 0;height:.75rem;z-index:0;pointer-events:none;background:linear-gradient(var(--brand-magenta) 0 0) 0 100%/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--brand-magenta) 0 1.7rem,transparent 1.7rem 3.4rem) 0 0/100% 1px no-repeat}
/* заголовок поднят над слоем графики: .memphis позиционирован и иначе рисуется поверх текста */
.section-heading{position:relative;z-index:1;max-width:92rem;margin:0 auto clamp(3.5rem,7vw,6.5rem)}
.section-heading h2{max-width:58rem;margin:0;color:var(--white)}
.section-heading h2>span{color:var(--yellow)}

/* Раскладка .system. Фигуры стоят вольно: углы не кратны 90 и не повторяются,
   отступы разные, масштабы разбросаны, кольцо подрезано нижней кромкой секции.
   Два треугольника - одна форма, но зеркальная и перевёрнутая, чтобы не читались копипастой. */
.system .mem-a{top:1.1rem;left:2.2%;width:2.7rem;height:2.35rem;color:var(--cyan);transform:rotate(197deg);--mem-dur:8.3s;--mem-delay:0s;--mem-path:mem-breathe}
.system .mem-b{top:4.3rem;left:calc(2.2% + 3.4rem);width:1.25rem;height:1.1rem;color:var(--cyan);transform:rotate(-41deg) scaleX(-1);--mem-dur:6.4s;--mem-delay:-2.1s;--mem-path:mem-breathe-b}
.system .mem-c{top:1.4rem;right:6%;width:9rem;height:3rem;color:var(--pink-soft);opacity:.55;transform:rotate(-6deg);--mem-dur:11.7s;--mem-delay:-5.6s;--mem-path:mem-breathe}
.system .mem-d{bottom:3.1rem;left:3%;width:11rem;height:.85rem;color:var(--yellow);opacity:.7;transform:rotate(-3.5deg);--mem-dur:7.9s;--mem-delay:-3.3s;--mem-path:mem-breathe-b}
.system .mem-e{bottom:-1.5rem;right:2.5%;width:5.6rem;height:5.6rem;color:var(--cyan);opacity:.6;--mem-dur:10.4s;--mem-delay:-7.2s;--mem-path:mem-breathe}
.system .mem-f{bottom:4.1rem;right:calc(2.5% + 6.2rem);width:2rem;height:1rem;color:var(--brand-magenta);transform:rotate(-118deg);--mem-dur:6.9s;--mem-delay:-1.4s;--mem-path:mem-breathe-b}

.layer-cards{max-width:78rem;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.layer-card{position:relative;display:flex;flex-direction:column;padding:clamp(1.6rem,2.6vw,2.3rem);border:1px solid var(--line);border-radius:clamp(1.1rem,2vw,1.6rem);background:color-mix(in oklch,var(--card-color) 8%,var(--ink-soft));box-shadow:0 1.4rem 3.8rem color-mix(in oklch,var(--ink) 25%,transparent);transition:translate 260ms var(--ease-out),border-color 260ms var(--ease-out)}
/* цветная тень активной карточки живёт на ::after и включается дешёвой opacity:
   transition самой box-shadow - это repaint каждый кадр перехода */
.layer-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 1.8rem 4.4rem color-mix(in oklch,var(--card-color) 18%,transparent);opacity:0;transition:opacity 260ms var(--ease-out);pointer-events:none}
.layer-card h3{margin:1.4rem 0 .65rem;font-size:clamp(1.25rem,1.9vw,1.75rem)}
/* подсветка заголовка сменой color, а не съездом background-clip:text градиента:
   тот заставлял растеризовать глифы заново каждый кадр перехода */
.layer-card h3 span{color:color-mix(in oklch,var(--card-color) 72%,var(--white));transition:color 420ms var(--ease-out)}
.layer-card p{max-width:38ch;margin:0;color:color-mix(in oklch,var(--white) 76%,transparent);font-size:clamp(.95rem,1.3vw,1.08rem)}
.card-orb{width:4.6rem;height:4.6rem}
.card-orb canvas{width:100%;height:100%}
.card-chips{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:auto;padding-top:1.4rem}
.card-chips span{display:inline-flex;align-items:baseline;gap:.5rem;padding:.3rem 0;color:var(--white);font-size:.875rem;line-height:1.3;font-weight:600;white-space:normal;max-width:100%}
.card-chips span::before{content:"";width:.4rem;height:.4rem;flex:0 0 .4rem;background:var(--card-color);transform:translateY(-1px)}
.card-chips span:nth-child(3n+2)::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.card-chips span:nth-child(3n)::before{border-radius:50%}
.layer-card.is-active{translate:0 -.4rem;border-color:color-mix(in oklch,var(--card-color) 55%,transparent)}
.layer-card.is-active::after{opacity:1}
.layer-card.is-active h3 span{color:var(--white)}
@media (hover:hover) and (pointer:fine){
  .layer-card:hover{translate:0 -.4rem;border-color:color-mix(in oklch,var(--card-color) 55%,transparent)}
  .layer-card:hover::after{opacity:1}
  .layer-card:hover h3 span{color:var(--white)}
}

.implementation{position:relative;padding:clamp(7rem,10vw,10rem) var(--pad) clamp(4rem,7vw,6.5rem);background:var(--brand-magenta);overflow:hidden;isolation:isolate}
/* На магенте графика идёт чистым чёрным и цианом. Кучки плотные, между ними пусто:
   слева пара треугольников разного калибра, справа наклонные штрихи с цианом,
   внизу растр с полукругом слева и подрезанное кромкой кольцо справа. */
.implementation .mem-a{top:1.2rem;left:3%;width:3.4rem;height:2.95rem;color:var(--ink);transform:rotate(-24deg);--mem-dur:9.2s;--mem-delay:-4.8s;--mem-path:mem-breathe-b}
.implementation .mem-b{top:5.6rem;left:calc(3% + 4.1rem);width:1.2rem;height:1.05rem;color:var(--ink);transform:rotate(168deg) scaleX(-1);--mem-dur:7.1s;--mem-delay:-0.7s;--mem-path:mem-breathe}
.implementation .mem-c{top:2rem;right:5.5%;width:8.5rem;height:2.2rem;color:var(--ink);opacity:.55;transform:rotate(9deg);--mem-dur:12.3s;--mem-delay:-6.1s;--mem-path:mem-breathe-b}
.implementation .mem-d{top:6.2rem;right:3%;width:4.2rem;height:.3rem;color:var(--cyan);transform:rotate(-31deg);--mem-dur:8.7s;--mem-delay:-2.9s;--mem-path:mem-breathe}
.implementation .mem-e{bottom:1.2rem;left:5%;width:7rem;height:2.6rem;color:var(--ink);opacity:.5;transform:rotate(-11deg);--mem-dur:10.9s;--mem-delay:-8.4s;--mem-path:mem-breathe-b}
.implementation .mem-f{bottom:2.4rem;left:calc(5% + 8.2rem);width:3.2rem;height:1.6rem;color:var(--cyan);transform:rotate(74deg);--mem-dur:7.6s;--mem-delay:-5.2s;--mem-path:mem-breathe}
.implementation .mem-g{bottom:-1.6rem;right:4%;width:4.4rem;height:4.4rem;color:var(--ink);opacity:.7;--mem-dur:11.2s;--mem-delay:-3.7s;--mem-path:mem-breathe-b}
/* БЕЗ content-visibility: его paint containment режет всё выступающее за секцию,
   а сфера заходит под подвал отрицательным отступом - низ сферы обрезался резкой
   линией, и стеклу подвала было нечего размывать (прецедент 2026-07-28) */
.security{position:relative;padding:0 var(--pad);background:var(--ink)}
.security-intro{max-width:92rem;margin:0 auto}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.implementation::before{display:none}
.implementation-grid{max-width:92rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
.implementation-orb{position:relative;justify-self:center;width:min(100%,30rem);aspect-ratio:1}
.implementation-orb > canvas[data-orb]{position:relative;z-index:1;width:100%;height:100%}
.implementation-copy{position:relative;z-index:2;min-width:0}
.implementation-copy h2{max-width:57rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.implementation-copy h2 span{color:var(--yellow)}
.fde{max-width:52rem;margin-bottom:2rem;color:var(--on-magenta);font-size:clamp(1.05rem,1.55vw,1.3rem);font-weight:600}
.provider-band{position:relative;min-width:0;max-width:100%;margin:0 0 clamp(2rem,4vw,3rem);padding-block:.6rem;overflow:hidden;contain:paint;perspective:34rem;border-block:1px solid color-mix(in oklch,var(--white) 18%,transparent);color:var(--yellow)}
.provider-stage{transform:rotateX(22deg);transform-origin:center bottom}
.provider-track{display:flex;width:max-content;align-items:center;gap:clamp(1.4rem,3vw,2.6rem);padding:.9rem 1rem;animation:provider-loop 44s linear infinite;will-change:transform}
/* знаки монохромные: файл идёт маской, цвет берётся из ленты */
.provider-logo{flex:0 0 auto;width:clamp(1.5rem,2.5vw,2.1rem);height:clamp(1.5rem,2.5vw,2.1rem);background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.deployment-copy{max-width:48rem;margin:0;color:color-mix(in oklch,var(--white) 76%,transparent);font-size:1.05rem}

/* Свежие статьи блога: список ссылок, а не карточки - блок стоит перед сферой
   и не должен спорить с ней по массе. Заголовок мельче секционных h2 */
.latest-posts{max-width:48rem;margin:clamp(2rem,4vw,3rem) 0 0}
.latest-posts h2{margin:0 0 .9rem;font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:.02em;color:var(--yellow)}
.latest-posts ul{margin:0;padding:0;list-style:none}
.latest-posts li{border-top:1px solid var(--line)}
.latest-posts a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem;padding:.75rem 0;color:color-mix(in oklch,var(--white) 82%,transparent);text-decoration:none;transition:color 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.latest-posts a:hover{color:var(--white)}}
.latest-posts time{color:color-mix(in oklch,var(--white) 55%,transparent);font-size:.82rem}

/* Орбита целиком помещается над подвалом, включая крайние значки. */
.security-globe{--globe:clamp(24rem,64vw,60rem);--dot-size:clamp(3rem,5.4vw,4.5rem);position:relative;width:100%;max-width:92rem;height:calc(var(--globe) + var(--dot-size));margin:clamp(2.5rem,5vw,4.5rem) auto 0}
.globe-sphere{position:absolute;top:50%;left:50%;width:calc(var(--globe)*.55);aspect-ratio:1;transform:translate(-50%,-50%)}
/* Подсказка «здесь можно нажать» в языке мемфиса: не плашка, а наклонная надпись
   сбоку от орбит и волосяная стрелка с треугольной головкой в сторону колец.
   Висит постоянно и дышит в одной семье с мемфис-фигурами. */
.globe-hint{position:absolute;top:34%;left:max(1rem,calc(50% - var(--globe) * .74));z-index:4;display:flex;align-items:flex-start;gap:.5rem;margin:0;color:var(--yellow);font-family:var(--display);font-size:clamp(.82rem,1.5vw,1.05rem);line-height:1.15;letter-spacing:.01em;text-transform:uppercase;transform:rotate(-9deg);transform-origin:left center;animation:hint-float 9.7s var(--ease-soft) infinite;pointer-events:none}
.hint-word{white-space:nowrap}
.hint-arrow{position:relative;display:block;width:clamp(2.6rem,5vw,4.4rem);height:1rem;margin-top:.35rem;transform:rotate(14deg)}
.hint-line{position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--cyan)}
.hint-head{position:absolute;top:calc(50% - .3rem);right:-.1rem;width:.62rem;height:.62rem;background:var(--cyan);clip-path:polygon(0 0,100% 50%,0 100%)}
.orbit-ring{position:absolute;top:50%;left:50%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid transparent;border-radius:50%}
.ring-inner{width:calc(var(--globe)*.62)}
.ring-mid{width:calc(var(--globe)*.81)}
.ring-outer{width:var(--globe)}
.orbit-arm{position:absolute;top:0;left:50%;width:0;height:50%;transform-origin:50% 100%;transform:rotate(var(--angle))}
.orbit-cw .orbit-arm{animation:orbit-cw var(--dur) linear infinite}
.orbit-ccw .orbit-arm{animation:orbit-ccw var(--dur) linear infinite}
.orbit-chip{position:absolute;top:0;left:50%;display:grid;place-items:center;width:calc(var(--dot-size) * var(--dot-k,1));padding:0;cursor:pointer;user-select:none;-webkit-user-select:none;aspect-ratio:1;border-radius:.4rem;border:0;background:transparent;color:var(--sat-color);transform:translate(-50%,-50%) rotate(calc(var(--angle)*-1))}
.orbit-cw .orbit-chip{animation:counter-ccw var(--dur) linear infinite}
.orbit-ccw .orbit-chip{animation:counter-cw var(--dur) linear infinite}
/* Невидимая область нажатия остаётся не меньше 44 px. */
.orbit-chip::before{content:"";position:absolute;top:50%;left:50%;width:max(100%,2.75rem);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.orbit-chip img{width:70%;height:70%;object-fit:contain;pointer-events:none}
.orbit-chip[aria-expanded="true"],.orbit-chip:focus-visible{outline:2px solid var(--sat-color);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.orbit-chip:hover img{scale:1.1}}
@media(prefers-reduced-motion:no-preference){.orbit-chip img{transition:scale 180ms var(--ease-out)}}
/* замирает только кольцо нажатой иконки, соседние кольца продолжают вращение */
.orbit-ring.is-held .orbit-arm,.orbit-ring.is-held .orbit-chip,.orbit-ring:focus-within .orbit-arm,.orbit-ring:focus-within .orbit-chip{animation-play-state:paused}
.control-line{--dot-size:clamp(2.5rem,4.4vw,3.4rem)}
.js .control-line{position:absolute;inset:0;z-index:5;pointer-events:none}
.control-notes{max-width:44rem;margin:1.6rem auto 0;color:color-mix(in oklch,var(--white) 82%,transparent);font-size:.95rem}
.control-note{margin:0 0 .6rem}
.control-note b{color:color-mix(in oklch,var(--sat-color,var(--white)) 72%,var(--white))}

/* С JS текст открывается рядом с нажатым значком. */
.js .control-notes{position:absolute;inset:0;max-width:none;min-height:0;margin:0;font-size:.9rem}
.js .control-note{position:absolute;top:0;left:0;width:min(24rem,86vw);margin:0;padding:.7rem 1rem;border:1px solid color-mix(in oklch,var(--white) 14%,transparent);border-radius:.9rem;background:var(--ink-soft);box-shadow:4px 5px 0 #000;opacity:0;visibility:hidden;transform:translate(-50%,calc(-100% - .2rem)) scale(.97);transform-origin:var(--origin,50%) bottom;pointer-events:none;transition:opacity 120ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s linear 160ms}
.js .control-note.is-open{opacity:1;visibility:visible;transform:translate(-50%,calc(-100% - .55rem)) scale(1);pointer-events:auto;transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s}
.js .control-note::before{content:"";position:absolute;bottom:-.31rem;left:var(--origin,50%);width:.6rem;height:.6rem;margin-left:-.3rem;border-bottom:1px solid color-mix(in oklch,var(--white) 14%,transparent);border-right:1px solid color-mix(in oklch,var(--white) 14%,transparent);background:var(--ink-soft);transform:rotate(45deg)}

/* Подвал отделён от орбиты чёткой границей, без размытия. */
footer{position:relative;z-index:7;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;gap:1.3rem;min-height:11rem;padding:2.5rem var(--pad) 1.6rem;padding-bottom:max(1.6rem,env(safe-area-inset-bottom));color:var(--muted);font-size:.9rem;pointer-events:none}
footer::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);border-top:1px solid var(--line);pointer-events:none}
footer a,footer button,footer .brandmark{pointer-events:auto}
.globe-wreath{position:absolute;top:50%;left:50%;width:calc(var(--globe)*1.05);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
footer .brandmark{height:auto;opacity:.82}
footer .brandmark img{width:7.5rem;height:auto;filter:brightness(0) invert(1)}
footer .brandmark b{font-size:.62rem}
footer p{margin:0}
footer a{text-underline-offset:.2rem}
/* Завершающая полоса подвала: языки, логотип, реквизиты и почта - под юридическими ссылками. */
.footer-baseline{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem clamp(1.5rem,4vw,4rem);padding-top:1.3rem;border-top:1px solid var(--line)}
/* реквизиты - единственный тянущийся элемент строки: они переносятся внутри себя,
   а не рвут строку на части с разъезжающимися auto-отступами */
.footer-baseline p{flex:1 1 12rem;min-width:0}
.footer-baseline>a{margin-left:auto}

/* пауза декора за экраном: точечные цели вместо .is-offscreen * с !important -
   то правило инвалидировало стили всего поддерева (~50 элементов) прямо на скролле.
   Стоит после базовых animation-правил: их шорт­хенд сбрасывает play-state */
.is-offscreen :is(.logo-track,.provider-track,.orbit-arm,.orbit-chip,.globe-hint,.mem){animation-play-state:paused}
.data-limited :is(.logo-track,.provider-track,.orbit-arm,.orbit-chip,.globe-hint,.mem){animation-play-state:paused}

@keyframes reveal-in{from{opacity:0;translate:0 14px}}
@keyframes word-in{from{opacity:0}}
@keyframes logo-loop{to{transform:translateX(-50%)}}
@keyframes provider-loop{to{transform:translateX(-50%)}}
@keyframes orbit-cw{from{transform:rotate(var(--angle))}to{transform:rotate(calc(var(--angle) + 360deg))}}
@keyframes orbit-ccw{from{transform:rotate(var(--angle))}to{transform:rotate(calc(var(--angle) - 360deg))}}
@keyframes counter-cw{from{transform:translate(-50%,-50%) rotate(calc(var(--angle)*-1))}to{transform:translate(-50%,-50%) rotate(calc(var(--angle)*-1 + 360deg))}}
@keyframes mem-breathe{0%,100%{translate:0 0;rotate:0deg}28%{translate:.34rem -.42rem;rotate:2.1deg}55%{translate:.12rem .3rem;rotate:-1.1deg}78%{translate:-.3rem -.14rem;rotate:1.5deg}}
@keyframes mem-breathe-b{0%,100%{translate:0 0;rotate:0deg}24%{translate:-.36rem .26rem;rotate:-2.2deg}52%{translate:.26rem .34rem;rotate:1.3deg}80%{translate:.3rem -.28rem;rotate:-1.6deg}}
@keyframes hint-float{0%,100%{transform:rotate(-9deg) translate(0,0);opacity:.82}35%{transform:rotate(-7.6deg) translate(.3rem,-.34rem);opacity:1}70%{transform:rotate(-10.1deg) translate(-.24rem,.26rem);opacity:.9}}
@keyframes counter-ccw{from{transform:translate(-50%,-50%) rotate(calc(var(--angle)*-1))}to{transform:translate(-50%,-50%) rotate(calc(var(--angle)*-1 - 360deg))}}

@media (max-width:980px){
  .site-header{grid-template-columns:auto 1fr auto auto}
  .site-header nav{display:none}
  .lang-switch{font-size:.74rem;gap:.05rem}
  .lang-switch a{padding:.3rem .28rem}
  .header-cta{justify-self:end}
}

@media (max-width:760px){
  html{scroll-padding-top:calc(4.25rem + env(safe-area-inset-top,0px))}
  .site-header{height:calc(4.25rem + env(safe-area-inset-top,0px));padding:.55rem 1rem;padding-top:calc(.55rem + env(safe-area-inset-top,0px))}
  .brandmark{height:2.15rem}
  .brandmark img{width:7.6rem}
  .brandmark b{font-size:.62rem}
  .header-cta{gap:.5rem;min-height:2.6rem;padding:.5rem .8rem;font-size:.86rem}
  .logo-track{gap:2rem;padding:1rem 1.25rem}
  /* на телефоне ленты плоские: rotateX+perspective заставляли растеризовать
     гигантскую width:max-content текстуру в 3D-контексте */
  .logo-stage,.provider-stage{transform:none}
  .logo-window,.provider-band{perspective:none}
  .system .mem-b,.system .mem-f,.implementation .mem-b,.implementation .mem-f{display:none}
  .system .mem-a{top:.8rem;left:.7rem;width:2.1rem;height:1.85rem}
  .system .mem-c{top:1.2rem;right:.6rem;width:5.6rem;height:2rem}
  .system .mem-d{bottom:2.4rem;left:.7rem;width:6.4rem;height:.75rem}
  .system .mem-e{bottom:-1rem;right:.8rem;width:3.4rem;height:3.4rem}
  .implementation .mem-a{top:1rem;left:.7rem;width:2.5rem;height:2.15rem}
  .implementation .mem-c{top:1.4rem;right:.7rem;width:5.4rem;height:1.5rem}
  .implementation .mem-d{top:4.4rem;right:1.4rem;width:2.8rem;height:.3rem}
  .implementation .mem-e{bottom:1rem;left:.7rem;width:5.2rem;height:2rem}
  .implementation .mem-g{bottom:-1.1rem;right:.8rem;width:3.2rem;height:3.2rem}
  .client-logo{height:calc(1.35rem * var(--k,1))}
  .system{padding:6.5rem 1rem 5rem}
  .section-heading{margin-bottom:2.8rem}
  .section-heading h2{font-size:clamp(2.35rem,10.8vw,4rem)}
  .layer-cards{grid-template-columns:minmax(0,1fr)}
  .implementation{min-height:auto;padding:6.5rem 1rem 5rem}
  .implementation-grid{grid-template-columns:minmax(0,1fr)}
  .implementation-orb{width:min(78vw,22rem);margin-top:2rem}
  .implementation-copy h2{font-size:clamp(2.35rem,10.8vw,4rem)}
  .provider-band{width:calc(100% + 2rem);max-width:none;margin-inline:-1rem;margin-top:0}
  .provider-track{gap:1.3rem}
  /* кнопка на орбите не мельче 44 px, поэтому сфера на мобиле чуть уже */
  /* на мобиле внутри блока свободной полосы нет - иконки начинаются в 3 px от верха,
     поэтому подсказка выносится НАД орбитами, а блоку добавляется воздух сверху */
  .security-globe{--globe:min(78vw,24rem);--dot-size:3.25rem;margin-top:6.4rem;margin-bottom:0}
  .globe-hint{top:auto;bottom:calc(100% + .2rem);left:.9rem;gap:.4rem;font-size:.76rem}
  .hint-arrow{width:2.4rem;height:.8rem;margin-top:.2rem}
  .security{padding-inline:1rem}
  .control-line{justify-content:flex-start}
  footer{display:grid;gap:1rem;min-height:12rem;padding:2.5rem 1rem 1.5rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
  .footer-baseline{display:grid;justify-items:start;gap:.6rem;padding-top:1rem}
  .footer-baseline>a{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .logo-track,.provider-track{transform:none!important}
  .logo-stage{transform:none!important}
  .js .control-note,.js .control-note.is-open{transform:translate(-50%,calc(-100% - .55rem))!important}
  .globe-hint{animation:none!important}
  .mem{animation:none!important;translate:none!important;rotate:none!important}
}
:root{scroll-padding-top:7rem}
.company-summary{max-width:70rem;color:#b8bbc4;font-weight:400}
.company-summary p{font-size:.8125rem;line-height:1.55;margin:.5rem 0;max-width:68rem}
.company-summary a{color:inherit}
footer .legal-links{justify-content:flex-start;margin-top:0}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.5rem;margin-top:1.3rem;font-size:.9rem;font-weight:400}
.legal-links a,.legal-links button{color:inherit;text-underline-offset:.2em}
.legal-links button{font:inherit;background:none;border:0;text-decoration:underline;cursor:pointer;padding:0}
.consent-banner[hidden],.legal-links [hidden]{display:none}
.consent-banner{position:fixed;z-index:1000;inset:auto 1rem 1rem auto;width:min(23rem,calc(100vw - 2rem));padding:.8rem .9rem .85rem;background:var(--surface-light);color:#111115;border:1px solid #111115;border-radius:.6rem;box-shadow:0 8px 24px #11111526;font:400 .8125rem/1.4 "Exo 2.0",sans-serif;animation:consent-in .45s cubic-bezier(.2,.8,.2,1) .6s both}
.consent-banner h2{font:400 .875rem/1.3 "Russo One",sans-serif;margin:0 0 .25rem;color:#111115}
.consent-banner p{margin:0;font-size:.8125rem;line-height:1.4}
.consent-banner a{color:#a60059;text-decoration:underline}
.consent-actions{display:flex;gap:.5rem;margin-top:.65rem}
.consent-actions button{flex:1;padding:.4rem .5rem;border:1px solid #111115;border-radius:.35rem;background:var(--surface-light);color:#111115;font:600 .8125rem/1.3 "Exo 2.0",sans-serif;cursor:pointer}
.consent-actions button:focus-visible,.legal-links button:focus-visible{outline:3px solid #e5007d;outline-offset:3px}
@media(max-width:480px){.consent-banner{inset:auto .65rem .65rem;width:auto}.consent-actions button{padding:.5rem .4rem}}
@keyframes consent-in{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.consent-banner{animation:none}}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Caveat-hero.woff2") format("woff2");
}

.home-page {
  --hero-magenta: #e5007d;
  --hero-cyan: #00ccea;
  --hero-yellow: #ffeb29;
  --hero-ink: #111115;
  --hero-muted: #55555e;
  --hero-paper: var(--surface-light);
  --hero-pad: max(clamp(1.25rem, 4.1vw, 4.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
}
.home-header, .hero { font-family: var(--body); font-weight: 400; color: var(--hero-ink); background: var(--hero-paper); }
.home-header {
  height: calc(5.5rem + env(safe-area-inset-top, 0px));
  grid-template-columns: auto 1fr auto auto;
  gap: clamp(.75rem, 2vw, 2rem);
  padding: .65rem var(--hero-pad);
  padding-top: calc(.65rem + env(safe-area-inset-top, 0px));
}
.home-header::after { box-shadow: 0 .5rem 1.5rem #1111150c; }
.home-header.is-scrolled { border-color: #11111512; }
.home-header .home-brand { align-items: flex-start; gap: .25rem; height: auto; }
.home-header .home-brand img { width: clamp(8rem, 13vw, 12rem); height: auto; filter: none; }
.home-header .home-brand b { font-size: .65rem; margin-top: .1rem; }
.home-header .home-nav { display: flex; gap: clamp(1.1rem, 2.5vw, 3rem); }
.home-header nav a { display: flex; align-items: center; min-height: 44px; color: var(--hero-ink); font-size: .875rem; font-weight: 600; }
.home-header nav a::after { background: var(--hero-magenta); }
.home-header .lang-switch { font-size: .8125rem; gap: 0; }
.home-header .lang-switch a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; color: var(--hero-muted); }
.home-header .lang-switch a[aria-current] { color: var(--hero-ink); font-weight: 600; }
.home-header .lang-switch span { color: var(--hero-muted); }
.home-header-cta { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 44px; padding: .65rem 1.15rem; border-radius: .5rem; background: var(--hero-ink); color: #fff; text-decoration: none; font-size: .8125rem; font-weight: 600; }
.home-header-cta svg { width: 1.15rem; height: 1.15rem; }
.home-header .scroll-progress span { background: var(--hero-magenta); }
.hero-menu { display: none; }
.hero a:focus-visible, .home-header a:focus-visible, .hero-menu summary:focus-visible { outline: 3px solid #111115; outline-offset: 5px; }
.hero ::selection, .home-header ::selection { background: var(--hero-yellow); color: var(--hero-ink); }

.hero { overflow: clip; }
.hero-shell { max-width: 1536px; margin-inline: auto; padding-inline: var(--hero-pad); }
.hero-main { display: grid; grid-template-columns: 1fr 1fr; min-height: 34rem; position: relative; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding-block: 1.75rem 3rem; }
.hero h1, .hero h2, .hero h3 { font-family: var(--display); font-weight: 400; color: var(--hero-ink); }
.hero h1 { font-size: clamp(2.75rem, 4.25vw, 4.125rem); line-height: 1.025; letter-spacing: -.04em; margin: 0 0 1.25rem; text-wrap: initial; }
.hero h1 span { display: block; }
:lang(ru) .hero h1 { font-size: clamp(2.65rem, 3.85vw, 3.75rem); }
.hero-description { max-width: 30rem; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.45; letter-spacing: -.02em; margin-bottom: 1.5rem; color: #37373e; }
.hero-actions { display: flex; gap: clamp(1rem, 2vw, 2rem); align-items: center; flex-wrap: wrap; }
.hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 1.1rem; min-height: 3.5rem; padding: .9rem 1.65rem; border-radius: .5rem; background: var(--hero-magenta); color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none; }
.hero-cta svg { width: 1.2rem; height: 1.2rem; }
.hero-consultation { margin: .65rem 0 0; font-size: .8125rem; color: var(--hero-muted); }
.hero-visual { position: relative; min-width: 0; align-self: stretch; }
.hero-note { position: absolute; z-index: 1; top: 9%; right: -1%; margin: 0; width: 33%; font-family: "Caveat", cursive; font-size: clamp(1.65rem, 2.25vw, 2.25rem); font-weight: 700; line-height: .96; transform: rotate(-10deg) scaleX(.85); transform-origin: right top; }
.hero-note span { display: block; white-space: nowrap; }
.hero-note svg { width: 85%; margin-top: .2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

.hero h2 { font-size: clamp(1.65rem, 2.5vw, 2.3rem); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 1.2rem; }
/* Таймлайн живёт внутри раздела внедрения (.service-team), где общие правила .service-story
   перебивают его типографику, поэтому заголовки и подписи шагов прижаты селектором .hero-process. */
.hero-process { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #11111525; scroll-margin-top: 1rem; }
.journey { position: relative; }
.journey:focus-visible { outline: 2px solid var(--hero-magenta); outline-offset: 4px; }
.journey ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.journey-route { position: absolute; left: 10%; top: 0; width: 80%; height: 5rem; overflow: visible; }
.journey-route path { fill: none; stroke: url(#journey-colors); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.journey-step { position: relative; text-align: center; }
.journey-node { display: grid; place-items: center; width: 4.5rem; aspect-ratio: 1; margin: 0 auto .65rem; background: var(--hero-magenta); color: #fff; border-radius: 50%; }
.journey-node svg { width: 2rem; height: 2rem; }
.journey-step:nth-child(2) .journey-node { background: var(--hero-cyan); color: var(--hero-ink); }
.journey-step:nth-child(3) .journey-node { background: var(--hero-yellow); color: var(--hero-ink); }
.journey-step:nth-child(4) .journey-node { background: var(--hero-ink); color: #fff; }
.hero-process .journey-step h3 { font-size: 1.125rem; line-height: 1.2; margin: 0 0 .35rem; letter-spacing: -.025em; }
.hero-process .journey-step p { font-size: .875rem; line-height: 1.35; color: var(--hero-muted); max-width: 11rem; margin: 0 auto; }
.hero-services { padding-top: 2.25rem; scroll-margin-top: 1rem; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.service-tile { position: relative; min-height: 7rem; padding: 1.4rem 1rem; display: grid; grid-template-columns: 2rem 1fr; align-items: start; gap: .8rem; color: #101014; background: #f1f1f3; border-radius: .5rem; text-decoration: none; }
.service-tile--0 { background: var(--hero-magenta); color: #fff; }
.service-tile--1 { background: var(--hero-cyan); }
.service-tile--2 { background: var(--hero-yellow); }
.service-icon svg { width: 2rem; height: 2rem; }
.service-label strong { display: block; font-size: .9375rem; line-height: 1.2; font-weight: 600; letter-spacing: -.03em; margin: .1rem 0 .65rem; }
.service-label>span { display: block; font-size: .8125rem; line-height: 1.35; max-width: 10.5rem; padding-right: .6rem; }
.hero .logo-ribbon { position: relative; min-height: 6.5rem; margin-top: 2.5rem; background:var(--surface-light); color: var(--hero-ink); border-color: #11111514; }
.hero .client-logo { background: var(--hero-ink); }
.hero .logo-window::before, .hero .logo-window::after { display: none; }
.hero-memphis { position: absolute; pointer-events: none; }
.hero-memphis--zig { width: 3.5rem; height: 1.5rem; left: 6%; top: 7%; transform: rotate(-12deg); fill: none; stroke: var(--hero-ink); stroke-width: 2.5; }
.hero-memphis--dots { width: 3.8rem; height: 3.8rem; right: 0; bottom: 5%; fill: var(--hero-ink); }
.home-page .implementation { background:var(--surface-light); color: var(--hero-ink); --orb-cyan: #007c91; --orb-yellow: #e5007d; --orb-white: #111115; }
.home-page .implementation-copy h2 span { color: var(--hero-magenta); }
.home-page .implementation .fde { color: #37373e; }

@media (hover: hover) and (pointer: fine) {
  .hero-cta:hover { background: #c90070; }
  .hero-cta:hover svg, .home-header-cta:hover svg { transform: scale(1.08); }
  .service-tile:hover .service-icon { transform: translateY(-3px); }
  .home-header-cta:hover { background: #34343b; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-cta, .home-header-cta { transition: background 180ms ease-out; }
  .hero-cta svg, .home-header-cta svg, .service-icon { transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
  .hero-cta:active { transform: translateY(1px); }
}

@media (min-width: 1537px) {
  .home-header { padding-inline: max(var(--hero-pad), calc((100vw - 1392px) / 2)); }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .home-header { grid-template-columns: auto 1fr auto; }
  .home-header-cta { display: none; }
  .home-header .home-nav { gap: 1.1rem; }
  .hero-main { min-height: 29rem; }
  .hero-copy { padding-block: 1.8rem 2rem; }
  .hero h1 { font-size: 4.5vw; }
  :lang(ru) .hero h1 { font-size: 3.85vw; }
  .hero-description { font-size: 1rem; }
  .hero-actions { gap: .4rem 1rem; }
  .hero-cta { padding-inline: 1.2rem; min-height: 3.1rem; }
  .hero-note { top: 12%; right: 3%; width: 45%; font-size: 1.35rem; }
  .journey ol { gap: 1rem; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-tile { min-height: 6.5rem; padding: 1.25rem; }
  .service-label>span { max-width: none; }
}
@media (max-width: 760px) {
  .home-header { grid-template-columns: 1fr auto auto; height: calc(4.5rem + env(safe-area-inset-top, 0px)); gap: .15rem; padding-inline: var(--hero-pad); }
  .home-header .home-brand img { width: clamp(7.1rem, 31vw, 10rem); }
  .home-header .home-brand b { font-size: .55rem; }
  .home-header .home-nav, .home-header-cta { display: none; }
  .home-header .lang-switch { font-size: .75rem; }
  .hero-menu { display: block; position: relative; }
  .hero-menu summary { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; }
  .hero-menu summary::-webkit-details-marker { display: none; }
  .hero-menu summary svg { width: 26px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .home-header .hero-menu nav { position: absolute; top: calc(100% + .5rem); right: 0; display: grid; gap: .25rem; min-width: 14rem; padding: .75rem 1.25rem; background:var(--surface-light); border-radius: .5rem; box-shadow: 0 .75rem 2rem #11111520; }
  .hero-menu summary:focus-visible { outline-offset: 0; }
  .hero-main { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { align-self: stretch; padding-block: 1.3rem 0; }
  .hero h1 { font-size: clamp(2.25rem, 8.6vw, 3.7rem); line-height: 1.03; letter-spacing: -.035em; margin-bottom: 1rem; }
  :lang(ru) .hero h1 { font-size: clamp(1.8rem, 7.4vw, 3.4rem); }
  .hero-description { font-size: 1rem; max-width: 32rem; line-height: 1.4; margin-bottom: 1.1rem; }
  .hero-actions { gap: .6rem; flex-wrap: nowrap; }
  .hero-cta { min-height: 3.125rem; font-size: .875rem; padding: .75rem 1rem; gap: .7rem; flex-shrink: 0; }
  .hero-consultation { margin-top: .45rem; font-size: .75rem; }
  .hero-visual { margin: .8rem calc(-1 * var(--hero-pad)) 0; height: 88vw; max-height: 36rem; overflow: clip; }
  .hero-note { right: 6%; top: 4%; width: 32%; font-size: clamp(1rem, 4.6vw, 1.75rem); }
  .hero-note svg { height: 1rem; }
  .hero h2 { font-size: 1.6rem; margin-bottom: 1rem; }
  .hero-process { margin-top: 1.75rem; padding-top: 1.75rem; }
  .journey ol { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .journey-route { display: none; }
  .journey::before { content: ""; position: absolute; left: calc(1.75rem - 1px); top: 1.75rem; bottom: 1.75rem; width: 2px; background: linear-gradient(var(--hero-magenta), var(--hero-cyan) 25%, var(--hero-yellow) 50%, var(--hero-ink) 75%, var(--hero-magenta)); }
  .journey-step { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1rem; text-align: left; align-content: center; min-height: 3.5rem; }
  .journey-node { width: 3.5rem; grid-row: 1 / 3; align-self: center; margin: 0; }
  .journey-node svg { width: 1.6rem; height: 1.6rem; }
  .hero-process .journey-step h3 { font-size: 1.0625rem; margin: .1rem 0 .25rem; }
  .hero-process .journey-step p { font-size: .9375rem; margin: 0; max-width: 26rem; }
  .hero-services { padding-top: 1.5rem; }
  .service-grid { grid-template-columns: 1fr; gap: .5rem; }
  .service-tile { min-height: 4.5rem; padding: .9rem 1rem; grid-template-columns: 1.8rem 1fr; align-items: center; gap: .9rem; }
  .service-icon svg { width: 1.8rem; height: 1.8rem; }
  .service-label strong { font-size: 1rem; margin: 0 0 .2rem; }
  .service-label>span { max-width: none; padding-right: 0; font-size: .8125rem; }
  .hero .logo-ribbon { min-height: 5.5rem; margin-top: 1.75rem; }
  .hero-memphis--zig { top: 7%; left: 5%; width: 2.5rem; }
  .hero-memphis--dots { right: 4%; width: 2.8rem; height: 2.8rem; }
}
@media (max-width: 360px) {
  .hero-note { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: .25rem; }
}

/* Video and its first-frame poster use the same opaque crop, with no extra cover crop. */
.heroine { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: contain; object-position: center bottom; }
.heroine-video { opacity: 0; pointer-events: none; }
.heroine-video.is-ready { opacity: 1; }
.hero-visual.has-motion img.heroine { visibility: hidden; }
.hero-visual { align-self: center; aspect-ratio: 5/3; mix-blend-mode: darken; }
@media(min-width:1101px) {
  .hero-visual { width: 130%; justify-self: end; }
  :lang(ru) .hero-visual { width: 124%; }
  .hero-description { max-width: min(30rem, calc(70% - 1rem)); }
}
@media(min-width:761px) and (max-width:1100px) {
  .hero-visual { width: 130%; justify-self: end; aspect-ratio: 3/2; }
  .hero-description { max-width: 70%; }
  .hero-note { top: 0; right: 0; width: 33%; font-size: 1.1rem; }
}
@media(max-width:760px) { .hero-visual { height: auto; max-height: none; aspect-ratio: 17/12; align-self: stretch; } }

/* Service colors describe the offer: products / agents / consulting / adoption. */
.service-story { --accent: #e5007d; --paper: #111115; --text: #fff; --muted: #c9c9d1; position: relative; isolation: isolate; padding: clamp(3.5rem, 6vw, 6rem) var(--hero-pad); background: var(--paper); color: var(--text); font-weight: 400; overflow: clip; scroll-margin-top: 4.5rem; }
.service-inner { position: relative; max-width: 1392px; margin-inline: auto; }
#implementation { scroll-margin-top: 6rem; }
.service-story h2, .service-story h3, .service-story h4 { margin: 0; color: inherit; }
.service-story h2 { font-size: clamp(2.3rem, 4.1vw, 4rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: initial; }
.service-story h3 { font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.2; letter-spacing: -.02em; }
.service-story h4 { font-family: var(--body); font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.service-story p { margin: 0; }
.service-story svg { flex-shrink: 0; }
.service-story img { display: block; width: 100%; height: auto; }
.service-story .service-lead { max-width: 51rem; margin-top: 1.25rem; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--muted); }
.service-cta { display: inline-flex; justify-content: center; align-items: center; gap: 1rem; min-height: 3.5rem; padding: .85rem 1.5rem; border-radius: .4rem; background: var(--accent); color: #111115; font-weight: 600; line-height: 1.25; text-decoration: none; }
.service-cta svg { width: 1.5rem; height: 1.5rem; }
.service-products .service-cta { color: #fff; }
.service-cta:focus-visible, .service-text-link:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }

/* Products: the figure and held sign form one illustration; copy stays live. */
.product-showcase { display: grid; grid-template-columns: 1.08fr 1fr; gap: 2rem; align-items: start; }
.product-copy-column { min-width: 0; position: relative; z-index: 2; }
.products-heading h2 { max-width: 47rem; }
.products-heading .service-lead { max-width: 38rem; }
.product-ribbons { position: absolute; z-index: -1; inset: 0 -10%; width: 120%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 60; }
.software-stage { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.software-window { position: relative; overflow: hidden; border: 3px solid var(--window-color, #e5007d); border-radius: .55rem; background:var(--surface-light); color: #111115; padding: 2.5rem 1.2rem 1.1rem; }
.window-top { display: flex; align-items: center; gap: .35rem; position: absolute; top: 0; left: 0; right: 0; height: 1.6rem; padding: 0 .65rem; background: var(--window-color, #e5007d); }
.window-top i { width: .35rem; height: .35rem; background:var(--surface-light); border-radius: 50%; }
.software-window h3 { font-size: clamp(1.15rem, 1.8vw, 1.7rem); }
.software-window p { margin-top: .65rem; font-size: 1rem; line-height: 1.45; }
.window-dashboard { --window-color: #00ccea; transform: rotate(-2deg); }
.dashboard-plot { display: grid; grid-template-columns: 1fr 6rem; gap: 1.5rem; align-items: center; margin-top: 1.25rem; }
.plot-bars { display: flex; align-items: flex-end; gap: .45rem; height: 6rem; border-bottom: 1px solid #b8b8bf; }
.plot-bars i { flex: 1; height: var(--bar); min-width: 0; background: #e5007d; border-radius: .1rem .1rem 0 0; }
.plot-bars i:nth-child(even) { background: #00bcd6; }
.plot-donut { width: 6rem; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#e5007d 0 24%, #ffeb29 24% 58%, #00ccea 58%); position: relative; }
.plot-donut::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background:var(--surface-light); }
.window-shop { width: 78%; margin-left: 10%; transform: rotate(2deg); --window-color: #ffeb29; }
.shop-shelf { margin-top: .8rem; padding: .5rem; background: #f3f3f5; border-radius: .3rem; }
.shop-shelf svg { width: 100%; height: 4.2rem; }
.window-shop p { color: #55555e; font-size: .875rem; }
.product-scene { position: relative; display: flow-root; margin: 0 -4% 0 -4%; }
.product-art { position: relative; display: block; width: 100%; pointer-events: none; }
.product-apps { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; margin-top: 3rem; position: relative; z-index: 3; }
.window-games { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 1.5rem; padding: 2.6rem 1.5rem 1.5rem; }
.window-games h3 { font-size: clamp(1.5rem, 2.25vw, 2.3rem); }
/* Нижний ряд окон: маркетинг и CDP. Мини-сцены - inline SVG на тех же токенах кита. */
.window-marketing { --window-color: #ffeb29; }
.window-cdp { --window-color: #00ccea; }
.window-marketing, .window-cdp { display: flex; flex-direction: column; padding: 2.6rem 1.5rem 1.5rem; }
.window-marketing>p, .window-cdp>p { margin-bottom: auto; }
.marketing-plan, .cdp-map { margin-top: 1rem; padding: .6rem; background: #f3f3f5; border-radius: .3rem; }
.marketing-plan svg, .cdp-map svg { display: block; width: 100%; height: auto; }

.product-bottom { display: flex; justify-content: flex-end; margin-top: 2rem; }
.system[hidden] { display: none; }
.service-team { --section-pad: clamp(3.5rem, 6vw, 6rem); }
.team-infrastructure { position: relative; padding-bottom: 6rem; }
.infrastructure-memphis { inset: auto calc(-1 * var(--hero-pad)) calc(-1 * var(--section-pad)); height: 7rem; overflow: hidden; }
.infrastructure-memphis::after { content: ""; position: absolute; inset: auto 0 0; height: .75rem; background: linear-gradient(#e5007d 0 0) 0 100%/100% 1px no-repeat, repeating-linear-gradient(90deg,#e5007d 0 1.7rem,transparent 1.7rem 3.4rem) 0 0/100% 1px no-repeat; }
.infrastructure-memphis .mem-d { bottom: 2.2rem; left: 4%; width: 11rem; height: .85rem; color: #bca800; transform: rotate(-3.5deg); }
.infrastructure-memphis .mem-e { bottom: -1.5rem; right: 3%; width: 5.6rem; height: 5.6rem; color: #00b4cf; }
.infrastructure-memphis .mem-f { bottom: 4.1rem; right: calc(3% + 6.2rem); width: 2rem; height: 1rem; color: #e5007d; transform: rotate(-118deg); }
@media (max-width: 1000px) and (min-width: 761px) {
  .product-showcase { gap: 1rem; }
  .software-window { padding-inline: .9rem; }
  .window-shop { width: 90%; margin-left: 4%; }
  .software-window p { font-size: .875rem; }
  .window-games { gap: 1rem; }

}
@media (max-width: 760px) {
  .service-team { --section-pad: 3.25rem; }
  .product-showcase { display: flex; flex-direction: column; gap: 1.5rem; }
  .product-copy-column { display: contents; }
  .products-heading { order: 0; }
  .product-scene { order: 1; width: 100%; max-width: 32rem; margin: 0 auto; }
  .software-stage { order: 2; width: 100%; margin-top: 1rem; gap: 1.25rem; }
  .software-window { padding: 2.3rem 1rem 1rem; }
  .software-window p { font-size: .9375rem; }
  .window-shop { width: 91%; margin-left: 7%; }
  .product-apps { grid-template-columns: 1fr; margin-top: 1.75rem; gap: 1.25rem; }
  .window-games { grid-template-columns: 1fr; gap: 1.25rem; padding: 2.5rem 1.2rem 1.5rem; }
  .window-games h3 { font-size: 1.6rem; }

  .product-bottom { justify-content: flex-start; }
  .infrastructure-memphis .mem-d { width: 6rem; }
  .infrastructure-memphis .mem-e { width: 4rem; height: 4rem; }
  .infrastructure-memphis .mem-f { right: 5rem; bottom: 3.2rem; }
}

/* Agents: sources, a shared context, useful outputs. */
.service-agents { --accent: #00ccea; --paper: var(--surface-light); --text: #111115; --muted: #55555e; }
.service-agents::before { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: #ddfaff; clip-path: polygon(0 80%, 100% 0, 100% 100%, 0 100%); z-index: -1; }
.service-agents h2 { max-width: 65rem; }
.agent-flow { position: relative; display: grid; grid-template-columns: 1fr 1.6fr 1.15fr; align-items: center; gap: 3rem; margin-top: 3rem; }
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.flow-wires path { fill: none; stroke: #00aec8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.flow-column { display: grid; gap: .75rem; position: relative; z-index: 1; }
.service-story .diagram-label { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .25rem; color: #55555e; }
.flow-node { display: flex; gap: .9rem; align-items: center; min-height: 4.5rem; padding: 1rem; background:var(--surface-light); border: 1px solid #dddde3; border-radius: .4rem; font-size: clamp(.95rem, 1.35vw, 1.2rem); font-weight: 600; line-height: 1.25; }
.flow-node svg { width: 2rem; height: 2rem; color: #007b90; }
.agent-hub { position: relative; z-index: 1; align-self: end; min-width: 0; padding-top: 1.5rem; }
.hub-disc { position: absolute; top: 0; left: -6%; width: 112%; aspect-ratio: 1; border-radius: 50%; background: #00ccea; z-index: -1; }
.agent-art { display: block; width: 115%; max-width: none; margin-left: -7%; }
.agent-hub h3 { position: relative; margin: -2rem auto 0; padding: 1rem; background:var(--surface-light); border: 1px solid #111115; width: max-content; max-width: 100%; border-radius: .3rem; text-align: center; font-size: 1.2rem; }
.voice-label { position: absolute; right: -1rem; top: 8%; font-size: .7rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.voice-bars { display: flex; gap: 3px; height: 2.5rem; align-items: center; }
.voice-bars i { width: 4px; height: 1.25rem; background:var(--surface-light); border-radius: 2px; }
.flow-results { align-self: center; }
.human-approval { display: flex; align-items: center; gap: .65rem; font-size: .875rem; line-height: 1.35; padding: .5rem 0; }
.human-approval svg { width: 1.5rem; height: 1.5rem; }
.agent-context { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; align-items: center; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid #11111520; }
.agent-context h3 { display: flex; align-items: center; gap: .6rem; font-family: var(--body); font-weight: 600; font-size: 1.1rem; }
.agent-context h3 svg { width: 1.5rem; height: 1.5rem; }
.agent-context p { margin-top: .6rem; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.service-agents .service-cta, .service-team .service-cta { background: #111115; color: #fff; }

/* Consulting: a working process map and concrete deliverables. */
.service-consulting { --accent: #ffeb29; }

/* Adoption: practical work, a ready interface and the infrastructure underneath. */
.service-team { --accent: #fff; --paper: var(--surface-light); --text: #111115; --muted: #55555e; }
.service-team h2 { max-width: 59rem; }
.team-infrastructure { margin-top: 2.5rem; border-top: 2px solid #111115; padding-top: 1.75rem; }
.infrastructure-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.infrastructure-heading h3 { font-size: 1.5rem; }
.infrastructure-heading p { font-size: .875rem; color: var(--muted); }
.infrastructure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
.infrastructure-grid article>svg { width: 2rem; height: 2rem; margin-bottom: .75rem; }
.infrastructure-grid h4 { font-size: 1.2rem; }
.infrastructure-grid p { color: var(--muted); font-size: .9375rem; line-height: 1.5; margin-top: .6rem; }
.service-text-link { display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 600; text-underline-offset: .25em; margin-top: 1.25rem; }
.service-text-link svg { width: 1.3rem; height: 1.3rem; }

@media (hover: hover) and (pointer: fine) {
  .service-cta:hover { filter: brightness(.9); }
}
@media (prefers-reduced-motion: no-preference) {
  .service-cta { transition: filter 180ms ease-out; }

}
@media (max-width: 1100px) {
  .service-story h2 { font-size: 3.6vw; }
  .agent-flow { gap: 1.5rem; grid-template-columns: 1fr 1.4fr 1.1fr; }
  .flow-node { padding: .8rem; gap: .6rem; font-size: 1rem; }
  .agent-context { grid-template-columns: 1fr 1fr; }
  .agent-context .service-cta { justify-self: start; }
  .infrastructure-heading { display: block; }
  .infrastructure-heading p { margin-top: .6rem; }
}
@media (max-width: 760px) {
  .consulting-bottom { display: flex; flex-direction: column; align-items: flex-start; margin-top: 2rem; gap: 1.5rem; }
  .service-story { padding-block: 3.25rem; }
  .service-story h2 { font-size: clamp(1.8rem, 7.2vw, 3rem); line-height: 1.1; }
  .service-story .service-lead { margin-top: 1rem; }
  .agent-flow { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }

  .flow-column { grid-template-columns: 1fr 1fr; gap: .5rem; position: relative; }
  .diagram-label { grid-column: 1 / -1; }
  .flow-node { min-height: 3.75rem; gap: .55rem; font-size: .9375rem; padding: .8rem; }
  .flow-node svg { width: 1.5rem; height: 1.5rem; }
  .agent-hub { width: 75%; max-width: 22rem; margin: .5rem auto; }
  .hub-disc { width: 108%; left: -4%; }
  .agent-art { width: 115%; }
  .voice-label { top: 6%; right: -1.5rem; }
  .agent-hub h3 { font-size: 1.125rem; padding: .85rem; }
  .flow-results { grid-template-columns: 1fr; }
  .flow-results .flow-node { min-height: 3.25rem; }
  .human-approval { font-size: .875rem; padding-top: .75rem; }
  .agent-context { grid-template-columns: 1fr; margin-top: 1.5rem; gap: 1.5rem; }
  .team-infrastructure { margin-top: 1rem; }
  .infrastructure-heading h3 { font-size: 1.4rem; }
  .infrastructure-grid { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 1.5rem; }
  .infrastructure-grid article { display: grid; grid-template-columns: 2rem 1fr; gap: 0 .8rem; }
  .infrastructure-grid article>svg { grid-row: 1 / 3; width: 1.75rem; height: 1.75rem; margin-top: .1rem; }
  .infrastructure-grid p { grid-column: 2; }
}
@media (max-width: 380px) {
  .flow-node { gap: .4rem; padding: .6rem; font-size: .875rem; }
  .flow-node svg { width: 1.3rem; height: 1.3rem; }
}

/* Approved consulting composition: portrait, process board, deliverables. */
.consulting-intro { position: relative; display: grid; grid-template-columns: .95fr 1.15fr; align-items: center; gap: 2.5rem; }
.consulting-portrait { position: relative; min-width: 0; align-self: end; }
.consulting-sun { position: absolute; width: 88%; aspect-ratio: 1; top: 14%; left: -25%; background: #ffeb29; border-radius: 50%; z-index: -1; }
.consultant-art { display: block; position: relative; width: 115%; margin-left: -9%; margin-bottom: -13%; }
.story-zig { position: absolute; width: 5rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 3; left: 0; top: 3%; }
.consulting-portrait .story-zig { z-index: 2; left: -2%; top: 6%; }
.consulting-copy { position: relative; z-index: 2; padding-bottom: 2rem; }
.service-consulting h2 { color: #ffeb29; font-size: clamp(2.25rem, 3.8vw, 3.65rem); }
.consulting-copy .service-cta { margin-top: 1.5rem; }
.consulting-board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: -1.5rem; padding: 1rem; background: #1b1c21; border-radius: .75rem; transform: rotate(-2deg); }
.board-lane { min-width: 0; padding: 1.25rem; border: 1px solid #ffffff35; border-radius: .45rem; position: relative; }
.board-lane h3 { font-size: 1.35rem; }
.board-note { display: inline-block; padding: .45rem .8rem; background: #ffeb29; color: #111115; font-weight: 600; font-size: 1rem; transform: rotate(-4deg); }
.board-caption { font-size: .875rem; color: #d2d2da; }
.board-data { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem .8rem; margin-block: 1.25rem; }
.board-data svg { grid-row: 1 / 3; width: 3.5rem; height: 3.5rem; color: #ffeb29; }
.board-data span { font-size: .875rem; line-height: 1.35; }
.consulting-deliverables { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; position: relative; z-index: 2; margin-top: 2rem; padding: 1.5rem; background:var(--surface-light); color: #111115; border-radius: .5rem; }
.consulting-deliverables article { display: flex; align-items: flex-start; gap: 1rem; }
.consulting-deliverables article>svg { width: 2.25rem; height: 2.25rem; }
.consulting-deliverables article:first-child>svg { color: #d00070; }
.consulting-deliverables article:nth-child(2)>svg { color: #007f94; }
.consulting-deliverables h3 { font-size: 1.1rem; }.consulting-deliverables p { margin-top: .5rem; font-size: .875rem; line-height: 1.45; color: #55555e; }
.consulting-standalone { color: #c9c9d1; max-width: 49rem; margin-top: 1.25rem !important; font-size: .9375rem; line-height: 1.5; }

/* Team: the three approved people and a native document board. */
.team-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.team-heading h2 { max-width: 53rem; }.team-heading .service-lead { max-width: 46rem; }.team-heading .service-cta { flex-shrink: 0; margin-top: .5rem; }
.team-practice-scene { position: relative; margin: 2.5rem -2% 0; padding-top: 2rem; }
.team-practice-scene .story-zig { z-index: 2; top: 15%; left: -2%; color: #111115; }
.team-ribbons { position: absolute; z-index: 0; bottom: 0; width: 110%; height: 80%; left: -5%; fill: none; stroke: #e5007d; stroke-width: 115; }
.team-ribbons path+path { stroke: #00ccea; stroke-width: 130; }
.team-people { position: relative; z-index: 2; display: block; width: 106%; max-width: none; margin-left: -3%; pointer-events: none; }
.practice-board { position: absolute; z-index: 1; top: 0; left: 35%; right: 13%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; transform: rotate(-4deg); }
.practice-board article { min-width: 0; }.practice-board h3 { font-size: clamp(.8rem,1.45vw,1.3rem); padding-bottom: .7rem; margin-bottom: .5rem; position: relative; }
.practice-board h3::after { content: ''; position: absolute; height: 4px; bottom: 0; left: 0; width: 70%; background: #00ccea; }.practice-board article:nth-child(2) h3::after { background: #ffeb29; }.practice-board article:nth-child(3) h3::after { background: #e5007d; }
.practice-sheet { min-height: 12rem; padding: .8rem; background:var(--surface-light); border: 1px solid #dcdcE3; box-shadow: 0 .4rem 1rem #11111508; }
.practice-sheet strong { font-size: .8rem; font-weight: 600; line-height: 1.3; display: block; }.paper-lines { display: block; width: 100%; height: 5rem; margin-top: 1rem; background: repeating-linear-gradient(to bottom,#e4e4e8 0 4px,transparent 4px 13px); clip-path: polygon(0 0,100% 0,100% 50%,80% 50%,80% 75%,65% 75%,65% 100%,0 100%); }
.practice-sheet ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }.practice-sheet li { display: flex; align-items: center; gap: .4rem; font-size: .7rem; line-height: 1.25; }.practice-sheet li svg { width: 1rem; height: 1rem; }
.practice-inspect { position: relative; }.practice-inspect>svg { width: 4rem; height: 4rem; fill: none; stroke: #111115; stroke-width: 3; position: absolute; left: 25%; top: 25%; }
.team-method { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; border-top: 1px solid #11111525; padding-top: 2rem; margin-top: 2rem; }
.people-statement h3 { font-size: clamp(1.5rem,2.3vw,2.15rem); line-height: 1.17; }.people-statement h3 span { color: #cc006e; }.people-statement p { margin-top: 1rem; font-size: .9375rem; line-height: 1.5; color: #55555e; }
.team-practice { display: grid; gap: 1.5rem; align-content: start; }.team-practice article { display: flex; align-items: flex-start; gap: .85rem; }.team-practice article>svg { width: 2rem; height: 2rem; }.team-practice h3 { font-family: var(--body); font-weight: 600; font-size: 1.2rem; }.team-practice p { margin-top: .5rem; font-size: .9375rem; color: #55555e; line-height: 1.5; }
.service-agents .service-cta:focus-visible,.service-team .service-cta:focus-visible { outline-color: #111115; }
.service-story ::selection { background: #ffeb29; color: #111115; }
.service-story a { touch-action: manipulation; }

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { .software-stage .software-window:hover { transform: rotate(0); } }
@media (prefers-reduced-motion:no-preference) {
 .service-cta,.hero-cta,.home-header-cta { transition: transform 160ms cubic-bezier(.23,1,.32,1),background 150ms ease; }
 .service-cta:active,.hero-cta:active,.home-header-cta:active { transform: scale(.96); }
 .software-stage .software-window { transition: transform 240ms cubic-bezier(.16,1,.3,1); }
 .software-stage.is-in .plot-bars i { transform-origin: bottom; animation: chart-enter 600ms cubic-bezier(.23,1,.32,1) both; animation-delay: calc(var(--n)*30ms); }
 .agent-flow.is-in .voice-bars i { animation: voice-once 1.4s ease-in-out 2 alternate; animation-delay: calc(var(--n)*70ms); }

}
@keyframes chart-enter { from { transform: scaleY(.12); } to { transform: scaleY(1); } }
@keyframes voice-once { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1.5); } }

.voice-bars i:nth-child(2n) { height: 2rem; }.voice-bars i:nth-child(3n) { height: 2.5rem; }
@media (max-width:1100px) {
 .consulting-intro { gap: 1rem; }.consulting-copy { padding-bottom: 1rem; }.service-consulting h2 { font-size: 3.6vw; }
 .board-lane { padding: 1rem; }.board-lane h3 { font-size: 1.2rem; }.consulting-deliverables { gap: 1rem; padding: 1.25rem; }.consulting-deliverables article { gap: .65rem; }
 .team-heading { display: block; }.team-heading .service-cta { margin-top: 1.25rem; }.practice-sheet { min-height: 10rem; padding: .6rem; }.practice-sheet strong { font-size: .7rem; }
}
@media (max-width:760px) {
 .service-consulting h2 { font-size: clamp(1.8rem,7.2vw,3rem); }
 .consulting-intro { display: flex; flex-direction: column-reverse; gap: 1rem; }.consulting-copy { padding-bottom: 0; }.consulting-portrait { width: 85%; align-self: start; margin-top: .5rem; }.consultant-art { width: 108%; margin-left: -5%; margin-bottom: -10%; }
 .consulting-board { grid-template-columns: 1fr; transform: none; margin-top: -1rem; padding: .6rem; gap: .6rem; }.board-lane { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .5rem 1rem; padding: 1rem; }.board-lane h3 { grid-column: 1 / 3; font-size: 1.2rem; } .consulting-deliverables { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1rem; }.consulting-deliverables article { gap: 1rem; }.consulting-deliverables article>svg { width: 2rem; height: 2rem; }.consulting-deliverables h3 { font-size: 1.125rem; }
 .team-practice-scene { margin: 2rem calc(-1 * var(--hero-pad)) 0; padding-top: 2rem; }.team-practice-scene .story-zig { width: 2.5rem; height: 1.5rem; top: 0; left: 2%; }
 .team-people { width: 106%; margin-left: -3%; }.team-ribbons { top: auto; bottom: 0; height: 70%; }
 /* The sample documents form one backdrop with the people, not another content stack. */
 .practice-board { position: absolute; top: 0; left: 34%; right: 12%; width: auto; margin: 0; transform: rotate(-5deg); gap: .3rem; z-index: 1; grid-template-columns: repeat(3,minmax(0,1fr)); }
 .practice-board h3 { font-size: clamp(.58rem,2vw,.875rem); padding-bottom: .3rem; margin-bottom: .35rem; white-space: nowrap; }
 .practice-board h3::after { height: 3px; width: 80%; }
 .practice-sheet { padding: .4rem; min-height: 0; height: clamp(5rem,18vw,8rem); box-shadow: none; }
 .practice-sheet strong { display: none; }
 .practice-sheet .paper-lines { height: 80%; margin-top: .3rem; background-size: auto 10px; }
 .practice-sheet ul { margin: .25rem 0 0; gap: .45rem; }
 .practice-sheet li { font-size: 0; gap: .25rem; }
 .practice-sheet li::after { content: ''; width: 65%; height: 3px; background: #c7c7ce; }
 .practice-sheet li svg { width: .75rem; height: .75rem; flex: 0 0 .75rem; }
 .practice-inspect>svg { width: 70%; height: auto; left: 15%; top: 20%; }
 .team-method { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 1.75rem; padding-top: 1.75rem; }.people-statement h3 { font-size: 1.6rem; }.team-infrastructure { margin-top: 2rem; }
}

/* Text is aligned inside the blank face of the painted placard. */
.match-preview { width: 100%; max-width: 22rem; margin: 0 auto; padding: .9rem; border-radius: .5rem; background: #111115; transform: rotate(3deg); }
.match-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.match-tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: .2rem; background: #25252c; }
.match-tile svg { display: block; width: 85%; height: 85%; }
.match-circle { fill: #00ccea; }.match-diamond { fill: #e5007d; }.match-star { fill: #ffeb29; }
.match-tile.is-match { background: #ffeb292b; outline: 1px solid #ffeb29; outline-offset: -1px; }
@media(prefers-reduced-motion:no-preference) { .match-preview.is-in .is-match svg { animation: match-pulse 650ms ease-in-out 2; } }
@keyframes match-pulse { 50% { transform: scale(.68); opacity: .55; } }

/* The white painted window holds live type and crisp channel graphics. */
.product-scene { container-type: inline-size; }
.held-card-copy { position: absolute; left: 19%; right: 19%; top: 56.5%; bottom: 10.5%; display: flex; flex-direction: column; justify-content: center; gap: clamp(.25rem,1.5cqi,.6rem); color: #111115; }
.held-card-copy h3 { font-size: clamp(.95rem,4.2cqi,1.7rem); }
.held-card-copy p { margin: 0; font-size: clamp(.8rem,3.1cqi,1.125rem); line-height: 1.35; }
/* Карточка в руках героини: логотипы систем, с которыми интегрируемся, и связь с продуктом. */
.integration-stack { margin-top: .1rem; }
.integration-logos { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.2rem,1.1cqi,.5rem); margin: 0; padding: 0; list-style: none; }
.integration-logos li { display: grid; place-items: center; padding: clamp(.15rem,.9cqi,.4rem); background: #f3f3f5; border-radius: .25rem; }
.integration-logos img { display: block; width: auto; max-width: 100%; height: clamp(.6rem,2.5cqi,1.05rem); }
.integration-wires { display: block; width: 55%; height: clamp(.4rem,1.7cqi,.7rem); margin: clamp(.1rem,.6cqi,.3rem) auto 0; fill: none; stroke: #b8b8bf; stroke-width: 3; vector-effect: non-scaling-stroke; }
.integration-node { display: block; width: fit-content; margin: 0 auto; padding: .15rem .5rem; background: #111115; color: #fff; border-radius: .25rem; font-size: clamp(.55rem,2.1cqi,.8rem); font-weight: 600; line-height: 1.3; }
.integration-list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* на узких экранах «экран» карточки в руках героини даёт ~250x125px: шесть вордмарков
   там нечитаемы и вылезают за рамку, поэтому вместо сетки показываем перечень текстом */
@media (max-width:1100px) {
 .integration-logos,.integration-wires,.integration-node { display: none; }
 .integration-list { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; color: #55555e; }
 .held-card-copy { gap: .2rem; }
 .held-card-copy h3 { font-size: clamp(.8rem,4.2cqi,1.7rem); }
 .held-card-copy p { font-size: clamp(.66rem,3.1cqi,1.125rem); }
}
/* иконки каналов переехали в окно AI-маркетинга, cqi-контейнера там нет */
.marketing-channels { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.marketing-channels>span { width: 2.1rem; aspect-ratio: 1; flex: 0 0 auto; }
.marketing-channels svg { width: 100%; height: 100%; }
.channel-instagram { color: #e5007d; }
.product-apps { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
.window-games { grid-template-columns: 1fr; align-content: start; }
.games-copy { min-width: 0; }
.match-preview { max-width: 19rem; margin-block: .75rem; }
.window-bots { padding: 2.6rem 1.5rem 1.5rem; }
.telegram-preview { position: relative; width: min(100%,22rem); margin: 1.5rem auto 0; padding: 0 2.25rem .5rem; }
.promo-phone { position: relative; padding: 1.6rem .7rem 1.3rem; background: #f4f5f8; border: 5px solid #111115; border-radius: 1.8rem; transform: rotate(-3deg); box-shadow: .5rem .65rem 0 #ffe0ef; }
.phone-camera { position: absolute; width: 2.5rem; height: .3rem; background: #111115; border-radius: 1rem; top: .55rem; left: calc(50% - 1.25rem); }
.phone-chat-heading { display: flex; align-items: center; gap: .4rem; margin-bottom: .85rem; font-size: .85rem; }
.phone-chat-heading svg { width: 1.6rem; height: 1.6rem; }
.phone-bubble { padding: .55rem .7rem; margin-top: .5rem; background:var(--surface-light); border-radius: .55rem .55rem .55rem 0; font-size: .75rem; line-height: 1.3; max-width: 92%; }
.phone-bubble--user { margin-left: auto; background: #d7f7ff; border-radius: .55rem .55rem 0 .55rem; }
.mini-app-card { margin: .65rem 0 0; padding: .55rem; border: 1px solid #dddde3; border-radius: .6rem; background:var(--surface-light); }
.mini-app-art { background: #e5007d; border-radius: .3rem; height: 4.5rem; overflow: hidden; }
.mini-app-art svg { display: block; height: 100%; width: 100%; }
.mini-app-card strong { display: block; margin-top: .5rem; font-size: .8125rem; }
.mini-app-button { margin-top: .5rem; padding: .4rem .3rem; color: #fff; background: #111115; text-align: center; border-radius: .3rem; font-size: .7rem; }
.phone-home { width: 3rem; height: .2rem; margin: 1rem auto -.6rem; background: #111115; border-radius: 1rem; }
.telegram-orbit { position: absolute; width: 3.25rem; height: 3.25rem; right: 0; top: 30%; transform: rotate(13deg); }
.telegram-orbit svg { width: 100%; height: 100%; }
.board-process { margin: 1rem 0; }
.board-process svg { display: block; width: 100%; height: auto; }
.board-integration { position: relative; margin: 1rem 0; }
.board-integration>svg { display: block; width: 100%; height: auto; }
.integration-names { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; text-align: center; font-size: .75rem; font-weight: 600; }
.board-data { min-height: 6.6rem; }
.hero-memphis,.story-zig,.telegram-orbit { animation: mem-breathe 13s ease-in-out infinite; }
.hero-memphis--dots,.team-practice-scene .story-zig { animation-name: mem-breathe-b; animation-duration: 17s; animation-delay: -5s; }
.infrastructure-memphis .mem-e { --mem-path: mem-breathe-b; --mem-delay: -4s; --mem-dur: 16s; }
.infrastructure-memphis .mem-f { --mem-delay: -8s; --mem-dur: 14s; }
.is-offscreen:is(.hero-visual,.service-story) :is(.hero-memphis,.story-zig,.telegram-orbit),.is-offscreen:is(.hero-memphis,.story-zig,.telegram-orbit) { animation-play-state: paused; }
@media (max-width:1100px) and (min-width:761px) {
 .board-lane { padding: .8rem; }
}
@media (max-width:760px) {
 .product-apps { grid-template-columns: 1fr; }
 .window-bots { padding: 2.4rem 1.2rem 1.5rem; }
 .match-preview { width: 85%; }
 .marketing-channels { gap: .5rem; margin-top: .85rem; }
 .marketing-channels>span { width: 1.9rem; }
 .board-lane { display: block; }
 .board-process,.board-integration { width: 100%; margin: .8rem 0; }
 .board-data { min-height: 5rem; }
 .team-practice-scene .story-zig { top: -1rem; left: 38%; }
}
@media (prefers-reduced-motion:reduce) {
 .hero-memphis,.story-zig,.telegram-orbit { animation: none; }
}

@media(max-width:760px){.product-ribbons{top:22rem;height:calc(100% - 22rem)}}
.voice-bars i { background: #111115; }

/* A separate executive assistant, with the approved phone portrait and live chat. */
.executive-assistant { --paper: var(--surface-light); --text: #111115; --muted: #4b4b55; padding-block: 2.5rem 0; }
.executive-grid { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; min-height: 45rem; }
.executive-copy { position: relative; z-index: 3; align-self: start; padding-top: 5.5rem; padding-bottom: 3rem; }
.executive-kicker { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; color: #cc006e; margin-bottom: 1.2rem !important; }
.executive-copy h2 { max-width: 40rem; font-size: clamp(2.4rem,4.6vw,4.5rem); }
.executive-copy .service-lead { max-width: 31rem; }
.executive-copy .service-cta { background: #111115; color: #fff; margin-top: 1.8rem; }
.executive-visual { position: relative; align-self: end; min-height: 45rem; }
.executive-ribbons { position: absolute; inset: 0 -20% 0 -10%; width: 130%; height: 100%; fill: none; overflow: visible; }
.executive-art { position: absolute; bottom: 0; right: -8%; width: auto; height: 100%; aspect-ratio: 1122/1402; }
.executive-visual>.story-zig { top: 6%; left: 2%; width: 4.5rem; z-index: 1; }
.executive-dots { top: 20%; right: 0; width: 4rem; height: 4rem; color: #111115; }
.executive-chat { position: absolute; z-index: 2; left: -23%; bottom: 8%; width: 59%; padding: 1.25rem; background:var(--surface-light); border: 2px solid #111115; border-radius: 1rem; box-shadow: 8px 9px 0 #111115, 13px 14px 0 #00ccea; transform: perspective(900px) rotateY(-8deg) rotateZ(-3deg); transform-origin: center; }
.executive-chat-header { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin-bottom: 1rem; }
.executive-chat-header svg { width: 1.4rem; height: 1.4rem; }
.executive-message { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .65rem; margin-top: .85rem; align-items: start; }
.chat-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #e5007d; color: #fff; }
.chat-avatar svg { width: 1.3rem; height: 1.3rem; }
.chat-avatar--assistant { background: #00ccea; color: #111115; }
.executive-message>p,.executive-message>div { padding: .7rem; background: #f3f3f5; border-radius: .65rem; font-size: .875rem; line-height: 1.35; }
.executive-document { display: flex; gap: .5rem; align-items: center; padding: .6rem; background:var(--surface-light); margin-top: .65rem; border-radius: .35rem; }
.executive-document>svg { width: 1.8rem; height: 1.8rem; }
.executive-document strong,.executive-document span { display: block; font-size: .7rem; }
.executive-document span { color: #55555e; margin-top: .2rem; }
.executive-approval { display: inline-block; margin-top: 1rem !important; padding: .55rem .65rem; font-size: .75rem; line-height: 1.3; font-weight: 600; background: #ffeb29; border-radius: .4rem; }
.executive-assistant+.service-team { border-top: 1px solid #11111518; }
/* Заголовок переехавшего таймлайна: .service-story h2 идёт в сборке после hero.css, поэтому
   исходный размер возвращаем отсюда. */
.service-team .hero-process h2 { font-size: clamp(1.65rem, 2.5vw, 2.3rem); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 1.2rem; }
@media (max-width: 760px) { .service-team .hero-process h2 { font-size: 1.6rem; margin-bottom: 1rem; } }
/* Плашка про Iva под основным CTA. Кнопка - фирменная маджента как у .hero-cta:
   белый текст на var(--hero-magenta) даёт 4.54:1, тёмный #111115 на ней только 4.15:1.
   Обводка фокуса тёмная: currentColor здесь белый и на светлом фоне не виден. */
.service-cta--brand { background: var(--hero-magenta); color: #fff; }
.executive-copy .service-cta--brand { background: var(--hero-magenta); color: #fff; margin-top: 0; }
.service-cta--brand:focus-visible { outline-color: #111115; }
.iva-card { max-width: 26rem; margin-top: 1.8rem; }
.iva-card p { margin: 0 0 1.1rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.iva-cta { gap: 1.1rem; min-height: 4rem; padding: 1rem 1.9rem; font-size: 1.125rem; }
/* логотип Telegram внутри кнопки: крупнее обычной иконки и не красится currentColor */
.iva-cta .iva-tg { width: 2.25rem; height: 2.25rem; }
@media(max-width:560px) {
 .iva-card { margin-top: 1.5rem; }
 .iva-card p { font-size: 1rem; margin-bottom: .9rem; }
 .iva-cta { gap: .8rem; min-height: 3.5rem; padding: .85rem 1.3rem; font-size: 1rem; }
 .iva-cta .iva-tg { width: 1.85rem; height: 1.85rem; }
}
@media(prefers-reduced-motion:no-preference) { .executive-chat { animation: mem-breathe 15s ease-in-out infinite; } }
.executive-assistant.is-offscreen :is(.executive-chat,.mem) { animation-play-state: paused; }
@media(min-width:761px) and (max-width:1100px) {
 .executive-grid,.executive-visual { min-height: 39rem; }
 .executive-copy { padding-top: 3rem; }
 .executive-chat { width: 75%; left: -26%; padding: .8rem; bottom: 3%; }
 .executive-art { width: auto; right: -16%; }
 .executive-copy .service-lead { max-width: 21rem; }
}
@media(max-width:1000px) {
 .executive-assistant { padding-top: 3.25rem; }
 .executive-grid { display: block; min-height: 0; }
 .executive-copy { padding: 0; }
 .executive-copy h2 { font-size: clamp(2rem,8.2vw,3.6rem); }
 .executive-copy .service-lead { max-width: 30rem; }
 .executive-visual { margin: 1.5rem calc(-1 * var(--hero-pad)) 0; min-height: 0; display: flex; flex-direction: column; padding: 0; }
 .executive-art { position: relative; width: 92%; height: auto; right: auto; bottom: auto; margin-left: auto; }
 .executive-chat { position: relative; left: auto; bottom: auto; width: 84%; max-width: 26rem; margin: -5rem auto 2.5rem; padding: .85rem; }
 .executive-message { grid-template-columns: 1.7rem minmax(0,1fr); gap: .4rem; margin-top: .55rem; }
 .chat-avatar { width: 1.7rem; height: 1.7rem; }
 .executive-message>p,.executive-message>div { padding: .6rem; font-size: .8125rem; }
 .executive-visual>.story-zig { top: 8%; left: 6%; width: 3rem; }
 .executive-dots { right: 3%; top: 12%; width: 3rem; height: 3rem; }
 .executive-ribbons { height: 90%; }
}