/* Глаз Бури v5: блок «Бесплатно покажу три места». Лупа по безымянному черновику.
   Внутри сцены 1em = 10 px макета шириной 900 (размер задаёт ширина сцены через cqw). */

/* ── раскладка: текст слева, сцена справа ── */
.lens-sec .wrap{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;gap:24px;align-items:start}
.lens-text{grid-column:1/6;grid-row:1/span 2}
.lens-stage{grid-column:7/13;grid-row:1}
.lens-note{grid-column:7/13;grid-row:2;margin:0}
.lens-text .col{margin-top:24px}
.lens-text .btn{margin-top:8px}
@media (max-width:960px){
  .lens-sec .wrap{grid-template-rows:none}
  .lens-text,.lens-stage,.lens-note{grid-column:1/-1;grid-row:auto}
  .lens-stage{margin-top:16px}
}

/* ── три пункта: номер в кружке, золотая черта у пункта, на котором лупа ── */
.lens-marks{list-style:none;margin:32px 0 36px;padding:0;display:grid;gap:4px}
.lens-marks li{position:relative;display:grid;grid-template-columns:28px 1fr;column-gap:16px;padding:12px 0 12px 20px;counter-increment:lm;outline-offset:2px}
.lens-marks li::before{content:counter(lm);grid-row:1/span 2;align-self:start;margin-top:2px;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:none;border-radius:50%;border:1px solid rgba(214,179,106,.55);color:var(--gold);font-size:15px;line-height:1;transition:background .3s var(--ease),color .3s var(--ease)}
.lens-marks li::after{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:50% 0;transition:transform .35s var(--ease)}
.lens-marks b{font-weight:500;color:var(--text);line-height:1.4}
.lens-marks span{grid-column:2;font-size:16px;line-height:1.5}
.lens-marks li.is-on::after{transform:scaleY(1)}
.lens-marks li.is-on::before{background:var(--gold);color:var(--cta-text)}
.lens-marks[data-live] li{cursor:default}
.lens-marks{counter-reset:lm}

