/* ТЕМПО РОП — свой стиль, как palantir.com/sovereignaios (21.10.2026).
   Светлая страница #FBFAF3, чёрные линейки по 1px во всю ширину колонок, метки «< 01 >», один яркий акцент — бирюзовый ТЕМПО.
   Движение как у Palantir: строки текста проявляются по очереди (0,7 с, cubic-bezier(.23,1,.32,1), сдвиг 5px, +50 мс на строку),
   линейки растут слева направо, рисунки рисуются линией (stroke-dashoffset), столбики собираются по кубику, слова заголовка — из размытия.
   Без JS и в режиме «меньше движения» всё видно сразу: скрытые состояния — только под классом .rp-on (его ставит prod-rop.js). */
/* --rp-tink: бирюза для мелкого текста на светлом — 5,2:1 (было #0C9D8F, 3,2:1 — мало для подписей 15 px) */
.pp2-rop{--rp-paper:#FBFAF3;--rp-ink:#121314;--rp-dark:#1F2122;--rp-teal:#13C9BA;--rp-tink:#08776C;--rp-wh:#FBFAF3;--rp-ease:cubic-bezier(.23,1,.32,1);--rp-g:40px;--rp-sp:clamp(56px,5.6vw,80px)}
.rp{background:var(--rp-paper);color:var(--rp-ink)}
.rp-sec{padding:var(--rp-sp) var(--px)}
.rp-dk{background:var(--rp-dark);color:var(--rp-wh)}
.rp-tl{background:var(--rp-teal);color:var(--rp-ink)}
.rp-hl{color:var(--rp-tink)}
.rp-dk .rp-hl{color:var(--rp-teal)}
.rp-rule{display:block;height:1px;background:currentColor;transform-origin:0 50%}
.rp-col{min-width:0}
.rp-col>.rp-rule{margin-bottom:20px}
.rp-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rp-g)}
.rp-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--rp-g)}
.rp-3>.rp-last{grid-column:2/-1}

/* типографика — размеры Sovereign AI OS на 1440 px, плавно вниз до телефона */
.rp-t2{margin:0;font-weight:400;font-size:clamp(22px,2.5vw,36px);line-height:1.15;letter-spacing:-.02em}
.rp-t3{margin:0;font-weight:400;font-size:clamp(30px,3.89vw,56px);line-height:1;letter-spacing:-.015em}
.rp-t4{margin:0;font-weight:400;font-size:clamp(17px,1.6vw,23px);line-height:1.3;letter-spacing:-.02em;max-width:36em}
.rp-lbl{margin:0 0 clamp(36px,4.2vw,60px);font-size:15px;line-height:1;font-weight:600;letter-spacing:-.02em}
.rp-lbl span{color:var(--rp-tink)}
.rp-dk .rp-lbl span{color:var(--rp-teal)}
.rp-sec>.rp-rule{margin-bottom:20px}
.rp-h{max-width:16em;margin:0 0 var(--rp-sp)}

/* первый экран: «Работа каждого менеджера» / полоса стрелок / «как на ладони.» справа */
.rp-hero{background:var(--rp-paper);padding:clamp(36px,4vw,58px) var(--px) clamp(64px,7vw,100px)}
.rp-brow{display:flex;align-items:center;gap:14px;margin:0 0 clamp(30px,3.6vw,52px);font-size:15px;line-height:1;font-weight:600;letter-spacing:-.02em}
.rp-brow b{font-weight:600}
.rp-brow span{padding:6px 9px;border:1px solid var(--rp-ink);font-weight:500}
.rp-h1{display:flex;flex-direction:column;margin:0;font-weight:400;font-size:clamp(46px,6.39vw,92px);line-height:1;letter-spacing:-.03em;text-wrap:wrap}
.rp-h1__t{position:relative;z-index:1}
.rp-h1__b{position:relative;text-align:right;white-space:nowrap}
.rp-wd{display:inline-block}
.rp-chev{display:block;width:100%;max-width:none}
.rp-chev--l{height:min(calc((100vw - 2 * var(--px)) * .11875),176px);margin:.02em 0 -.27em}   /* стрелки начинаются ниже хвостов д, ж, р */
.rp-chev--s{display:none}

/* < 01 > Введение: абзац и изометрические столбики до правого края экрана */
.rp-intro{padding-top:0}
.rp-intro__p{max-width:18em}
.rp-bars{display:block;width:min(calc(100% + var(--px)),780px);max-width:none;height:auto;margin:30px calc(-1 * var(--px)) 0 auto}

