/* Единая тёмная сцена: страница про свет в тёмном зале, светлой темы у неё нет
   по замыслу. Поэтому все цвета заданы явно и не зависят от темы зрителя. */
:root{
  --ink:#0A0B0E;
  --haze:#13151A;
  --edge:#232630;
  --bone:#E9E4D8;
  --dim:#8B897F;
  --tungsten:#F2A33C;
  --tungsten-deep:#C4571B;
  --cold:#5FA8D3;

  --col:min(1180px, 100% - 3rem);
  --step:clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:"Commissioner", ui-sans-serif, system-ui, sans-serif;
  font-weight:300;
  font-size:var(--step);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Oswald", "Arial Narrow", sans-serif;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.005em;
  line-height:0.98;
  text-wrap:balance;
  margin:0;
}

a{color:var(--tungsten);text-decoration:none;border-bottom:1px solid rgba(242,163,60,.35)}
a:hover{border-bottom-color:var(--tungsten)}
:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px}

.mono{font-family:"IBM Plex Mono", ui-monospace, monospace;font-variant-numeric:tabular-nums}

.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);
}

/* ── сцена ───────────────────────────────────────────────── */
#rig{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
#rig-fallback{position:fixed;inset:0;z-index:0;
  background:radial-gradient(120% 80% at 50% -10%, #241708 0%, var(--ink) 62%);}

.page{position:relative;z-index:1}

/* ── герой ───────────────────────────────────────────────── */
.hero{
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  width:var(--col);margin-inline:auto;
  padding-block:clamp(2rem,6vh,4rem);
}
.hero-body{align-self:end}
.hero-body .eyebrow{margin:0 0 1.5rem}
.hero h1{
  font-size:clamp(2.9rem, 9vw, 6.8rem);
  font-weight:600;
  letter-spacing:-0.015em;
}
.hero h1 .cold{color:var(--cold)}
.hero-lede{
  max-width:44ch;margin:1.6rem 0 0;
  color:#C9C4B8;
}
.hero-foot{
  display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:baseline;
  padding-top:2.5rem;
  border-top:1px solid var(--edge);
  margin-top:2.5rem;
}
.hero-foot .eyebrow{margin:0}
.cue{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tungsten);
  display:flex;align-items:center;gap:.6rem;
}
.cue::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--tungsten);box-shadow:0 0 12px var(--tungsten);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ── общие секции ────────────────────────────────────────── */
.band{
  position:relative;
  background:linear-gradient(to bottom, rgba(10,11,14,0) 0%, var(--ink) 12% 88%, rgba(10,11,14,0) 100%);
}
.band-solid{background:var(--ink)}
.wrap{width:var(--col);margin-inline:auto;padding-block:clamp(5rem,11vh,8rem)}

.head{
  display:grid;gap:1.2rem;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(2.5rem,5vh,4rem);
}
@media (min-width:820px){
  .head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:3rem}
}
.head h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.head p{margin:0;color:var(--dim);max-width:46ch}

/* ── что закрываем ───────────────────────────────────────── */
.stack{display:grid;gap:1px;background:var(--edge);border-block:1px solid var(--edge)}
.row{
  background:var(--ink);
  display:grid;gap:.4rem 2.5rem;
  padding:1.9rem 0;
  grid-template-columns:minmax(0,1fr);
  transition:background .35s ease;
}
@media (min-width:820px){
  .row{grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,2fr);align-items:start;padding:2.1rem 0}
}
.row:hover{background:var(--haze)}
.row h3{font-size:1.45rem;color:var(--bone)}
.row p{margin:0;color:#B4AFA4}
.row .tag{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}

/* ── калькулятор ─────────────────────────────────────────── */
.calc{
  display:grid;gap:2.5rem;
  grid-template-columns:minmax(0,1fr);
  border:1px solid var(--edge);
  background:var(--haze);
  padding:clamp(1.5rem,3.5vw,2.75rem);
}
@media (min-width:900px){.calc{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:3.5rem}}

.controls{display:grid;gap:1.9rem;align-content:start}
.ctl{display:grid;gap:.6rem}
.ctl-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ctl-top label{font-size:.92rem;color:#C9C4B8}
.ctl-val{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
  color:var(--tungsten);font-size:1rem;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:2px;background:var(--edge);border-radius:2px;margin:.5rem 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--tungsten);border:0;cursor:pointer;
  box-shadow:0 0 0 4px rgba(242,163,60,.16);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--tungsten);border:0;cursor:pointer;
  box-shadow:0 0 0 4px rgba(242,163,60,.16);
}

