/* СТВОРКА72 — не лендинг, а инструмент: слева окно, справа ответ. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Manrope:wght@400;500;600;800&display=swap');

:root{
  --sky-img:url(/photos/sky.jpg);
  --sky-deep:#0f3d63;
  --sky:#2f8fd8;
  --sky-soft:#eaf4fd;
  --sky-line:#d7e7f5;
  --txt:#14324d;
  --txt-soft:#5b7085;
  --night:#080d16;
  --frost:#c3d9ef;
  --frost-dim:#8299b3;
  --amber:#ffab3d;
  --amber-deep:#ff7a18;
  --cream:#f8f4ec;
  --ink:#151a20;
  --ink-soft:#5a6470;
  --line:rgba(255,255,255,.10);
  --line-dark:#e6ded0;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font:400 16px/1.6 Manrope,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:image-set(url(/photos/cozy_v1_book.webp) type("image/webp"), url(/photos/cozy_v1_book_1600.jpg) type("image/jpeg")) center 72%/cover no-repeat fixed,var(--night);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Unbounded,Manrope,sans-serif;font-weight:900;line-height:1.08;letter-spacing:-.03em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* ── верхняя строка ──────────────────────────────────── */
.app{height:100dvh;min-height:600px;display:flex;flex-direction:column;position:relative;isolation:isolate;background:transparent}
.app::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(102deg,rgba(6,20,34,.74) 0%,rgba(7,23,39,.68) 18%,rgba(8,26,44,.58) 38%,
    rgba(9,29,49,.52) 58%,rgba(10,32,54,.46) 80%,rgba(10,32,54,.44) 100%),
  linear-gradient(180deg,rgba(6,20,34,.1) 0%,transparent 26%)}
.bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px;flex:0 0 auto;background:rgba(9,26,44,.55);backdrop-filter:blur(16px) saturate(1.15);border-bottom:1px solid rgba(255,255,255,.13)}

/* ── лицевая: кадр во весь экран ─────────────────────── */
.hero{position:relative;min-height:calc(100dvh - 58px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate;padding:clamp(30px,6vh,64px) 0 clamp(64px,9vh,92px)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--sky-img) center/cover no-repeat fixed,#bcd9f2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.58) 32%,rgba(233,244,253,.2) 60%,transparent 80%),
             linear-gradient(180deg,rgba(255,255,255,.34) 0%,transparent 24%,transparent 64%,rgba(197,224,246,.5) 100%)}

.hero-in{position:relative;width:100%;max-width:1100px;margin:0 auto;padding:0 26px}
.hero-slogan{font-family:Unbounded,sans-serif;font-weight:500;font-size:clamp(15px,1.7vw,20px);letter-spacing:-.01em;color:var(--amber-deep);margin-bottom:clamp(12px,2vh,20px);text-shadow:0 2px 18px rgba(255,255,255,.9)}
.hero-h{font-size:clamp(36px,4.9vw,64px);max-width:15ch;color:var(--sky-deep);letter-spacing:-.05em;line-height:.98;text-shadow:0 4px 30px rgba(255,255,255,.85)}
.hero-h em{display:block;font-style:normal;white-space:nowrap;font-size:.58em;letter-spacing:-.03em;margin-top:.18em;color:var(--amber-deep);text-shadow:0 4px 26px rgba(255,255,255,.9)}
.hero-sub{margin-top:clamp(14px,2.4vh,24px);max-width:44ch;font-size:clamp(16px,1.5vw,19.5px);line-height:1.56;color:#14324d;font-weight:600;text-shadow:0 2px 14px rgba(255,255,255,.85)}

.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(24px,3.8vh,38px)}

/* большая кнопка «позвонить» — главное действие лицевой */
.btn-call{display:inline-flex;align-items:center;gap:16px;padding:16px 34px 16px 26px;border-radius:20px;
  background:linear-gradient(160deg,var(--amber) 0%,var(--amber-deep) 100%);color:#2a1200;
  box-shadow:0 20px 44px -16px rgba(255,110,10,.85),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .16s,box-shadow .16s}
