*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Manrope', sans-serif; background: #F7FAFC; color: #071B2A; min-height: 100vh; }

/* Header */
.zc-header { background: #0B2233; padding: 0 64px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.zc-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.zc-logo-icon { width: 36px; height: 36px; border-radius: 9px; background: #0B2233; border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.zc-logo-icon span { font-weight: 800; font-size: 19px; color: #fff; }
.zc-logo-icon::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; background: #FF6A00; clip-path: polygon(0 100%,100% 0,100% 100%); }
.zc-logo-text { font-size: 17px; font-weight: 800; color: #fff; }
.zc-nav { display: flex; align-items: center; gap: 28px; }
.zc-nav a { color: rgba(255,255,255,.65); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .18s; }
.zc-nav a:hover { color: #fff; }
/* Кнопки-штампы: скошенный угол и жёсткая смещённая тень — тот же язык, что у
   .lp-cta-primary на лендинге. Тень на светлом фоне тёмно-синяя, на тёмном —
   тёмно-оранжевая, иначе её не видно. При нажатии кнопка вдавливается в тень. */
.zc-cta {
    display: inline-flex; align-items: center;
    background: #FF6A00; color: #fff;
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
    box-shadow: 3px 3px 0 #B54B00;
    padding: 9px 20px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease;
}
.zc-cta:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #B54B00; }
.zc-cta:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #B54B00; transition-duration: .06s; }

/* Hero */
.zc-hero { background: #071B2A; padding: 48px 64px 52px; }
.zc-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; font-weight: 500; }
.zc-breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .18s; }
.zc-breadcrumb a:hover { color: rgba(255,255,255,.8); }
.zc-breadcrumb span { color: rgba(255,255,255,.3); }
.zc-breadcrumb span:last-child { color: rgba(255,255,255,.7); }
.zc-h1 { font-size: clamp(26px,3.5vw,40px); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 16px; }
.zc-desc { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.6); font-weight: 500; max-width: 640px; margin-bottom: 28px; }
.zc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-tag { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: 5px 14px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); }

