:root { --articles-bg:#f2f3f6; --articles-blue:#34429b; --articles-navy:#1b2048; --articles-muted:#777a82; }
body { background: var(--articles-bg); }
.articles-index, .article-page { color:#26272b; background:var(--articles-bg); }
.articles-index { padding:38px 0 70px; }
.articles-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 18px; color:#8a8d94; font-size:13px; }
.articles-breadcrumbs a:hover { color:var(--articles-blue); }
.articles-breadcrumbs b { color:#34353a; font-weight:600; }
.articles-index h1 { margin:0 0 34px; font-size:clamp(44px,4.2vw,66px); line-height:.98; letter-spacing:-.045em; font-weight:760; }
.articles-topics { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.articles-topics a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:999px; background:#fff; color:#44464b; font-size:14px; font-weight:600; transition:.2s ease; }
.articles-topics a:hover, .articles-topics a.is-active { background:var(--articles-blue); color:#fff; }
.articles-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; color:#8c8f95; font-size:13px; }
.articles-sort { display:flex; align-items:center; gap:2px; padding:5px; border-radius:11px; background:#fff; }
.articles-sort a { min-height:34px; display:flex; align-items:center; padding:0 14px; border-radius:8px; color:#666970; font-size:12px; font-weight:600; }
.articles-sort a.is-active { background:var(--articles-blue); color:#fff; }
.article-feature { display:grid; grid-template-columns:1fr 1fr; min-height:315px; overflow:hidden; border-radius:16px; background:#fff; }
.article-feature-media { background:#d6d6d6; min-height:315px; }
.article-feature-copy { display:flex; flex-direction:column; padding:36px 38px 28px; }
.article-feature-copy strong { display:block; max-width:520px; font-size:clamp(28px,2.6vw,39px); line-height:1.05; letter-spacing:-.035em; }
.article-feature-copy > span { display:block; margin-top:22px; max-width:520px; color:#6f7177; font-size:16px; line-height:1.55; }
.article-feature-copy small { margin-top:auto; padding-top:22px; border-top:1px solid #ececf0; color:#92949a; font-size:12px; }
.article-feature-copy small i, .article-card small i { margin:0 10px; font-style:normal; }
.articles-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px; }
.article-card { overflow:hidden; border-radius:14px; background:#fff; transition:transform .2s ease, box-shadow .2s ease; }
.article-card:hover, .article-feature:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(32,42,88,.08); }
.article-card-media { display:block; height:195px; background:#d6d6d6; }
.article-card-body { display:flex; flex-direction:column; min-height:220px; padding:24px 24px 20px; }
.article-card-body strong { font-size:19px; line-height:1.16; letter-spacing:-.02em; }
.article-card-body > span { margin-top:14px; color:#6f7177; font-size:13px; line-height:1.55; }
.article-card-body small { margin-top:auto; padding-top:20px; border-top:1px solid #ececf0; color:#92949a; font-size:11px; }
.articles-digest { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; margin-top:68px; padding:28px 34px; border-radius:15px; color:#fff; background:linear-gradient(105deg,#191e4a 0%,#34429b 100%); }
.articles-digest h2 { margin:0 0 4px; font-size:27px; line-height:1.05; }
.articles-digest p { margin:0; color:rgba(255,255,255,.75); font-size:13px; }
.articles-digest-form { display:grid; grid-template-columns:260px 140px; gap:10px; }
.articles-digest-form input, .articles-digest-form button { height:48px; border:0; border-radius:8px; }
.articles-digest-form input { padding:0 15px; background:#fff; }
.articles-digest-form button { background:#ed7f24; color:#fff; font-weight:700; }
.articles-empty { min-height:320px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; padding:45px; border-radius:16px; background:#fff; }
.articles-empty h1, .articles-empty h2 { margin:0; }
.articles-empty p { margin:0 0 15px; color:#777a82; }

/* article detail */
.article-head { padding-top:26px; }
.article-head .articles-breadcrumbs { margin-bottom:28px; }
.article-tags { display:flex; gap:8px; margin-bottom:14px; }
.article-tags span { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; background:#fff; color:#565a64; font-size:11px; font-weight:700; }
.article-head h1 { max-width:900px; margin:0; font-size:clamp(46px,4.1vw,68px); line-height:.96; letter-spacing:-.05em; font-weight:760; }
.article-lead { max-width:920px; margin:22px 0 26px; color:#5f626b; font-size:17px; line-height:1.62; }
.article-meta-row { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:32px; padding-bottom:25px; border-bottom:1px solid #dddfe4; }
.article-author { display:flex; align-items:center; gap:12px; }
.article-avatar { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--articles-blue); color:#fff; font-size:11px; font-weight:800; }
.article-author strong, .article-author small { display:block; }
.article-author strong { font-size:13px; }
.article-author small { margin-top:2px; color:#8a8d94; font-size:11px; }
.article-metrics { display:flex; align-items:center; gap:26px; color:#8a8d94; font-size:11px; }
.article-cover { position:relative; min-height:330px; margin-bottom:30px; border-radius:14px; background:linear-gradient(125deg,#35439b 0%,#1b2048 100%); }
.article-cover span { position:absolute; top:18px; right:18px; display:inline-flex; min-height:27px; align-items:center; padding:0 9px; border-radius:6px; background:#fff; color:#5c6070; font-size:10px; font-weight:700; }
.article-layout { position:relative; display:grid; grid-template-columns:210px minmax(0,760px) 46px; justify-content:center; gap:44px; align-items:start; padding-bottom:70px; }
.article-layout-short { grid-template-columns:210px minmax(0,760px); }
.article-toc { position:sticky; top:150px; display:flex; flex-direction:column; gap:10px; padding-top:8px; }
.article-toc strong { margin-bottom:7px; color:#34363c; font-size:13px; }
.article-toc a { display:grid; grid-template-columns:28px 1fr; gap:3px; color:#8a8d94; font-size:11px; line-height:1.35; }
.article-toc a:hover { color:var(--articles-blue); }
.article-toc a span { color:#646974; }
.article-body { min-width:0; color:#383a40; font-size:15px; line-height:1.72; }
.article-body section { scroll-margin-top:150px; margin-bottom:42px; }
.article-body p { margin:0 0 18px; }
.article-body .article-intro { font-size:18px; line-height:1.65; color:#3d3f44; }
.article-body h2 { margin:42px 0 14px; font-size:31px; line-height:1.08; letter-spacing:-.025em; }
.article-body h3 { margin:28px 0 10px; font-size:20px; line-height:1.2; }
.article-note { margin:24px 0; padding:18px 20px; border-left:3px solid; border-radius:0 9px 9px 0; font-size:13px; line-height:1.55; }
.article-note b { display:block; margin-bottom:5px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.article-note p { margin:0; }
.article-note.green { border-color:#49a975; background:#eef8f1; }
.article-note.orange { border-color:#f19339; background:#fff5eb; }
.article-note.blue { border-color:var(--articles-blue); background:#eef1ff; }
.article-table-wrap { margin:22px 0 28px; overflow-x:auto; border-radius:10px; border:1px solid #e1e2e6; background:#fff; }
.article-table { width:100%; min-width:650px; border-collapse:collapse; font-size:12px; }
.article-table th, .article-table td { padding:12px 14px; border-bottom:1px solid #ececf0; text-align:left; vertical-align:middle; }
.article-table th { color:#8a8d94; font-size:10px; text-transform:uppercase; letter-spacing:.035em; font-weight:700; }
.article-table td:first-child { color:var(--articles-blue); font-weight:800; }
.risk { display:inline-flex; align-items:center; gap:6px; }
.risk::before { content:""; width:28px; height:3px; border-radius:999px; background:currentColor; }
.risk.green { color:#59a75f; } .risk.orange { color:#e9a12c; } .risk.red { color:#d75b53; }
blockquote { margin:26px 0; padding:24px; border-radius:10px; background:#fff; color:#41434a; font-size:16px; line-height:1.6; font-weight:600; }
.article-product { display:grid; grid-template-columns:95px 1fr; gap:18px; align-items:center; margin:24px 0; padding:14px; border-radius:10px; background:#fff; }
.article-product-media { display:block; height:72px; border-radius:7px; background:#f1f1f2; }
.article-product small, .article-product strong, .article-product em { display:block; }
.article-product small { color:#8c8f95; font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.article-product strong { margin-top:4px; font-size:14px; }
.article-product em { margin-top:7px; color:var(--articles-blue); font-size:11px; font-style:normal; font-weight:700; }
.article-photo-placeholder { display:grid; place-items:center; min-height:230px; margin:24px 0 8px; border-radius:10px; background:#dde0e6; color:#a0a3aa; font-size:11px; }
.article-caption { color:#8b8e95; font-size:10px; text-align:center; }
.article-list { margin:12px 0 22px; padding-left:20px; }
.article-list li { margin:7px 0; }
.article-tags-bottom { display:flex; flex-wrap:wrap; gap:6px; margin:34px 0 22px; }
.article-tags-bottom span { display:inline-flex; padding:7px 10px; border-radius:7px; background:#fff; color:#777a82; font-size:10px; }
.article-author-card { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:18px; border-radius:12px; background:#fff; }
.article-author-card strong { display:block; font-size:13px; }
.article-author-card p { margin:3px 0 0; color:#858890; font-size:10px; line-height:1.4; }
.article-author-card a { color:var(--articles-blue); font-size:10px; font-weight:700; }
.article-share { position:sticky; top:155px; display:flex; flex-direction:column; gap:6px; align-items:center; }
.article-share span, .article-share a { display:grid; place-items:center; width:32px; height:32px; border-radius:7px; background:#fff; color:#747780; font-size:9px; font-weight:700; }
.article-more { padding-bottom:60px; }
.article-more-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:15px; }
.article-more-head h2 { margin:0; font-size:27px; }
.article-more-head a { color:var(--articles-blue); font-size:11px; font-weight:700; }
.article-more-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.article-more-grid a { min-height:180px; padding:22px; border-radius:12px; background:linear-gradient(135deg,#5d50c7,#34429b); color:#fff; }
.article-more-grid a:nth-child(2) { background:linear-gradient(135deg,#7478b7,#3e4a8e); }
.article-more-grid a:nth-child(3) { background:linear-gradient(135deg,#7150c7,#6b4cac); }
.article-more-grid span { font-size:9px; text-transform:uppercase; opacity:.72; }
.article-more-grid strong { display:block; margin-top:18px; font-size:17px; line-height:1.16; }
.article-more-grid p { margin:10px 0 0; color:rgba(255,255,255,.76); font-size:11px; line-height:1.45; }

@media (max-width:1100px) {
  .articles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:180px minmax(0,1fr); gap:30px; }
  .article-share { display:none; }
  .article-head h1 { max-width:760px; }
}
@media (max-width:800px) {
  .articles-index { padding-top:28px; }
  .articles-index h1 { margin-bottom:24px; }
  .articles-toolbar { align-items:flex-start; flex-direction:column; }
  .articles-sort { width:100%; overflow-x:auto; }
  .article-feature { grid-template-columns:1fr; }
  .article-feature-media { min-height:220px; }
  .article-feature-copy { min-height:270px; padding:26px; }
  .articles-grid { grid-template-columns:1fr; }
  .articles-digest { grid-template-columns:1fr; }
  .articles-digest-form { grid-template-columns:1fr 130px; }
  .article-meta-row { align-items:flex-start; flex-direction:column; }
  .article-metrics { flex-wrap:wrap; gap:12px 20px; }
  .article-cover { min-height:250px; }
  .article-layout, .article-layout-short { grid-template-columns:1fr; gap:16px; }
  .article-toc { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:20px; padding:18px; border-radius:10px; background:#fff; }
  .article-toc strong { grid-column:1/-1; }
  .article-more-grid { grid-template-columns:1fr; }
}
@media (max-width:540px) {
  .articles-index h1, .article-head h1 { font-size:42px; }
  .articles-topics { flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; }
  .articles-topics a { flex:0 0 auto; min-height:40px; padding:0 15px; }
  .articles-digest { padding:24px 20px; }
  .articles-digest-form { grid-template-columns:1fr; }
  .article-head { padding-top:18px; }
  .article-cover { min-height:190px; }
  .article-toc { grid-template-columns:1fr; }
  .article-author-card { grid-template-columns:auto 1fr; }
  .article-author-card a { grid-column:2; }
}

/* Article visual themes and full data-driven article layout */
.article-feature-media,
.article-card-media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  background: linear-gradient(135deg,#34429b,#1b2048);
}
.article-feature-media::before,
.article-card-media::before,
.article-cover::before,
.article-cover::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.article-feature-media::before,
.article-card-media::before {
  width: 230px;
  height: 230px;
  right: -65px;
  top: -70px;
  border: 42px solid rgba(255,255,255,.12);
}
.article-feature-media small,
.article-card-media small {
  position: relative;
  z-index: 1;
  margin-bottom: 7px;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .78;
}
.article-feature-media b,
.article-card-media b {
  position: relative;
  z-index: 1;
  max-width: 230px;
  font-size: 17px;
  line-height: 1.15;
}
.article-feature-media b { font-size: 26px; }
.article-theme-shredder { background:linear-gradient(145deg,#20295c,#34429b); }
.article-theme-security { background:linear-gradient(145deg,#191f46,#3547ae); }
.article-theme-service { background:linear-gradient(145deg,#263f77,#2c7ca2); }
.article-theme-russia { background:linear-gradient(145deg,#173575,#1768d8); }
.article-theme-laminator { background:linear-gradient(145deg,#4a3f9e,#7762c7); }
.article-theme-binder { background:linear-gradient(145deg,#264c7f,#5678a5); }
.article-theme-cutter { background:linear-gradient(145deg,#243b77,#1870be); }
.article-theme-film { background:linear-gradient(145deg,#6652ae,#4e78c2); }

.article-cover {
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 38px 42px;
}
.article-cover::before {
  width: 410px;
  height: 410px;
  right: -85px;
  top: -110px;
  border: 72px solid rgba(255,255,255,.10);
}
.article-cover::after {
  width: 230px;
  height: 230px;
  right: 190px;
  bottom: -155px;
  border: 50px solid rgba(255,255,255,.07);
}
.article-cover-copy { position:relative; z-index:1; max-width:690px; color:#fff; }
.article-cover-copy small { display:block; margin-bottom:12px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.article-cover-copy strong { display:block; font-size:clamp(31px,3.2vw,48px); line-height:1.02; letter-spacing:-.035em; }
.article-cover-blue { background:linear-gradient(125deg,#35439b 0%,#1b2048 100%); }
.article-cover-shredder { background:linear-gradient(125deg,#28346f 0%,#151a3d 100%); }
.article-cover-security { background:linear-gradient(125deg,#1c2551 0%,#344bb2 100%); }
.article-cover-service { background:linear-gradient(125deg,#1f4776 0%,#1c7d9a 100%); }
.article-cover-russia { background:linear-gradient(125deg,#18336f 0%,#1769dc 100%); }
.article-cover-laminator { background:linear-gradient(125deg,#4b419c 0%,#7760c7 100%); }
.article-cover-binder { background:linear-gradient(125deg,#24456f 0%,#607da4 100%); }
.article-cover-cutter { background:linear-gradient(125deg,#273f7d 0%,#1d75bb 100%); }
.article-cover-film { background:linear-gradient(125deg,#6551ab 0%,#4979c2 100%); }
.article-cover > span { z-index:2; }
.article-body section:first-child h2 { margin-top:8px; }
.article-product-media {
  position: relative;
  overflow: hidden;
  background:linear-gradient(135deg,#eef1f8,#fff);
}
.article-product-media::after {
  content:"";
  position:absolute;
  inset:14px;
  border:2px solid #cdd4e5;
  border-radius:8px;
  opacity:.75;
}
.article-product-shredders .article-product-media::after { border-radius:7px 7px 18px 18px; }
.article-product-laminators .article-product-media::after { inset:27px 10px; border-radius:999px; }
.article-product-binders .article-product-media::after { inset:14px 18px; border-top-width:8px; }
.article-product-cutters .article-product-media::after { transform:skew(-12deg); }
.article-product-consumables .article-product-media::after { inset:12px 24px; border-radius:4px; }

@media (max-width:800px) {
  .article-cover { padding:28px; }
  .article-cover-copy strong { font-size:34px; }
  .article-feature-media b { font-size:22px; }
}