:root { --article-ink:#17313a; --article-muted:#5d747b; --article-blue:#004a5e; --article-pale:#ebf5f7; --article-accent:#a1d8e5; }
* { box-sizing:border-box; }
body.article-page { margin:0; color:var(--article-ink); background:#f5fafb; font-family:Roboto, Arial, sans-serif; line-height:1.65; }
.article-shell { max-width:1100px; margin:0 auto; padding:24px 20px 64px; }
.article-header { position:sticky; top:0; z-index:20; padding:0; background:transparent; border-bottom:1px solid #d7e8eb; }
.article-header__top { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }
.article-switcher { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; font-size:.8rem; }
.article-switcher a, .article-switcher__current { padding:4px 10px; border:1px solid #b9d9df; border-radius:999px; color:var(--article-blue); text-decoration:none; white-space:nowrap; }
.article-switcher__current { background:var(--article-blue); border-color:var(--article-blue); color:#fff; font-weight:700; }
.article-contacts { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.article-max { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; background:var(--article-blue); color:#fff; font-weight:700; text-decoration:none; white-space:nowrap; }
.article-max img { width:20px; height:20px; border-radius:5px; }
.article-nav { display:flex; justify-content:center; gap:0; background:var(--article-blue); }
.article-nav a { padding:10px 15px; color:#fff; text-decoration:none; font-size:.95rem; }
.article-nav a:hover { background:#00657d; }
.article-menu-button { display:none; border:0; background:transparent; padding:5px; }
.article-menu-button span { display:block; width:25px; height:2px; margin:5px 0; background:var(--article-blue); }
.article-brand { color:var(--article-ink); text-decoration:none; }
.article-brand strong { display:block; font-size:2rem; line-height:1; letter-spacing:.02em; text-transform:uppercase; }
.article-brand span { color:var(--article-muted); font-size:.85rem; }
.article-phone { color:var(--article-blue); font-size:1.3rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.breadcrumbs { margin:26px 0 18px; color:var(--article-muted); font-size:.9rem; }
.breadcrumbs a { color:var(--article-blue); }
.article-hero { padding:34px 38px; border-radius:18px; background:linear-gradient(135deg,var(--article-blue),#147a91); color:#fff; }
.article-hero h1 { max-width:820px; margin:0 0 12px; font-size:clamp(2rem,4vw,3.5rem); line-height:1.1; }
.article-hero p { max-width:760px; margin:0; color:#dff5f8; font-size:1.08rem; }
.article-list { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.article-card { display:flex; flex-direction:column; padding:24px; border:1px solid #d7e8eb; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(0,74,94,.07); }
.article-card h2 { margin:0 0 12px; color:var(--article-blue); font-size:1.35rem; line-height:1.2; }
.article-card p { margin:0 0 20px; color:var(--article-muted); }
.article-card a { margin-top:auto; color:var(--article-blue); font-weight:700; }
.article-content { max-width:none; width:100%; margin:28px 0 0; padding:34px 42px; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(0,74,94,.07); }
.article-content h2 { margin:2em 0 .65em; color:var(--article-blue); font-size:1.55rem; line-height:1.2; }
.article-content h2:first-child { margin-top:0; }
.article-content p { margin:0 0 1em; }
.article-content ul { margin:0 0 1.2em; padding-left:1.4em; }
.article-cta { margin-top:30px; padding:22px 26px; border-radius:12px; background:var(--article-pale); }
.article-cta a { color:var(--article-blue); font-weight:700; }
.article-footer { margin-top:32px; padding-top:20px; border-top:1px solid #d7e8eb; color:var(--article-muted); font-size:.9rem; }
@media (max-width:760px) {
  .article-shell { padding:10px 14px 40px; }
  .article-header__top { align-items:center; flex-wrap:wrap; gap:8px; }
  .article-brand { flex:1 1 100%; }
  .article-switcher { order:2; justify-content:flex-start; overflow:auto; max-width:calc(100% - 42px); }
  .article-contacts { order:3; }
  .article-menu-button { display:block; }
  .article-nav { display:none; flex-direction:column; }
  .article-nav.is-open { display:flex; }
  .article-nav a { padding:9px 14px; }
  .article-phone { font-size:1.05rem; }
  .article-hero { padding:26px 22px; }
  .article-list { grid-template-columns:1fr; }
  .article-content { padding:24px 20px; }
}