.readout{
  display:grid;gap:1.4rem;align-content:start;
  border-top:1px solid var(--edge);padding-top:1.9rem;
}
@media (min-width:900px){.readout{border-top:0;border-left:1px solid var(--edge);padding:0 0 0 3.5rem}}
.big{
  font-family:"Oswald", "Arial Narrow", sans-serif;
  font-weight:600;font-size:clamp(3.4rem,9vw,5.2rem);line-height:.86;
  color:var(--tungsten);font-variant-numeric:tabular-nums;
}
.big .unit{font-size:.26em;color:var(--dim);margin-left:.38em;letter-spacing:.04em;font-weight:400}
.line{display:flex;justify-content:space-between;gap:1.5rem;border-bottom:1px dotted var(--edge);padding-bottom:.55rem}
.line dt{color:var(--dim);font-size:.9rem;margin:0}
.line dd{margin:0;font-family:"IBM Plex Mono", ui-monospace, monospace;font-variant-numeric:tabular-nums;font-size:.9rem}
.phase{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--edge);padding:.45rem .8rem;color:var(--bone);
}
.phase::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cold)}
.phase[data-hot="1"]::before{background:var(--tungsten)}
.note{color:var(--dim);font-size:.84rem;margin:0;max-width:40ch}

/* ── ход смены ───────────────────────────────────────────── */
.score{display:grid;gap:1px;background:var(--edge);border-block:1px solid var(--edge)}
.beat{
  background:var(--ink);padding:1.7rem 0;
  display:grid;gap:.5rem 2.5rem;grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){
  .beat{grid-template-columns:5rem minmax(0,3fr) minmax(0,6fr);align-items:baseline}
}
.beat .n{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  color:var(--tungsten);font-size:.8rem;letter-spacing:.1em;
}
.beat h3{font-size:1.2rem}
.beat p{margin:0;color:#B4AFA4}

/* ── чек-лист ────────────────────────────────────────────── */
.asks{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)}
.ask{background:var(--ink);padding:1.6rem clamp(1.1rem,2.5vw,1.9rem);display:grid;gap:.5rem}
.ask q{font-family:"Oswald","Arial Narrow",sans-serif;font-weight:400;font-size:1.12rem;
  text-transform:none;letter-spacing:0;line-height:1.3;quotes:none;color:var(--bone)}
.ask p{margin:0;color:var(--dim);font-size:.9rem}
@media (min-width:820px){.asks{grid-template-columns:1fr 1fr}}

/* ── подвал ──────────────────────────────────────────────── */
.foot{border-top:1px solid var(--edge);background:var(--ink)}
.foot-in{width:var(--col);margin-inline:auto;padding-block:clamp(3rem,7vh,5rem);
  display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}
.foot h3{font-size:1rem;color:var(--dim);font-weight:400;letter-spacing:.12em;margin-bottom:.9rem}
.foot p{margin:0 0 .4rem}
.disclaimer{border-top:1px solid var(--edge);background:var(--haze)}
.disclaimer p{width:var(--col);margin-inline:auto;padding-block:1.6rem;color:var(--dim);font-size:.82rem;max-width:none}

[data-reveal]{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ── ссылки в строках услуг ───────────────────────────────
   Главная — узел перелинковки, поэтому каждая услуга ведёт
   на свою страницу. Подчёркивание тут лишнее: строка и так
   читается как ссылка, а латунь появляется на наведении. */
.row h3 a{color:inherit;border-bottom:0;transition:color .25s ease}
.row:hover h3 a,.row h3 a:focus-visible{color:var(--tungsten)}
.row h3 a::after{content:"→";margin-left:.5em;opacity:0;transition:opacity .25s ease,transform .25s ease;display:inline-block}
.row:hover h3 a::after{opacity:1;transform:translateX(3px)}

/* ссылка-строка под блоком: ведёт на развёрнутую страницу */
.more{
  display:inline-flex;align-items:baseline;gap:.6rem;margin-top:1.8rem;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tungsten);border-bottom:1px solid rgba(242,163,60,.3);
  padding-bottom:.3rem;
}
.more:hover{border-bottom-color:var(--tungsten)}
.more::after{content:"→"}