/* Flat mirror-glass navigation with one persistent, pill-clipped bottom glow. */
.uxp-liquid-nav{isolation:isolate}
.uxp-nav-glow-host{isolation:isolate;overflow:hidden!important}

.uxp-nav-glow-clip{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block;
  overflow:hidden!important;
  border-radius:inherit;
  pointer-events:none!important;
  contain:paint;
}

.uxp-nav-glow{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:calc(var(--uxp-glow-w,72px) + 54px)!important;
  height:96px!important;
  transform:translate3d(calc(var(--uxp-glow-x,0px) - 27px),36px,0)!important;
  z-index:0!important;
  border-radius:50%;
  overflow:visible;
  opacity:0;
  pointer-events:none!important;
  contain:layout style;
  will-change:transform,width;
  transition:
    transform .64s cubic-bezier(.16,1,.3,1),
    width .64s cubic-bezier(.16,1,.3,1),
    opacity .3s ease,
    filter .28s ease;
}
.uxp-liquid-nav.is-liquid-ready.has-nav-glow .uxp-nav-glow{opacity:1}
.uxp-nav-glow.is-host-switching{transition:none!important}
.uxp-liquid-nav.is-active-hover .uxp-nav-glow{
  animation:uxpNavActiveFlash .9s cubic-bezier(.16,1,.3,1) both;
}
.uxp-nav-glow::before,
.uxp-nav-glow::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
}
.uxp-nav-glow::before{
  inset:-10% -16%;
  background:radial-gradient(62% 78% at 38% 70%,rgba(255,160,90,.96) 0%,rgba(255,105,140,.72) 36%,rgba(205,120,255,.3) 60%,transparent 80%);
  filter:blur(12px);
  animation:uxpNavWarmA 5.5s ease-in-out infinite alternate;
}
.uxp-nav-glow::after{
  inset:-8% -14%;
  background:radial-gradient(58% 76% at 66% 74%,rgba(255,80,165,.92) 0%,rgba(255,150,80,.5) 38%,rgba(140,120,255,.24) 62%,transparent 82%);
  filter:blur(14px);
  animation:uxpNavWarmB 8s ease-in-out infinite alternate;
}
@keyframes uxpNavWarmA{
  0%{opacity:.48;transform:translate3d(-10%,6%,0) scaleY(.78)}
  55%{opacity:1}
  100%{opacity:.88;transform:translate3d(10%,0,0) scaleY(1.14)}
}
@keyframes uxpNavWarmB{
  0%{opacity:.92;transform:translate3d(11%,0,0) scaleY(1.1)}
  100%{opacity:.36;transform:translate3d(-11%,7%,0) scaleY(.8)}
}
@keyframes uxpNavActiveFlash{
  0%{filter:saturate(1.08) brightness(1.04)}
  32%{filter:saturate(1.62) brightness(1.5) drop-shadow(0 8px 11px rgba(255,96,150,.42))}
  100%{filter:saturate(1.32) brightness(1.22) drop-shadow(0 6px 10px rgba(255,96,150,.22))}
}

/* Flat glass: no bevel, cast shadow, spectral rim or surface glare. */
#navfix .pill,
#uxp-casenav .uxp-cn-pill,
#m-nav .m-nav-pill{
  box-sizing:border-box;
  /* Стекло подстраивается под фон: на тёмном — высветление, на светлом —
     затемнение (иначе плашка сливается с фоном). Кейсы переключает замер
     контраста через класс uxp-cn-ink-dark; главная тёмная — светлое стекло. */
  background:rgba(255,255,255,.1)!important;
  border:none!important;
  -webkit-backdrop-filter:blur(18px) saturate(128%)!important;
  backdrop-filter:blur(18px) saturate(128%)!important;
  box-shadow:none!important;
}
#navfix .pill::before,
#navfix .pill::after,
#uxp-casenav .uxp-cn-pill::before,
#uxp-casenav .uxp-cn-pill::after,
#m-nav .m-nav-pill::before,
#m-nav .m-nav-pill::after{content:none!important}
/* наведение не меняет фон плашки */
#navfix .pill:hover,
#uxp-casenav .uxp-cn-pill:hover{background:rgba(255,255,255,.1)!important}
#uxp-casenav.uxp-cn-ink-dark .uxp-cn-pill,
#uxp-casenav.uxp-cn-ink-dark .uxp-cn-pill:hover{background:rgba(2,5,12,.1)!important}

