:root{
  --ink:#0d1114; --ink2:#151b20; --stone:#eeece7; --paper:#f7f6f2;
  --pool:#46bfe0; --text:#16191c; --muted:#5d646b; --light:#f3f1ec; --lightm:rgba(243,241,236,.72);
  --disp:'Geologica',system-ui,sans-serif; --body:'Onest',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{font-family:var(--body);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-decoration:none}
video,img.cover{display:block}
.rub{font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:inherit}
.wrap{width:min(1280px,100% - 96px);margin:0 auto}
.eyebrow{font:500 15px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pool)}
h2{font:300 clamp(40px,4.6vw,68px)/1.02 var(--disp);letter-spacing:-.025em}
.lede{font:400 20px/1.5 var(--body);color:var(--muted);max-width:34em}
.btn{display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 30px;border-radius:999px;background:var(--pool);color:#05202a;font:600 19px/1 var(--body);white-space:nowrap}
.btn.ghost{background:transparent;color:var(--light);box-shadow:inset 0 0 0 1.5px rgba(243,241,236,.55)}
.media{position:relative;overflow:hidden;border-radius:6px;background:#1c2228}
.media video,.media img{width:100%;height:100%;object-fit:cover}
.label{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:10px;font:500 17px/1 var(--body);color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.label i,.pane-cap i{width:8px;height:8px;border-radius:50%;background:var(--pool);box-shadow:0 0 0 4px rgba(70,191,224,.25)}

/* шапка */
.bar{position:fixed;inset:0 0 auto;z-index:50;height:86px;display:flex;align-items:center;gap:44px;padding:0 48px;color:var(--light)}
.bar-bg{position:absolute;inset:0;background:rgba(13,17,20,.82);backdrop-filter:blur(14px);opacity:0;z-index:-1}
.brand{display:flex;align-items:center;gap:12px;font:400 27px/1 var(--disp);letter-spacing:-.01em}
.brand svg{width:46px;height:26px;color:var(--pool)}
.nav{display:flex;gap:30px;font:400 19px/1 var(--body)}
.nav a{opacity:.86}
.nav a:hover{opacity:1}
.bar .right{margin-left:auto;display:flex;align-items:center;gap:22px;font:500 19px/1 var(--body)}
.bar .btn{height:48px;padding:0 24px}

/* 1. первый экран */
.hero{position:relative;height:100vh;min-height:720px;overflow:hidden;background:var(--ink);color:var(--light)}
.hero-bg{position:absolute;inset:-4%}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,15,.78) 0%,rgba(8,12,15,.42) 46%,rgba(8,12,15,.08) 70%),linear-gradient(0deg,rgba(8,12,15,.55),transparent 40%)}
.hero-dim{position:absolute;inset:0;background:#080c0f;opacity:0;z-index:1}
.hero-text{position:absolute;left:48px;bottom:84px;width:min(700px,52vw);z-index:3}
.title{font:300 clamp(56px,6.1vw,96px)/.98 var(--disp);letter-spacing:-.035em;margin:22px 0 26px}
.hero .lede{color:var(--lightm);font-size:21px;max-width:30em}
.hero-foot{display:flex;align-items:center;gap:28px;margin-top:36px}
.price{font:400 24px/1 var(--disp)}
.rate{position:absolute;right:48px;top:130px;z-index:3;display:flex;align-items:center;gap:14px}
.rate b{font:300 64px/1 var(--disp);letter-spacing:-.03em}
.rate span{font:400 17px/1.3 var(--body);color:var(--lightm)}
.pane{position:absolute;z-index:2;right:13vw;top:calc(50% - min(330px,24vw)*14/9*.46);width:min(330px,24vw);height:calc(min(330px,24vw)*14/9);overflow:hidden;border-radius:4px;box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.18)}
.pane video{width:100%;height:100%;object-fit:cover}
.pane .post{position:absolute;top:0;bottom:0;width:10px;background:#111518}
.pane .post.l{left:0}.pane .post.r{right:0}
.pane-cap{position:absolute;z-index:3;right:13vw;top:calc(50% + min(330px,24vw)*14/9*.54 + 20px);display:flex;align-items:center;gap:10px;font:500 17px/1 var(--body);color:var(--lightm)}

/* 2. космический домик */
.cosmo{background:var(--ink);color:var(--light)}
.cosmo-pin{position:relative;height:100vh;display:grid;grid-template-columns:1fr 50vw}
.cosmo-text{position:relative;padding:0 48px;display:flex;flex-direction:column;justify-content:center}
.steps{position:relative;height:330px;margin-top:28px}
.step{position:absolute;inset:0}
.step h2{max-width:11em}
.step p{font:400 21px/1.5 var(--body);color:var(--lightm);margin-top:24px;max-width:25em}
.dots{display:flex;gap:10px;margin-top:10px}
.dots i{width:42px;height:3px;border-radius:2px;background:rgba(243,241,236,.22);overflow:hidden;position:relative}
.dots i::after{content:"";position:absolute;inset:0;background:var(--pool);transform:scaleX(var(--p,0));transform-origin:left}
.cosmo-media{position:relative;height:100vh;overflow:hidden}
.cosmo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 3. дома */
.houses{position:relative;background:var(--paper);padding:150px 0 140px}
.houses-head{display:grid;grid-template-columns:1fr 1fr;gap:20px 60px;align-items:end;margin-bottom:64px}
.houses-head .eyebrow{grid-column:1/-1}
.list{list-style:none;border-top:1px solid #d6d3cc}
.list li{position:relative;display:grid;grid-template-columns:80px 1fr auto;align-items:baseline;gap:24px;padding:34px 0;border-bottom:1px solid #d6d3cc;cursor:pointer}
.list .n{font:400 17px/1 var(--body);color:var(--muted)}
.list b{font:300 clamp(34px,3.6vw,54px)/1 var(--disp);letter-spacing:-.025em;transition:none}
.list em{font:400 19px/1.3 var(--body);font-style:normal;color:var(--muted);text-align:right}
.list .thumb{display:none}
.float{position:fixed;left:0;top:0;width:300px;height:400px;pointer-events:none;z-index:40;opacity:0;border-radius:6px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.float figure{position:absolute;inset:0;opacity:0}
.float video,.float img{width:100%;height:100%;object-fit:cover}

/* 4. зима */
.winter{position:relative;overflow:hidden;background:#0f1a24;color:var(--light);padding:160px 0 170px}
.winter-bg{position:absolute;inset:-12% 0}
.winter-bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.winter::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,18,26,.88),rgba(10,18,26,.35))}
.winter-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .8fr .62fr;gap:40px;align-items:center}
.winter .lede{color:var(--lightm);margin-top:26px}
.winter-text h2{margin-top:20px}
.w1{aspect-ratio:9/15}
.w2{aspect-ratio:9/14;margin-top:160px}

/* 5. баня */
.banya{background:var(--stone);padding:150px 0}
.banya-grid{display:grid;grid-template-columns:.75fr 1fr .75fr;gap:56px;align-items:center}
.banya-text h2{margin:20px 0 24px}
.b1{aspect-ratio:9/14}
.b2{aspect-ratio:9/14;margin-top:120px}

/* 6. рядом */
.around{background:var(--ink);color:var(--light);padding:140px 0 0}
.around-head{margin-bottom:60px}
.around-head h2{margin:20px 0 22px;max-width:14em}
.around .lede{color:var(--lightm)}
.stack{position:relative}
.card{position:relative;height:100vh;overflow:hidden;background:#000}
.card img{width:100%;height:100%;object-fit:cover}
.card .dim{position:absolute;inset:0;background:#000;opacity:0;z-index:1}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 45%)}
.card .cap{position:absolute;left:48px;bottom:56px;z-index:3;display:flex;flex-direction:column;gap:12px}
.card .cap b{font:300 clamp(44px,5vw,76px)/1 var(--disp);letter-spacing:-.03em}
.card .cap span{font:400 21px/1.4 var(--body);color:var(--lightm)}

/* 7. бронь */
.book{position:relative;overflow:hidden;color:var(--light);padding:170px 0 150px;background:var(--ink)}
.book-bg{position:absolute;inset:0}
.book-bg video{width:100%;height:100%;object-fit:cover;opacity:.55}
.book::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,12,15,.92) 30%,rgba(8,12,15,.3))}
.book .wrap{position:relative;z-index:2}
.book h2{margin:20px 0 24px;font-size:clamp(48px,5.4vw,84px)}
.book .lede{color:var(--lightm)}
.book-card{display:flex;gap:56px;margin:52px 0 44px}
.book-card div{display:flex;flex-direction:column;gap:10px;font:400 17px/1.3 var(--body);color:var(--lightm)}
.book-card b{font:300 40px/1 var(--disp);color:var(--light);letter-spacing:-.02em}
.book-btns{display:flex;gap:16px}
.phones{margin-top:30px;font:500 19px/1 var(--body);color:var(--lightm)}

