/* Лендинг v6-C - перенос из ops/site/platforma/dizain/варианты-v6/c-studio/index.html, стр. 31 и 38-184.
   Токены, база, .k, .pill, фокус - в base.css. */
.wrap{padding:0 var(--pad);max-width:1440px;margin:0 auto}

/* ---------- разметка видоискателя поверх первого экрана ---------- */
.vf{position:absolute;inset:0;pointer-events:none;z-index:3}
.vf .c{position:absolute;width:28px;height:28px;border:0 solid rgba(255,255,255,.55)}
.vf .tl{left:20px;top:20px;border-left-width:1px;border-top-width:1px}.vf .tr{right:20px;top:20px;border-right-width:1px;border-top-width:1px}
.vf .bl{left:20px;bottom:20px;border-left-width:1px;border-bottom-width:1px}.vf .br{right:20px;bottom:20px;border-right-width:1px;border-bottom-width:1px}
.ruler{position:absolute;top:22%;bottom:22%;width:14px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.35) 0 1px,transparent 1px 9px)}
.ruler.l{left:6px}.ruler.r{right:6px}
.ruler::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;background:var(--red);animation:scan 3.75s ease-in-out infinite}
@keyframes scan{50%{top:30%}}
.vf .meta{position:absolute;bottom:30px;font-size:12px;letter-spacing:.12em;color:var(--dim)}
.vf .meta.l{left:58px}.vf .meta.r{right:58px;display:flex;align-items:center;gap:8px}
.rec{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink var(--beat) steps(1) infinite alternate}
@keyframes blink{to{opacity:.15}}

/* ---------- шапка ---------- */
.top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:26px 58px}
.logo{font-weight:600;font-size:20px;letter-spacing:.02em}
.top nav{display:flex;gap:26px;font-size:15px;color:var(--dim)}
.top nav a:hover{color:var(--white)}