#navfix{isolation:isolate;overflow:visible}
/* Переключатель языка на главной: шрифт как у nav-link, контур как у кейсов */
#navfix .uxp-nav-lang{display:flex;align-items:center;padding:16px;box-sizing:border-box;isolation:isolate}
#navfix .uxp-nav-lang__sel{position:absolute;z-index:2;left:0;top:0;width:0;height:0;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9);pointer-events:none;transition:transform .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1)}
#navfix .uxp-nav-lang-option{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box;border-radius:999px;padding:0 22px;color:#fff;font-family:'Euclid Flex',Arial,sans-serif;font-size:20px;font-weight:400;line-height:36px;text-decoration:none;text-transform:uppercase;white-space:nowrap;opacity:.72;transition:opacity .28s ease}
#navfix .uxp-nav-lang-option[aria-selected="true"],#navfix .uxp-nav-lang-option:hover{opacity:1}

#m-nav .m-nav-lang{
  position:absolute;right:0;bottom:92px;display:flex;align-items:center;height:48px;
  padding:6px;border-radius:999px;box-sizing:border-box;isolation:isolate;pointer-events:auto;
  background:rgba(0,0,0,.18);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%)
}
#m-nav .m-nav-lang .uxp-nav-lang__sel{
  position:absolute;z-index:2;left:0;top:0;width:0;height:0;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9);pointer-events:none;
  transition:transform .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1)
}
#m-nav .m-nav-lang .uxp-nav-lang-option{
  position:relative;z-index:4;display:flex;align-items:center;justify-content:center;
  height:36px;padding:0 12px;border-radius:999px;box-sizing:border-box;
  color:#fff;font:400 12px/36px 'Euclid Flex',Arial,sans-serif;text-decoration:none;
  text-transform:uppercase;white-space:nowrap;opacity:.72
}
#m-nav .m-nav-lang .uxp-nav-lang-option[aria-selected="true"]{opacity:1}

#navfix>.pill{z-index:1}
#navfix .nav-link{
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  color:#fff;
  font-family:'Euclid Flex',Arial,sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:36px;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
}
#navfix .uxp-nav-logo img,
#navfix .uxp-nav-telegram img{position:relative;z-index:4;display:block;pointer-events:none}
#navfix .uxp-nav-logo{display:flex;align-items:center;justify-content:center}
#navfix .uxp-nav-logo img{width:96px;height:50px}
#navfix .uxp-nav-telegram{display:flex;align-items:center;justify-content:center}
#navfix .uxp-nav-telegram img{width:32px;height:32px}

#m-nav .m-nav-pill{position:relative;isolation:isolate;overflow:hidden}
#m-nav .m-nav-pill .uxp-nav-glow{
  width:calc(var(--uxp-glow-w,52px) + 40px)!important;
  transform:translate3d(calc(var(--uxp-glow-x,0px) - 20px),30px,0)!important;
}
#m-nav .m-nav-pill>a{position:relative;z-index:4}

#uxp-casenav{isolation:isolate;overflow:visible}
#uxp-casenav .uxp-nav-glow{transform:translate3d(calc(var(--uxp-glow-x,0px) - 27px),34px,0)!important}
#uxp-casenav .uxp-cn-pill{position:relative;z-index:1;overflow:hidden}
#uxp-casenav .uxp-cn-pill>*:not(.uxp-nav-glow-clip){position:relative;z-index:4}
#uxp-casenav .uxp-cn-main>a{z-index:4}

