/* ─────────────────────────────────────────────────────────────
   APEX DSP — страница модуля.
   Живёт отдельным файлом: грузится только на /apex.php и не тянет
   приборную графику на остальные страницы сайта.
   Палитра и шрифты — общие, из style.css.
   ───────────────────────────────────────────────────────────── */

/* ── приборный герой ── */
.ax-hero{position:relative;padding:70px 0 40px}
.ax-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.ax-title{font-family:var(--display);font-weight:900;font-size:clamp(3rem,7vw,5.6rem);line-height:.95;
  margin:0 0 .18em;letter-spacing:.01em;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 50%,var(--brass));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ax-sub{font:italic 600 clamp(1.2rem,2vw,1.6rem)/1.35 var(--engr);color:var(--parch);margin:0 0 18px}
.ax-lead{color:var(--parch-dim);max-width:56ch;margin:0 0 26px}
.ax-badges{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.ax-badge{font:600 .74rem/1 var(--engr);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line-2);padding:9px 13px;background:rgba(226,183,90,.05)}

/* прибор: живой холст в рамке */
.ax-device{position:relative;border:1px solid var(--line-2);background:linear-gradient(170deg,rgba(38,25,14,.9),rgba(11,8,5,.95));
  padding:14px;box-shadow:var(--shadow),0 0 70px rgba(226,183,90,.1)}
.ax-device::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.ax-device-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px 10px;
  font:600 .72rem/1 var(--engr);letter-spacing:.18em;text-transform:uppercase;color:var(--parch-faint)}
.ax-led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold);animation:axLed 2.4s ease-in-out infinite;margin-right:8px;vertical-align:1px}
@keyframes axLed{0%,100%{opacity:.35}50%{opacity:1}}
.ax-canvas{display:block;width:100%;height:auto;background:#0a0704}
.ax-verdict{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 8px 4px;
  font-family:var(--engr);color:var(--parch-dim)}
.ax-verdict b{font:700 1.5rem/1 var(--display);color:var(--gold-hi)}
.ax-verdict i{font-style:italic;color:var(--rust)}

/* ── цепочка обработки ── */
.ax-chain{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:46px;position:relative}
.ax-step{position:relative;padding:26px 20px 22px;border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(38,25,14,.66),rgba(14,9,5,.72));transition:border-color .4s,transform .5s var(--ease)}
.ax-step:hover{border-color:var(--line-2);transform:translateY(-4px)}
.ax-step .n{font:italic 700 .8rem/1 var(--engr);letter-spacing:.2em;color:var(--brass);display:block;margin-bottom:10px}
.ax-step h3{font-size:1.12rem;margin:0 0 .5em}
.ax-step p{margin:0;font-size:.93rem;color:var(--parch-dim);line-height:1.55}
.ax-step::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;opacity:.85}
.ax-step.pulse::after{animation:axPulse 1.15s var(--ease)}
@keyframes axPulse{0%{transform:scaleX(0)}45%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* ── крупные числа ── */
.ax-nums{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:54px;
  border-top:1px solid var(--line);padding-top:34px}
.ax-num b{display:block;font:900 clamp(2rem,3.6vw,3rem)/1 var(--display);
  background:linear-gradient(180deg,var(--gold-hi),var(--brass));-webkit-background-clip:text;background-clip:text;color:transparent}
.ax-num span{display:block;margin-top:8px;font-size:.88rem;color:var(--parch-faint);line-height:1.4}

/* ── метрики индекса формы ── */
.ax-metrics{display:flex;flex-direction:column;gap:26px;margin-top:8px}
.ax-metric{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:start}
.ax-metric .w{font:900 1.6rem/1 var(--display);color:var(--gold-hi)}
.ax-metric h3{margin:0 0 .35em;font-size:1.1rem}
.ax-metric p{margin:0;color:var(--parch-dim);font-size:.95rem}
.ax-bar{grid-column:1/-1;height:3px;background:var(--line);position:relative;overflow:hidden}
.ax-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--brass),var(--gold-hi));
  transition:width 1.4s var(--ease)}
.ax-bar.on i{width:var(--w,0%)}

/* ── таблица измерений ── */
.ax-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.93rem}
.ax-table th{text-align:left;font:600 .72rem/1 var(--engr);letter-spacing:.18em;text-transform:uppercase;
  color:var(--parch-faint);padding:0 10px 12px;font-weight:600}
.ax-table td{padding:14px 10px;border-top:1px solid var(--line);color:var(--parch-2)}
.ax-table td.idx{font:700 1.25rem/1 var(--display)}
.ax-table tr.good td.idx{color:var(--gold-hi)}
.ax-table tr.mid td.idx{color:var(--parch-dim)}
.ax-table tr.bad td.idx{color:var(--rust)}

