/* RentAHuman site v2 — изолированный прототип. Прод site/* не трогает.
   «Вкус Active Theory»: плавность (easing/инерция) + глубина (perspective,
   translateZ, focus-scale, blur не-фокусных). Карусель по кругу + FLIP-вход.
   Лёгкий CSS3D, без тяжёлого WebGL (scene.js — только ambient-фон). */

:root{
  --tilt:0deg; /* без нахилу: карти СТРОГО горизонтальні (вимога) */
  --bg:#070912; --bg2:#0c1020; --fg:#eef1fb; --fg2:#9aa3c4;
  --ai:#67e8f9; --ai2:#818cf8; --hu:#f472b6; --hu2:#a78bfa;
  --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.045);
  --ease:cubic-bezier(.22,1,.36,1); --slow:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
/* Статична картинка рук — окремий ФІКСОВАНИЙ шар (НЕ background-attachment:
   fixed, який не малюється після краху GPU до повного reload). Малюється
   завжди, у т.ч. софт-режимі одразу після авто-перезавантаження на слабкій
   машині. Відео #bg-vid грає поверх (z0); у .no-webgl відео ховаємо —
   лишається цей шар. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--bg) url(bg.jpg) center center / cover no-repeat}
body{background:transparent;color:var(--fg);
  font-family:'Inter',system-ui,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Фон — відео (замість «матриці»), затемнене для читабельності */
#bg-vid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;opacity:1;
  /* статична картинка рук ЗАВЖДИ як базовий шар: якщо <video> не
     відмалювався (краш GPU / збій декоду відео після авто-перезавантаження
     на слабкій машині) — фон-руки все одно видно. Відео грає поверх. */
  background:var(--bg) url(bg.jpg) center center / cover no-repeat}
/* Фон у оригінальній яскравості. Лёгка вуаль лише щоб текст не зникав
   (не «темрява»). Сильніше темнити — за запитом. */
#bg-dim{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,18,.14),rgba(7,9,18,.24))}
#rain-canvas{display:none}
.hero,.sec,footer{position:relative;z-index:1}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.muted{color:var(--fg2)}

/* ── Hero ── */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;
  overflow:hidden}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;
  z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 0,transparent 40%,var(--bg) 100%)}
.hero__in{position:relative;z-index:2}
.badge{display:inline-block;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ai);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;margin-bottom:22px}
.hero__pos{margin:18px 0 4px;font-family:ui-monospace,SFMono-Regular,
  Menlo,monospace;font-size:clamp(14px,1.5vw,17px);line-height:1.5;
  letter-spacing:.01em;color:var(--cyan);max-width:46ch}
.hero__pos b{color:var(--fg);font-weight:600}
.hero h1{font-size:clamp(36px,6vw,68px);line-height:1.04;
  font-weight:760;letter-spacing:-.02em;max-width:14ch}
.hero h1 b{background:linear-gradient(100deg,var(--ai),var(--hu));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin-top:20px;font-size:clamp(15px,1.7vw,19px);color:var(--fg2);
  max-width:52ch;line-height:1.6}
.scroll-hint{position:absolute;bottom:26px;left:50%;
  transform:translateX(-50%);z-index:2;font-size:12px;color:var(--fg2);
  letter-spacing:.18em;text-transform:uppercase;animation:bob 2.4s var(--ease) infinite}
@keyframes bob{50%{transform:translate(-50%,8px)}}

/* ── Секция карусели ── */
.sec{padding:96px 0 120px;position:relative;overflow-x:clip}
.sec h2{font-size:clamp(24px,3.4vw,40px);font-weight:720;
  letter-spacing:-.02em;text-align:center}
.sec h2 + p{text-align:center;color:var(--fg2);margin:14px auto 0;
  max-width:56ch;line-height:1.6}

.stage{position:relative;height:560px;margin-top:54px;
  perspective:2200px;perspective-origin:50% 44%}
.ring{position:absolute;inset:0;transform-style:preserve-3d;
  /* Спіраль: глибину/масштаб дають самі карти (JS). Кільце — лише
     контейнер + лёгкий нахил усієї спіралі. */
  transform:rotateX(var(--tilt))}
.dragging .ring{transition:none}

