/* Бриф в стиле «Тонкости» (слово Мориса 24.10 вечер). Форма слева как была; справа голограмма «Что вы получите»:
   сцена /apps/ (кристалл на подиуме), кристалл и луч — цвет выбранного мира (режим color, светотень сцены остаётся), три экрана с результатом мира.
   Под формой — путь миссии из 4 звёзд. Фон: основа #05060b, свет снизу и сбоку, частицы-«молекулы» (put-sloi.js). Телефон: голограмма компактно над формой. */
@font-face{font-family:O;src:url(/fonts/onest-cyrillic.woff2) format("woff2");font-display:swap}
:root{--bh:243,217,160}
html{background:#05060b}
body{background:#080a14}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(55% 60% at 78% 45%,rgba(var(--bh),.32),transparent 72%),radial-gradient(60% 50% at 20% 0%,rgba(243,217,160,.12),transparent 70%),radial-gradient(60% 50% at 10% 100%,rgba(90,80,160,.2),transparent 70%);transition:background .8s}   /* свет закреплён за экраном: без шва на высоте экрана (аудит) */
.bh-dust{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#bvmeet{display:none}   /* одинокий кристалл в пустоте убран — вместо него голограмма */

/* раскладка: форма слева, голограмма справа и едет вместе с прокруткой */
main.bmain{max-width:1280px;margin:0 auto;padding:120px 48px 120px;display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);column-gap:48px;align-items:start}
main.bmain>*{grid-column:1}
main.bmain>.bh{grid-column:2;grid-row:1/span 8;position:sticky;top:96px;margin-top:-56px}
main.bmain .bv{margin-top:24px;max-width:none}
main.bmain>.lead{max-width:none}
/* текст формы — к правилам вида (18 текст, подписи от 14) */
.bv-step>p,.bv-promise,.bv-call p{font-size:18px!important;line-height:1.5}
.bv-q>label,.bv-q>span{font-size:17px!important}
.bv-q input[type=text],.bv-q input:not([type]){font-size:17px!important}
.bv-worlds button,.bv-docks button{font-size:16px!important}.bv-docks button small{font-size:14px!important}
.bv-ch button{font-size:15px!important}.bv-step>.qk{font-size:14px!important}

/* голограмма */
.bh-st{position:relative;width:100%;aspect-ratio:900/740;overflow:hidden;   /* края растворяются в фоне — сцена, а не карточка (аудит) */
  -webkit-mask:radial-gradient(farthest-side at 50% 45%,#000 74%,transparent 100%),linear-gradient(180deg,transparent,#000 14%);-webkit-mask-composite:source-in;
  mask:radial-gradient(farthest-side at 50% 45%,#000 74%,transparent 100%),linear-gradient(180deg,transparent,#000 14%);mask-composite:intersect}   /* подиум остаётся, края тают */
.bh-in{position:absolute;left:0;top:calc(-40px * var(--k,.5));width:900px;height:760px;transform-origin:0 0;transform:scale(var(--k,.5))}
.bh-sc,.bh-v{position:absolute;left:-880px;top:-140px;width:1920px;height:1080px;max-width:none;display:block;filter:brightness(1.65) saturate(1.05)}
.bh-v{opacity:0;transition:opacity 1.2s}.bh-v.on{opacity:1}
.bh-gold,.bh-beam{position:absolute;mix-blend-mode:color;pointer-events:none;background:rgb(var(--bh));transition:background-color .8s}
.bh-gold{left:270px;top:110px;width:360px;height:370px;-webkit-mask:radial-gradient(closest-side,#000 62%,transparent 100%);mask:radial-gradient(closest-side,#000 62%,transparent 100%)}
.bh-beam{left:250px;top:405px;width:400px;height:370px;
  -webkit-mask:conic-gradient(from 152deg at 50% 0,transparent 0deg,#000 18deg,#000 38deg,transparent 56deg,transparent 360deg),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;
  mask:conic-gradient(from 152deg at 50% 0,transparent 0deg,#000 18deg,#000 38deg,transparent 56deg,transparent 360deg),linear-gradient(180deg,#000 70%,transparent);mask-composite:intersect}
.bh-fl{position:absolute;left:250px;top:90px;width:400px;height:400px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.35;
  background:radial-gradient(closest-side,rgba(var(--bh),.7),rgba(var(--bh),.2) 45%,transparent 70%);transition:opacity .6s,background .8s;animation:bhBreath 4.8s ease-in-out infinite}
.bh.sw .bh-fl{opacity:.95}
@keyframes bhBreath{50%{opacity:.5}}
/* экраны результата: стекло с тонкой рамкой цвета мира, плывут каждый в своём ритме */
.bh-s{position:absolute;margin:0;width:var(--w,300px);aspect-ratio:var(--ar,1.6);perspective:700px;animation:bhFloat var(--t,7s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.bh-s i{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#0b0d16 var(--im) center/cover no-repeat;transform:rotateY(var(--ry,0deg));
  box-shadow:0 0 0 1.5px rgba(var(--bh),.7),0 0 34px rgba(var(--bh),.3);transition:opacity .45s,transform .7s cubic-bezier(.16,1,.3,1),box-shadow .8s}
.bh-s i:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),linear-gradient(150deg,rgba(var(--bh),.22),transparent 60%);mix-blend-mode:screen}
.s1{left:8px;top:190px;--ry:24deg;--t:7.3s}.s2{right:8px;top:70px;--ry:-24deg;--t:8.9s;--dl:-2.4s}.s3{right:16px;top:410px;--ry:-16deg;--t:10.1s;--dl:-5.1s}
.bh-s.v{--w:170px!important}.s1.v{left:40px;top:140px}.s2.v{right:40px;top:40px}.s3.v{right:60px;top:330px}
.bh-s:not(.ok) i{opacity:0}
.bh.out .bh-s i{opacity:0;transform:rotateY(var(--ry)) translateY(14px) scale(.94)}
@keyframes bhFloat{50%{transform:translateY(-8px)}}
.bh-s:hover i{transform:rotateY(0deg) scale(1.08);box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 0 4px rgba(var(--bh),.9),0 0 48px rgba(var(--bh),.65)}
.bh-s{z-index:2}.bh-s:hover{z-index:4}
/* подпись под голограммой */
.bh-cap{padding:8px 8px 0}
.bh-k{display:block;font:500 14px/1.3 Mono,ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#f3d9a0}
.bh-w{display:flex;align-items:center;gap:10px;margin-top:12px;font:600 16px/1.3 Onest,O,system-ui,sans-serif;color:rgb(var(--bh));transition:color .8s}
.bh-w i{flex:0 0 28px;height:28px;background:var(--gm) center/contain no-repeat;filter:drop-shadow(0 0 8px rgba(var(--bh),.7))}
.bh-t{margin:8px 0 0;font:600 clamp(20px,1.7vw,24px)/1.25 Unbounded,system-ui,sans-serif;color:#fff}
.bh-d{margin:8px 0 0;font:400 18px/1.5 Onest,O,system-ui,sans-serif;color:#d6d9e4}
.bh-cap>*{transition:opacity .4s}.bh.out .bh-cap>*:not(.bh-k){opacity:0}

/* путь миссии: 4 звезды на тонкой линии, первая горит */
.bmp{list-style:none;margin:8px 0 24px;padding:24px 8px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.bmp:before{content:"";position:absolute;left:12.5%;right:12.5%;top:39px;height:1px;background:linear-gradient(90deg,rgba(243,217,160,.9),rgba(205,212,226,.25) 40%,rgba(205,212,226,.25))}
.bmp li{position:relative;text-align:center;padding:0 4px}
.bmp i{display:block;width:30px;height:30px;margin:0 auto 12px;background:rgba(205,212,226,.5);clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}
.bmp li.on i{background:#f3d9a0;filter:drop-shadow(0 0 10px rgba(243,217,160,.9));animation:bmpStar 3.2s ease-in-out infinite}
@keyframes bmpStar{50%{transform:scale(1.15) rotate(8deg)}}
.bmp b{display:block;font:600 17px/1.25 Onest,O,system-ui,sans-serif;color:#fff}
.bmp li.on b{color:#f3d9a0}
.bmp span{display:block;margin-top:4px;font:400 14px/1.35 Onest,O,system-ui,sans-serif;color:#b9bccb}

/* узкий ноутбук: голограмма уже */
@media(max-height:840px) and (min-width:901px){.bh-d{display:none}}   /* невысокий экран: подпись результата целиком видна без прокрутки */
@media(max-width:1180px){main.bmain{grid-template-columns:minmax(0,1fr) minmax(0,380px);column-gap:32px;padding-left:32px;padding-right:32px}}
/* телефон и планшет стоя: голограмма компактно над формой */
@media(max-width:900px){
  main.bmain{display:block;padding:112px 16px 96px}
  main.bmain>.bh{position:relative;top:auto;margin:8px 0 0}
  .bh-st{aspect-ratio:900/680}.bh-in{top:calc(-30px * var(--k,.4))}
  .bh-cap{padding:0 0 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}.bh-k{flex:1 1 100%;font-size:14px;letter-spacing:.14em}.bh-w{margin-top:0;font-size:15px}.bh-t{flex:1 1 100%;margin-top:4px;font-size:18px}.bh-d{display:none}
  .bmp{padding:16px 0 8px}.bmp b{font-size:16px}.bmp span{font-size:14px}.bmp i{width:24px;height:24px}.bmp:before{top:28px}
}

@media(prefers-reduced-motion:reduce){.bh-s,.bh-fl,.bmp li.on i{animation:none}.bh-s i,.bh-cap>*,.bh-v{transition:none}}

/* шапка как на главной «Тонкости»: без старого ряда «Работы · Цены · Этапы» (12 px Mono), заголовки 600 (аудит) */
.ui-top>nav{display:none!important}
main.bmain .sec-h,.bv-step h2{font-weight:600}
/* аудит вёрстки: «липкая» голограмма держится (overflow:hidden у main и body из case.css её отпускал); зоны касания от 44 px */
main.bmain{overflow:visible}html body,html body.lenis{overflow-x:clip!important;overflow-y:visible!important}
.bv-ok input{width:22px!important;height:22px!important;flex:0 0 22px}
.bv-ch button,.bv-worlds button{min-height:44px}
@media(max-width:980px){.crumbs-m a{display:inline-flex;align-items:center;min-height:44px}}