/* ═══════════════ токены ═══════════════ */
:root{
  color-scheme:dark;
  --void:#09090D; --panel:#131318; --panel-2:#1A1A21; --inset:#0E0E13;
  --ink:#F4F1EC; --ink-2:#B5AFA7; --muted:#78726B;
  --line:#22222B; --edge:#33333E;
  --hot:#FF2D78; --hot-ink:#0A0A0E; --hot-soft:rgba(255,45,120,.09); --hot-line:rgba(255,45,120,.32);
  --amber:#FFC24B; --mint:#3DDC97;
  --beam-a:rgba(255,45,120,.58); --beam-b:rgba(34,211,238,.42); --beam-c:rgba(255,194,75,.36);
}

*{box-sizing:border-box}
body{
  background:var(--void); color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.52; -webkit-font-smoothing:antialiased;
}
/* плёночное зерно, чтобы чёрный не был плоским */
body::after{
  content:""; position:fixed; inset:0; z-index:99; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.04; mix-blend-mode:overlay;
}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer}
a{color:var(--hot)}
:focus-visible{outline:2px solid var(--hot); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto; padding-inline:18px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

/* ═══════════════ мастхед: лучи сквозь дым ═══════════════ */
.mast{position:relative; overflow:hidden; background:var(--void); padding-block:72px 0; isolation:isolate}
/* лучи: каждый в своём слое, чтобы гаснуть и зажигаться вразнобой */
.beams{position:absolute; inset:-22% -26% 0; z-index:-1; pointer-events:none}
.beams i{
  position:absolute; inset:0; display:block; filter:blur(13px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.62) 48%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.62) 48%,transparent 96%);
  transition:opacity .55s ease;
}
.beams i:nth-child(1){background:linear-gradient(96deg,  transparent 11%,  var(--beam-a) 15%,   transparent 19.5%)}
.beams i:nth-child(2){background:linear-gradient(86.5deg,transparent 40%,  var(--beam-c) 43.5%, transparent 47%)}
.beams i:nth-child(3){background:linear-gradient(93deg,  transparent 67%,  var(--beam-b) 71%,   transparent 75%)}
.beams i:nth-child(4){background:linear-gradient(89deg,  transparent 84%,  var(--beam-a) 86.5%, transparent 89%)}
}
/* подсветка «пола» под лучами */
.mast::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(78% 42% at 50% 104%, rgba(255,45,120,.20), transparent 72%);
  animation:floor-breathe 9s ease-in-out infinite;
}
@keyframes floor-breathe{
  0%,100%{opacity:.62}
  50%    {opacity:1}
}
.mast .wrap{display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap}
.word{
  font-family:Anton,Archivo,sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(52px,12vw,104px); line-height:.82; letter-spacing:.005em;
  margin-right:auto; text-decoration:none; color:var(--ink); display:inline-block;
  text-shadow:0 0 38px rgba(255,45,120,.34);
}
.word em{font-style:normal; color:var(--hot)}
.mastside{display:flex; flex-direction:column; align-items:flex-end; gap:10px; padding-bottom:8px}
.langlink{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-2); border:1px solid var(--edge); padding:5px 12px; transition:.15s;
}
.langlink:hover{border-color:var(--hot); color:var(--hot)}
.links{display:flex; gap:16px; font-size:13px}
.links a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--edge); padding-bottom:2px; transition:.15s}
.links a:hover{color:var(--hot); border-color:var(--hot)}
.strap{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); padding-block:16px 15px; margin-top:22px; border-top:1px solid var(--line);
}

/* ═══════════════ полоса условий ═══════════════ */
.spec-strip{background:var(--panel); border-block:1px solid var(--line)}
.spec-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.sp{padding:15px 0 16px; padding-left:18px; border-left:1px solid var(--line)}
.sp:first-child{border-left:0; padding-left:0}
.sp .v{font-family:"IBM Plex Mono",monospace; font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.sp .k{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px}
@media (max-width:620px){
  .spec-strip .wrap{grid-template-columns:repeat(2,1fr)}
  .sp:nth-child(3){border-left:0; padding-left:0}
  .sp:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ═══════════════ заголовок ═══════════════ */
.intro{padding-block:34px 4px; max-width:64ch}
.intro h1{
  font-family:Anton,Archivo,sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,5.2vw,46px); line-height:1.02; letter-spacing:.004em;
}
.intro .lede{margin-top:14px; font-size:16px; color:var(--ink-2); line-height:1.58; max-width:58ch}

/* ═══════════════ наборы ═══════════════ */
.cols{display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:38px; align-items:start; padding-block:30px 52px}
@media (max-width:960px){ .cols{grid-template-columns:1fr; gap:26px} }
.presets{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; align-items:center}
.presets .lbl{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-right:6px}
.chip{
  background:var(--panel); border:1px solid var(--edge); color:var(--ink-2);
  padding:7px 14px; font-size:13px; transition:.15s;
}
.chip:hover{border-color:var(--hot); color:var(--hot); background:var(--hot-soft)}
.chip.clear{border-style:dashed; color:var(--muted)}

/* ═══════════════ каталог ═══════════════ */
.cat{margin-bottom:38px}
.cat-h{display:flex; align-items:baseline; gap:14px; padding-bottom:10px; border-bottom:1px solid var(--hot-line)}
.cat-h h2{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--ink); margin-right:auto;
}
.cat-h .cnt{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--hot); font-weight:600}
.cat-h .cnt:empty{display:none}