/* бирюзовая полоса с заявлением и контурным значком (у Palantir — цитата с кавычкой) */
.rp-stm .rp-col>.rp-rule{margin-bottom:25px}
.rp-big{display:block;width:clamp(64px,8.9vw,128px);height:auto}
.rp-stm__h{max-width:14em;margin-bottom:clamp(36px,3.5vw,50px)}
.rp-stm__p{max-width:34em}

/* тёмный раздел: заголовок с бирюзовым продолжением, слева абзац и фото, справа плитки-значки */
.rp-what__l .rp-t4{margin-bottom:clamp(28px,2.8vw,40px)}
.rp-ph{position:relative;margin:0;overflow:hidden;background:#101112}
.rp-ph img{display:block;width:100%;height:auto}
.rp-ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.rp-ph video.ready{opacity:1}
.rp-stick{position:sticky;top:calc(var(--hh,86px) + 24px)}
.rp-tiles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(30px,2.8vw,40px)}
.rp-tile{--rp-tb:clamp(96px,13.34vw,192px);display:grid;grid-template-columns:var(--rp-tb) minmax(0,1fr);gap:clamp(22px,2.8vw,40px);align-items:start}
.rp-tile__box{display:block;width:var(--rp-tb);height:var(--rp-tb);border:1px solid var(--rp-wh)}
.rp-tile__ic{display:block;width:100%;height:100%;max-width:none}
.rp-tile__tx{display:flex;flex-direction:column;min-height:var(--rp-tb)}
.rp-tile__tx>.rp-rule{margin-bottom:15px}
.rp-tile__l{margin:0 0 clamp(18px,2.8vw,40px);font-size:12px;line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--rp-teal)}
.rp-tile__t{margin:auto 0 0;font-weight:400;font-size:clamp(20px,1.9vw,27px);line-height:1.15;letter-spacing:-.02em}

/* рамка со схемой «как собирается отчёт» (у Palantir — «Review the full … Reference Architecture») */
.rp-boxs{padding:0 var(--px) var(--rp-sp)}
.rp-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:var(--rp-g);border:1px solid var(--rp-teal);padding:clamp(28px,2.8vw,40px) clamp(22px,2.45vw,35px)}
.rp-box__brow{margin:0 0 30px;font-size:15px;line-height:1;font-weight:600;letter-spacing:-.02em}
.rp-box__brow span{color:var(--rp-teal)}
.rp-box__h{max-width:12em;margin:0 0 30px;font-size:clamp(28px,3.34vw,48px);line-height:1.02}
.rp-box__r{min-width:0;align-self:center}
.rp-sch{display:block;width:100%;height:auto;max-width:none;font-family:inherit;letter-spacing:-.01em}
.rp-sch--s{display:none}
.rp-plate{margin:0;border:1px solid rgba(251,250,243,.16);background:#0D0E0F}
.rp-plate img{display:block;width:100%;height:auto}
.rp-plate figcaption{padding:12px 14px;border-top:1px solid rgba(251,250,243,.16);font-size:13px;line-height:1.3;color:rgba(251,250,243,.62)}
.rp-box .rp-plate{grid-column:1/-1;margin-top:clamp(28px,3.4vw,48px)}

/* кнопка-рамка со стрелкой ↗, как «Read ↗» / «Contact ↗» */
.rp-btn{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:310px;padding:15px;border:1px solid currentColor;color:inherit;font-size:18px;line-height:1;letter-spacing:-.02em;text-decoration:none;transition:background-color .25s var(--rp-ease),color .25s var(--rp-ease)}
.rp-ne{display:block;width:12px;height:12px;flex:0 0 auto}
.rp-btn--w:hover{background:var(--rp-wh);color:var(--rp-ink)}
.rp-btn--k:hover{background:var(--rp-ink);color:var(--rp-teal)}

/* < 03 > Отчёты: текст и фото «зигзагом», фото уходят до края экрана; список со значками в рамках */
.rp-rep__a{margin-bottom:var(--rp-sp)}
.rp-ph--r{margin-right:calc(-1 * var(--px))}
.rp-ph--l{margin-left:calc(-1 * var(--px))}
.rp-lis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(22px,2.1vw,30px)}
.rp-li{--rp-lb:clamp(64px,5.56vw,80px);display:grid;grid-template-columns:var(--rp-lb) minmax(0,1fr);gap:clamp(22px,2.8vw,40px);align-items:start}
.rp-li__box{display:flex;align-items:center;justify-content:center;width:var(--rp-lb);height:var(--rp-lb);border:1px solid var(--rp-ink)}
.rp-li__ic{display:block;width:60%;height:60%}
.rp-li__tx>.rp-rule{margin-bottom:15px}
.rp-li__t{margin:0;font-size:clamp(20px,1.875vw,27px);line-height:1.2;letter-spacing:-.02em}

