@charset "UTF-8";
/* Вариант «два бренда»: AI-переход × UCreativeLab. Подключается поверх kl3.css только в «вариант — два бренда.html».
   Правило цвета: тёмно-синий UCreativeLab вместо чёрного; лайм AI-перехода про действие и систему;
   маджента UCreativeLab про смыслы и людей. Зелёные Кати не берём: роль «пузырька» играет наш лайм. */
:root{--navy:#11223c;--navy-deep:#0b172b;--magenta:#db009d;--magenta-deep:#ae0086;--lime:#eef400}

/* тёмные полотна и карточки */
.dark-section,.dark{background:var(--navy)}
header.on-dark{background:#11223cee}
.hero-cta.gradient-card,.join-card,.gradient-card{background:var(--navy);--dust-bg:#11223c;--dust-accent:#db009d}
.gradient-card:before,.gradient-card:after{background:radial-gradient(ellipse at 40% 35%,#ae008633 0%,#11223c 58%)}
.hero-cta:after,.join-card:after{background:linear-gradient(180deg,#0b172b44,transparent 25%,#0b172b11 50%,#0b172b99 100%)}
.paper-status,.point-name{background:#11223ccc}
.result.big{background:var(--navy);border-color:var(--navy)}
.compare article.on{background:var(--navy)}

/* маджента: смыслы и люди */
.dark-section .accent{color:var(--magenta)}
.dark-section h2 .accent{color:#ff4fc4}
.quote-grid q:before,.quote-grid q:after,.case-quotes q:before,.case-quotes q:after,.people-quote blockquote:before,.people-quote blockquote:after,.review blockquote:before,.review blockquote:after{color:var(--magenta)}
.case p.was b,.result p.was b{color:var(--magenta-deep)}
.people-kind{color:var(--magenta-deep)}
.benefit-grid li{border-top-color:var(--magenta)}
.doc-benefits li:nth-child(even){border-top-color:var(--lime)}
.obj .after{border-left-color:var(--magenta)}
.point-1 .point-dot,.paper-point.point-1.active .point-dot{background:var(--magenta);border-color:var(--magenta-deep)}
.support-grid article:first-child .pill{border-color:var(--magenta);color:var(--magenta-deep)}

/* лайм: действие и система (кнопки, подчёркивание, кольца) остаются как есть */

/* типографика: тонкие подписи с разрядкой, как подпись под логотипом UCreativeLab */
.eyebrow,.tiny-label,.support-number{letter-spacing:.24em;font-weight:300}
h2{font-weight:300}
.hero h1{font-weight:400}

/* шапка: два логотипа одной строкой */
.co-lockup{display:inline-flex;align-items:center;gap:14px}
.co-lockup .co-x{font-size:14px;color:#6e6a62;font-weight:300}
.co-lockup .uc-word{height:15px;width:auto;display:block}
.co-lockup .uc-word-white{height:15px;width:auto;display:none}
header.on-dark .co-lockup .uc-word{display:none}
header.on-dark .co-lockup .uc-word-white{display:block}
header.on-dark .co-lockup .co-x{color:#ffffff80}
.collab img{height:14px;width:auto;display:block}

/* карточка Кати: знак вместо заглушки */
.host-mark.uc{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px}
.host-mark.uc img.uc-mark{width:38%;height:auto}
.host-mark.uc img.uc-full{width:86%;height:auto}

@media(max-width:760px){
  .co-lockup .co-x,.co-lockup .uc-word,.co-lockup .uc-word-white{display:none!important}
}

/* Переходы между полотнами: следующее наезжает на предыдущее, углы закрывают стык, предыдущее уходит вглубь */
main>section+section{margin-top:-48px}
main>section{position:relative}
main>section.rounded,main>section.light-section{border-radius:40px 40px 0 0;box-shadow:0 -18px 40px #0b172b1f}
main>section>.wrap{transform-origin:50% 0;will-change:transform,opacity}
main>section>.wrap{transform:translateY(var(--leave-y,0)) scale(var(--leave-s,1));opacity:var(--leave-o,1)}
@media(max-width:760px){main>section+section{margin-top:-24px}main>section.rounded,main>section.light-section{border-radius:24px 24px 0 0}}
@media(prefers-reduced-motion:reduce){main>section>.wrap{transform:none!important;opacity:1!important}}

/* Карточки с цитатами: при наведении подъём, свечение за курсором, рамка и кавычки ярче */
.quote-grid li{position:relative;overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.22,.61,.36,1),border-color .45s cubic-bezier(.22,.61,.36,1),background-color .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1)}
.quote-grid li:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#db009d38,transparent 70%);transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
.quote-grid q:before,.quote-grid q:after{display:inline-block;transition:transform .45s cubic-bezier(.22,.61,.36,1),color .45s cubic-bezier(.22,.61,.36,1)}
.quote-grid li span{transition:transform .45s cubic-bezier(.22,.61,.36,1),color .45s cubic-bezier(.22,.61,.36,1)}
@media(any-hover:hover){
  .quote-grid li:hover{transform:translateY(-6px);border-color:#db009d80;background-color:#ffffff08;box-shadow:0 22px 40px #0b172b66}
  .quote-grid li:hover:before{opacity:1}
  .quote-grid li:hover q:before{transform:translateX(-3px) scale(1.25);color:#ff4fc4}
  .quote-grid li:hover q:after{transform:translateX(3px) scale(1.25);color:#ff4fc4}
  .quote-grid li:hover span{transform:translateX(6px);color:#ffffffc7}
}
@media(prefers-reduced-motion:reduce){.quote-grid li,.quote-grid li:hover,.quote-grid q:before,.quote-grid q:after,.quote-grid li span{transform:none!important;transition:none}}

/* «Как это работает» в общем виде сайта: карточки как у кейсов, скриншот в рамке, номера маджентой */
.compare article{background:#fff;border:1px solid #11223c14;border-radius:24px}
.compare article.on{background:var(--navy);border-color:var(--navy)}
.compare article.on .tiny-label{color:#ff4fc4}
.lifeos-shot img{border-radius:24px;border:1px solid #11223c1f;box-shadow:0 30px 60px #11223c26}
.lifeos-shot figcaption{letter-spacing:.06em}
.takeaways li>span{color:var(--magenta)}
.big-quote cite{color:var(--magenta-deep)}
.big-quote .scroll-fill{--fill-color:#11223c;color:#11223c33!important}
.lifeos-video video{border-color:#11223c1f;box-shadow:0 30px 60px #11223c26}.lifeos-sound{background:#11223ccc}.lifeos-sound[aria-pressed="true"]{background:#eef400}
.kcal{--m1:#db009d;--m2:#eef400;--m3:#11223c}
.kc-card,.kc-side{box-shadow:0 20px 50px #11223c14}
.kc-day.meet.on{border-color:#11223c}
.faq-list summary:after{background-color:#11223c}
.faq-card{background:#fff;box-shadow:0 20px 50px #11223c12}
.mega-word{background:#11223c}
.wp-wave i.done{background:#eef400}.wave-player{background:#ffffff0d}
.objections.after .ob-switch i{background:#eef400}
.ob-card{background:#ffffff08}
footer.on-dark,.mega-word{background:#11223c}
.lifeos-full{background:#11223ccc}