/* СТВОРКА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-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: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;background:url(/photos/sky.jpg) center/cover no-repeat fixed,#bcd9f2}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px;flex:0 0 auto;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.6)}
.logo{font-family:Unbounded,sans-serif;font-weight:900;font-size:18px;color:#0f2237;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:#0f2237;font-weight:800;font-size:16px}
.tel small{display:block;font-weight:600;font-size:10.5px;color:#6b7c8f;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}

/* ── сцена и панель ──────────────────────────────────── */
.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{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(6px,1.4vh,14px);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:#b45309;text-align:center;margin-top:4px}
.win{position:relative;flex:0 1 auto;min-height:0;height:min(46vh,390px);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}

/* ── текст для поиска ────────────────────────────────── */
.seo{background:linear-gradient(180deg,#fff,var(--sky-soft));padding:64px 0;border-top:1px solid var(--sky-line);color:var(--txt)}
.wrap{max-width:1100px;margin:0 auto;padding:0 26px}
.seo h2{font-size:clamp(22px,3vw,32px);margin-bottom:24px;color:var(--sky-deep)}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--sky-line);border:1px solid var(--sky-line);border-radius:16px;overflow:hidden}
.seo-grid a{background:#fff;padding:22px;transition:.15s;display:block}
.seo-grid a:hover{background:var(--sky-soft)}
.seo-grid h3{font-size:16px;margin-bottom:5px;color:var(--sky-deep)}
.seo-grid p{font-size:14.5px;color:var(--txt-soft)}
footer{background:var(--sky-deep);color:#bcd8ef;padding:38px 0;font-size:14.5px}
footer b{color:var(--cream)}

.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}
}

/* фотографии в панели */
.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)}

/* заголовок на сцене */
.lede{position:relative;text-align:center;max-width:620px}
.big{font-size:clamp(26px,3vw,42px);color:#0f2237;line-height:1.03;text-shadow:0 2px 18px rgba(255,255,255,.55)}
.big em{font-style:normal;color:var(--amber-deep);display:block}
.big-sub{margin-top:10px;font-size:15.5px;color:#254056;max-width:42ch;margin-inline:auto;font-weight:500}