/* Content */
.zc-content { padding: 32px 64px 48px; }
.zc-cats-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.zc-cat-link { background: #fff; border: 1px solid rgba(7,27,42,.1); border-radius: 100px; padding: 8px 18px; font-size: 13px; font-weight: 600; color: #4A5D6E; text-decoration: none; transition: all .18s; }
.zc-cat-link:hover { border-color: #FF6A00; color: #FF6A00; }
.zc-cat-link.active { background: #FF6A00; border-color: #FF6A00; color: #fff; }

/* Grid */
.zc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Плейсхолдер загрузки: пустая карточка с пунктирной рамкой — «место под деталь,
   размер ещё не проставлен». Бегущий градиентный блик убран: это универсальный
   SaaS-приём, к графике проекта отношения не имеет. */
.zc-skeleton { height: 180px; background: #F1F5F9; border: 1px dashed rgba(7,27,42,.16); border-radius: 3px; animation: zc-fade 1.6s ease-in-out infinite; }
@keyframes zc-fade { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

/* Card */
.zc-card { background: #fff; border: 1px solid rgba(7,27,42,.12); border-radius: 3px; padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
/* Наведение отмечается рамкой и жёсткой смещённой тенью, а не размытым облаком. */
.zc-card:hover { border-color: #0B2233; box-shadow: 3px 3px 0 rgba(7,27,42,.12); }
.zc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zc-badge { background: #F1F5F9; border-radius: 6px; padding: 3px 10px; font-size: 11px; font-weight: 700; color: #4A5D6E; }
.zc-status { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #16a34a; }
.zc-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#16a34a; }
.zc-card-title { font-size: 15px; font-weight: 700; line-height: 1.4; color: #071B2A; flex: 1; }
.zc-card-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-card-meta span { font-size: 12px; font-weight: 500; color: #4A5D6E; background: #F7FAFC; border-radius: 6px; padding: 3px 10px; }
.zc-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(7,27,42,.06); }
.zc-company { font-size: 13px; font-weight: 600; color: #071B2A; filter: blur(4px); user-select: none; }
.zc-respond {
    display: inline-flex; align-items: center;
    background: #FF6A00; color: #fff;
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    box-shadow: 3px 3px 0 #071B2A;
    padding: 8px 16px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease;
}
.zc-respond:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #071B2A; }
.zc-respond:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #071B2A; transition-duration: .06s; }

/* CTA Banner */
.zc-cta-banner { margin: 0 64px 64px; border-radius: 4px; background: #071B2A; padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.zc-cta-banner h2 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.zc-cta-banner p { font-size: 14px; color: rgba(255,255,255,.6); font-weight: 500; }
.zc-cta-btn {
    display: inline-flex; align-items: center;
    background: #FF6A00; color: #fff;
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
    box-shadow: 4px 4px 0 #B54B00;
    padding: 14px 26px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: transform .12s ease, box-shadow .12s ease;
}
.zc-cta-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #B54B00; }
.zc-cta-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #B54B00; transition-duration: .06s; }

/* Блок «открытых закупок нет — вот заводы категории». Кнопка прижималась
   вплотную к сетке карточек: у неё не было ни отступа, ни своей тени под светлый фон. */
.zc-fallback { margin-top: 4px; }
.zc-fallback .zc-cta-btn { margin-top: 28px; box-shadow: 4px 4px 0 #071B2A; }
.zc-fallback .zc-cta-btn:hover { box-shadow: 6px 6px 0 #071B2A; }
.zc-fallback .zc-cta-btn:active { box-shadow: 0 0 0 #071B2A; }

/* Footer */
.zc-footer { background: #0B2233; padding: 36px 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.zc-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.zc-footer-links a { color: rgba(255,255,255,.45); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .18s; }
.zc-footer-links a:hover { color: rgba(255,255,255,.75); }
.zc-footer-copy { font-size: 13px; color: rgba(255,255,255,.3); }

/* Responsive */
@media (max-width: 900px) {
  .zc-header { padding: 0 24px; }
  .zc-nav { display: none; }
  .zc-hero { padding: 32px 24px 36px; }
  .zc-content { padding: 24px 24px 36px; }
  .zc-grid { grid-template-columns: 1fr 1fr; }
  .zc-cta-banner { margin: 0 24px 40px; padding: 32px 28px; flex-direction: column; align-items: flex-start; }
  .zc-footer { padding: 28px 24px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .zc-grid { grid-template-columns: 1fr; }
}

/* ── Контентные блоки категорийной страницы ────────────────────────── */
.zc-h2 { font-size: 22px; font-weight: 800; color: #071B2A; margin: 36px 0 14px; letter-spacing: -.4px; }
.zc-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.zc-table th, .zc-table td { border: 1px solid #E2E8F0; padding: 9px 12px; text-align: left; color: #334155; }
.zc-table th { background: #F8FAFC; font-weight: 700; color: #071B2A; }
.zc-steps, .zc-checklist { margin: 0 0 8px 20px; font-size: 14.5px; line-height: 1.75; color: #334155; }
.zc-steps li, .zc-checklist li { margin-bottom: 8px; }
.zc-factors { font-size: 14.5px; line-height: 1.7; color: #334155; }
.zc-factors dt { font-weight: 700; color: #071B2A; margin-top: 12px; }
.zc-factors dd { margin: 4px 0 0; }
.zc-faq-item { border: 1px solid #E2E8F0; border-radius: 3px; padding: 12px 14px; margin-bottom: 8px; background: #fff; }
.zc-faq-item summary { font-weight: 700; font-size: 14.5px; color: #071B2A; cursor: pointer; }
.zc-faq-item p { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #334155; }
.zc-related { display: flex; flex-wrap: wrap; gap: 10px; }
.zc-related a { font-size: 13.5px; font-weight: 600; color: #334155; text-decoration: none; border: 1px solid #E2E8F0; border-radius: 3px; padding: 8px 14px; background: #fff; }
.zc-related a:hover { border-color: #0B2233; color: #071B2A; }
.zc-fallback-lead { font-size: 14.5px; line-height: 1.7; color: #334155; margin-bottom: 14px; }
.zc-card-link { text-decoration: none; display: block; }
@media (max-width: 720px) {
  .zc-table { display: block; overflow-x: auto; }
}