/* Cases quick navigation: the same flat liquid glass, extending the main nav. */
.uxp-cases-menu-root{overflow:visible!important}
.uxp-cases-menu{
  position:absolute;
  z-index:3;
  box-sizing:border-box;
  width:max-content;
  overflow:hidden;
  padding:18px;
  border:0;
  border-radius:28px;
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
  backdrop-filter:blur(18px) saturate(128%);
  box-shadow:none;
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,-8px,0) scale(.985);
  transform-origin:50% 0;
  transition:
    opacity .25s ease,
    transform .42s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .42s;
}
.uxp-cases-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-14px;
  height:14px;
  pointer-events:auto;
}
.uxp-cases-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0) scale(1);
  transition-delay:0s;
}
.uxp-cases-menu__grid{
  display:grid;
  grid-template-columns:repeat(2,max-content);   /* ширина колонок — по контенту */
  grid-auto-flow:row;
  gap:3px 25px;
}
.uxp-cases-menu__mark{width:20px;height:20px;flex:0 0 auto;display:block}
.uxp-cases-menu__link{display:flex;align-items:center;gap:12px;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-width:0;
  min-height:38px;
  padding:0 9px;
  overflow:hidden;
  border-radius:13px;
  color:#fff;
  font-family:'Euclid Flex',Arial,sans-serif;
  /* типографика — один в один с пунктами навбара (ABOUT/PRINCIPLES/CASES) */
  font-size:20px;
  font-weight:400;
  line-height:36px;
  letter-spacing:normal;
  text-transform:none;
  text-decoration:none;
  white-space:nowrap;
  opacity:0;
  transform:translate3d(0,11px,0);
  transition:
    color .22s ease,
    opacity .34s ease,
    transform .46s cubic-bezier(.16,1,.3,1);
  transition-delay:0s;
}
.uxp-cases-menu.is-open .uxp-cases-menu__link{
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:calc(58ms + var(--uxp-case-index,0) * 32ms);
}
/* hover по строке: она белая, остальные приглушаются. :has гарантирует,
   что приглушение включается ТОЛЬКО когда курсор реально над ссылкой —
   на пустом месте сетки (между строк/колонок) все снова белые.

   Гасим не саму ссылку, а её содержимое: на ссылке висит каскадная
   transition-delay появления (до ~380 мс у последнего пункта), и hover
   через её opacity ждал бы эту задержку. У label и mark задержки нет —
   подсветка включается сразу. Иконка — <img> с зашитым белым, цветом
   её не приглушить, поэтому именно opacity. */
.uxp-cases-menu__label,
.uxp-cases-menu__mark{transition:opacity .1s ease}
.uxp-cases-menu__grid:has(.uxp-cases-menu__link:hover) .uxp-cases-menu__link:not(:hover) .uxp-cases-menu__label,
.uxp-cases-menu__grid:has(.uxp-cases-menu__link:hover) .uxp-cases-menu__link:not(:hover) .uxp-cases-menu__mark{opacity:.42}
.uxp-cases-menu__link:hover,
.uxp-cases-menu__link:focus-visible,
.uxp-cases-menu__link.is-current{color:#fff}
.uxp-cases-menu__link:focus{outline:none}
.uxp-keyboard-nav .uxp-cases-menu__link:focus-visible{
  outline:1.5px solid rgba(255,255,255,.88);
  outline-offset:-3px;
}
#navfix>.uxp-cases-menu{left:144px;top:94px}
#m-nav>.uxp-cases-menu{
  left:50%;
  bottom:calc(100% + 10px);
  width:max-content;
  max-width:calc(100vw - 20px);
  padding:16px;
  border-radius:26px;
  transform:translate3d(-50%,8px,0) scale(.985);
  transform-origin:50% 100%;
}
#m-nav>.uxp-cases-menu.is-open{transform:translate3d(-50%,0,0) scale(1)}
#m-nav>.uxp-cases-menu::before{top:auto;bottom:-14px}
#m-nav .uxp-cases-menu__grid{gap:2px 10px}
#m-nav .uxp-cases-menu__link{min-height:37px;padding:0 7px;font-size:13.5px}

/* The glow is the state indicator; text and icons stay flat. */
.uxp-nav-target.is-active{text-shadow:none!important}
.uxp-nav-target.is-active img,
.uxp-nav-target.is-active svg{filter:none!important}
.uxp-nav-target:focus{outline:none}
.uxp-keyboard-nav .uxp-nav-target:focus-visible{
  outline:1.5px solid rgba(255,255,255,.9);
  outline-offset:-7px;
  border-radius:999px;
}

