*{box-sizing:border-box}html{background:#071010;scroll-snap-type:y mandatory}body{margin:0;background:#071010;color:#f2efe8;font-family:Arial,sans-serif}.topbar{position:fixed;z-index:50;top:0;width:100%;height:70px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#071010cc,transparent)}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800}.brand img{width:30px}.topbar nav{display:flex;gap:40px}.topbar nav a{color:#ddd8cf;text-decoration:none;font-size:10px;letter-spacing:.14em}.screen{height:100vh;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}.hero-img{position:absolute;right:0;width:67%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#071010 0 27%,#071010d9 38%,transparent 72%)}.hero-copy{position:absolute;z-index:2;left:4.3vw;top:50%;transform:translateY(-44%);width:45vw}.hero-copy small,.label,.copy small,.contact-copy small{font-size:11px;letter-spacing:.22em;color:#d6a354;font-weight:800}.hero h1{font:400 clamp(46px,4.2vw,74px)/.92 Georgia,serif;margin:22px 0 14px}.hero h1 em,.copy h2 em{font-style:normal;color:#d6a354}.place{font:22px Georgia,serif;color:#c8c3b9}.rule{display:block;width:58px;height:2px;background:#d6a354;margin:24px 0}.lead{font-size:17px;line-height:1.55;max-width:480px;color:#d4cfc6}.facts{display:flex;gap:45px;margin-top:32px}.facts div{padding-right:45px;border-right:1px solid #d6a35455}.facts div:last-child{border:0}.facts b{display:block;font:28px Georgia,serif}.facts span{font-size:12px;color:#aaa69e;line-height:1.4}.label{position:absolute;left:4.3vw;top:9vh;color:#ddd8cf}.label span{margin-left:30px;color:#777}.process{background:#071010}.process-grid{height:100%;padding:15vh 4.3vw 5vh;display:grid;grid-template-columns:56% 44%;gap:4vw}.process figure{margin:0;overflow:hidden}.process figure img{width:100%;height:100%;object-fit:cover}.copy{align-self:center;max-width:520px}.copy h2{font:400 clamp(46px,4vw,68px)/.94 Georgia,serif;margin:22px 0}.copy p{font-size:17px;line-height:1.6;color:#bbb6ad}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;border-top:1px solid #d6a35444;margin-top:38px;padding-top:22px;font-size:10px;letter-spacing:.1em}.steps b{display:block;color:#d6a354;margin-bottom:8px}.video-sec{background:linear-gradient(110deg,#071010,#0b1514)}.video-grid{height:100%;padding:14vh 8vw 5vh;display:grid;grid-template-columns:45% 55%;align-items:center}.phone{position:relative;justify-self:center;width:min(28vh,290px);height:min(72vh,620px);border:3px solid #bdbdb7;border-radius:34px;padding:8px;background:#000}.phone video{width:100%;height:100%;object-fit:cover;border-radius:25px}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border:1px solid white;border-radius:50%;background:#0008;color:#fff;font-size:25px}.watch{margin-top:26px;width:270px;height:62px;border:1px solid #d6a354;border-radius:34px;background:transparent;color:#fff;font-size:10px;letter-spacing:.14em}.watch span{color:#d6a354;margin-left:12px}.finished{padding:14vh 4.3vw 4vh}.gallery{height:60vh;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery figure{margin:0;position:relative;overflow:hidden}.gallery img{width:100%;height:100%;object-fit:cover}.gallery figcaption{position:absolute;left:18px;bottom:15px;font-size:10px;letter-spacing:.15em;text-shadow:0 2px 10px #000}.note{height:17vh;display:flex;align-items:center;gap:28px;max-width:1050px}.note i{width:58px;height:2px;background:#d6a354}.note p{font:24px/1.35 Georgia,serif}.note b{color:#d6a354;font-weight:400}.contacts{background:radial-gradient(circle at 80% 45%,#d6a35418,transparent 24%),#090a09}.contact-copy{position:absolute;left:4.3vw;top:50%;transform:translateY(-48%);z-index:3}.contact-copy h2{font:400 clamp(68px,8vh,106px)/.88 Georgia,serif;margin:18px 0 24px}.contact-copy p{font-size:19px;color:#c9c3b9}.links{display:flex;gap:24px;margin-top:40px}.links a{width:92px;text-align:center;color:#ddd7ce;text-decoration:none;font-size:11px}.links span{display:grid;place-items:center;width:62px;height:62px;border:1px solid #d6a35499;border-radius:50%;margin:0 auto 10px}.links img{width:27px;height:27px}.back{display:inline-block;margin-top:36px;color:#8e887e;text-decoration:none;font-size:10px;letter-spacing:.14em}.bear{position:absolute;right:10vw;top:50%;transform:translateY(-50%);width:min(28vw,390px);opacity:.25;filter:sepia(.4)}.lines{position:absolute;inset:0}.lines i{position:absolute;width:32vw;height:1px;background:linear-gradient(90deg,transparent,#d6a35499,transparent);animation:fly 25s ease-in-out infinite alternate}.lines i:nth-child(1){top:24%;left:-8%;transform:rotate(-15deg)}.lines i:nth-child(2){top:55%;right:-10%;transform:rotate(20deg);animation-delay:-8s}.lines i:nth-child(3){bottom:15%;left:35%;transform:rotate(-7deg);animation-delay:-14s}@keyframes fly{to{translate:24vw 10vh}}.dots{position:fixed;z-index:60;right:20px;top:50%;display:flex;flex-direction:column;gap:11px}.dots span{width:7px;height:7px;border:1px solid #d6a354bb;border-radius:50%}.dots .active{background:#d6a354;box-shadow:0 0 0 4px #d6a35420}.zoom{cursor:zoom-in}.lb{display:none;position:fixed;z-index:100;inset:0;background:#000f;align-items:center;justify-content:center}.lb.open{display:flex}.lb img{max-width:84vw;max-height:86vh}.lb button{position:absolute;color:#fff;background:#0007;border:1px solid #ffffff66}.x{right:24px;top:20px;width:48px;height:48px;border-radius:50%;font-size:26px}.prev,.next{top:50%;width:58px;height:58px;border-radius:50%;font-size:28px}.prev{left:24px}.next{right:24px}.count{position:absolute;bottom:22px;font-size:11px}@media(max-width:900px){html{scroll-snap-type:none}.screen{height:auto;min-height:100vh}.topbar nav,.dots{display:none}.hero-img{width:100%}.shade{background:#071010bb}.hero-copy{left:24px;width:calc(100% - 48px)}.process-grid,.video-grid{grid-template-columns:1fr;padding:120px 24px 50px}.process figure{height:55vh}.finished{padding:120px 24px 50px}.gallery{height:auto;grid-template-columns:1fr}.gallery figure{height:52vh}.note{height:auto;padding:30px 0}.bear{display:none}}

/* ==========================================================
   V35 — stronger dark-green church identity + larger video.
   Inspired by the temple roof tone, not by Rostselmash.
   ========================================================== */
:root{
  --church-green:#0b2a25;
  --church-green-2:#123a32;
  --church-green-3:#1c5146;
  --church-gold:#d6a354;
}

/* Stronger roof-green identity throughout the case */
body{background:#07110f}
.hero{
  background:
    radial-gradient(circle at 82% 24%,rgba(18,58,50,.30),transparent 34%),
    linear-gradient(115deg,#06100e 0%,#0a211d 62%,#0d2d27 100%) !important;
}
.hero .shade{
  background:
    linear-gradient(90deg,#06100e 0 27%,rgba(6,16,14,.92) 39%,rgba(8,28,24,.34) 72%),
    linear-gradient(0deg,rgba(7,33,28,.25),transparent 46%) !important;
}
.topbar{
  background:linear-gradient(180deg,rgba(5,20,17,.92),rgba(5,20,17,.30),transparent) !important;
}
.topbar nav a:hover{color:#79aa98}

.process{
  background:
    radial-gradient(circle at 12% 52%,rgba(28,81,70,.22),transparent 28%),
    linear-gradient(115deg,#06110f,#0a221e 58%,#0d3029) !important;
}
.video-sec{
  background:
    radial-gradient(circle at 71% 48%,rgba(28,81,70,.18),transparent 34%),
    linear-gradient(110deg,#06110f,#0a211d 48%,#0f332c 100%) !important;
}
.finished{
  background:
    radial-gradient(circle at 88% 18%,rgba(28,81,70,.15),transparent 28%),
    linear-gradient(110deg,#07110f,#0a211d 60%,#0d2c26) !important;
}
.contacts{
  background:
    radial-gradient(circle at 78% 46%,rgba(28,81,70,.22),transparent 28%),
    radial-gradient(circle at 84% 48%,rgba(214,163,84,.08),transparent 23%),
    linear-gradient(110deg,#06100e,#0a211d 58%,#0e2f29) !important;
}
.label,.hero-copy small,.copy small,.contact-copy small{color:#e2b25e !important}
.rule,.note i{background:linear-gradient(90deg,#d6a354,#5b8e7b) !important}
.steps{border-top-color:rgba(90,142,123,.42) !important}
.steps b{color:#7fb09e !important}
.dots span{border-color:rgba(113,169,148,.76) !important}
.dots .active{background:#79aa98 !important;box-shadow:0 0 0 4px rgba(121,170,152,.13) !important}

/* Process visual: less raw, more architectural */
.process figure{
  border:1px solid rgba(115,168,148,.16);
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}
.process figure img{
  object-position:center 42% !important;
  filter:saturate(.82) contrast(1.03);
}

/* Larger vertical video — it should be a real hero of its screen */
.video-grid{
  grid-template-columns:52% 48% !important;
  padding:11vh 6vw 4vh !important;
}
.phone{
  width:min(36vh,380px) !important;
  height:min(80vh,720px) !important;
  border-color:#86aa9c !important;
  box-shadow:
    0 35px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(121,170,152,.12) !important;
}
.phone::before{
  content:"";
  position:absolute;
  inset:-28px;
  border:1px solid rgba(121,170,152,.10);
  border-radius:48px;
  pointer-events:none;
}
.play{
  width:88px !important;
  height:88px !important;
  border-color:#d6a354 !important;
  background:rgba(5,20,17,.64) !important;
  backdrop-filter:blur(7px);
}
.watch{
  border-color:#79aa98 !important;
}
.watch span{color:#d6a354 !important}
.copy h2 em{color:#8fb8a8 !important}

/* Gold + green moving line mix on contacts */
.lines i:nth-child(1),.lines i:nth-child(3){
  background:linear-gradient(90deg,transparent,rgba(121,170,152,.62),transparent) !important;
}
.lines i:nth-child(2){
  background:linear-gradient(90deg,transparent,rgba(214,163,84,.62),transparent) !important;
}

@media(max-height:780px) and (min-width:901px){
  .video-grid{padding-top:9vh !important}
  .phone{width:min(32vh,330px) !important;height:min(76vh,650px) !important}
}


/* ==========================================================
   V36 — only the three requested corrections.
   ========================================================== */

/* 1. Video action is now an editorial arrow, not a framed button. */
.watch.watch-link{
  width:auto !important;
  height:auto !important;
  margin-top:30px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  display:inline-flex;
  align-items:center;
  gap:13px;
  color:#f1eee7 !important;
  cursor:pointer;
}
.watch-arrow{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(214,163,84,.58);
  border-radius:50%;
  color:#d6a354 !important;
  font:22px/1 Georgia,serif;
  transition:transform .25s ease,border-color .25s ease;
}
.watch-text{
  color:#f1eee7 !important;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}
.watch-time{
  color:#d6a354 !important;
  font-size:10px;
  letter-spacing:.12em;
}
.watch.watch-link:hover .watch-arrow{
  transform:translate(3px,3px);
  border-color:#d6a354;
}

/* 2. Exact user photo in process screen — composed as an architectural image. */
.process figure img{
  object-fit:cover !important;
  object-position:center 57% !important;
  filter:saturate(.88) contrast(1.03) brightness(.91) !important;
}

/* 3. Hero figures: one strict grid, matching baselines and separators. */
.facts{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:0 !important;
  width:min(540px,100%) !important;
  margin-top:30px !important;
  align-items:stretch !important;
}
.facts>div{
  min-width:0;
  padding:0 28px 0 0 !important;
  margin:0 !important;
  border-right:1px solid rgba(214,163,84,.42) !important;
  display:grid !important;
  grid-template-rows:auto auto !important;
  align-content:start !important;
}
.facts>div+div{
  padding:0 0 0 28px !important;
  border-right:0 !important;
}
.facts b{
  display:block !important;
  margin:0 0 9px !important;
  padding:0 !important;
  font:400 27px/1.05 Georgia,"Times New Roman",serif !important;
  letter-spacing:0 !important;
  white-space:nowrap;
  color:#f2efe8 !important;
}
.facts span{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  min-height:34px;
  font-size:11px !important;
  line-height:1.45 !important;
  letter-spacing:.04em !important;
  color:#b9b4aa !important;
}


/* V37 — exact requested changes only */

/* Process photo becomes a full-screen, softly blurred background like hero. */
.process{
  position:relative;
  background:#07110f !important;
}
.process::before{
  content:"";
  position:absolute;
  inset:-12px;
  background:
    linear-gradient(90deg,rgba(5,18,15,.76) 0%,rgba(5,18,15,.30) 48%,rgba(5,18,15,.80) 100%),
    url("church/process-user.jpg") center 52% / cover no-repeat;
  filter:blur(3.2px) saturate(.82) brightness(.72);
  transform:scale(1.025);
}
.process::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(4,18,15,.18),rgba(7,27,23,.34));
  pointer-events:none;
}
.process .label{z-index:3}
.process-grid{
  position:relative;
  z-index:2;
  grid-template-columns:56% 44% !important;
}
.process-grid>figure{
  visibility:hidden !important;
  pointer-events:none !important;
}
.process .copy{
  background:rgba(5,22,18,.56);
  border-left:1px solid rgba(214,163,84,.45);
  padding:38px 42px;
  backdrop-filter:blur(5px);
}

/* Requested horizontal arrow pointing right. */
.watch-arrow{
  font-family:Arial,sans-serif !important;
  font-size:25px !important;
  line-height:1 !important;
}

/* Poster from the real 57s frame: user standing inside the object. */
.phone video{
  object-position:center center !important;
}


/* ==========================================================
   V38 — animated gold line identity on video screen only.
   Keeps V37 layout; adds premium moving ribbons/lines.
   ========================================================== */
.video-sec{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 74% 44%,rgba(214,163,84,.07),transparent 28%),
    radial-gradient(circle at 18% 55%,rgba(31,85,72,.14),transparent 30%),
    linear-gradient(110deg,#06110f,#0a211d 48%,#0f332c 100%) !important;
}
.video-sec .label,
.video-sec .video-grid{
  position:relative;
  z-index:4;
}
.video-gold-lines{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:.95;
}
.vg-line{
  position:absolute;
  display:block;
  height:1.5px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(214,163,84,.12) 10%,
    rgba(245,204,117,.88) 44%,
    rgba(214,163,84,.32) 67%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(214,163,84,.22),
    0 0 24px rgba(214,163,84,.10);
  transform-origin:left center;
  will-change:transform,opacity;
}

/* Main lower ribbon */
.vg-a{
  width:72vw;
  left:-8vw;
  bottom:18vh;
  transform:rotate(8deg);
  animation:vgA 22s ease-in-out infinite alternate;
}
/* Upper-left sweep */
.vg-b{
  width:42vw;
  left:-12vw;
  top:19vh;
  transform:rotate(18deg);
  opacity:.62;
  animation:vgB 27s ease-in-out infinite alternate;
}
/* Midline crossing behind content */
.vg-c{
  width:52vw;
  left:30vw;
  top:58vh;
  transform:rotate(-8deg);
  opacity:.44;
  animation:vgC 31s ease-in-out infinite alternate;
}
/* Fine far-right accent */
.vg-d{
  width:30vw;
  right:-7vw;
  bottom:9vh;
  transform:rotate(-11deg);
  opacity:.34;
  animation:vgD 35s ease-in-out infinite alternate;
}

@keyframes vgA{
  0%{transform:translate3d(-5vw,2vh,0) rotate(8deg) scaleX(.96);opacity:.40}
  48%{opacity:.92}
  100%{transform:translate3d(15vw,-5vh,0) rotate(5deg) scaleX(1.04);opacity:.58}
}
@keyframes vgB{
  0%{transform:translate3d(-2vw,0,0) rotate(18deg);opacity:.28}
  100%{transform:translate3d(17vw,10vh,0) rotate(12deg);opacity:.66}
}
@keyframes vgC{
  0%{transform:translate3d(-7vw,4vh,0) rotate(-8deg);opacity:.22}
  100%{transform:translate3d(9vw,-8vh,0) rotate(-4deg);opacity:.50}
}
@keyframes vgD{
  0%{transform:translate3d(7vw,3vh,0) rotate(-11deg);opacity:.15}
  100%{transform:translate3d(-10vw,-5vh,0) rotate(-7deg);opacity:.36}
}

/* Small gold frame accent around the phone to connect with the ribbons */
.video-sec .phone{
  position:relative;
  z-index:5;
  box-shadow:
    0 35px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(214,163,84,.18),
    0 0 38px rgba(214,163,84,.07) !important;
}
.video-sec .phone::after{
  content:"";
  position:absolute;
  inset:-14px;
  border:1px solid rgba(214,163,84,.12);
  border-radius:42px;
  pointer-events:none;
}

/* Keep text readable against animated lines */
.video-sec .copy{
  position:relative;
  z-index:5;
}
.video-sec .copy::before{
  content:"";
  position:absolute;
  inset:-40px -50px;
  background:radial-gradient(circle at 50% 50%,rgba(6,17,15,.72),rgba(6,17,15,.10) 72%,transparent);
  z-index:-1;
  pointer-events:none;
}

@media(max-width:900px){
  .vg-line{opacity:.25 !important}
  .vg-b,.vg-d{display:none}
}
@media(prefers-reduced-motion:reduce){
  .vg-line{animation:none!important}
}


/* V39 — requested typography cleanup only */

/* Make section headers "ПРОЦЕСС РАБОТ 01/03" and "ВИДЕО С ОБЪЕКТА 02/03" clearly readable. */
.label{
  font-size:15px !important;
  line-height:1.2 !important;
  letter-spacing:.20em !important;
  font-weight:800 !important;
}
.label span{
  margin-left:34px !important;
  font-size:13px !important;
  letter-spacing:.18em !important;
  color:#8f958f !important;
}

/* Slightly larger on wide desktop, where the previous version looked especially tiny. */
@media(min-width:1400px){
  .label{
    font-size:16px !important;
  }
  .label span{
    font-size:14px !important;
  }
}

/* Keep laptop layouts balanced. */
@media(min-width:901px) and (max-height:780px){
  .label{
    font-size:13px !important;
  }
  .label span{
    font-size:12px !important;
  }
}


/* ==========================================================
   V40 — ONLY requested cleanup:
   1) top nav matches Rostselmash alignment/look
   2) hero project index removed
   ========================================================== */

/* Rostselmash-like header/navigation */
.topbar{
  height:68px !important;
  padding:0 3.2vw !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  background:linear-gradient(180deg,rgba(5,13,12,.88),rgba(5,13,12,.20),transparent) !important;
}
.topbar .brand{
  justify-self:start !important;
}
.topbar nav{
  justify-self:center !important;
  display:flex !important;
  gap:44px !important;
}
.topbar nav a{
  color:#a9aaa6 !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-decoration:none !important;
}
.topbar nav a:hover{
  color:#f2efe8 !important;
}

/* No side/auxiliary project index in church hero */
.hero-copy > small:first-child{
  display:none !important;
}


/* V50 — virtual-phone video must stay inside the phone */
.phone video::-webkit-media-controls-fullscreen-button{
  display:none !important;
}
.phone video::-webkit-media-controls-picture-in-picture-button{
  display:none !important;
}