.row{
  display:grid; grid-template-columns:124px minmax(0,1fr) auto; gap:20px; align-items:center;
  padding:16px 14px 16px 15px; margin-inline:-15px; border-bottom:1px solid var(--line);
  position:relative; z-index:1; transition:background .16s;
}
.row:last-child{border-bottom:0}
.row.on{background:var(--hot-soft)}
.row:hover{z-index:6}
.row.on::before{content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:3px; background:var(--hot)}
@media (max-width:540px){ .row{grid-template-columns:82px minmax(0,1fr) auto; gap:13px} }

.thumb{position:relative; width:100%; aspect-ratio:4/3; background:#fff; border:1px solid var(--line);
  overflow:hidden; transform-origin:left center; z-index:1;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s}
@media (hover:hover){
  .thumb:hover{transform:scale(3.2); z-index:7; border-color:var(--hot); box-shadow:0 22px 54px -16px #000}
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb.ph img{display:none}
.thumb.ph::after{content:"◻"; position:absolute; inset:0; display:grid; place-items:center; color:var(--edge); font-size:20px}
.row.on .thumb{border-color:var(--hot-line)}

.info{min-width:0}
.nm{font-size:16px; font-weight:600; letter-spacing:-.008em; line-height:1.24}
.ds{font-size:13px; color:var(--muted); margin-top:3px; max-width:54ch; line-height:1.45}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:9px; font-size:11.5px}
.meta .p{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13.5px; color:var(--ink)}
.meta .p small{font-family:Archivo,sans-serif; font-size:11px; font-weight:400; color:var(--muted); letter-spacing:.02em}
.row.on .meta .p{color:var(--hot)}
.row.on .meta .p small{color:var(--hot)}
.meta .w{font-family:"IBM Plex Mono",monospace; color:var(--amber)}
.avail{color:var(--muted); font-size:11.5px}
.dots{display:flex; gap:3px; align-items:center}
.dots i{width:7px; height:7px; border:1px solid var(--edge); display:block; transition:.14s}
.dots i.f{background:var(--hot); border-color:var(--hot); box-shadow:0 0 7px rgba(255,45,120,.65)}
.dots span{font-size:10.5px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-left:4px}

.step{display:flex; align-items:center; background:var(--panel); border:1px solid var(--edge)}
.step button{width:36px; height:36px; border:0; background:none; color:var(--ink-2); font-size:18px; line-height:1;
  display:grid; place-items:center; transition:.13s}
.step button:first-child{border-right:1px solid var(--line)}
.step button:last-child{border-left:1px solid var(--line)}
.step button:hover:not(:disabled){background:var(--hot); color:var(--hot-ink)}
.step button:disabled{opacity:.22; cursor:not-allowed}
.step .n{min-width:40px; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:15px;
  font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600}
.row.on .step{border-color:var(--hot)}
.row.on .step .n{color:var(--hot)}

/* ═══════════════ видео ═══════════════ */
.vid{grid-column:1/-1; max-width:470px; margin-top:0; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .34s ease, opacity .22s ease, margin-top .34s ease}
@media (hover:hover){
  .row:hover .vid, .row:focus-within .vid, .row.vid-open .vid{max-height:340px; opacity:1; margin-top:15px}
}
@media (hover:none){ .vid{max-height:340px; opacity:1; margin-top:15px} }
.vid-btn{position:relative; display:block; width:100%; padding:0; aspect-ratio:16/9;
  border:1px solid var(--edge); background:var(--inset); overflow:hidden; cursor:pointer}
.vid-btn img{width:100%; height:100%; object-fit:cover; display:block; transition:.25s}
.vid-btn:hover img{transform:scale(1.03)}
.vid-play{position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%;
  background:var(--hot); display:grid; place-items:center; transition:.16s; box-shadow:0 0 30px rgba(255,45,120,.5)}
.vid-play::after{content:""; margin-left:5px; border-left:18px solid var(--hot-ink);
  border-top:11px solid transparent; border-bottom:11px solid transparent}
.vid-btn:hover .vid-play{transform:scale(1.08)}
.vid-meta{position:absolute; left:0; right:0; bottom:0; padding:18px 11px 8px; text-align:left;
  background:linear-gradient(transparent, rgba(0,0,0,.88)); color:var(--ink);
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.05em}
.vid iframe{display:block; width:100%; aspect-ratio:16/9; border:1px solid var(--edge)}
@media (max-width:540px){ .vid{max-width:none} }

/* ═══════════════ сводка ═══════════════ */
.sum{position:sticky; top:18px; background:var(--panel); border:1px solid var(--edge);
  box-shadow:0 30px 60px -40px #000, 0 0 60px -45px var(--hot)}
@media (max-width:960px){ .sum{position:static} }
.sum-h{background:var(--hot); color:var(--hot-ink); padding:11px 17px; display:flex;
  justify-content:space-between; align-items:center;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase}
.sum-h .n{font-family:"IBM Plex Mono",monospace; font-weight:600; letter-spacing:.04em; opacity:.72}
.picked{padding:15px 17px 2px; display:flex; flex-direction:column; gap:9px;
  max-height:min(32vh,280px); overflow-y:auto}
.pick{display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:9px; font-size:13px; align-items:baseline}
.pick .q{font-family:"IBM Plex Mono",monospace; color:var(--hot); font-size:12px; font-weight:600; white-space:nowrap}
.pick .t{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.empty{padding:17px 17px 2px; font-size:13px; color:var(--muted)}

.vu{margin:16px 17px 0; padding:12px 13px 11px; background:var(--inset); border:1px solid var(--line)}
.vu .txt{font-size:12.4px; color:var(--ink-2); line-height:1.42}
.vu .txt b{color:var(--hot); font-family:"IBM Plex Mono",monospace; font-weight:600}
.vu.max .txt{color:var(--mint)}
.track{position:relative; height:10px; margin-top:10px; background:#000; border:1px solid var(--edge); overflow:hidden}
.fill{height:100%; width:0; background:linear-gradient(90deg, var(--amber), var(--hot));
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 6px);
  mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 6px);
  transition:width .34s cubic-bezier(.22,.7,.3,1);}
.vu.max .fill{background:var(--mint)}
.tick{position:absolute; top:0; bottom:0; width:1px; background:var(--edge)}

.zone{margin:17px 17px 0; display:flex; flex-direction:column; gap:6px}
.zone label{font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:600}
.zone select{width:100%; padding:10px 11px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--inset); border:1px solid var(--edge)}
.zone select:focus{border-color:var(--hot); outline:none}
.zone.off{opacity:.42}
.zone.off select{cursor:not-allowed}
.line .dl{display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none}
.line .dl input{width:15px; height:15px; accent-color:var(--hot); cursor:pointer; margin:0}

.calc{padding:16px 17px 0; display:flex; flex-direction:column; gap:9px}
.line{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--ink-2)}
.line .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; color:var(--ink)}
.line.disc, .line.disc .v{color:var(--mint); font-weight:600}
.total{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:17px 17px 0; padding-top:15px; border-top:1px solid var(--edge)}
.total .l{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.total .v{font-family:Anton,Archivo,sans-serif; font-weight:400; font-size:38px; letter-spacing:.004em;
  line-height:1; color:var(--ink); text-shadow:0 0 26px rgba(255,45,120,.4)}
.note{padding:10px 17px 0; font-size:11.5px; color:var(--muted)}
.power{padding:10px 17px 0; font-size:11.5px; color:var(--amber); font-family:"IBM Plex Mono",monospace}

.form{padding:17px; display:flex; flex-direction:column; gap:11px; margin-top:17px;
  border-top:1px solid var(--line); background:var(--panel-2)}
.fld{display:flex; flex-direction:column; gap:6px}
.fld label{font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:600}
.fld input{width:100%; padding:10px 12px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--inset); border:1px solid var(--edge)}
.fld input:focus{border-color:var(--hot); outline:none}
.fld input[type="date"]{cursor:pointer}
.fld input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1); opacity:.55; cursor:pointer; transition:opacity .15s}
.fld input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}
.fld input::placeholder{color:var(--muted)}
.acts{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.btn{padding:13px 14px; border:1px solid transparent; font-weight:700; font-size:13px;
  letter-spacing:.09em; text-transform:uppercase; text-align:center; text-decoration:none; display:block; transition:.15s}
.btn.primary{background:var(--hot); color:var(--hot-ink); border-color:var(--hot); box-shadow:0 0 28px -8px rgba(255,45,120,.7)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:none; color:var(--ink-2); border-color:var(--edge)}
.btn.ghost:hover{border-color:var(--hot); color:var(--hot)}
#btnCopy{line-height:1.3}

/* ═══════════════ условия ═══════════════ */
.faq{margin-top:14px; padding-top:30px; border-top:1px solid var(--hot-line)}
.faq h2{font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin-bottom:18px}
.qa{padding:15px 0; border-bottom:1px solid var(--line); max-width:72ch}
.qa:last-child{border-bottom:0}
.qa h3{font-size:14.5px; font-weight:600; margin-bottom:6px}
.qa p{font-size:13.8px; color:var(--ink-2); line-height:1.55}

/* карточка заявки — то, что клиент видит после нажатия */
.reqcard{margin:15px 17px 0; border:1px solid var(--hot-line); background:var(--inset)}
.reqcard h3{background:var(--hot); color:var(--hot-ink); padding:9px 13px; font-size:10.5px;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase}
.reqcard .who{padding:12px 13px 0; display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:12.2px}
.reqcard .who dt{color:var(--muted)}
.reqcard .who dd{margin:0; color:var(--ink)}
.reqcard table{width:100%; border-collapse:collapse; margin-top:12px; font-size:12.2px}
.reqcard th{text-align:left; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:7px 13px; border-block:1px solid var(--line)}
.reqcard th:last-child, .reqcard td:last-child{text-align:right}
.reqcard td{padding:6px 13px; border-bottom:1px solid var(--line); color:var(--ink-2)}
.reqcard td.q, .reqcard td:last-child{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.reqcard tr.sum td{color:var(--ink); border-bottom:0; padding-top:9px}
.reqcard tr.grand td{font-weight:700; color:var(--ink); border-top:1px solid var(--edge); padding-block:10px}
.reqcard tr.grand td:last-child{color:var(--hot); font-size:15px}
.reqcard .tip{padding:11px 13px 13px; font-size:11.4px; color:var(--muted); line-height:1.45}
.reqcard .qlink{padding:0 13px 13px; font-size:11.8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.reqcard .qlink a{color:var(--hot); word-break:break-all}

footer{border-top:1px solid var(--line); padding-block:26px 48px; font-size:12.2px; color:var(--muted)}
footer p{margin-bottom:7px; max-width:76ch}
.nap{font-style:normal; margin:0; color:var(--ink-2)}
.nap a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--edge)}
.nap a:hover{color:var(--hot); border-color:var(--hot)}

/* ═══════════════ мобильная полоса ═══════════════ */
.mbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--panel);
  border-top:1px solid var(--hot-line); padding:11px 18px calc(11px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -14px 40px -22px #000}
@media (max-width:960px){ .mbar{display:flex; align-items:center; gap:14px} body{padding-bottom:80px} }
.mbar .mt{margin-right:auto}
.mbar .mt .k{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.mbar .mt .v{font-family:Anton,Archivo,sans-serif; font-size:25px; line-height:1.1}
.mbar a{padding:12px 22px; background:var(--hot); color:var(--hot-ink); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none}

@media (max-width:480px){
  .strap{letter-spacing:.14em; font-size:10px}
  .sp .k{letter-spacing:.09em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
  .vid-btn:hover img, .vid-btn:hover .vid-play{transform:none}
}

/* ═══════════════ страница сметы ═══════════════ */
.qpage{max-width:660px; margin:0 auto; padding-block:36px 64px}
.qpage .reqcard{margin:0}
.qpage .tip.stale{color:var(--amber)}
.qactions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.qactions .btn{flex:1 1 180px}

@media print{
  body{background:#fff !important; color:#000 !important}
  body::after, .mast, .qactions{display:none !important}
  .qpage{padding-block:0}
  .reqcard{border:1px solid #bbb !important; background:#fff !important}
  .reqcard h3{background:#fff !important; color:#000 !important; border-bottom:2px solid #000}
  .reqcard .who dt{color:#555 !important}
  .reqcard .who dd, .reqcard td, .reqcard th{color:#000 !important; border-color:#ddd !important}
  .reqcard tr.grand td, .reqcard tr.grand td:last-child{color:#000 !important}
  .reqcard .tip{color:#444 !important}
}