/* ==========================================================================
   blocks.css — доп. блоки для zapchastioptom.kz (перенос ценных секций с РФ):
   Производство/OEM (+видео), Сертификаты (галерея), СТМ (private label), FORGA.
   Самодостаточно, подключается ПОСЛЕ main.css/custom.css. Палитра — как на сайте.
   Контент всегда видим (без скрытых wow-анимаций).
   ========================================================================== */
:root{
  --b-acc:#3357b5; --b-acc-d:#26408a; --b-navy:#0d1b3e; --b-navy2:#16306f;
  --b-ink:#0f2350; --b-soft:#eef1f8; --b-soft2:#f5f7fc; --b-line:#e1e6f1;
  --b-muted:#6b7890; --b-text:#3c4a63;
}

/* ---------- каркас секции ---------- */
.blk{ padding:64px 0; position:relative; }
.blk-wrap{ max-width:1140px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
.blk--soft{ background:var(--b-soft2); }
.blk--soft2{ background:linear-gradient(180deg,#f7f9fc 0%,#eef1f8 100%); }
.blk--navy{ background:linear-gradient(135deg,#0f2350 0%,#1c3a86 100%); color:#dfe7f5; }

.blk-head{ text-align:center; max-width:820px; margin:0 auto 40px; }
.blk-kicker{ font:700 13px/1 Arial,sans-serif; letter-spacing:2px; text-transform:uppercase;
  color:var(--b-acc); margin:0 0 14px; }
.blk--navy .blk-kicker{ color:#8fb0ff; }
.blk-h2{ font:700 30px/1.25 'Arsenal',Arial,sans-serif; color:var(--b-navy2); margin:0 0 14px; }
.blk--navy .blk-h2{ color:#fff; }
.blk-h2 .hl{ color:var(--b-acc); }
.blk--navy .blk-h2 .hl{ color:#8fb0ff; }
.blk-sub{ font:400 16px/1.6 Arial,sans-serif; color:var(--b-text); margin:0; }
.blk--navy .blk-sub{ color:#c2d0ea; }

/* ---------- кнопка (заводится на форму через .modal_open) ---------- */
.blk-btn{ display:inline-block; cursor:pointer; border-radius:8px;
  font:700 15px Arial,sans-serif; padding:14px 28px; text-decoration:none;
  transition:.18s; border:2px solid var(--b-acc); }
.blk-btn.solid{ background:var(--b-acc); color:#fff; }
.blk-btn.solid:hover{ background:var(--b-acc-d); border-color:var(--b-acc-d); }
.blk-btn.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.blk-btn.ghost:hover{ background:#fff; color:var(--b-navy2); border-color:#fff; }

/* ---------- Excel-кнопка прайса (как на РФ): иконка-таблица + бейдж XLSX ---------- */
.btn-xlsx,
.fsform form button.btn-xlsx{
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg,#1f9a54 0%,#136b39 100%) !important; color:#fff !important;
  border:0 !important; border-radius:10px; font:700 16px 'Arsenal',Arial,sans-serif;
  cursor:pointer; box-shadow:0 14px 30px -12px rgba(19,107,57,.6); transition:.18s; white-space:nowrap;
}
.fsform form button.btn-xlsx{ padding:14px 20px; font-size:15px; }
.btn-xlsx:hover,
.fsform form button.btn-xlsx:hover{ background:linear-gradient(135deg,#23ac5e 0%,#178043 100%) !important; transform:translateY(-2px); }
.btn-xlsx .xlsx-ico{ width:22px; height:22px; flex:0 0 auto; }
.btn-xlsx .ext{ background:rgba(255,255,255,.22); color:#fff; font:800 11px Arial,sans-serif; letter-spacing:1px; padding:3px 8px; border-radius:6px; }

/* Форма первого экрана — гибкая раскладка (имя / телефон / e-mail + кнопка) */
.fsform form{ display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }
.fsform form input:not([type=hidden]){ flex:1 1 190px; width:auto; margin:0; }
.fsform form button.btn-xlsx{ flex:0 0 auto; }
@media (max-width:760px){ .fsform form input:not([type=hidden]), .fsform form button.btn-xlsx{ flex:1 1 100%; } }

/* ==========================================================================
   ПРОИЗВОДСТВО / OEM
   ========================================================================== */
.oem-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:0 0 40px; }
.oem-point{ display:flex; gap:14px; align-items:flex-start; background:#fff;
  border:1px solid var(--b-line); border-radius:14px; padding:20px 20px;
  box-shadow:0 8px 24px rgba(21,35,63,.05); }
.oem-ico{ flex:0 0 44px; width:44px; height:44px; border-radius:10px;
  background:var(--b-soft); color:var(--b-acc); display:flex; align-items:center; justify-content:center; }
.oem-ico svg{ width:24px; height:24px; }
.oem-point b{ display:block; color:var(--b-navy2); font-size:15px; margin:0 0 5px; }
.oem-point p{ margin:0; font:14px/1.55 Arial,sans-serif; color:var(--b-text); }

.blk-video{ position:relative; margin:0 0 24px; border-radius:16px; overflow:hidden;
  background:#0d1b3e; box-shadow:0 14px 40px rgba(13,27,62,.18); }
.blk-video video{ display:block; width:100%; height:auto; }
.blk-video .blk-play{ position:absolute; inset:0; width:100%; height:100%; border:0;
  cursor:pointer; background:rgba(13,27,62,.28); display:flex; align-items:center; justify-content:center;
  transition:.2s; }
.blk-video .blk-play:hover{ background:rgba(13,27,62,.42); }
.blk-video .blk-play span{ width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--b-acc); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 26px rgba(0,0,0,.28); }
.blk-video .blk-play span svg{ width:30px; height:30px; margin-left:4px; }
.blk-video .blk-cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px;
  font:600 14px Arial,sans-serif; color:#fff; background:linear-gradient(0deg,rgba(6,14,36,.75),rgba(6,14,36,0)); }
.blk-video.playing .blk-play, .blk-video.playing .blk-cap{ opacity:0; pointer-events:none; }

.fac-photos{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin:0 0 24px; }
.fac-card{ margin:0; border-radius:14px; overflow:hidden; position:relative; border:1px solid var(--b-line);
  background:#fff; box-shadow:0 8px 24px rgba(21,35,63,.05); }
.fac-card.span3{ grid-column:span 3; }
.fac-card.span2{ grid-column:span 2; }
.fac-card img{ display:block; width:100%; height:220px; object-fit:cover; }
.fac-card figcaption{ position:absolute; left:0; right:0; bottom:0; padding:10px 14px;
  font:600 13px Arial,sans-serif; color:#fff; background:linear-gradient(0deg,rgba(6,14,36,.72),rgba(6,14,36,0)); }

/* ==========================================================================
   СЕРТИФИКАТЫ
   ========================================================================== */
.certs-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.cert-item{ display:block; padding:0; border:1px solid var(--b-line); border-radius:12px; overflow:hidden;
  background:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(21,35,63,.05); transition:.16s; }
.cert-item:hover{ transform:translateY(-2px); border-color:var(--b-acc); box-shadow:0 12px 28px rgba(21,35,63,.12); }
.cert-item img{ display:block; width:100%; height:230px; object-fit:cover; object-position:top; background:#fff; }

/* лайтбокс (собственный, без зависимостей) */
.blk-lb{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
  background:rgba(8,15,35,.88); padding:40px; }
.blk-lb.open{ display:flex; }
.blk-lb img{ max-width:min(92vw,900px); max-height:88vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff; }
.blk-lb button{ position:absolute; background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer;
  width:52px; height:52px; border-radius:50%; font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center; transition:.15s; }
.blk-lb button:hover{ background:rgba(255,255,255,.28); }
.blk-lb .lb-close{ top:24px; right:24px; }
.blk-lb .lb-prev{ left:24px; top:50%; transform:translateY(-50%); }
.blk-lb .lb-next{ right:24px; top:50%; transform:translateY(-50%); }

/* ==========================================================================
   СТМ (private label)
   ========================================================================== */
.stm-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.stm-copy .blk-kicker{ text-align:left; }
.stm-copy h2{ font:700 30px/1.25 'Arsenal',Arial,sans-serif; color:#fff; margin:0 0 16px; }
.stm-copy .lead{ font:400 16px/1.65 Arial,sans-serif; color:#c8d5ee; margin:0 0 18px; }
.ticks{ list-style:none; margin:0 0 24px; padding:0; }
.ticks li{ position:relative; padding:6px 0 6px 30px; color:#e3ebfa; font:15px/1.5 Arial,sans-serif; }
.ticks li::before{ content:""; position:absolute; left:0; top:9px; width:18px; height:18px; border-radius:50%;
  background:var(--b-acc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; }
.stm-visual{ display:flex; align-items:center; justify-content:center; }
.stm-box{ position:relative; width:280px; height:220px; border-radius:16px;
  background:linear-gradient(145deg,#f6f8fd 0%,#dfe6f5 100%); box-shadow:0 24px 60px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.5); overflow:hidden; }
.stm-box .stm-tape{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:26px;
  background:rgba(51,87,181,.18); }
.stm-box .stm-label{ position:absolute; left:24px; right:24px; top:70px; background:#fff; border-radius:8px;
  padding:16px; text-align:center; box-shadow:0 8px 20px rgba(21,35,63,.12); }
.stm-box .stm-logo{ display:block; font:800 20px 'Arsenal',Arial,sans-serif; color:var(--b-navy2); letter-spacing:1px; }
.stm-box .stm-line{ display:block; height:2px; background:var(--b-acc); width:56px; margin:8px auto; }
.stm-box .stm-sub{ display:block; font:600 10px Arial,sans-serif; letter-spacing:1.5px; color:var(--b-muted); }
.stm-box .stm-barcode{ position:absolute; left:24px; right:24px; bottom:18px; height:26px;
  background:repeating-linear-gradient(90deg,#12203f 0 2px,transparent 2px 4px,#12203f 4px 5px,transparent 5px 9px); opacity:.85; }
.stm-box .stm-badge{ position:absolute; top:14px; right:14px; background:var(--b-acc); color:#fff;
  font:800 12px Arial,sans-serif; padding:5px 10px; border-radius:20px; box-shadow:0 6px 16px rgba(51,87,181,.4); }

/* ==========================================================================
   FORGA
   ========================================================================== */
.forga-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.forga-visual{ display:flex; align-items:center; justify-content:center; }
.forga-card{ position:relative; width:100%; max-width:360px; aspect-ratio:16/10; border-radius:18px;
  background:linear-gradient(145deg,#eef2fa 0%,#dbe4f4 100%); display:flex; align-items:center; justify-content:center;
  box-shadow:0 22px 55px rgba(13,27,62,.16); border:1px solid var(--b-line); }
.forga-logo{ width:230px; max-width:76%; height:auto; object-fit:contain; border-radius:6px; }
.forga-tag{ position:absolute; bottom:16px; right:18px; font:700 11px Arial,sans-serif; letter-spacing:2px;
  color:var(--b-acc); }
.forga-copy .blk-kicker{ text-align:left; }
.forga-copy h2{ font:800 34px/1.1 'Arsenal',Arial,sans-serif; color:var(--b-navy2); margin:0 0 14px; letter-spacing:1px; }
.forga-copy .lead{ font:400 16px/1.65 Arial,sans-serif; color:var(--b-text); margin:0 0 12px; }
.forga-copy .muted{ font:400 14px/1.6 Arial,sans-serif; color:var(--b-muted); margin:0 0 22px; }
.forga-copy .blk-btn{ border-color:var(--b-acc); color:var(--b-acc); background:transparent; }
.forga-copy .blk-btn:hover{ background:var(--b-acc); color:#fff; }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width:900px){
  .blk{ padding:44px 0; }
  .blk-h2{ font-size:24px; }
  .oem-points{ grid-template-columns:1fr; gap:14px; }
  .fac-photos{ grid-template-columns:repeat(2,1fr); }
  .fac-card.span3,.fac-card.span2{ grid-column:span 1; }
  .fac-card img{ height:170px; }
  .certs-grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .cert-item img{ height:190px; }
  .stm-grid,.forga-grid{ grid-template-columns:1fr; gap:28px; }
  .stm-visual{ order:-1; }
  .stm-copy h2,.forga-copy h2{ font-size:24px; }
  .blk-lb{ padding:16px; }
  .blk-lb .lb-prev{ left:8px; } .blk-lb .lb-next{ right:8px; }
}
@media (max-width:520px){
  .certs-grid{ grid-template-columns:repeat(2,1fr); }
  .cert-item img{ height:210px; }
  .fac-card img{ height:140px; }
}