/* ---------- первый экран: полёт кадров ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--black)}
.tunnel{position:absolute;inset:0;perspective:900px;perspective-origin:50% 50%}
.fly{position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#111;
  transform:translate(-50%,-50%) translate3d(var(--x),var(--y),-2600px) rotateY(var(--r));animation:fly var(--d) linear infinite;animation-delay:var(--dl);
  box-shadow:0 20px 50px rgba(0,0,0,.6)}
.fly img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes fly{
  0%{transform:translate(-50%,-50%) translate3d(var(--x),var(--y),-2600px) rotateY(var(--r)) rotateX(var(--rx));opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translate(-50%,-50%) translate3d(var(--x),var(--y),420px) rotateY(var(--r)) rotateX(var(--rx));opacity:0}}
.hero__veil{position:absolute;inset:0;background:radial-gradient(ellipse 52% 46% at 50% 50%,rgba(0,0,0,.94),rgba(0,0,0,.78) 45%,rgba(0,0,0,.2) 80%,rgba(0,0,0,0));z-index:2}
.hero__in{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad)}
.h1{text-shadow:0 4px 40px rgba(0,0,0,.8);margin:16px 0 0;max-width:900px;font-weight:500;font-size:clamp(40px,5.4vw,78px);line-height:1.04;letter-spacing:-0.02em}
.h1 em{font-style:normal;color:#C9C9C9}
.sub{margin:20px 0 32px;max-width:560px;color:var(--dim);font-size:18px}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.rise{opacity:0;transform:translateY(24px);filter:blur(10px);animation:rise 1s var(--ease) forwards}
.d1{animation-delay:.2s}.d2{animation-delay:.4s}.d3{animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none;filter:none}}

/* ---------- наводка на резкость ---------- */
.focus{position:relative;height:220vh}
.focus__stick{position:sticky;top:0;height:100svh;overflow:hidden}
.focus__blur,.focus__sharp{position:absolute;inset:0;background-size:cover;background-position:50% 45%}
.focus__blur{filter:blur(18px) brightness(.6);transform:scale(1.1)}
.focus__sharp{clip-path:inset(32% 36% 32% 36% round 6px)}
.focus__frame{position:absolute;left:50%;top:50%;width:28%;height:36%;transform:translate(-50%,-50%);pointer-events:none}
.focus__frame i{position:absolute;width:22px;height:22px;border:0 solid var(--white)}
.focus__frame i:nth-child(1){left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.focus__frame i:nth-child(2){right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.focus__frame i:nth-child(3){left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}
.focus__frame i:nth-child(4){right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.focus__frame b{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%)}
.focus__frame b::before,.focus__frame b::after{content:"";position:absolute;background:var(--white);left:50%;top:50%;transform:translate(-50%,-50%)}
.focus__frame b::before{width:18px;height:1px}.focus__frame b::after{width:1px;height:18px}
.focus__text{position:absolute;left:0;right:0;bottom:9vh;text-align:center;padding:0 var(--pad)}
.focus__text p{margin:10px auto 0;max-width:900px;font-size:clamp(26px,3vw,44px);line-height:1.15;font-weight:500;letter-spacing:-0.01em;
  text-shadow:0 2px 30px rgba(0,0,0,.6)}
.focus .meta{position:absolute;bottom:24px;font-size:12px;letter-spacing:.12em;color:var(--dim)}
.focus .meta.l{left:var(--pad)}.focus .meta.r{right:var(--pad)}

/* ---------- кому подходит: плавающие сферы ---------- */
.who{position:relative;padding:140px 0 150px;overflow:hidden}
.orb{position:absolute;z-index:0;width:var(--s);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 20px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.5);
  animation:drift var(--t) ease-in-out infinite alternate;opacity:.9}
.orb img{width:100%;height:100%;object-fit:cover}
@keyframes drift{to{transform:translate(var(--dx),var(--dy))}}
.who__in{position:relative;z-index:2}
.h2{margin:0;font-weight:500;font-size:clamp(46px,6vw,92px);line-height:1;letter-spacing:-0.02em}
.who__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;max-width:1100px}
.glass{background:rgba(18,18,18,.72);border:1px solid var(--line);border-radius:18px;padding:30px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.glass h3{margin:12px 0 10px;font-weight:500;font-size:30px;letter-spacing:-0.01em}
.glass p{margin:0;color:var(--dim)}
.note{margin-top:20px;color:var(--grey);font-size:15px}

/* ---------- шаги со световым следом ---------- */
.steps{position:relative;padding:120px 0 140px}
.trail{position:absolute;left:0;top:120px;width:100%;height:calc(100% - 200px);pointer-events:none;z-index:0}
.trail path{fill:none;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(255,74,28,.9))}
.steps__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.step{background:#0b0b0b;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .4s var(--ease),border-color .3s}
.step:hover{transform:translateY(-8px);border-color:rgba(255,74,28,.6)}
.step__img{aspect-ratio:4/3;overflow:hidden}
.step__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.step:hover .step__img img{transform:scale(1.06)}
.step__b{padding:20px 22px 24px}
.step__b .k{color:var(--red)}
.step h3{margin:8px 0 8px;font-weight:500;font-size:26px}
.step p{margin:0;color:var(--dim);font-size:16px}

/* ---------- условия ---------- */
.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:56px}
.terms>div{background:var(--black);padding:30px 26px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
.terms b{font-weight:500;font-size:clamp(60px,6vw,96px);line-height:.9;letter-spacing:-0.03em}
.terms b::after{content:"";display:block;width:44px;height:2px;margin-top:14px;background:var(--red);box-shadow:0 0 12px var(--red)}
.terms span{font-size:18px;margin-top:4px}
.terms p{margin:16px 0 0;color:var(--dim);font-size:15px}
.sec{padding-top:110px;padding-bottom:110px}
.lead{max-width:640px;color:var(--dim);font-size:19px;margin:18px 0 0}

/* ---------- кабинет ---------- */
.cab{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.cab div{background:#0b0b0b;border:1px solid var(--line);border-radius:16px;padding:22px;min-height:160px;transition:border-color .3s,box-shadow .3s}
.cab div:hover{border-color:rgba(255,74,28,.6);box-shadow:0 0 40px rgba(255,74,28,.15)}
.cab h3{margin:10px 0 8px;font-weight:500;font-size:22px}
.cab p{margin:0;color:var(--dim);font-size:15px}

/* ---------- вопросы ---------- */
.faq{margin-top:44px;max-width:1000px}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;font-size:clamp(20px,1.9vw,26px);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .3s var(--ease)}
.faq details[open] .plus{transform:rotate(45deg);border-color:var(--red)}
.faq p{margin:12px 0 0;max-width:720px;color:var(--dim)}

/* ---------- финал ---------- */
.final{position:relative;height:90svh;min-height:560px;overflow:hidden}
.final .hero__in .h1{font-size:clamp(44px,6vw,90px)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px var(--pad) 30px;color:var(--grey);font-size:14px}

@media (max-width:1023px){
  :root{--pad:32px}
  .steps__grid,.terms,.cab{grid-template-columns:1fr 1fr}
  .top nav{display:none}
}
@media (max-width:767px){
  :root{--pad:20px}
  .top{padding:22px 34px}
  .who__grid,.steps__grid,.terms,.cab{grid-template-columns:1fr}
  .vf .meta.l{display:none}
  .focus__text{bottom:6vh}
  .focus__text p{font-size:21px}
  .hero__veil{background:radial-gradient(ellipse 90% 52% at 50% 50%,rgba(0,0,0,.94),rgba(0,0,0,.8) 55%,rgba(0,0,0,.3) 85%,rgba(0,0,0,0))}
  .steps{padding:80px 0 100px}
  .terms>div{min-height:0}
  .who{padding:100px 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none;filter:none}
  .fly{transform:translate(-50%,-50%) translate3d(var(--x),var(--y),-600px) rotateY(var(--r));opacity:.8}
  .focus__sharp{clip-path:none}
}
.h2.mt{margin-top:12px}
.landing a{text-decoration:none}