:root{
  --line:#2a2d33; --bg-elev:#0f1115; --radius:16px;
  --accent:#d3a55c; --accent-2:#8a6b3a;
}

/* общие для страницы */
.st-hero,.st-forge,.st-finish{padding:42px 0}
.st-hero img,.st-forge img,.st-finish img{max-width:350px; height:auto; display:block; border-radius:12px}
.lead{color:#e9edf6}
.text,.bullets li{color:#e9edf6}
.container{max-width:1200px; margin:0 auto; padding:0 16px}

/* ===== 1) Timeline / Stitch ===== */
.st-timeline{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:14px 0 18px 0;
}
.st-step{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px; transform:translateY(10px); opacity:.85; transition:transform .35s ease, opacity .35s ease, box-shadow .35s}
.st-step.is-on{transform:none; opacity:1; box-shadow:0 12px 24px rgba(0,0,0,.25)}
.st-track{position:relative; height:10px; border-radius:999px; background:#1a1d23; border:1px solid var(--line); overflow:hidden}
.st-stitch{height:100%; width:0%; background:repeating-linear-gradient(90deg, var(--accent) 0 14px, var(--accent-2) 14px 28px); box-shadow:0 0 12px rgba(211,165,92,.35) inset}
@media (max-width:980px){ .st-timeline{grid-template-columns:1fr} }

/* ===== 2) Forge reveal ===== */
.forge-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:center}
.forge-copy .ctrl{display:grid; gap:8px; margin-top:8px}
.t-range{width:100%}
.forge-fig{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.heat-stack{position:relative; width:fit-content}
.heat-stack img{display:block}
.heat-stack .hot{
  position:absolute; inset:0;
  --r:40; /* 0..100 temperature -> радиус процента */
  clip-path: circle(calc(var(--r)*1%) at var(--px,50%) var(--py,50%));
  transition:clip-path .15s ease;
  filter:saturate(115%) contrast(110%);
}
.heat-stack::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%),
    rgba(226,72,21,.35), rgba(226,72,21,0) 55%);
  pointer-events:none; mix-blend-mode:screen; opacity:.75; transition:opacity .15s ease;
}
@media (max-width:980px){ .forge-grid{grid-template-columns:1fr} }