/* ── карточки ── */
.ax-cards{display:grid;gap:20px}
.ax-cards.c2{grid-template-columns:repeat(2,1fr)}
.ax-cards.c3{grid-template-columns:repeat(3,1fr)}
.ax-cards.c4{grid-template-columns:repeat(4,1fr)}
.ax-cards.c5{grid-template-columns:repeat(5,1fr)}
.ax-card{padding:28px 24px;border:1px solid var(--line);position:relative;
  background:linear-gradient(170deg,rgba(38,25,14,.6),rgba(14,9,5,.7));transition:border-color .4s,transform .5s var(--ease)}
.ax-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.ax-card h3{font-size:1.08rem;margin:0 0 .55em;color:var(--gold)}
.ax-card p{margin:0;color:var(--parch-dim);font-size:.93rem;line-height:1.6}
.ax-card.alarm h3{color:var(--rust)}
.ax-card.hi h3{color:var(--gold-hi)}

/* ── галерея экранов ── */
.ax-screens{display:flex;gap:22px;overflow-x:auto;padding:10px 4px 26px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
.ax-screens figure{flex:0 0 auto;margin:0;scroll-snap-align:center;text-align:center;width:250px}
.ax-screens img{width:100%;border:1px solid var(--line-2);background:#140d06;display:block;
  transition:transform .55s var(--ease),box-shadow .55s,border-color .4s}
.ax-screens figure:hover img{transform:translateY(-8px) scale(1.02);border-color:var(--gold);
  box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 46px rgba(226,183,90,.16)}
.ax-screens figcaption{margin-top:14px;font:600 .8rem/1.3 var(--engr);letter-spacing:.14em;
  text-transform:uppercase;color:var(--parch-dim)}

/* ── два столбца: экран слева, текст справа ── */
.ax-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.ax-split.rev{grid-template-columns:1.1fr .9fr}
.ax-split-shots{display:flex;gap:18px;justify-content:center}
.ax-split-shots img{width:min(230px,44%);border:1px solid var(--line-2);background:#140d06}
.ax-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.ax-list li{position:relative;padding-left:26px;color:var(--parch-2)}
.ax-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border:1px solid var(--gold);transform:rotate(45deg)}

/* ── изолинии площадки ── */
.ax-iso{width:100%;height:auto;display:block}
.ax-iso path{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-opacity:.55;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.ax-iso.on path{animation:axDraw 2.6s var(--ease) forwards}
@keyframes axDraw{to{stroke-dashoffset:0}}
.ax-iso .hot{stroke:var(--gold-hi);stroke-opacity:.95;stroke-width:1.8}
.ax-iso .find{fill:var(--gold);stroke:none;opacity:0;animation:none}
.ax-iso.on .find{animation:axFind .7s ease forwards 2.1s}
@keyframes axFind{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* ── схема согласования уровней ── */
.ax-wiring{width:100%;height:auto;display:block;margin-top:10px}
.ax-wiring .wire{fill:none;stroke:var(--gold);stroke-width:2;stroke-opacity:.75}
.ax-wiring .part{fill:rgba(38,25,14,.9);stroke:var(--gold);stroke-width:2}
.ax-wiring .cap{stroke:var(--gold);stroke-width:3}
.ax-wiring text{fill:var(--parch-dim);font:500 13px var(--serif)}
.ax-wiring text.pin{fill:var(--parch);font-size:14px}
.ax-wiring .spark{fill:var(--gold-hi);filter:drop-shadow(0 0 6px var(--gold))}

/* ── честная оговорка ── */
.ax-honest{border:1px solid var(--line-2);border-left:3px solid var(--rust);
  background:linear-gradient(100deg,rgba(196,83,58,.08),rgba(14,9,5,.6));padding:30px 32px}
.ax-honest h3{color:var(--rust);margin:0 0 .5em}
.ax-honest p{margin:0 0 .7em;color:var(--parch-2)}
.ax-honest p:last-child{margin:0}

/* ── подвал страницы: призыв скачать ── */
.ax-cta{text-align:center;padding:20px 0 10px}
.ax-cta .btn-row{justify-content:center;margin-top:26px}

@media (max-width:1080px){
  .ax-hero-grid,.ax-split,.ax-split.rev{grid-template-columns:1fr;gap:34px}
  .ax-chain,.ax-nums,.ax-cards.c5,.ax-cards.c4{grid-template-columns:repeat(2,1fr)}
  .ax-cards.c3{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ax-chain,.ax-nums,.ax-cards.c2,.ax-cards.c4,.ax-cards.c5{grid-template-columns:1fr}
  .ax-metric{grid-template-columns:64px 1fr;gap:12px}
  .ax-screens figure{width:200px}
}

/* Движение — украшение, а не содержание: кому оно мешает, тот его не увидит. */
@media (prefers-reduced-motion:reduce){
  .ax-iso.on path{animation:none;stroke-dashoffset:0}
  .ax-iso.on .find{animation:none;opacity:1}
  .ax-step.pulse::after{animation:none}
  .ax-led{animation:none;opacity:.8}
}