/* < 04 > Период */
.rp-per__h{max-width:30em}
.rp-plate--s{margin-top:0}

/* < 05 > Для кого: два списка «Руководителю ↳ / Менеджеру ↳» с квадратиками */
.rp-who__h{max-width:30em}
.rp-who__n{margin:0 0 clamp(28px,2.8vw,40px);font-weight:400;font-size:clamp(30px,2.78vw,40px);line-height:.975;letter-spacing:-.015em}
.rp-who__n span{display:block;margin-top:.08em;color:var(--rp-tink)}
.rp-chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(20px,1.75vw,25px)}
.rp-chk li{position:relative;padding-top:15px}
.rp-chk .rp-rule{position:absolute;left:0;right:0;top:0}
.rp-chk p{display:flex;gap:10px;margin:0;font-size:clamp(16px,1.32vw,19px);line-height:1.25;letter-spacing:-.02em}
.rp-chk p::before{content:"";flex:0 0 auto;width:12px;height:12px;margin-top:.22em;border:1px solid var(--rp-tink)}

/* бирюзовый призыв с контурной стрелкой и строкой внизу, как финал Sovereign AI OS */
.rp-go{padding-bottom:var(--px)}
.rp-go>.rp-3:first-child{margin-bottom:clamp(72px,11vw,160px)}
.rp-go__h{max-width:13em;margin-bottom:clamp(24px,2.1vw,30px)}
/* «ТЕМПО РОП в разработке.» — неразрывная строка: на узких телефонах шрифт чуть меньше, чтобы она помещалась */
@media (max-width:480px){.rp-go__h{font-size:clamp(22px,7.4vw,30px)}}
.rp-go__legal .rp-col>.rp-rule{margin-bottom:15px}
.rp-go__legal p{margin:0;font-size:15px;line-height:1.25;font-weight:600;letter-spacing:-.01em}

/* «Вопросы» — на том же светлом фоне */
.pp2-rop .pp-faq{background:var(--rp-paper)}
/* шапка лежит на цвете страницы, как у Sovereign AI OS: без серой полосы над первым экраном */
body.pp2-rop{background:var(--rp-paper)}
body.pp2-rop .hdr.light::before{background:rgba(251,250,243,.92)}
/* призыв и следующий продукт — графит страницы, а не синий сайта */
.pp2-rop .pp-cta,.pp2-rop .pp-next{background:var(--rp-dark)}

/* ---------- движение (только с .rp-on) ----------
   Скрытое состояние — без перехода (класс .rp-on прячет мгновенно); переход — только у .in, поэтому всё именно появляется. */