@media (max-width:768px){
  #uxp-casenav .uxp-nav-glow{transform:translate3d(calc(var(--uxp-glow-x,0px) - 20px),27px,0)!important}
}
@media (prefers-reduced-motion:reduce){
  .uxp-nav-glow{transition-duration:.01ms}
  .uxp-nav-glow::before,.uxp-nav-glow::after{animation:none}
  .uxp-liquid-nav.is-active-hover .uxp-nav-glow{animation:none;filter:saturate(1.25) brightness(1.2)}
  .uxp-cases-menu,.uxp-cases-menu__link,
  .uxp-cases-menu__label,.uxp-cases-menu__mark{transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ===== Единое свечение выпадающего меню =====
   Продолжение шара из пилюли навбара: его нижняя половина показывается
   из верхней кромки панели, затем пятно плывёт за курсором по списку и
   разгорается на ссылках. По-ссылочных вспышек больше нет. */
.uxp-cases-menu__glow{
  position:absolute;
  z-index:0;
  left:0;top:0;
  width:var(--uxp-menu-glow-w,150px);
  height:64px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translate3d(var(--uxp-menu-glow-x,0px),var(--uxp-menu-glow-y,-32px),0);
  transition:
    transform .34s cubic-bezier(.2,.9,.3,1),
    width .4s cubic-bezier(.2,.9,.3,1),
    opacity .3s ease;
  will-change:transform,opacity;
}
.uxp-cases-menu.is-open .uxp-cases-menu__glow{opacity:var(--uxp-menu-glow-o,.55)}
.uxp-cases-menu__glow::before,
.uxp-cases-menu__glow::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
}
.uxp-cases-menu__glow::before{
  inset:-10% -16%;
  background:radial-gradient(62% 78% at 38% 50%,rgba(255,160,90,.96) 0%,rgba(255,105,140,.72) 36%,rgba(205,120,255,.3) 60%,transparent 80%);
  filter:blur(12px);
  /* живое пятно: та же дыхательная пластика, что у свечения навбара */
  animation:uxpNavWarmA 5.5s ease-in-out infinite alternate;
}
.uxp-cases-menu__glow::after{
  inset:-8% -14%;
  background:radial-gradient(58% 76% at 66% 50%,rgba(255,80,165,.92) 0%,rgba(255,150,80,.5) 38%,rgba(140,120,255,.24) 62%,transparent 82%);
  filter:blur(14px);
  animation:uxpNavWarmB 8s ease-in-out infinite alternate;
}
.uxp-cases-menu__link{z-index:1}

/* ===== Эхо пятна в пилюле навбара =====
   Когда пятно в выпадающем меню подходит к верхней кромке, его верхняя
   часть продолжает светиться в пилюле навбара — свет один, разрезан
   границей стекла. Слой живёт в том же clip, что и навбарное свечение. */
.uxp-menu-glow-echo{
  position:absolute;
  left:0;top:0;
  width:var(--uxp-echo-w,150px);
  height:96px;   /* та же посадка, что у родного свечения пунктов */
  border-radius:50%;
  pointer-events:none;
  opacity:var(--uxp-echo-o,0);
  transform:translate3d(var(--uxp-echo-x,0px),var(--uxp-echo-y,0px),0);
  transition:opacity .18s ease;
  filter:saturate(1.3) brightness(1.45);   /* паритет яркости с родным свечением */
  z-index:1;
}
.uxp-menu-glow-echo::before,
.uxp-menu-glow-echo::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
}
.uxp-menu-glow-echo::before{
  inset:-10% -16%;
  background:radial-gradient(62% 78% at 38% 70%,rgba(255,160,90,.96) 0%,rgba(255,105,140,.72) 36%,rgba(205,120,255,.3) 60%,transparent 80%);
  filter:blur(12px);
  animation:uxpNavWarmA 5.5s ease-in-out infinite alternate;
}
.uxp-menu-glow-echo::after{
  inset:-8% -14%;
  background:radial-gradient(58% 76% at 66% 74%,rgba(255,80,165,.92) 0%,rgba(255,150,80,.5) 38%,rgba(140,120,255,.24) 62%,transparent 82%);
  filter:blur(14px);
  animation:uxpNavWarmB 8s ease-in-out infinite alternate;
}

/* ===== Языковой переход: dissolve/arrive как у переключения проектов ===== */
#uxp-lang-veil{position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:0;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);transition:opacity .45s cubic-bezier(.4,.2,.6,1),backdrop-filter .45s cubic-bezier(.4,.2,.6,1),-webkit-backdrop-filter .45s cubic-bezier(.4,.2,.6,1)}
html.uxp-lang-out #uxp-lang-veil{opacity:1;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html.uxp-lang-out body{transition:opacity .45s cubic-bezier(.4,.2,.6,1)!important;opacity:0!important;pointer-events:none}
@keyframes uxpLangArrive{from{opacity:0;filter:blur(16px)}to{opacity:1;filter:blur(0)}}
html.uxp-lang-in body{animation:uxpLangArrive .55s cubic-bezier(.25,.6,.3,1) both}
@media (prefers-reduced-motion:reduce){html.uxp-lang-out body,html.uxp-lang-in body{transition:none!important;animation:none}}