/* Смерч у центрі кільця — РЕАЛЬНЕ відео (Pixabay, license free).
   Всередині .ring + контр-обертання → передні карти йдуть поверх
   (глибина). Не клікабельне. Маска-розтушовка країв (без рамки),
   приглушене, щоб вписалось у темну сцену. */
.twister{position:absolute;left:50%;top:50%;width:260px;height:660px;
  margin:-370px 0 0 -130px;pointer-events:none;z-index:-1;
  transform:rotateY(calc(var(--rot,0deg) * -1));
  animation:twLean 6s var(--ease) infinite}
.tw-vid{width:100%;height:100%;object-fit:cover;opacity:.6;
  transform:scaleY(1.28);transform-origin:50% 42%;
  filter:contrast(1.05) brightness(.95) saturate(.8);
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(46% 80% at 50% 44%,#000 36%,transparent 80%);
  mask-image:radial-gradient(46% 80% at 50% 44%,#000 36%,transparent 80%)}
@keyframes twLean{
  0%,100%{transform:rotateY(calc(var(--rot,0deg) * -1)) rotate(-2deg)}
  50%{transform:rotateY(calc(var(--rot,0deg) * -1)) rotate(2deg)}}

/* «Шест» — вертикальна вісь, навколо якої обертається карусель */
.pole{position:absolute;left:50%;top:50%;width:6px;height:118%;
  margin:-59% 0 0 -3px;pointer-events:none;z-index:0;
  transform:translateZ(-2px);
  background:linear-gradient(180deg,transparent,
    rgba(103,232,249,.0) 4%,rgba(129,140,248,.45) 50%,
    rgba(103,232,249,.0) 96%,transparent);
  box-shadow:0 0 26px 6px rgba(129,140,248,.28);border-radius:3px}

/* (Прибрано мёртвый .card-блок 21.05: карусель — Three.js WebGL
   (canvas), DOM-карток .card немає в index.html → правила ні на що.
   Кабінетні .card — інший файл cabinet-v2.css.) */

.ctrls{display:flex;gap:14px;justify-content:center;margin-top:40px}
.ctrls button{background:var(--card);border:1px solid var(--line);
  color:var(--fg);width:46px;height:46px;border-radius:999px;cursor:pointer;
  font-size:18px;transition:transform .3s var(--ease),background .3s}
.ctrls button:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.dots i{width:7px;height:7px;border-radius:99px;background:var(--line);
  transition:all .4s var(--ease);cursor:pointer}
.dots i.on{width:22px;background:var(--ai)}

/* ── FLIP-детальный вид (вход в карточку) ── */
.detail{position:fixed;inset:0;z-index:50;display:none;
  background:rgba(7,9,18,.86);backdrop-filter:blur(10px)}
.detail.open{display:block}
.detail__panel{position:absolute;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#10142a,#0a0d1c);
  border:1px solid var(--line);will-change:transform,width,height,top,left}
.detail__inner{position:absolute;inset:0;padding:54px;overflow:auto;
  opacity:0;transition:opacity .45s var(--ease) .15s}
.detail.shown .detail__inner{opacity:1}
.detail__inner .k{color:var(--ai);letter-spacing:.14em;font-size:12px;
  text-transform:uppercase}
.detail__inner h3{font-size:clamp(26px,4vw,44px);font-weight:760;
  margin:14px 0 18px;letter-spacing:-.02em}
.detail__inner p{color:var(--fg2);max-width:60ch;line-height:1.7;
  margin-bottom:14px}
.detail__close{position:absolute;top:22px;right:22px;z-index:2;
  width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);color:var(--fg);cursor:pointer;font-size:18px}
.media{margin-top:18px;aspect-ratio:16/9;border-radius:14px;
  border:1px solid var(--line);
  background:radial-gradient(circle at 30% 30%,rgba(103,232,249,.18),
    transparent 60%),radial-gradient(circle at 70% 70%,
    rgba(244,114,182,.16),transparent 60%),#0b0f1f;
  display:flex;align-items:center;justify-content:center;color:var(--fg2);
  font-size:13px}
.media video{width:100%;height:100%;object-fit:cover;border-radius:14px}

footer{border-top:1px solid var(--line);padding:40px 0;color:var(--fg2);
  font-size:13px;text-align:center}

/* ── Наступні блоки (видно ефект відпускання колеса каруселлю) ── */
.block{position:relative;z-index:1;min-height:88vh;
  display:flex;align-items:center;padding:90px 0}
.block .wrap{width:100%}
.block__tag{display:inline-block;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ai);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;margin-bottom:20px}
.block h2{font-size:clamp(24px,3.4vw,40px);font-weight:720;
  letter-spacing:-.02em;max-width:20ch;line-height:1.12}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin-top:46px}