.rp-w{display:inline-block;font-style:normal}
.rp-on [data-rp]{opacity:0;transform:translate3d(0,var(--y,10px),0)}
.rp-on [data-rp].in{opacity:1;transform:none;transition:opacity .7s var(--rp-ease) var(--d,0s),transform .7s var(--rp-ease) var(--d,0s)}
.rp-on .rp-rule[data-rp]{opacity:1;transform:scaleX(0)}
.rp-on .rp-rule[data-rp].in{transform:none;transition:transform .7s var(--rp-ease) var(--d,0s)}
.rp-on [data-rp-ln] .rp-w{opacity:0;transform:translate3d(0,5px,0)}
.rp-on [data-rp-ln].in .rp-w{opacity:1;transform:none;transition:opacity .7s var(--rp-ease),transform .7s var(--rp-ease);transition-delay:calc(.1s + var(--l,0) * .05s)}
.rp-on [data-rp-draw] .dr{stroke-dasharray:1;stroke-dashoffset:1}
.rp-on [data-rp-draw].in .dr{stroke-dashoffset:0;transition:stroke-dashoffset var(--t,.7s) var(--rp-ease) var(--d,0s)}
.rp-on [data-rp-draw].in .dr.rev{stroke-dashoffset:2}
.rp-on [data-rp-draw].done .dr{stroke-dasharray:none;transition:none}
.rp-on [data-rp-draw] .fd{opacity:0}
.rp-on [data-rp-draw].in .fd{opacity:1;transition:opacity .3s cubic-bezier(.33,1,.68,1) var(--d,0s)}
.rp-sch .fr,.rp-on [data-rp-draw].in .fr.fd{opacity:.45}
.rp-on [data-rp-draw].in .fr.fd{transition-duration:.6s}
.rp-on [data-rp-draw] .up{opacity:0;transform:translate3d(0,-5px,0)}
.rp-on [data-rp-draw].in .up{opacity:1;transform:none;transition:opacity .7s var(--rp-ease) var(--d,0s),transform .7s var(--rp-ease) var(--d,0s)}
.rp-on [data-rp-draw] .hands{opacity:0;transform:rotate(-45deg);transform-origin:152px 154px}
.rp-on [data-rp-draw].in .hands{opacity:1;transform:none;transition:opacity .7s var(--rp-ease) var(--d,0s),transform .7s var(--rp-ease) var(--d,0s)}
.rp-on .rp-bars .cb{opacity:0;transform:translate3d(0,-5px,0)}
.rp-on .rp-bars.in .cb{opacity:1;transform:none;transition:opacity .7s var(--rp-ease) var(--d,0s),transform .7s var(--rp-ease) var(--d,0s)}
/* заставка при загрузке — CSS-анимации с задержкой и fill-mode both прямо под .rp-on (переход по классу до первой отрисовки не играет):
   слова из размытия (75 мс между словами), стрелки рисуются слева направо (12,5 мс между стрелками), как у Palantir */
@keyframes rpWord{from{filter:blur(5px);opacity:0;transform:translate3d(0,var(--wy,-15%),0)}to{filter:blur(0);opacity:1;transform:none}}
@keyframes rpDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.rp-on .rp-wd{animation:rpWord .7s var(--rp-ease) calc(.08s + var(--i,0) * 75ms) both}
.rp-on .rp-h1__b .rp-wd{--wy:15%}
.rp-on .rp-chev path{stroke-dasharray:1;animation:rpDraw .7s var(--rp-ease) calc(.08s + var(--i,0) * 12.5ms) both}
.rp-on .rp-chev--s path{animation-delay:calc(.08s + var(--i,0) * 23.7ms)}
.rp-on .rp-hero.done .rp-chev path,.rp-on .rp-hero.done .rp-wd{animation:none;stroke-dasharray:none}
.rp-on .rp-brow{--y:-10px}

@media (min-width:760px){
  .rp-sch--s{display:none}
}
@media (max-width:1179px){
  .rp-box{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .rp-box__h{max-width:14em}
  .rp-box__r{max-width:720px}
}
@media (max-width:759px){
  .pp2-rop{--rp-g:25px}
  .rp-2,.rp-3,.rp-box{grid-template-columns:minmax(0,1fr)}
  .rp-3>.rp-last{grid-column:auto}
  .rp-2{row-gap:40px}
  .rp-3{row-gap:25px}
  .rp-hero{padding-top:34px}
  .rp-h1{gap:18px;font-size:clamp(40px,11.4vw,52px);line-height:.95}
  .rp-chev--l{display:none}
  .rp-chev--s{display:block;height:calc((100vw - 2 * var(--px)) * .4367);margin:0}
  .rp-intro__r>.rp-rule,.rp-stm .rp-last>.rp-rule:first-child,.rp-go>.rp-3:first-child .rp-last>.rp-rule:first-child{display:none}
  .rp-bars{margin-top:0}
  .rp-t3{line-height:1.08;letter-spacing:-.025em}
  .rp-t2{font-size:23px;line-height:1.15}
  .rp-stick{position:relative;top:auto}
  .rp-ph--l,.rp-ph--r,.rp-what__l .rp-ph{margin-left:calc(-1 * var(--px));margin-right:calc(-1 * var(--px))}
  .rp-box{row-gap:28px}
  .rp-box__h{max-width:none}
  .rp-sch--l{display:none}
  .rp-sch--s{display:block}
  .rp-box .rp-plate{margin-top:0}
  .rp-plate--s{margin-left:calc(-1 * var(--px));margin-right:calc(-1 * var(--px));border-left:0;border-right:0}
  .rp-what__c{row-gap:48px}
  .rp-go>.rp-3:first-child{margin-bottom:72px}
  .rp-go__legal{row-gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .rp *,.rp *::before,.rp *::after{animation:none!important;transition:none!important}
}