/* In-place смена языка на главной: перетекание под блюром */
html.uxp-lang-flipping #uxp-lang-veil{opacity:1;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
/* Русская раскладка навбара и шрифты — применяются по html[data-locale='ru'] */
@font-face{font-family:'Cormorant Garamond RU';src:url('/fonts/CormorantGaramond-600-cyrillic.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Garamond RU';src:url('/fonts/CormorantGaramond-700-cyrillic.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Cormorant Garamond RU';src:url('/fonts/CormorantGaramond-700italic-cyrillic.ttf') format('truetype');font-style:italic;font-weight:700;font-display:swap}
html[data-locale='ru'] :is(#hero-designer,#sec-about,#sec-principles,#sec-cases,.m-des,.m-about-h,.m-prin-h,.m-cases-h){font-family:'Cormorant Garamond RU','Cormorant Garamond',serif!important}

/* Шеврон дропдауна CASES */
#navfix .uxp-nav-caret{margin-left:8px;flex:0 0 auto;transition:transform .3s cubic-bezier(.16,1,.3,1)}



/* Футер: логотипы у кейсов + обводка наведённой ссылки */
.site-footer-cases .site-footer-link.has-mark{display:inline-flex;align-items:center;gap:10px}
/* иконка кейса ровно цветом текста ссылки (маска вместо картинки) */
.site-footer-mark{width:20px;height:20px;flex:0 0 auto;display:block;background:currentColor;
  -webkit-mask:var(--uxp-mark) center/contain no-repeat;mask:var(--uxp-mark) center/contain no-repeat}
.site-footer{position:relative}

/* Футер главной: свой слой — свечение под ссылкой, текст, контур */
.site-footer{isolation:isolate}
.site-footer .site-footer-link{position:relative;z-index:2}
.uxp-footer-glow{position:absolute;left:0;top:0;z-index:1;height:64px;border-radius:50%;pointer-events:none;opacity:0;width:120px;transition:transform .3s cubic-bezier(.2,.9,.3,1),width .35s cubic-bezier(.2,.9,.3,1),opacity .25s ease}
.uxp-footer-glow::before,.uxp-footer-glow::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.uxp-footer-glow::before{inset:-10% -16%;background:radial-gradient(62% 78% at 38% 50%,rgba(255,160,90,.9) 0%,rgba(255,105,140,.66) 36%,rgba(205,120,255,.28) 60%,transparent 80%);filter:blur(12px)}
.uxp-footer-glow::after{inset:-8% -14%;background:radial-gradient(58% 76% at 66% 50%,rgba(255,80,165,.86) 0%,rgba(255,150,80,.46) 38%,rgba(140,120,255,.22) 62%,transparent 82%);filter:blur(14px)}

/* Пункты навбара держат ширину по длинному из двух языков (ru > en):
   при переключении языка раскладка не меняется — ничего не смещается. */
#navfix .navzone{flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap;justify-content:center}
#navfix .nav-link{flex-wrap:nowrap}
/* Шеврон закреплён у правого края пункта: морф делает текст абсолютным,
   и шеврон в потоке срывался на вторую строку во время анимации */
#navfix [data-nav-key="cases"]{position:relative;padding-right:22px}
#navfix .uxp-nav-caret{position:absolute;right:0;top:50%;margin-left:0;transform:translateY(-50%)}
#navfix.is-cases-menu-open .uxp-nav-caret{transform:translateY(-50%) rotate(180deg)}
#navfix [data-nav-key="about"]{min-width:94px}
#navfix [data-nav-key="principles"]{min-width:120px}
#navfix [data-nav-key="cases"]{min-width:93px}

/* На время морфа языка шеврон гасится: клон текста живёт в своей системе
   координат, и рассинхрон был бы заметен */
html.uxp-nav-morphing #navfix .uxp-nav-caret{opacity:0;transition:opacity .18s ease}
#navfix .uxp-nav-caret{transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s ease .1s}