.step{background:linear-gradient(180deg,rgba(12,16,34,.74),
  rgba(7,10,22,.86));border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:30px;backdrop-filter:blur(10px);
  box-shadow:0 20px 60px -30px #000}
.step__n{font-size:13px;font-weight:700;letter-spacing:.16em;
  color:var(--ai2)}
.step h3{font-size:21px;font-weight:720;margin:14px 0 12px;
  letter-spacing:-.015em}
.step p{color:var(--fg2);font-size:15px;line-height:1.62}
.safe-list{list-style:none;margin:42px 0 0;max-width:62ch;
  display:flex;flex-direction:column;gap:16px}
.safe-list li{position:relative;padding-left:30px;color:var(--fg);
  font-size:16px;line-height:1.6}
.safe-list li::before{content:"";position:absolute;left:0;top:9px;
  width:11px;height:11px;border-radius:4px;
  background:linear-gradient(135deg,var(--ai),var(--hu))}
.cta{margin-top:40px;padding:22px 26px;border-radius:16px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  color:var(--fg2);font-size:14px;line-height:1.65;max-width:70ch}
.cta strong{color:var(--ai)}
/* Плавна поява (глибина як у AT): зсув+прозорість, м'який ease */
.reveal{opacity:0;transform:translateY(34px) scale(.985);
  transition:opacity .7s var(--slow),transform .7s var(--slow)}
.reveal.in{opacity:1;transform:none}
.step.reveal:nth-child(2){transition-delay:.08s}
.step.reveal:nth-child(3){transition-delay:.16s}
.safe-list li.reveal:nth-child(2){transition-delay:.05s}
.safe-list li.reveal:nth-child(3){transition-delay:.1s}
.safe-list li.reveal:nth-child(4){transition-delay:.15s}
.safe-list li.reveal:nth-child(5){transition-delay:.2s}
@media (max-width:780px){
  .steps{grid-template-columns:1fr}
  .block{min-height:auto;padding:70px 0}
}

/* ── Перенесений контент 1-ї версії у v2-вид ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;
  backdrop-filter:blur(8px);background:rgba(7,9,18,.34);
  border-bottom:1px solid var(--line)}
.site-header__in{display:flex;align-items:center;
  justify-content:space-between;height:58px}
.wordmark{display:inline-flex;align-items:center;gap:9px;
  font-weight:720;letter-spacing:-.01em;text-decoration:none;
  color:var(--fg);font-size:16px}
.wordmark .mark{width:26px;height:22px;
  background:url(/mark.svg) center/contain no-repeat}
.domain{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;color:var(--fg2)}
.badge .dot{display:inline-block;width:7px;height:7px;border-radius:99px;
  background:var(--ai);margin-right:7px;vertical-align:middle}
/* Мобільна шапка: бренд + nav-лінк + перемикач мови не налазять.
   ⚠ і бренд-домен, і nav-лінк мають class="domain" → селектори точні:
   span.domain (бренд) ховаємо, a.domain (nav) лишаємо й тиснемо. */
@media (max-width:620px){
  .site-header__in{height:auto;min-height:52px;gap:10px;
    padding-top:8px;padding-bottom:8px;flex-wrap:nowrap}
  .site-header span.domain{display:none}
  .site-header .wordmark{font-size:15px}
  .site-header a.domain{font-size:12px;white-space:nowrap}
  #rah-lang{margin-left:6px!important;padding:6px 10px!important}
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:620;font-size:15px;padding:13px 24px;border-radius:999px;
  transition:transform .3s var(--ease),background .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(100deg,var(--ai),var(--hu));
  color:#070912;box-shadow:0 14px 40px -16px rgba(103,232,249,.55)}
.btn-secondary{background:var(--card);color:var(--fg);
  border:1px solid var(--line)}
.btn-secondary:hover{background:rgba(255,255,255,.1)}
/* Компактна nav-кнопка (хедер): циан-ghost у нашому стилі, не «гола» лінка */
.nav-btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-weight:640;font-size:13px;white-space:nowrap;
  padding:9px 16px;border-radius:999px;color:var(--ai);
  border:1px solid rgba(103,232,249,.32);background:rgba(103,232,249,.08);
  transition:background .25s var(--ease),border-color .25s,transform .25s,box-shadow .25s}
.nav-btn:hover{background:rgba(103,232,249,.15);border-color:var(--ai);
  transform:translateY(-1px);box-shadow:0 10px 26px -14px rgba(103,232,249,.5)}
.hero-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;
  font-size:13px;color:var(--fg2)}
