/* Общий слой всех посадочных «КтоПридёт»: шрифт, 3D-сцена в первом экране,
   объёмные карточки и блок под видео. Подключается на /, /fit, /beauty,
   /massage, /tutor, /go, /agent — поверх собственных стилей страницы.
   Разметку сцены и блока видео вставляет landing.js. */

:root{
  --kx-brand:#7c3aed;
  --kx-brand2:#e0218a;
  --kx-ink:#16131f;
  --kx-soft:#5b5568;
  --kx-line:#ece7f0;
  --kx-cream:#faf7f5;
  --kx-grad:linear-gradient(120deg,var(--kx-brand),var(--kx-brand2));
}
body{font-family:'Golos Text',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}

/* ---------- 3D-объекты ---------- */
.kx-stage{position:absolute;inset:-60px 0 0;pointer-events:none;overflow:hidden;z-index:0;--mx:0;--my:0;
  -webkit-mask:linear-gradient(transparent,#000 90px,#000 calc(100% - 60px),transparent);mask:linear-gradient(transparent,#000 90px,#000 calc(100% - 60px),transparent)}
.kx-host{position:relative;isolation:isolate}
.kx-host > *:not(.kx-stage){position:relative;z-index:1}

.kx-o{position:absolute;display:block;will-change:transform,translate;
  translate:calc(var(--mx)*var(--d,20)*1px) calc(var(--my)*var(--d,20)*1px);
  transition:translate .35s cubic-bezier(.2,.7,.2,1);
  animation:kxFloat var(--t,9s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes kxFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(var(--amp,-14px)) rotate(calc(var(--r,0deg) + var(--rr,6deg)))}}

/* глянцевая сфера */
.kx-orb{width:var(--s,110px);height:var(--s,110px);border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 14%,transparent 34%),
    radial-gradient(circle at 70% 82%,rgba(22,19,31,.28),transparent 55%),
    linear-gradient(140deg,var(--c1,#a78bfa),var(--c2,#e0218a));
  box-shadow:0 30px 50px -18px color-mix(in srgb,var(--c2,#e0218a) 55%,transparent),inset 0 -10px 22px rgba(22,19,31,.18)}

/* объёмное кольцо (тор) */
.kx-ring{width:var(--s,150px);height:var(--s,150px);border-radius:50%;
  background:conic-gradient(from 210deg,#c4b5fd,#7c3aed,#e0218a,#f9a8d4,#c4b5fd);
  -webkit-mask:radial-gradient(circle,transparent 46%,#000 47%);mask:radial-gradient(circle,transparent 46%,#000 47%);
  filter:drop-shadow(0 22px 26px rgba(124,58,237,.35))}
.kx-ring-wrap{transform-style:preserve-3d;perspective:600px}
.kx-ring-wrap .kx-ring{transform:rotateX(58deg) rotateZ(18deg)}

/* объёмная плитка-значок: толщина набрана слоями тени */
.kx-tile{width:var(--s,84px);height:var(--s,84px);border-radius:26%;display:grid;place-items:center;
  color:#fff;font:900 calc(var(--s,84px)*.48)/1 'Golos Text',system-ui,sans-serif;
  background:linear-gradient(145deg,var(--c1,#8b5cf6),var(--c2,#e0218a));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),inset 0 -6px 12px rgba(22,19,31,.18),
    0 1px 0 var(--c3,#6d28d9),0 2px 0 var(--c3,#6d28d9),0 3px 0 var(--c3,#6d28d9),0 4px 0 var(--c3,#6d28d9),
    0 5px 0 var(--c3,#6d28d9),0 6px 0 var(--c3,#6d28d9),0 7px 0 var(--c3,#6d28d9),0 8px 0 var(--c3,#6d28d9),
    0 9px 0 var(--c3,#6d28d9),0 10px 0 var(--c3,#6d28d9),
    0 30px 38px -10px rgba(124,58,237,.45);
  text-shadow:0 2px 0 rgba(22,19,31,.18)}
.kx-tile.is-coin{border-radius:50%;--c1:#fbbf24;--c2:#f97316;--c3:#c2410c;box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 12px rgba(124,45,18,.22),
    0 1px 0 var(--c3),0 2px 0 var(--c3),0 3px 0 var(--c3),0 4px 0 var(--c3),0 5px 0 var(--c3),0 6px 0 var(--c3),0 7px 0 var(--c3),
    0 26px 34px -10px rgba(249,115,22,.5)}
.kx-tile.is-ok{--c1:#34d399;--c2:#10b981;--c3:#047857;box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),inset 0 -6px 12px rgba(6,78,59,.2),
    0 1px 0 var(--c3),0 2px 0 var(--c3),0 3px 0 var(--c3),0 4px 0 var(--c3),0 5px 0 var(--c3),0 6px 0 var(--c3),0 7px 0 var(--c3),0 8px 0 var(--c3),
    0 28px 36px -10px rgba(16,185,129,.45)}

/* настоящий CSS-куб */
.kx-cube{display:block;position:relative;width:var(--s,74px);height:var(--s,74px);transform-style:preserve-3d;animation:kxSpin var(--t,22s) linear infinite}
.kx-cube b{position:absolute;inset:0;border-radius:18%;display:grid;place-items:center;color:#fff;
  font:900 calc(var(--s,74px)*.42)/1 'Golos Text',system-ui,sans-serif;
  background:linear-gradient(145deg,#8b5cf6,#e0218a);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 -14px 22px rgba(22,19,31,.2);backface-visibility:hidden}
.kx-cube b:nth-child(1){transform:translateZ(calc(var(--s,74px)/2))}
.kx-cube b:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--s,74px)/2));background:linear-gradient(145deg,#7c3aed,#c026d3)}
.kx-cube b:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--s,74px)/2));background:linear-gradient(145deg,#a78bfa,#f472b6)}
.kx-cube b:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s,74px)/2));background:linear-gradient(145deg,#6d28d9,#be185d)}
.kx-cube b:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s,74px)/2));background:linear-gradient(145deg,#c4b5fd,#f9a8d4)}
.kx-cube b:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s,74px)/2));background:linear-gradient(145deg,#5b21b6,#9d174d)}
@keyframes kxSpin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
.kx-cube-wrap{width:var(--s,74px);height:var(--s,74px);perspective:700px;filter:drop-shadow(0 26px 22px rgba(124,58,237,.35))}

/* размытые цветовые пятна под сценой */
.kx-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;pointer-events:none}

/* ---------- сцена с телефоном (вертикальные лендинги) ---------- */
.kx-scene{position:relative;perspective:1400px;--mx:0;--my:0;padding:26px 0 38px}
.kx-scene-tilt{position:relative;transform-style:preserve-3d;width:340px;max-width:100%;margin:0 auto;
  transform:rotateY(calc(-16deg + var(--mx)*9deg)) rotateX(calc(9deg + var(--my)*-7deg)) rotateZ(1.5deg);
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.kx-chip{position:absolute;display:flex;align-items:center;gap:10px;white-space:nowrap;
  padding:11px 15px;border-radius:18px;font-size:13.5px;font-weight:700;color:var(--kx-ink);
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 22px 40px -16px rgba(35,26,51,.38),0 2px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:kxChip var(--t,7s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.kx-chip i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:15px;color:#fff;flex:0 0 auto;background:var(--kx-grad)}
.kx-chip i.ok{background:linear-gradient(135deg,#34d399,#10b981)}
.kx-chip i.gold{background:linear-gradient(135deg,#fbbf24,#f97316)}
.kx-chip small{display:block;font-size:11.5px;font-weight:500;color:var(--kx-soft)}
.kx-chip.c1{left:-86px;top:16%;transform:translateZ(90px)}
.kx-chip.c2{right:-78px;top:44%;transform:translateZ(130px);--dl:-2.5s}
.kx-chip.c3{left:-58px;bottom:9%;transform:translateZ(70px);--dl:-4.5s}
@keyframes kxChip{0%,100%{margin-top:0}50%{margin-top:-10px}}
.kx-scene .kx-o{z-index:0}
.kx-scene .kx-tile,.kx-scene .kx-orb{transform-style:preserve-3d}

/* ---------- объёмные карточки (наклон за курсором) ---------- */
.kx-tilt{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;will-change:transform}
@media (hover:hover){
  .kx-tilt:hover{transform:perspective(900px) rotateX(calc(var(--ty,0)*1deg)) rotateY(calc(var(--tx,0)*1deg)) translateY(-4px);
    box-shadow:0 26px 50px -22px rgba(35,26,51,.3)}
}

/* ---------- блок под видео ---------- */
.kx-video{padding:26px 0 64px}
.kx-video-in{max-width:980px;margin:0 auto;padding:0 24px}
.kx-video-head{text-align:center;max-width:620px;margin:0 auto 26px}
.kx-video-head span{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;
  background:var(--kx-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kx-video-head h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px;color:var(--kx-ink)}
.kx-video-head p{font-size:16.5px;color:var(--kx-soft);margin:0}
.kx-video-persp{perspective:1600px}
.kx-video-frame{position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;
  background:
    radial-gradient(60% 80% at 18% 10%,rgba(167,139,250,.55),transparent 60%),
    radial-gradient(55% 75% at 88% 96%,rgba(224,33,138,.5),transparent 60%),
    linear-gradient(140deg,#231a33,#16131f);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 90px -40px rgba(124,58,237,.55),0 0 0 10px rgba(124,58,237,.06);
  transform:rotateX(calc(4deg + var(--ty,0)*1deg)) rotateY(calc(var(--tx,0)*1deg));
  transform-origin:50% 100%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.kx-video-frame::before{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/100% 44px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/44px 100%;
  -webkit-mask:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.kx-video-frame video,.kx-video-frame iframe,.kx-video-frame img.kx-poster{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}
.kx-video-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px;color:#fff}
.kx-play{all:unset;box-sizing:border-box;flex:0 0 auto;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--kx-grad);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 6px 0 #6d28d9,0 30px 44px -12px rgba(224,33,138,.6);
  transition:transform .15s,box-shadow .15s}
.kx-play::after{content:"";display:block;margin-left:7px;border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent;filter:drop-shadow(0 2px 0 rgba(22,19,31,.2))}
.kx-play:hover{transform:translateY(-2px)}
.kx-play:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 #6d28d9,0 14px 24px -10px rgba(224,33,138,.6)}
.kx-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.kx-play[disabled]{cursor:default}
.kx-video-mid b{font-size:clamp(17px,2.4vw,22px);font-weight:800}
.kx-video-mid small{font-size:14px;color:rgba(255,255,255,.72);max-width:420px}
.kx-soon{position:absolute;left:18px;top:18px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kx-dur{position:absolute;right:18px;bottom:16px;padding:5px 10px;border-radius:10px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(22,19,31,.55)}

@media(max-width:900px){
  .kx-scene{padding:10px 0 20px}
  .kx-scene-tilt{transform:rotateY(-9deg) rotateX(6deg);width:300px}
  .kx-chip.c1{left:-18px}.kx-chip.c2{right:-14px}.kx-chip.c3{left:-8px}
  .kx-chip{font-size:12.5px;padding:9px 12px}
  .kx-hide-m{display:none !important}
  .kx-video{padding:10px 0 48px}
  .kx-video-frame{border-radius:20px;transform:none}
  .kx-play{width:68px;height:68px}
  .kx-video-mid{gap:10px}
  .kx-video-mid small{display:none}
  .kx-soon{left:12px;top:12px;font-size:11px;padding:5px 10px}
  .kx-play::after{border-left-width:20px;border-top-width:12px;border-bottom-width:12px;margin-left:5px}
}
@media (prefers-reduced-motion:reduce){
  .kx-o,.kx-chip,.kx-cube{animation:none}
  .kx-o,.kx-scene-tilt,.kx-video-frame,.kx-tilt{transition:none}
}