.btn-call:hover{transform:translateY(-3px);box-shadow:0 28px 56px -18px rgba(255,110,10,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-call .ph{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.35);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn-call .ph svg{width:23px;height:23px;fill:#3b1a00}
.btn-call .txt{display:flex;flex-direction:column;gap:1px;text-align:left}
.btn-call .cl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.btn-call b{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(21px,2.2vw,27px);letter-spacing:-.03em;white-space:nowrap}
.btn-call small{font-size:12.5px;font-weight:700;opacity:.72}
/* вторая крупная кнопка первого экрана — «написать» */
.btn-write{display:inline-flex;align-items:center;gap:16px;padding:16px 30px 16px 24px;border-radius:20px;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(12px);
  box-shadow:0 16px 36px -18px rgba(4,16,30,.9);transition:transform .16s,background .16s}
.btn-write:hover{background:rgba(255,255,255,.24);transform:translateY(-3px)}
.btn-write .ph{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.btn-write .ph svg{width:23px;height:23px;fill:#fff}
.btn-write .txt{display:flex;flex-direction:column;gap:1px;text-align:left}
.btn-write .cl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.btn-write b{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(18px,1.7vw,21px);letter-spacing:-.03em}
.btn-write small{font-size:12.5px;font-weight:600;opacity:.72}
.btn-see{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:20px 28px;border-radius:20px;
  background:rgba(255,255,255,.72);color:var(--sky-deep);font:800 16px Manrope,sans-serif;
  border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(10px);box-shadow:0 14px 32px -18px rgba(12,48,80,.7);transition:.16s}
.btn-see::after{content:"";width:8px;height:8px;border-right:2px solid var(--sky);border-bottom:2px solid var(--sky);transform:rotate(45deg) translateY(-2px)}
.btn-see:hover{background:#fff;transform:translateY(-3px)}

.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:9px 26px;margin-top:clamp(24px,3.6vh,38px);padding-top:clamp(18px,2.6vh,26px);border-top:1px solid rgba(15,61,99,.16)}
.hero-facts li{position:relative;padding-left:20px;font-size:14.5px;font-weight:700;color:#14324d;text-shadow:0 2px 12px rgba(255,255,255,.8)}
.hero-facts li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--amber-deep);box-shadow:0 0 10px rgba(255,122,24,.75)}

.hero-down{position:absolute;left:50%;bottom:clamp(18px,3vh,30px);transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-deep);white-space:nowrap;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);border-radius:99px;padding:9px 18px;backdrop-filter:blur(8px);box-shadow:0 10px 26px -16px rgba(12,48,80,.8)}
.hero-down::after{content:"";width:9px;height:9px;border-right:2px solid var(--amber-deep);border-bottom:2px solid var(--amber-deep);transform:rotate(45deg) translateY(-2px);animation:nudge 1.9s ease-in-out infinite}
.hero-down:hover{background:#fff}
@keyframes nudge{0%,100%{transform:rotate(45deg) translate(0,-2px)}50%{transform:rotate(45deg) translate(3px,1px)}}
.logo{font-family:Unbounded,sans-serif;font-weight:900;font-size:18px;color:#fff;letter-spacing:-.04em;display:flex;align-items:center;gap:9px}
.logo i{width:10px;height:15px;border-radius:2px;background:linear-gradient(180deg,var(--amber),var(--amber-deep));box-shadow:0 0 14px rgba(255,171,61,.8)}
.logo span{color:var(--amber)}
.bar-right{display:flex;align-items:center;gap:16px}
.tel{color:#fff;font-weight:800;font-size:16px}
.tel small{display:block;font-weight:600;font-size:10.5px;color:rgba(214,231,247,.72);letter-spacing:.08em;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--amber),var(--amber-deep));color:#231000;border:0;border-radius:12px;padding:15px 24px;font:800 15.5px Manrope,sans-serif;box-shadow:0 8px 22px -8px rgba(255,122,24,.6);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(255,122,24,.7)}
.btn.sm{padding:11px 18px;font-size:14.5px;border-radius:10px}
.btn-ghost{background:#fff;color:var(--sky-deep);border:1.5px solid var(--sky-line);box-shadow:none}

/* кнопки лицевой — ниже .btn, иначе градиент кнопки перебьёт стекло */
.btn-big{flex-direction:column;align-items:flex-start;gap:1px;padding:13px 30px;border-radius:15px}
.btn-big span{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
.btn-big b{font-family:Unbounded,sans-serif;font-size:19.5px;font-weight:900;letter-spacing:-.03em;white-space:nowrap}
.btn-glass{background:rgba(255,255,255,.13);color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:none;backdrop-filter:blur(10px);padding:15px 26px}
.btn-glass:hover{background:rgba(255,255,255,.24);border-color:#fff;transform:translateY(-2px)}

/* ── сцена и панель ──────────────────────────────────── */
.stage-grid{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.8fr);min-height:0;gap:16px;padding:16px 16px 18px}

.stage::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(5px);background:radial-gradient(ellipse at 50% 46%,rgba(6,20,34,.5) 0%,rgba(6,20,34,.25) 55%,transparent 78%)}
.stage{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vh,20px);padding:clamp(10px,2.4vh,26px) 26px 18px;min-height:0;overflow:hidden;background:none}
.stage::before{content:none}

.stage-q{position:relative;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#7c3d06;text-align:center;margin-top:4px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.95);border-radius:99px;padding:9px 18px;box-shadow:0 6px 20px rgba(12,48,80,.18);backdrop-filter:blur(8px)}
.win{position:relative;flex:0 1 auto;min-height:0;height:min(56vh,460px);width:auto;max-width:100%;overflow:visible;filter:drop-shadow(0 26px 46px rgba(20,45,72,.42))}

.win .hit{fill:transparent;cursor:pointer}
.win .slope{fill:none;stroke:rgba(15,34,55,.14);stroke-width:1.5}
.win .seam{fill:none;stroke:rgba(15,34,55,.22);stroke-width:2;stroke-dasharray:7 9}
.win .frame-out{fill:url(#pvc);stroke:rgba(255,255,255,.35);stroke-width:1}
.win .frame-in{fill:url(#pvc2);stroke:rgba(0,0,0,.18);stroke-width:1}
.win .seal{fill:none;stroke:#2f3a46;stroke-width:5;stroke-linejoin:round;opacity:.75}
.win .glass{fill:rgba(214,236,252,.42);stroke:rgba(255,255,255,.8);stroke-width:1.5}
.win .refl{fill:rgba(255,255,255,.5)}
.win .halo{fill:rgba(255,214,140,.35)}
.win .metal{fill:url(#metal);stroke:rgba(0,0,0,.22);stroke-width:.8}
.win .zone{cursor:pointer;transition:.22s}
.win .zone:hover .slope,.win .zone:hover .seam{stroke:var(--amber);stroke-opacity:.8}
.win .zone:hover .seal{stroke:var(--amber);opacity:1}
.win .zone:hover .glass{stroke:var(--amber)}
.win .zone:hover .metal{fill:var(--amber)}
.win .zone.on .slope,.win .zone.on .seam{stroke:var(--amber);stroke-opacity:1;filter:drop-shadow(0 0 8px rgba(255,171,61,.6))}
.win .zone.on .seal{stroke:var(--amber);opacity:1;filter:drop-shadow(0 0 10px rgba(255,171,61,.55))}
.win .zone.on .glass{stroke:var(--amber);stroke-width:2;filter:drop-shadow(0 0 14px rgba(255,171,61,.45))}
.win .zone.on .metal{fill:var(--amber);filter:drop-shadow(0 0 9px rgba(255,171,61,.7))}
.win .zone:focus{outline:none}

.hints{position:relative;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:560px;margin-top:2px}
.hint{background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);color:var(--sky-deep);border-radius:99px;padding:9px 16px;font-size:13.5px;font-weight:700;transition:.15s;backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(12,48,80,.16)}
.hint:hover{background:#fff;border-color:var(--amber-deep);color:#0f2237}
.hint.on{background:var(--amber);border-color:var(--amber-deep);color:#3a1c00}

/* ── панель ──────────────────────────────────────────── */
.panel{background:rgba(255,255,255,.90);backdrop-filter:blur(18px);display:flex;flex-direction:column;min-height:0;border:1px solid rgba(255,255,255,.85);border-radius:22px;overflow:hidden;box-shadow:0 26px 60px -24px rgba(12,48,80,.45);color:var(--txt)}
.tabs{display:flex;border-bottom:1px solid var(--sky-line);flex:0 0 auto;overflow-x:auto;scrollbar-width:none;background:rgba(255,255,255,.55)}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;padding:15px 18px;font-size:14.5px;font-weight:700;color:var(--txt-soft);border-bottom:2px solid transparent;white-space:nowrap;transition:.15s}
.tab:hover{color:var(--sky-deep)}
.tab.on{color:var(--sky-deep);border-bottom-color:var(--sky)}
.pane{display:none;padding:26px 30px 22px}
.pane.on{display:block;animation:fade .3s ease both}
.panes{flex:1 1 auto;overflow-y:auto;min-height:0}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.panel h1{font-size:clamp(23px,2vw,29px);margin-bottom:11px;max-width:20ch;color:var(--sky-deep)}
.panel h2{font-size:20px;margin:22px 0 10px;color:var(--sky-deep)}
.panel .lead{font-size:16px;color:var(--txt-soft);max-width:54ch;line-height:1.62}
.tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--sky);border-radius:99px;padding:6px 13px;margin-bottom:14px}

.facts{list-style:none;margin-top:26px;border-top:1px solid var(--sky-line)}
.facts li{padding:13px 0;border-bottom:1px solid var(--sky-line);font-size:15px;color:var(--txt-soft)}
.facts b{font-family:Unbounded,sans-serif;font-size:15px;color:var(--sky-deep);margin-right:9px;letter-spacing:-.02em}

.todo{list-style:none;margin:20px 0 0}
.todo li{padding:9px 0 9px 26px;position:relative;font-size:15.5px;color:var(--txt-soft);border-bottom:1px solid var(--sky-line)}
.todo li:last-child{border-bottom:0}
.todo li::before{content:"";position:absolute;left:2px;top:16px;width:10px;height:10px;border-radius:50%;border:2px solid var(--sky)}

.calcline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 16px;padding:16px 18px;background:var(--night);border-radius:14px;color:var(--cream)}
.cnt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--frost-dim)}
.cnt button{width:32px;height:32px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--cream);border-radius:9px;font-size:18px;font-weight:800}
.cnt button:hover{border-color:var(--amber);color:var(--amber)}
.cnt b{font-family:Unbounded,sans-serif;font-size:17px;min-width:22px;text-align:center;color:var(--cream)}
.money{text-align:right}
.money b{display:block;font-family:Unbounded,sans-serif;font-size:clamp(20px,2.1vw,27px);font-weight:900;color:var(--sky-deep);letter-spacing:-.03em;line-height:1.1}
.money span{font-size:12.5px;color:var(--txt-soft)}

.grab{display:flex;gap:9px}
.grab input{flex:1;padding:15px 16px;border:1.5px solid var(--sky-line);border-radius:12px;font:500 16px Manrope,sans-serif;background:#fff;min-width:0;color:var(--txt)}
.grab input:focus{outline:0;border-color:var(--amber-deep)}
.fine{font-size:12.5px;color:var(--ink-soft);margin-top:10px}

/* содержимое вкладок */
.rows{width:100%;border-collapse:collapse;font-size:15.5px;margin-top:6px}
.rows td{padding:11px 0;border-bottom:1px solid var(--sky-line);color:var(--txt-soft)}
.rows td:last-child{text-align:right;font-family:Unbounded,sans-serif;font-weight:700;white-space:nowrap}
.rows tr:last-child td{border-bottom:0}
.tip{padding:18px 0;border-bottom:1px solid var(--sky-line)}
.tip:last-child{border-bottom:0}
.tip h3{font-size:17px;margin-bottom:6px;color:var(--sky-deep)}
.tip p{font-size:15px;color:var(--txt-soft)}
.tip-when{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid var(--amber);padding-bottom:2px}

/* ── текст для поиска ────────────────────────────────── */
.wrap{max-width:1100px;margin:0 auto;padding:0 26px}
/* полоски под будущие фото работ и отзывы — тот же кадр, что и вся страница */
.strip{position:relative;isolation:isolate;padding:64px 0;color:#e6eff8;background:transparent}
.strip::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,20,34,.78)}
.strip h2{font-size:clamp(20px,2.6vw,28px);margin-bottom:10px;color:#fff}
.strip .sub{color:#b9cee1;margin-bottom:22px}

/* чипы услуг на первом экране */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,2vh,20px)}
.chip{display:inline-flex;align-items:center;padding:9px 15px;border-radius:99px;font:700 13.5px Manrope,sans-serif;
  color:#e8f1fa;background:rgba(12,32,54,.5);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);transition:.15s}
.chip:hover{background:rgba(22,52,84,.72);border-color:rgba(255,171,61,.8);color:#fff;transform:translateY(-1px)}
.chip-info{cursor:pointer;color:var(--amber);border-color:rgba(255,171,61,.45)}
.chip-info:hover{background:rgba(255,171,61,.18);color:#fff}

/* карточка «о компании» */
dialog.about{margin:auto;max-width:560px;width:calc(100% - 36px);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:30px 30px 24px;
  background:rgba(10,26,44,.96);color:#dbe8f5;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
dialog.about::backdrop{background:rgba(4,12,22,.72);backdrop-filter:blur(4px)}
dialog.about h3{font-family:Unbounded,sans-serif;font-size:20px;color:#fff;margin-bottom:14px;letter-spacing:-.03em}
dialog.about p{font-size:15px;line-height:1.6;margin-bottom:12px}
dialog.about a:focus{outline:none}
.about-tel a{font-family:Unbounded,sans-serif;font-size:22px;color:var(--amber);letter-spacing:-.03em}
/* мануал по поломке */
.m-tag{font:800 11.5px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
dialog.manual h3{margin-bottom:10px}
.m-do{list-style:none;margin:14px 0 4px;display:grid;gap:7px}
.m-do li{position:relative;padding-left:20px;font-size:14.5px;color:#cfe0ee}
.m-do li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.max-num{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 20px}
.max-num b{font-family:Unbounded,sans-serif;font-size:clamp(20px,2.2vw,26px);color:var(--amber);letter-spacing:-.03em}
.max-copy{padding:9px 16px;border:1px solid rgba(255,255,255,.24);border-radius:10px;background:rgba(255,255,255,.07);
  color:#fff;font:700 13px Manrope,sans-serif;cursor:pointer;transition:.15s}
.max-copy:hover{background:rgba(255,255,255,.16)}
.m-meta{font-size:14px;color:#9fb8ce;margin:14px 0 18px}
.m-meta b{color:#fff;font-weight:800}
.m-call{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:14px;
  background:linear-gradient(160deg,var(--amber),var(--amber-deep));color:#2a1200;font:800 15px Manrope,sans-serif;
  box-shadow:0 14px 30px -12px rgba(255,110,10,.75)}
.m-call:hover{transform:translateY(-2px)}
dialog.manual .about-x{margin-left:10px}
.about-x{margin-top:10px;padding:11px 20px;border:1px solid rgba(255,255,255,.22);border-radius:12px;
  background:rgba(255,255,255,.06);color:#fff;font:700 14px Manrope,sans-serif;cursor:pointer}
.about-x:hover{background:rgba(255,255,255,.14)}
@media(max-width:640px){
  /* на телефоне чипы едут одной строкой, иначе съедают экран */
  .chips{gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:14px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;padding:8px 13px;font-size:12.5px}
}

.fixed{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:9px;padding:9px 12px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--sky-line)}
.fixed .btn{flex:1}

@media(max-width:1000px){
  .stage-grid{grid-template-columns:1fr}
  .app{height:auto;min-height:0}
  .win{height:min(44vh,340px)}
  .stage{padding:26px 18px}
  .panel{border-left:0;border-top:1px solid var(--line-dark)}
  .pane{padding:24px 20px 30px}
  .tel{display:none}
  .fixed{display:flex}
  body{padding-bottom:70px}
}

/* лицевая на телефоне: кадр держим, но текст и кнопки не должны улезать за экран */
@media(max-width:640px){
  /* 56px шапка + 74px нижняя панель звонка — иначе факты уезжают под неё */
  .hero{min-height:calc(100svh - 150px);padding:22px 0 16px}
  .hero-slogan{font-size:14px;margin-bottom:10px}
  .hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  .hero::before{background-position:center 42%}
  .hero::after{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.32) 42%,rgba(203,228,247,.72) 100%)}
  .hero-h{font-size:clamp(30px,8.2vw,42px)}
  .hero-h em{font-size:.54em;white-space:normal}
  .hero-sub{font-size:16px;max-width:100%}
  .hero-act{gap:10px}
  .hero-act .btn,.hero-act .btn-call,.hero-act .btn-see,.hero-act .btn-write{width:100%}
  .btn-write{justify-content:center;padding:14px 18px}
  .btn-call{justify-content:center;padding:15px 20px}
  .btn-big{align-items:center;padding:13px 20px}
  .hero-facts{gap:7px 18px;margin-top:22px;padding-top:16px}
  .hero-facts li{font-size:13.5px;padding-left:17px}
  .hero-down{display:none}
}

/* фотографии в панели */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 6px}
.shots img{width:100%;height:112px;object-fit:cover;border-radius:10px;display:block;filter:saturate(.9)}
.shots img:first-child{grid-column:1 / -1;height:172px}
.photo-note{font-size:11.5px;color:var(--ink-soft);opacity:.75}

/* мини-прайс на стартовом экране */
.mini{margin-top:24px;background:var(--sky-soft);border:1px solid var(--sky-line);border-radius:16px;padding:16px 18px}
.mini-t{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-bottom:10px}
.mini-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid rgba(47,143,216,.16);font-size:15.5px;color:var(--txt-soft)}
.mini-row:last-child{border-bottom:0}
.mini-row b{font-family:Unbounded,sans-serif;font-size:15px;color:var(--sky-deep);white-space:nowrap}
.dur{margin-top:18px;font-size:14.5px;color:var(--ink-soft)}
.dur b{font-family:Unbounded,sans-serif;font-size:15px;color:var(--ink)}

/* блок действия — всегда на виду */
.act{flex:0 0 auto;border-top:1px solid var(--sky-line);padding:16px 30px 18px;background:rgba(255,255,255,.75)}
.act-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:13px}
.money b{display:block;font-family:Unbounded,sans-serif;font-size:clamp(20px,2.1vw,27px);font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.money span{font-size:12.5px;color:var(--ink-soft)}
.act .cnt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);flex:0 0 auto}
.act .cnt button{width:31px;height:31px;border:1.5px solid var(--line-dark);background:#fff;color:var(--ink);border-radius:9px;font-size:17px;font-weight:800;line-height:1}
.act .cnt button:hover{border-color:var(--amber-deep);color:var(--amber-deep)}
.act .cnt b{font-family:Unbounded,sans-serif;font-size:16px;min-width:20px;text-align:center;color:var(--ink)}

/* заголовок сцены переехал на лицевую — здесь остался только вопрос над окном */


/* ---- вариант лицевой «иней»: тёмная сцена поверх фото ---- */
.hero.frost::before{background:none}
.hero.frost::after{background:
  linear-gradient(100deg,rgba(7,22,38,.88) 0%,rgba(8,25,42,.82) 16%,rgba(9,28,48,.72) 32%,rgba(10,31,52,.58) 48%,
    rgba(11,34,56,.42) 62%,rgba(12,37,60,.26) 76%,rgba(13,40,64,.14) 88%,rgba(14,42,68,.08) 100%),
  linear-gradient(180deg,rgba(6,20,34,.5) 0%,transparent 22%,transparent 62%,rgba(6,20,34,.22) 100%)}
.hero.frost .hero-slogan{color:var(--amber);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero.frost .hero-h{color:#fff;text-shadow:0 6px 34px rgba(4,16,30,.65)}
.hero.frost .hero-h em{color:var(--amber);text-shadow:0 6px 30px rgba(4,16,30,.6)}
.hero.frost .hero-sub{color:#e6eefa;text-shadow:0 2px 16px rgba(4,16,30,.7)}
.hero.frost .hero-facts{border-top-color:rgba(255,255,255,.26)}
.hero.frost .hero-facts li{color:#dce8f6;text-shadow:0 2px 12px rgba(4,16,30,.7)}
.hero.frost .hero-facts li::before{background:var(--amber);box-shadow:0 0 12px rgba(255,171,61,.9)}
.hero.frost .btn-see{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.34)}
.hero.frost .btn-see::after{border-color:var(--amber)}
.hero.frost .btn-see:hover{background:rgba(255,255,255,.3)}
.hero.frost .hero-down{background:rgba(10,26,44,.55);border-color:rgba(255,255,255,.28);color:#fff}
.hero.frost .hero-down:hover{background:rgba(10,26,44,.75)}


/* сцена лицевой: фото + подпись, привязанная к предмету в кадре */

@media(max-width:900px){
  .book-label{display:none}
}