.hero-meta .d{display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--ai2);margin-right:7px;vertical-align:middle}
.block__sub{color:var(--fg2);margin:14px 0 0;max-width:60ch;
  line-height:1.6;font-size:16px}
.step__code{display:block;margin-top:16px;font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ai2)}
/* Карти довіри */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:46px}
.trust-card{background:linear-gradient(180deg,rgba(12,16,34,.74),
  rgba(7,10,22,.86));border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:28px;backdrop-filter:blur(10px);
  box-shadow:0 20px 60px -30px #000}
.trust-card--ban{border-color:rgba(239,68,68,.34)}
.trust-card__label{display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ai);
  margin-bottom:14px}
.trust-card--ban .trust-card__label{color:#f87171}
.trust-card h3{font-size:19px;font-weight:720;line-height:1.25;
  letter-spacing:-.015em;margin-bottom:10px}
.trust-card p{color:var(--fg2);font-size:14.5px;line-height:1.6}
.trust-card ul{list-style:none;margin:14px 0 0;display:flex;
  flex-direction:column;gap:9px}
.trust-card ul li{position:relative;padding-left:24px;font-size:14px;
  color:var(--fg);line-height:1.5}
.trust-card ul li::before{content:"";position:absolute;left:0;top:7px;
  width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,var(--ai),var(--hu))}
.trust-card ul.ban li::before{background:#f87171;border-radius:99px;
  width:7px;height:7px;top:8px;left:2px}
.confirm-mock{margin-top:18px;border:1px solid var(--line);
  border-radius:14px;padding:14px;background:rgba(255,255,255,.03);
  font-size:13px;display:flex;flex-direction:column;gap:9px}
.confirm-mock .row{display:flex;gap:10px;color:var(--fg2)}
.confirm-mock .who{font-weight:700;flex:0 0 auto}
.confirm-mock .who.ai{color:var(--ai)}
.confirm-mock .who.you{color:var(--hu)}
.confirm-mock .btns{display:flex;gap:8px;margin-top:4px}
.mini-btn{font-size:12px;padding:7px 14px;border-radius:8px;
  border:1px solid var(--line)}
.mini-btn.accept{background:rgba(103,232,249,.16);color:var(--ai)}
.mini-btn.reject{background:rgba(255,255,255,.05);color:var(--fg2)}
.geo-visual{position:relative;margin-top:18px;height:84px;
  border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.03);display:flex;align-items:center;
  justify-content:space-around;font-size:11px;color:var(--fg2)}
.geo-visual .pin{width:14px;height:14px;border-radius:99px}
.geo-visual .pin.blur{background:var(--ai2);filter:blur(3px);opacity:.6}
.geo-visual .pin.exact{background:var(--ai);
  box-shadow:0 0 12px 2px rgba(103,232,249,.6)}
.geo-visual .geo-arrow{color:var(--fg2);font-size:16px}
.geo-visual .geo-cap{position:absolute;bottom:8px;font-size:10px}
.geo-visual .pin.blur ~ .geo-cap{left:14%}
.geo-visual .geo-cap:last-child{right:12%}
/* FAQ */
.faq-list{margin-top:42px;max-width:760px}
.faq-item{border:1px solid var(--line);border-radius:14px;
  margin-bottom:12px;background:rgba(12,16,34,.6);
  backdrop-filter:blur(8px);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;
  font-weight:620;font-size:16px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--ai);font-size:20px;
  font-weight:400;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 22px 20px;color:var(--fg2);font-size:15px;
  line-height:1.7;max-width:64ch}
.faq-item p strong{color:var(--fg)}
/* Футер 1-ї версії */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--line);
  padding:34px 0;color:var(--fg2);font-size:13px;
  background:rgba(7,9,18,.4)}