/* ===== 3) Finish stroke ===== */
.finish-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center}
.ctrl.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.finish-fig{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.stroke-panel{position:relative; width:fit-content}
.stroke-overlay{
  position:absolute; inset:0; pointer-events:none; border-radius:12px;
  --ang:0deg; --shine:.4; /* 0..1 */
  background:
    repeating-linear-gradient(var(--ang),
      rgba(255,255,255,calc(.03*var(--shine))) 0 6px,
      rgba(255,255,255,0) 6px 14px),
    linear-gradient(var(--ang), rgba(255,255,255,calc(.10*var(--shine))), rgba(255,255,255,0));
  mix-blend-mode:soft-light;
}
@media (max-width:980px){ .finish-grid{grid-template-columns:1fr} }

/* базовые элементы управления */
label{display:grid; gap:6px; color:#e9edf6}
input[type="range"]{width:100%}
.muted{color:#9aa3b2; margin-left:6px}
/* --- Studio: kill accidental horizontal scroll --- */
html, body { overflow-x: clip; }              /* только на этой странице, т.к. подключён studio.css */

/* grid-элементы не тянут колонку шире контейнера */
.st-timeline, .forge-grid, .finish-grid { overflow: hidden; }
.st-step, .forge-grid > *, .finish-grid > * { min-width: 0; }

/* панели с картинками не выходят за контейнер */
.heat-stack,
.stroke-panel { width: min(100%, 350px); }    /* вместо fit-content */
.heat-stack img,
.stroke-panel img { width: 100%; height: auto; display: block; }

/* на всякий случай — трек не вылезает за счёт тени/скруглений */
.st-track { max-width: 100%; }
/* ===== Finish bench: make overlay clearly visible ===== */
.stroke-panel{ position:relative; width:100%; max-width:350px }   /* страхуем ширину */
.stroke-panel img{ width:100%; height:auto; display:block; border-radius:12px }

.stroke-overlay{
  position:absolute; inset:0; border-radius:12px; pointer-events:none;
  --ang: 0deg;         /* из JS */
  --shine: .4;         /* 0..1 из JS */
  /* два слоя: штрих и мягкий блик; видно даже без blend-модов */
  background:
    repeating-linear-gradient(var(--ang),
      rgba(255,255,255,.10) 0 6px, rgba(255,255,255,0) 6px 14px),
    linear-gradient(var(--ang),
      rgba(255,255,255,.26), rgba(255,255,255,0));
  /* силу эффекта задаём прозрачностью */
  opacity: calc(.18 + var(--shine)*.82);
  mix-blend-mode: screen;           /* ярко на тёмном, мягко на светлом */
  transition: opacity .12s linear;
}
/* если браузер не умеет mix-blend-mode — всё равно пусть видно */
@supports not (mix-blend-mode: screen){
  .stroke-overlay{ mix-blend-mode: normal; background-color: rgba(255,255,255,.05); }
}
/* ===== 4) Assembly Bench ===== */
.asm-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center}
.asm-fig{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:10px; justify-items:center}
.asm-fig img{width:100%; max-width:350px; height:auto; border-radius:12px}
.dial{
  --t: 2.4;               /* torque N·m */
  width:160px; height:160px; border-radius:50%;
  background:
    conic-gradient(from -90deg,
      color-mix(in srgb, var(--accent) 70%, #000 30%) calc(var(--t)/4*270deg),
      #1a1d23 calc(var(--t)/4*270deg) 270deg,
      #0f1115 270deg);
  border:1px solid #2a2d33; position:relative;
}
.dial-face{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:800}
.dial-face small{display:block; font-weight:600; color:#9aa3b2; margin-top:-10px}
.asm-steps{display:grid; gap:6px; margin-top:10px}
.asm-steps .step{position:relative; padding-left:22px; color:#e9edf6}
.asm-steps .step::before{
  content:""; position:absolute; left:0; top:.35rem; width:12px; height:12px; border-radius:50%;
  border:2px solid #2a2d33; background:#101216; transition:background .2s, box-shadow .2s, border-color .2s;
}
.asm-steps .step.is-on::before{
  background:color-mix(in srgb, var(--accent) 60%, #000 40%); border-color:transparent;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}
.asm-legend{display:flex; gap:8px; align-items:center; align-self:end}
.tag{padding:.25rem .5rem; border-radius:999px; border:1px solid #2a2d33; background:#101216; color:#e9edf6; font-size:.9rem}
.tag.ok{border-color:color-mix(in srgb, var(--accent) 45%, #000 55%)}
.tag.warn{border-color:#6b7a8a}
.tag.high{border-color:#b96666}
@media (max-width:980px){ .asm-grid{grid-template-columns:1fr} }

/* ===== 5) QC Bench ===== */
.qc-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:16px; align-items:center}
.qc-media{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px; justify-items:start}
.qc-media img{width:100%; max-width:350px; height:auto; border-radius:12px}
.qc-panel .qc-list{display:grid; gap:8px; margin:10px 0}
.qc-item{display:flex; gap:10px; align-items:center; color:#e9edf6}
.qc-light{width:14px; height:14px; border-radius:50%; background:#1a1d23; border:2px solid #2a2d33; box-shadow:0 0 0 0 rgba(0,0,0,0); transition:background .2s, border-color .2s, box-shadow .2s}
.qc-item.is-pass .qc-light{background:color-mix(in srgb, var(--accent) 60%, #000 40%); border-color:transparent; box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent)}
.qc-progress{height:8px; background:#1a1d23; border:1px solid #2a2d33; border-radius:999px; overflow:hidden}
.qc-progress span{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .3s ease}
.qc-actions{display:flex; gap:10px; align-items:center}
@media (max-width:980px){ .qc-grid{grid-template-columns:1fr} }

/* ===== 6) Packing & Handover ===== */
.pack-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center}
.pk-in{width:100%; background:#0f1115; color:#e9edf6; border:1px solid #2a2d33; border-radius:10px; padding:.45rem .6rem}
.carton{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; width:min(100%, 300px);
  border:1px dashed #2a2d33; padding:8px; border-radius:12px; background:#0f1115;
}
.carton .box{aspect-ratio: 1/1; border-radius:8px; background:#12161a; border:1px solid #2a2d33; transition:background .2s, border-color .2s, box-shadow .2s}
.carton .box.is-full{background:linear-gradient(180deg, var(--accent), var(--accent-2)); border-color:transparent; box-shadow:0 6px 14px rgba(0,0,0,.35)}
.pack-fig{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.pack-fig img{width:100%; max-width:350px; height:auto; border-radius:12px}
@media (max-width:980px){ .pack-grid{grid-template-columns:1fr} }
/* Assembly — кликаемые пресеты */
.asm-legend{ position: relative; z-index: 2; gap: 8px; flex-wrap: wrap; }
.tag{ cursor: pointer; user-select: none; }
.tag.is-active{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#0f1115; border-color:transparent;
}
/* --- Fix: Section 1 mobile overflow (timeline cards) --- */
.st-timeline { overflow: hidden; }                 /* сетка не раздвигает страницу */
.st-step { box-sizing: border-box; }               /* безопасные размеры */
.st-step figure { max-width: 100%; display: grid; gap: 8px; }

/* изображения в карточках: сжимаются до ширины карточки, но не больше 350px */
.st-step img {
  width: min(100%, 350px);
  height: auto;
  display: block;
  border-radius: 12px;
}

/* подписи не ломают раскладку на узких экранах */
.st-step figcaption { overflow-wrap: anywhere; }

/* страховка: сам трек не вылезает за контейнер */
.st-track { max-width: 100%; }
/* ===== 7) Matrix ===== */
.st-matrix{padding:42px 0}
.mx-wrap{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.mx-head{display:grid; grid-template-columns:160px repeat(4,1fr); gap:8px}
.mx-row{display:grid; grid-template-columns:160px repeat(4,1fr); gap:8px}
.mx-item{border:1px solid #2a2d33; border-radius:10px; background:#101216; padding:.55rem .6rem; color:#e9edf6}
.mx-type{font-weight:700}
.mx-fin{font-weight:700; color:#fff; text-align:center}
.mx-cell{cursor:pointer; min-height:40px; transition:box-shadow .2s, border-color .2s, background .2s}
.mx-cell.is-on{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-color:transparent; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%, transparent);
  color:#0f1115;
}
.mx-out{display:grid; gap:8px; margin-top:10px}
.mx-progress{height:8px; background:#1a1d23; border:1px solid #2a2d33; border-radius:999px; overflow:hidden}
.mx-progress span{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s}
@media (max-width:980px){
  .mx-head,.mx-row{grid-template-columns:120px repeat(4,1fr)}
}

/* ===== 8) Care & Warranty ===== */
.st-care{padding:42px 0}
.care-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start}
.care-panel{display:grid}
.env-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.env-title{color:#fff; font-weight:800}
.env-bars{display:grid; gap:8px}
.bar{display:grid; grid-template-columns:130px 1fr; gap:10px; align-items:center}
.barv{display:block; height:10px; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); width:0%}
.acc{display:grid; gap:6px; margin-top:10px}
.acc-h{padding:.5rem .75rem; border:1px solid #2a2d33; border-radius:10px; background:#101216; color:#e9edf6; text-align:left; cursor:pointer}
.acc-p{border:1px dashed #2a2d33; border-radius:10px; padding:.6rem}
@media (max-width:980px){ .care-grid{grid-template-columns:1fr} }

/* ===== 9) Static exploded view ===== */
.st-exploded-static{padding:42px 0}
.expst-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start}
@media (max-width:980px){ .expst-grid{grid-template-columns:1fr} }

.exploded-fig-static{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-elev); padding:10px; display:grid; gap:10px;
}
.exploded-fig-static img{width:min(100%,350px); height:auto; border-radius:12px; display:block}

.part-buttons{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  padding:.45rem .8rem; border-radius:999px;
  border:1px solid #2a2d33; background:#101216; color:#e9edf6;
  cursor:pointer; user-select:none;
}
.pill.is-active{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#0f1115; border-color:transparent;
}
.pill:focus-visible{outline:2px solid #fff; outline-offset:2px}

.expst-copy .exp-note{
  margin-top:10px; border:1px dashed #2a2d33; border-radius:12px; padding:.7rem; background:#101216;
}
/* ===== 10) Lead Times (static) ===== */
.st-lead-static{padding:42px 0}
.leadst-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:16px; align-items:start}
.leadst-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.leadst-row{display:grid; grid-template-columns:170px repeat(4,1fr); gap:8px; align-items:center}
.leadst-row--head .cell{font-weight:800; color:#fff}
.leadst-row--foot .cell{font-weight:700}
.cell{color:#e9edf6}
.bar{display:inline-block; height:10px; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); margin-right:8px; vertical-align:middle}
.w-20{width:20%}.w-25{width:25%}.w-35{width:35%}.w-45{width:45%}.w-55{width:55%}.w-65{width:65%}
.leadst-foot .small{margin:6px 0 0}
@media (max-width:980px){
  .leadst-grid{grid-template-columns:1fr}
  .leadst-row{grid-template-columns:135px repeat(4,1fr)}
}

/* ===== 11) Custom Studio (static) ===== */
.st-custom-static{padding:42px 0}
.custst-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start}
.custst-fig{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.custst-fig img{width:min(100%,350px); height:auto; border-radius:12px; display:block}
.ref-list{display:grid; gap:8px; margin:8px 0}
@media (max-width:980px){ .custst-grid{grid-template-columns:1fr} }

/* ===== 12) Team ===== */
.st-team{padding:42px 0}
.team-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start}
.t-card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev);
  padding:10px; display:grid; gap:8px; transform:translateY(8px); opacity:.92;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.t-card:hover{transform:none; opacity:1; box-shadow:0 18px 36px rgba(0,0,0,.35)}
.t-card img{width:min(100%,350px); height:auto; border-radius:12px; display:block; object-fit:cover}
.t-card h3{color:#fff}
@media (max-width:980px){ .team-grid{grid-template-columns:1fr} }
/* === Fix: Lead Times (static) mobile overflow === */
.leadst-card{
  overflow-x: auto;                 /* скроллится только таблица */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 560px){
  /* ширина строки равна сумме колонок => скролл внутри .leadst-card */
  .leadst-row{
    width: max-content;
    grid-template-columns: 120px repeat(4, 90px);   /* компактные колонки */
    gap: 6px;
  }
  .leadst-grid{ grid-template-columns: 1fr; }       /* одна колонка в секции */
  .cell{ font-size: .95rem; }
  .bar{ height: 8px; margin-right: 6px; }
}

/* доп. защита от распирания длинными словами */
.leadst-copy h2, .leadst-copy p { overflow-wrap: anywhere; }
/* === Matrix (sec.7) — hard clamp to container & inner scroll === */
.st-matrix .container{
  overflow-x: hidden;          /* не даём секции раздвигать страницу */
  min-width: 0;
}

.mx-wrap{
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;                /* важно для мобильных Safari */
  overflow-x: auto;            /* скроллится только таблица */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;         /* место под «скрытую» полоску */
}

/* Сама таблица становится шириной по содержимому,
   но это ширина живёт только внутри .mx-wrap */
.mx-head,
.mx-row{
  width: max-content;                    /* суммарная ширина колонок */
  grid-template-columns: 120px repeat(4, 90px);  /* компактные колонки */
  gap: 8px;
}

.mx-type{ white-space: nowrap; }
.mx-fin{  white-space: nowrap; }

/* ещё компактнее на сверхузких */
@media (max-width: 380px){
  .mx-head,
  .mx-row{ grid-template-columns: 110px repeat(4, 78px); gap: 6px; }
}

/* на всякий случай: любые элементы матрицы не могут быть шире контейнера */
.st-matrix *{ max-inline-size: 100%; }
/* ===== 13) Documentation ===== */
.st-docs{padding:42px 0}
.docs-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start}
.docs-copy .bullets{display:grid; gap:6px; margin:8px 0}
@media (max-width:980px){ .docs-grid{grid-template-columns:1fr} }

/* ===== 14) Sustainability ===== */
.st-loop{padding:42px 0}
.loop-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start}
.loop-copy .bullets{display:grid; gap:6px; margin:8px 0}
@media (max-width:980px){ .loop-grid{grid-template-columns:1fr} }

/* ===== 15) Installers ===== */
.st-install{padding:42px 0}
.install-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start}
.install-copy .bullets{display:grid; gap:6px; margin:8px 0}
@media (max-width:980px){ .install-grid{grid-template-columns:1fr} }

/* ===== shared 4-image gallery ===== */
.gal4{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-elev); padding:10px; display:grid; gap:8px;
}
.gal4 img{
  width:min(100%,350px); height:auto; display:block; border-radius:12px; object-fit:cover;
}
.gal4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:700px){ .gal4{ grid-template-columns:1fr } }