footer{background:#080b0d;color:var(--lightm);padding:44px 0}
footer .wrap{display:flex;align-items:center;gap:40px;font:400 17px/1.4 var(--body)}
footer .brand{color:var(--light);font-size:24px}
footer nav{margin-left:auto;display:flex;gap:26px}

@media (max-width:900px){
  .wrap{width:calc(100% - 40px)}
  h2{font-size:clamp(36px,10.4vw,46px);line-height:1.04}
  .lede{font-size:18px}
  .eyebrow{font-size:14px;line-height:1.45;letter-spacing:.12em}
  .btn{height:54px;padding:0 26px;font-size:18px}

  /* шапка */
  .bar{padding:0 20px;height:66px;gap:20px}
  .nav,.bar .tel{display:none}
  .brand{font-size:22px;gap:10px;white-space:nowrap}
  .brand svg{width:38px;height:22px}
  .bar .btn{height:42px;padding:0 20px;font-size:17px}

  /* первый экран: окно справа сверху, рейтинг слева, текст внизу */
  .hero{height:100svh;min-height:680px}
  .hero-bg img{object-position:62% 40%}
  .hero-shade{background:linear-gradient(0deg,rgba(8,12,15,.9) 0,rgba(8,12,15,.62) 42%,rgba(8,12,15,.1) 66%,rgba(8,12,15,.6) 100%)}
  .rate{left:20px;right:auto;top:calc(66px + 4svh);flex-direction:column;align-items:flex-start;gap:8px}
  .rate b{font-size:52px}
  .rate span{font-size:16px}
  .pane{right:20px;top:calc(66px + 3svh);width:46vw;height:calc(46vw*14/9);max-height:36svh;max-width:calc(36svh*9/14)}
  .pane .post{width:7px}
  .pane-cap{display:none}
  .hero-text{left:20px;right:20px;width:auto;bottom:28px}
  .title{font-size:clamp(38px,11.2vw,48px);margin:14px 0 16px}
  .hero .lede{font-size:17px;line-height:1.45}
  .hero-foot{flex-wrap:wrap;gap:14px 20px;margin-top:22px}
  .price{font-size:21px}

  /* космический домик: свойство — ролик, свойство — ролик */
  .cosmo-pin{display:flex;flex-direction:column;height:auto;padding:84px 20px 90px}
  .cosmo-text,.steps,.cosmo-media{display:contents}
  .cosmo-text .eyebrow{order:0;margin-bottom:18px}
  .dots{display:none}
  .step{position:relative;inset:auto;margin:0 0 22px}
  .step h2{max-width:none}
  .step p{font-size:18px;margin-top:14px}
  .cosmo-media video{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;border-radius:6px;margin-bottom:48px}
  .cosmo-media video:last-child{margin-bottom:0}
  .step:nth-child(1){order:1}.cosmo-media video:nth-child(1){order:2}
  .step:nth-child(2){order:3}.cosmo-media video:nth-child(2){order:4}
  .step:nth-child(3){order:5}.cosmo-media video:nth-child(3){order:6}

  /* дома: у каждой строки свой ролик */
  .houses{padding:90px 0 80px}
  .houses-head{grid-template-columns:1fr;gap:16px;margin-bottom:36px}
  .list li{grid-template-columns:38% 1fr;grid-template-rows:auto auto 1fr;align-items:start;gap:0 18px;padding:18px 0;cursor:auto}
  .list .thumb{display:block;grid-row:1/-1;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#1c2228}
  .list .thumb video,.list .thumb img{width:100%;height:100%;object-fit:cover}
  .list .n{grid-column:2;font-size:15px;padding-top:4px}
  .list b{grid-column:2;font-size:28px;line-height:1.08;margin-top:10px}
  .list em{grid-column:2;text-align:left;font-size:16px;margin-top:10px}
  .float{display:none}
  .houses-head .hint{display:none}

  /* зима */
  .winter{padding:90px 0 100px}
  .winter::before{background:linear-gradient(180deg,rgba(10,18,26,.9),rgba(10,18,26,.55))}
  .winter-grid{grid-template-columns:1fr 1fr;gap:14px}
  .winter-text{grid-column:1/-1;margin-bottom:22px}
  .w1{aspect-ratio:9/15}
  .w2{aspect-ratio:9/15;margin-top:56px}
  .label{left:12px;bottom:12px;font-size:15px;gap:8px}

  /* баня: текст, под ним два кадра лесенкой */
  .banya{padding:90px 0}
  .banya-grid{grid-template-columns:1fr 1fr;gap:14px}
  .banya-text{grid-column:1/-1;order:-1;margin-bottom:22px}
  .banya-text h2{margin:14px 0 16px}
  .b1{aspect-ratio:9/15}
  .b2{aspect-ratio:9/15;margin-top:56px}

  /* рядом: карточки ложатся друг на друга (sticky), кадр по сюжету */
  .around{padding:90px 0 0}
  .around-head{margin-bottom:40px}
  .card{position:sticky;top:0;height:86svh}
  .card .cap{left:20px;right:20px;bottom:30px;gap:8px}
  .card .cap b{font-size:clamp(34px,10vw,44px)}
  .card .cap span{font-size:17px}
  .card:nth-child(1) img{object-position:18% 50%!important}
  .card:nth-child(2) img{object-position:48% 50%!important}
  .card:nth-child(3) img{object-position:62% 50%!important}
  .card:nth-child(4) img{object-position:62% 50%!important}

  /* бронь */
  .book{padding:100px 0 80px}
  .book::before{background:linear-gradient(0deg,rgba(8,12,15,.94) 20%,rgba(8,12,15,.6))}
  .book h2{font-size:clamp(40px,11.5vw,52px)}
  .book-card{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;margin:36px 0 32px}
  .book-card div:nth-child(2){grid-column:1/-1;order:3}
  .book-card b{white-space:nowrap}
  .book-card b{font-size:34px}
  .book-btns{flex-wrap:wrap;gap:12px}
  .book-btns .btn{flex:1 1 auto;justify-content:center}
  .phones{font-size:18px;line-height:1.5}

  footer .wrap{flex-direction:column;align-items:flex-start;gap:16px}
  footer nav{margin:0;flex-wrap:wrap;gap:10px 22px}
}
@media (min-width:600px) and (max-width:900px){
  .cosmo-media video{aspect-ratio:4/3}
  .list li{grid-template-columns:200px 1fr}
  .w1,.w2,.b1,.b2{aspect-ratio:3/4}
}