.site-footer__in{display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between}
.site-footer .wordmark{font-size:14px}
.foot-links a{color:var(--fg2);text-decoration:none;border-bottom:1px solid transparent}
.foot-links a:hover{color:var(--fg);border-bottom-color:var(--ai)}
@media (max-width:780px){
  .trust-grid{grid-template-columns:1fr}
  .hero-ctas .btn{flex:1 1 auto;justify-content:center}
}

/* ── Доступность / лёгкий режим / мобайл ── */
@media (max-width:780px){
  .stage{height:420px;perspective:1700px}
  .ring{transform:rotateX(var(--tilt))}
}
/* Телефон: карта-плоскость WebGL влізає за рахунок РОЗРАХУНКОВОЇ
   дистанції камери (v2.js sizeRenderer), не CSS-scale. Тут лише трохи
   нижча сцена + менше відступу контролів. */
@media (max-width:560px){
  .stage{height:380px}
  .ctrls{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .ring,.card,.detail__panel,.detail__inner,.scroll-hint,
  .twister,.tw-vid{transition:none!important;animation:none!important}
  .tw-vid{opacity:.4}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}
.no-js .stage,.no-webgl .stage,.no-webgl #hero-canvas{display:none}
/* Коли «Сценарії» падають на статичну сітку (мобілка/слабка машина) —
   ховаємо інструкцію до карусельного жесту («Покрутіть кільце…»):
   без кільця вона тільки збиває з пантелику. Заголовок секції лишається. */
.no-webgl [data-i18n="car.sub"]{display:none}
/* Лёгка версія: ховаємо відео-фон (після краху GPU він малює чорне поверх
   статичної картинки рук) — лишається html-фон bg.jpg. */
.no-webgl #bg-vid{display:none}

/* ── У КОЖНІЙ секції нижче «Сценаріїв» — карусель карток, ЯК У «Сценарії
   використання» (ТІЛЬКИ ПК; vortex.js → .vortex-on, будує сцену в межах
   секції). Заголовок+підзаголовок секції лишаються СТАТИЧНИМИ зверху;
   картки секції стають кільцем: одна спереду (ГОРИЗОНТАЛЬНА, читабельна),
   решта повернуті по циліндру; колесо/перетяг/стрілки/крапки гортають по
   ОДНІЙ. Усі картки ОДНОГО розміру. Структура й порядок секцій ті самі.
   Карусель «Сценарії» (#stage) — окрема, не чіпаємо. Без класу
   (мобілка/no-js/reduced) — звичайна сітка карток. */
html.vortex-on #whynow,html.vortex-on #guarantee,
html.vortex-on #how,html.vortex-on #trust{min-height:0!important;
  padding:0!important;display:block!important;overflow-x:clip}
/* .wrap секції закріплюється (sticky) — заголовок СТАТИЧНИЙ зверху, поки
   скрол гортає кільце; сцена тягнеться на решту висоти екрана. Висоту
   секції (запас на прокрутку) ставить JS */
html.vortex-on .vtx-pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:0 24px}
html.vortex-on .vtx-pin>*{flex:0 0 auto}
/* компактний заголовок, ховаємо довгий «кікер» після сцени — щоб сцена
   лишалась 560px (РОЗМІР КАРТОК = як у «Сценаріях») і все влізло у пін */
html.vortex-on .vtx-pin h2{font-size:clamp(20px,2.4vw,30px);margin:0 0 6px;
  max-width:none}
html.vortex-on .vtx-pin .block__tag{margin-bottom:8px}
html.vortex-on .vtx-pin>.block__sub{margin:6px 0 0;font-size:14.5px}
html.vortex-on .vtx-stage~.block__sub{display:none}
html.vortex-on .vtx-pin .ctrls{margin-top:10px}
html.vortex-on .vtx-pin .dots{margin-top:10px}
/* висота сцени = як у «Сценаріях» (560px) → однаковий розмір карток на
   всьому сайті; на низьких екранах м'яко тиснемо, щоб влізло */
html.vortex-on .vtx-stage{position:relative;width:100%;
  height:min(560px,calc(100vh - 210px));margin:6px 0}
html.vortex-on .vtx-stage canvas{position:absolute;inset:0;
  width:100%!important;height:100%!important;cursor:grab}