/* ── окно браузера ── */
.lens-stage{container-type:inline-size;position:relative}
.lens-win{position:relative;font-size:calc(100cqw / 90);border:1px solid #2A3548;border-radius:max(8px,1.2em);overflow:hidden;background:#1A2434}
.lens-bar{position:relative;height:3.6em;background:#151E2D;border-bottom:1px solid #2A3548}
.lens-bar i{position:absolute;top:1.3em;width:1em;height:1em;border-radius:50%;background:#2A3548}
.lens-bar i:nth-child(1){left:1.6em}.lens-bar i:nth-child(2){left:3.4em}.lens-bar i:nth-child(3){left:5.2em}
.lens-bar u{position:absolute;left:11em;top:.9em;width:42em;height:1.8em;border-radius:.9em;background:#222D41}
.lens-page{position:relative;height:83.4em;overflow:hidden;background:#1A2434;touch-action:pan-y}
.lens-layer{position:absolute;inset:0}
.lens-layer>*{position:absolute;margin:0}

/* черновик */
.lw{display:block;background:#2A3548;border-radius:2px}
.lw-hi{background:#3A4A66}
.d-logo{left:2.4em;top:2.2em;width:9em;height:1.8em}
.d-n1,.d-n2,.d-n3,.r-n{top:2.8em;width:6em;height:.8em}
.d-n1,.r-n1{left:58em}.d-n2,.r-n2{left:66.4em}.d-n3,.r-n3{left:74.8em}
.d-hero{left:0;top:6.4em;width:90em;height:35.6em;background:#222D41;border-top:1px solid #2A3548;border-bottom:1px solid #2A3548}
.d-hero svg{display:block;width:100%;height:100%}
.d-hero path{stroke:#2A3548;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.d-t1{left:33em;top:22.6em;width:24em;height:1em}
.d-t2{left:35em;top:24.6em;width:20em;height:1em}
.d-btn{left:4.4em;top:32.2em;width:19em;height:5.4em;border:1px solid #3A4A66;border-radius:4px;background:#222D41}
.d-btn .lw{position:absolute;left:5.5em;top:2.2em;width:8em;height:.8em}
.d-sec{left:2.4em;top:45.2em;width:13em;height:1em}
.lc{top:48em;width:27.2em;height:23.6em;border-radius:6px;overflow:hidden;background:#1F2B3F;border:1px solid #2A3548}
.lc>*{position:absolute;display:block}
.lc.c1{left:2.4em}.lc.c2{left:32em}.lc.c3{left:61.6em}
.lc-th{left:0;top:0;width:100%;height:11.2em;background:#222D41}
.lc-l1{left:1.6em;top:13.2em;width:19em;height:.8em}
.lc-l2{left:1.6em;top:15.2em;width:14em;height:.8em}
.d-f1{left:2.4em;top:77.6em;width:16em;height:.8em}
.d-f2{left:71.6em;top:77.6em;width:16em;height:.8em}

/* готовый слой */
.lens-ready{background:#131C2B}
.r-logo{left:2.4em;top:1.8em;width:2.6em;height:2.6em;border:1.5px solid #D6B36A;border-radius:50%}
.r-n{background:#CBD0DA;opacity:.55;border-radius:2px}
.r-hero{left:0;top:6.4em;width:90em;height:35.6em;background:#0E1420 url(after-photo.webp) 30% 38%/cover no-repeat;filter:brightness(1.55) saturate(1.15)}
.r-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,20,32,.62) 0%,rgba(14,20,32,.3) 50%,rgba(14,20,32,0) 80%)}
.r-h{font-family:var(--display);font-size:5.4em;line-height:1.1;color:#F2EFE8;left:.815em;top:2.556em;width:10.4em;letter-spacing:-.005em}
.r-t{left:4.4em;height:.8em;background:#F2EFE8;border-radius:2px}
.r-t1{top:27.6em;width:30em;opacity:.6}.r-t2{top:29.6em;width:23em;opacity:.45}
.r-btn{left:2.095em;top:15.333em;width:9.05em;height:2.57em;display:flex;align-items:center;justify-content:center;background:#E0C080;border-radius:4px;color:#0A0F18;font-size:2.1em;line-height:1}
.r-sec-a{left:2.4em;top:45.1em;width:6em;height:2px;background:#D6B36A}
.r-sec-b{left:10em;top:44.8em;width:13em;height:.8em;background:#CBD0DA;opacity:.6;border-radius:2px}
.lens-ready .lc{background:#1B2638;border-top:1px solid rgba(214,179,106,.7)}
.lens-ready .lc-th{background:url(after-photo.webp) no-repeat}
.lens-ready .c1 .lc-th{background-size:330% auto;background-position:44% 22%}
.lens-ready .c2 .lc-th{background-size:300% auto;background-position:62% 74%}
.lens-ready .c3 .lc-th{background-size:300% auto;background-position:100% 62%}
.r-l1{left:1.6em;top:13.2em;width:19em;height:.8em;background:#CBD0DA;opacity:.6;border-radius:2px}
.r-pill{left:1.6em;top:15.6em;width:24em;height:6em;background:#26324A;border:1px solid #D6B36A;border-radius:4px}
.r-pill b,.r-pill em,.r-pill i{position:absolute;display:block;font-style:normal;font-weight:400;line-height:1}
.r-pill b{left:.64em;top:.82em;font-size:2.2em;color:#E6E4DF}
.r-pill em{left:5.78em;top:1.11em;font-size:1.8em;color:#CBD0DA}
.r-pill i{left:13.2em;top:2.2em;width:8em;height:1.2em;background:#D6B36A;border-radius:2px}
.r-f{top:77.6em;width:16em;height:1px;background:#D6B36A}
.r-f1{left:2.4em}.r-f2{left:71.6em}

/* метки 1/2/3: кружок 28 px на любой ширине */
.lens-pin{position:absolute;z-index:3;width:28px;height:28px;margin:-14px 0 0 -14px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#D6B36A;color:#0A0F18;font-size:15px;line-height:1;box-shadow:0 0 0 3px rgba(14,20,32,.55)}
.lens-pin b{font-weight:500}
.lens-pin.p1{left:31.11%;top:42.2%}
.lens-pin.p2{left:65.8%;top:25.66%}
.lens-pin.p3{left:96.6%;top:76.6%}

/* лупа: тонкое матовое кольцо, лёгкая тень внутрь, без свечения */
.lens-ring{display:none;position:absolute;left:0;top:0;z-index:4;width:340px;height:340px;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(214,179,106,.95);box-shadow:inset 0 0 22px rgba(10,15,24,.42),inset 0 0 0 1px rgba(10,15,24,.25);will-change:transform}
.lens-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── живой режим (включает lens.js). Без JS виден готовый слой целиком ── */
.lens-stage.is-live .lens-ready{clip-path:url(#lens-clip)}
.lens-stage.is-live .lens-ring{display:block}
.lens-stage.is-live .lens-pin{opacity:0;transform:scale(.7);transition:opacity .4s var(--ease),transform .45s cubic-bezier(.17,.84,.44,1)}
.lens-stage.is-live .lens-pin.is-set{opacity:1;transform:none}