@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg1:#eef5ff;
  --bg2:#f8fbff;
  --surface:rgba(255,255,255,0.88);
  --surface-solid:#ffffff;
  --text:#12203a;
  --muted:#60708f;
  --border:rgba(37,99,235,0.14);
  --primary:#3563ff;
  --primary-dark:#244ae0;
  --shadow:0 14px 40px rgba(37,99,235,0.08);
  --shadow-hover:0 18px 46px rgba(37,99,235,0.12);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.65;
  letter-spacing:-0.01em;
  min-height:100vh;
  padding:24px 16px 80px;
  background:
    radial-gradient(circle at 15% 15%, rgba(96,165,250,0.22), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(125,211,252,0.18), transparent 28%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
}

.container{
  position:relative;
  z-index:1;
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding:0;
}

#lang-switcher{
  position:relative;
  z-index:1000;
  display:flex;
  justify-content:flex-end;
  margin-bottom:18px;
  font-size:14px;
  font-weight:700;
  color:var(--muted);
}

#lang-switcher span{
  cursor:pointer;
  transition:opacity .2s ease,color .2s ease;
}

#lang-switcher span:hover{
  opacity:.75;
  color:var(--primary);
}

.back-link{
  display:inline-block;
  margin-bottom:12px;
  color:var(--muted);
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
}

.back-link:hover{
  color:var(--primary);
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-bottom:16px;
  font-size:.92rem;
  color:var(--muted);
}

.breadcrumbs a{
  color:inherit;
  text-decoration:none;
}

.breadcrumbs a:hover{
  color:var(--primary);
}

.breadcrumbs .separator{
  opacity:.55;
}

.breadcrumbs .current{
  color:var(--text);
  font-weight:700;
}

.hero{
  position:relative;
  margin-bottom:28px;
  padding:56px 28px 40px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.72));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  text-align:center;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  top:-90px;
  left:-60px;
  border-radius:50%;
  background:rgba(96,165,250,0.14);
  filter:blur(10px);
}

.hero::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-70px;
  bottom:-90px;
  border-radius:50%;
  background:rgba(125,211,252,0.14);
  filter:blur(10px);
}

.hero-text{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.hero-badge{
  display:none;
}

.title{
  width:100%;
  text-align:center;
  font-size:clamp(2.3rem,5vw,4.6rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.04em;
  margin:0 0 14px;
  color:var(--text);
}

.hero-subtitle{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  color:var(--muted);
  font-size:clamp(1rem,2vw,1.35rem);
  line-height:1.7;
}

.page-subtitle{
  max-width:760px;
  margin:14px auto 0;
  text-align:center;
  color:var(--muted);
  font-size:.98rem;
}

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:26px;
  padding:26px;
  box-shadow:var(--shadow);
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin:28px 0 40px;
}

.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:220px;
  padding:28px 22px;
  text-align:center;
  text-decoration:none;
  color:var(--text);
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.card:hover,
.card:focus{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
 border-color:rgba(37,99,235,0.26);
}

.card-label{
  display:block;
  text-align:center;
  font-size:1.55rem;
  font-weight:800;
  line-height:1.28;
}

.card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
}

.card-icon svg{
  width:34px;
  height:34px;
}

.trust-block{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:0 0 36px;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.trust-item{
  min-height:160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:16px 14px;
  background:rgba(255,255,255,0.66);
  border:1px solid rgba(37,99,235,0.08);
  border-radius:18px;
}

.trust-icon{
  color:#22a55f;
  flex-shrink:0;
}

.trust-icon svg{
  width:24px;
  height:24px;
}

.how-it-works{
  margin-bottom:40px;
  padding:32px 24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:var(--shadow);
}

.section-title{
  width:100%;
  text-align:center;
  font-size:clamp(1.9rem,3vw,3rem);
  font-weight:800;
  line-height:1.15;
  margin:0 0 30px;
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.step-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  text-align:center;
  padding:30px 22px;
  min-height:280px;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.step-number{
  width:58px;
  height:58px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--primary),var(--primary-dark));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  font-weight:800;
  box-shadow:0 12px 28px rgba(37,99,235,0.22);
}

.step-content{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.step-title{
  font-size:1.45rem;
  line-height:1.32;
  font-weight:800;
  color:var(--text);
}

.step-description{
  font-size:1.02rem;
  line-height:1.7;
  color:var(--muted);
}

.maturity-signals{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:28px;
  padding:0;
  background:transparent;
  border:none;
}

.maturity-item{
  padding:22px 18px;
  border-radius:18px;
  background:rgba(255,255,255,0.76);
  border:1px dashed rgba(37,99,235,0.18);
  text-align:center;
  font-size:1.03rem;
  line-height:1.6;
  color:var(--muted);
  font-style:normal;
  font-weight:600;
}

.disclaimer-box{
  max-width:1100px;
  margin:34px auto 0;
  padding:24px 24px 26px;
  text-align:center;
  background:linear-gradient(180deg,#102b6f,#0a1f55);
  border:none;
  border-radius:26px;
  box-shadow:0 20px 44px rgba(16,43,111,0.22);
}

.disclaimer-box p{
  margin:0;
  color:rgba(255,255,255,0.78);
  font-size:.92rem;
  line-height:1.75;
}

.footer-about,
.footer-link{
  margin-top:14px;
}

.footer-about a,
.footer-link{
  display:inline-block;
  color:#ffffff;
  text-decoration:none;
  font-weight:800;
  font-size:1.6rem;
}

.footer-about a:hover,
.footer-link:hover{
  opacity:.85;
}

.procedure-heading{
  font-size:1.14rem;
  font-weight:800;
  color:var(--text);
  margin:0 0 10px;
}

.procedure-text{
  color:var(--muted);
  line-height:1.75;
  margin:0;
}

.procedure-list,
.procedure-steps{
  margin:0;
  padding-left:0;
  list-style:none;
}

.procedure-item,
.procedure-step{
  position:relative;
  padding:8px 0 8px 24px;
  color:var(--muted);
  line-height:1.72;
}

.procedure-item::before{
  content:"•";
  position:absolute;
  left:8px;
  top:8px;
  color:var(--primary);
  font-weight:800;
}

.procedure-step{
  counter-increment:step;
  padding-left:30px;
}

.procedure-steps{
  counter-reset:step;
}

.procedure-step::before{
  content:counter(step) ".";
  position:absolute;
  left:8px;
  top:8px;
  color:var(--primary);
  font-weight:800;
}

.procedure-note-text{
  font-size:.9rem;
  line-height:1.7;
  color:var(--muted);
 }

.related-procedures{
  margin-top:42px;
  padding-top:22px;
  border-top:1px solid rgba(18,32,58,0.08);
}

.related-procedures__header h2{
  margin:0 0 6px;
  font-size:1.2rem;
  font-weight:800;
  color:var(--text);
}

.related-procedures__header p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:.96rem;
}

.related-procedures__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.related-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}

.related-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}

.related-card__title{
  font-size:1rem;
  font-weight:800;
  line-height:1.35;
  margin-bottom:6px;
}

.related-card__hint{
  font-size:.92rem;
  line-height:1.45;
  color:var(--muted);
}

.category-grid,
.procedures-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.category-card,
.procedure-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  color:inherit;
  min-height:160px;
  padding:22px 20px;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}

.category-card:hover,
.procedure-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}

.procedure-card .card-label,
.category-card .card-label{
  font-size:1.08rem;
  font-weight:800;
  line-height:1.35;
  margin-bottom:8px;
}

.procedure-card .procedure-text{
  text-align:center;
  font-size:.95rem;
}

.documents-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:28px;
}

.document-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  background:rgba(255,255,255,0.95);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
}

.document-card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.document-card-title{
  font-size:1.02rem;
  font-weight:800;
  line-height:1.4;
  color:var(--text);
}

.document-status{
  padding:5px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
}

.document-status--to-submit{
  background:rgba(59,130,246,0.12);
  color:#1d4ed8;
}

.document-status--submitted{
  background:rgba(245,158,11,0.14);
  color:#b45309;
}

.document-status--completed{
  background:rgba(34,197,94,0.14);
  color:#15803d;
}

.document-status--overdue{
  background:rgba(239,68,68,0.14);
  color:#b91c1c;
}

.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:9999;
  padding:14px 20px;
  border-radius:14px;
  background:rgba(18,32,58,0.96);
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  box-shadow:0 18px 36px rgba(18,32,58,0.24);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}

@media (max-width:900px){
  .cards-grid,
  .trust-block,
  .steps-grid,
  .maturity-signals,
  .related-procedures__grid,
  .category-grid,
  .procedures-grid{
    grid-template-columns:1fr;
  }

  .card,
  .step-item{
    min-height:auto;
  }

  .hero{
    padding:42px 20px 34px;
  }

  .panel{
    padding:20px;
  }
}

@media (max-width:640px){
  body{
    padding:16px 12px 60px;
  }

  .title{
    font-size:2.4rem;
  }

  .hero-subtitle{
    font-size:1rem;
  }

  .section-title{
    font-size:2rem;
  }

  .card-label{
    font-size:1.3rem;
  }

  .step-title{
    font-size:1.25rem;
  }

  .disclaimer-box{
    padding:20px 16px 22px;
  }

  .footer-about a,
  .footer-link{
    font-size:1.3rem;
  }
}
 /* ===== FINAL UI FIXES ===== */

/* 1) Handbook categories page */
.niezbednik-categories,
.category-grid {
  max-width: 920px;
  margin: 0 auto;
  gap: 18px;
}

.niezbednik-category-card,
.category-card {
  min-height: 92px;
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,247,255,0.96));
  border: 1px solid rgba(53, 99, 255, 0.12);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.niezbednik-category-card:hover,
.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.12);
  border-color: rgba(53, 99, 255, 0.20);
}

.niezbednik-category-title,
.category-card .card-label {
  width: 100%;
  text-align: center;
  font-size: 1.28rem;
  line-height: 1.3;
  font-weight: 800;
  padding: 0 52px;
  margin: 0;
}

.niezbednik-category-icon,
.category-card .card-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.niezbednik-category-icon svg,
.category-card .card-icon svg {
  width: 26px;
  height: 26px;
}

/* 2) Better category page title area */
.title[data-i18n="handbook_title"],
.title[data-i18n="nz_decyzje_title"],
.title[data-i18n="nz_pobyt_title"],
.title[data-i18n="nz_meldunek_title"],
.title[data-i18n="praca_title"],
.title[data-i18n="nz_samochod_title"],
.title[data-i18n="nz_urzedowe_title"] {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.05;
  margin-bottom: 18px;
}

/* 3) Search box on category pages */
.handbook-search-container {
  max-width: 520px;
  margin: 0 auto 26px;
}

.procedure-search {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(53, 99, 255, 0.14);
  background: linear-gradient(180deg, #ffffff, #f6faff);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.06);
  font-size: 1rem;
  color: var(--text);
}

.procedure-search::placeholder {
  color: #7a88a6;
}

.procedure-search:focus {
  border-color: rgba(53, 99, 255, 0.35);
  box-shadow: 0 0 0 4px rgba(53, 99, 255, 0.08), 0 12px 24px rgba(37, 99, 235, 0.08);
}

/* 4) Procedure cards inside categories */
.procedures-root {
  background: linear-gradient(180deg, rgba(245,249,255,0.82), rgba(250,252,255,0.94));
  border: 1px solid rgba(53, 99, 255, 0.08);
  border-radius: 22px;
  padding: 22px;
}

.procedures-grid {
  gap: 16px;
}

.procedure-card {
  min-height: 138px;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(242,248,255,0.98));
  border: 1px solid rgba(53, 99, 255, 0.10);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.05);
  border-radius: 18px;
  padding: 24px 22px;
}

.procedure-card:hover,
.procedure-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.10);
  border-color: rgba(53, 99, 255, 0.18);
}

.procedure-card::before {
  left: 14px;
  width: 4px;
  height: 68%;
  background: linear-gradient(180deg, rgba(53,99,255,0.75), rgba(132,170,255,0.45));
}

.procedure-card .card-label {
  font-size: 1.22rem;
  line-height: 1.3;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  padding-left: 10px;
}

.procedure-card .procedure-text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #64748b;
  text-align: center;
  padding-left: 10px;
}

/* 5) Inner article pages */
.panel {
  border-radius: 24px;
}

.section-card {
  border-radius: 18px !important;
  border: 1px solid rgba(53, 99, 255, 0.08) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.05) !important;
}

.section-card .procedure-heading,
.section-card .section-title {
  text-align: left;
}

.section-card .procedure-text,
.section-card .procedure-list,
.section-card .procedure-steps,
.section-card .procedure-note-text {
  font-size: 0.99rem;
}

/* 6) Related procedures */

related-procedures {
  margin-top: 42px;
}

.related-procedures__header h2 {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.related-procedures__header p {
  font-size: 1rem;
}

.related-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,248,255,0.98));
  border: 1px solid rgba(53, 99, 255, 0.10);
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.05);
}

.related-card__title {
  font-size: 1.04rem;
  font-weight: 800;
}

.related-card__hint {
  color: #6d7b97;
}

/* 7) Footer readability */
.disclaimer-box {
  background: linear-gradient(180deg, #12337f, #0c255f) !important;
}

.disclaimer-box p,
.disclaimer-box [data-i18n="disclaimer_general"] {
  color: rgba(255,255,255,0.80) !important;
}

.footer-about a,
.disclaimer-box a,
a[data-i18n="about_project_link"] {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.footer-about a:hover,
.disclaimer-box a:hover,
a[data-i18n="about_project_link"]:hover {
  opacity: .86;
}

/* 8) Language switcher */
#lang-switcher {
  font-size: 14px;
  font-weight: 700;
}

/* 9) Mobile polish */
@media (max-width: 768px) {
  .niezbednik-category-title,
  .category-card .card-label {
    font-size: 1.08rem;
    padding: 0 42px;
  }

  .niezbednik-category-card,
  .category-card {
    min-height: 78px;
    padding: 18px 18px;
  }

  .procedure-card {
    min-height: auto;
    padding: 20px 18px;
  }

  .procedure-card .card-label {
    font-size: 1.08rem;
  }

  .procedure-card .procedure-text {
    font-size: 0.93rem;
  }

  .handbook-search-container {
    max-width: 100%;
  }
}
 /* ===== SOFT MODERN UI UPGRADE ===== */

/* 1. Categories on handbook page should look like buttons, not purple links */
.niezbednik-category-card,.category-card{
  text-decoration:none !important;
  color:var(--text) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(243,248,255,.98)) !important;
  border:1px solid rgba(53,99,255,.12) !important;
  box-shadow:0 12px 28px rgba(37,99,235,.07) !important;
}
.niezbednik-category-card:hover,.category-card:hover,.niezbednik-category-card:focus,.category-card:focus{
  text-decoration:none !important;
  color:var(--text) !important;
  border-color:rgba(53,99,255,.22) !important;
  box-shadow:0 18px 34px rgba(37,99,235,.11) !important;
}
.niezbednik-category-title,.category-card .card-label,.category-card .card-label a,.niezbednik-category-card a{
  color:var(--text) !important;
  text-decoration:none !important;
  font-weight:800 !important;
}
.niezbednik-category-title:hover,.category-card .card-label:hover,.category-card .card-label a:hover,.niezbednik-category-card a:hover{
  color:var(--text) !important;
  text-decoration:none !important;
}

/* 2. Procedure cards inside category pages */
.procedures-root{
  background:linear-gradient(180deg,rgba(241,247,255,.82),rgba(248,251,255,.96)) !important;
  border:1px solid rgba(53,99,255,.08) !important;
  border-radius:22px !important;
  box-shadow:0 10px 28px rgba(37,99,235,.05) !important;
}
.procedure-card{
  text-decoration:none !important;
  color:var(--text) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,249,255,.98)) !important;
  border:1px solid rgba(53,99,255,.10) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.05) !important;
  border-radius:18px !important;
}
.procedure-card:hover,.procedure-card:focus{
  text-decoration:none !important;
  color:var(--text) !important;
  border-color:rgba(53,99,255,.18) !important;
  box-shadow:0 16px 32px rgba(37,99,235,.10) !important;
}
.procedure-card .card-label,.procedure-card .card-label a{
  color:var(--text) !important;
  text-decoration:none !important;
}
.procedure-card .card-label:hover,.procedure-card .card-label a:hover{
  color:var(--text) !important;
  text-decoration:none !important;
}
.procedure-card .procedure-text{
  color:#6b7893 !important;
}

/* 3. Search field */
.handbook-search-container{
  max-width:560px !important;
  margin:0 auto 26px !important;
}
.procedure-search{
  height:54px !important;
  border-radius:14px !important;
  border:1px solid rgba(53,99,255,.14) !important;
  background:linear-gradient(180deg,#ffffff,#f6faff) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.06) !important;
  font-size:1rem !important;
  padding:0 18px !important;
}
.procedure-search:focus{
  border-color:rgba(53,99,255,.34) !important;
  box-shadow:0 0 0 4px rgba(53,99,255,.08),0 12px 28px rgba(37,99,235,.08) !important;
}

/* 4. Button "Pokaż wszystkie" */
.show-all-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:10px 16px !important;
  border-radius:12px !important;
  border:1px solid rgba(53,99,255,.14) !important;
  background:linear-gradient(180deg,#ffffff,#eef5ff) !important;
  color:var(--text) !important;
  font-weight:700 !important;
  font-size:.94rem !important;
  box-shadow:0 8px 18px rgba(37,99,235,.05) !important;
  text-decoration:none !important;
  transition:all .18s ease !important;
}
.show-all-btn:hover,.show-all-btn:focus{
  background:linear-gradient(180deg,#ffffff,#e8f1ff) !important;
  border-color:rgba(53,99,255,.24) !important;
  color:var(--text) !important;
  text-decoration:none !important;
  transform:translateY(-1px) !important;
}

/* 5. Make white panels slightly less white */
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(247,250,255,.92)) !important;
}
.section-card{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,251,255,.96)) !important;
  border:1px solid rgba(53,99,255,.08) !important;
  box-shadow:0 8px 22px rgba(37,99,235,.05) !important;
  border-radius:18px !important;
}

/* 6. Inner content pages: slightly cleaner */
.section-card .procedure-heading,.section-card .section-title{
  color:var(--text) !important;
}
.section-card .procedure-text,.section-card .procedure-list,.section-card .procedure-steps,.section-card .procedure-note-text{
  color:#5f6d88 !important;
}
.section-card--error{
  background:linear-gradient(180deg,rgba(255,250,250,.96),rgba(255,246,246,.98)) !important;
}
.section-card--steps{
  background:linear-gradient(180deg,rgba(247,250,255,.98),rgba(242,247,255,.98)) !important;
}
.section-card--note{
  background:linear-gradient(180deg,rgba(249,252,255,.98),rgba(244,249,255,.98)) !important;
}

/* 7. Related cards */
.related-card{
  text-decoration:none !important;
  color:var(--text) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,249,255,.98)) !important;
  border:1px solid rgba(53,99,255,.10) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.05) !important;
  border-radius:18px !important;
}
.related-card:hover{
  text-decoration:none !important;
  color:var(--text) !important;
  box-shadow:0 16px 30px rgba(37,99,235,.09) !important;
}
.related-card__title{
  color:var(--text) !important;
}
.related-card__hint{
  color:#71809a !important;
}

/* 8. Footer link visibility */
.footer-about a,.disclaimer-box a,a[data-i18n="about_project_link"]{
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:800 !important;
}
.footer-about a:hover,.disclaimer-box a:hover,a[data-i18n="about_project_link"]:hover{
  color:#ffffff !important;
  text-decoration:none !important;
  opacity:.86;
}

/* 9. Kill purple default link look inside handbook and cards */
.panel a,.procedures-root a,.related-procedures a,.category-grid a,.niezbednik-categories a{
  color:inherit;
}
.panel a:hover,.procedures-root a:hover,.related-procedures a:hover,.category-grid a:hover,.niezbednik-categories a:hover{
  color:inherit;
}

/* 10. Mobile */
@media (max-width:768px){
  .show-all-btn{
    width:100%;
  }
}
niezbednik-category-icon svg{
    width:26px;
    height:26px;
    stroke:#3563ff;
    opacity:0.9;
  }
  
  .niezbednik-category-card:hover svg{
    stroke:#1d3fd8;
  }
  .niezbednik-category-card{
    position:relative;
    overflow:hidden;
  }
  
  .niezbednik-category-title{
    padding:0 56px 0 18px;
  }
  
  .niezbednik-category-icon{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#355fff;
    opacity:1 !important;
    visibility:visible !important;
  }
  
  .niezbednik-category-icon svg{
    width:24px;
    height:24px;
    display:block;
    stroke:currentColor;
    fill:none;
  }
  .niezbednik-category-card:hover .niezbednik-category-icon{
    transform:translateY(-50%) scale(1.08);
    transition:0.2s;
  }
  /* ===== HANDBOOK PREMIUM POLISH ===== */

.niezbednik-categories{
    max-width: 980px;
    margin: 0 auto;
    padding: 26px 22px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(246,250,255,0.92));
    border: 1px solid rgba(53,99,255,0.08);
    border-radius: 28px;
    box-shadow: 0 16px 38px rgba(37,99,235,0.06);
  }
  
  .page-subtitle{
    text-align: center;
    font-size: 1rem;
    color: #6b7a96;
    margin-bottom: 18px;
    font-weight: 500;
  }
  
  .niezbednik-category-card{
    min-height: 96px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.98));
    border: 1px solid rgba(53,99,255,0.10);
    box-shadow: 0 10px 22px rgba(37,99,235,0.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  
  .niezbednik-category-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(37,99,235,0.10);
    border-color: rgba(53,99,255,0.18);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(238,245,255,0.98));
  }
  
  .niezbednik-category-title{
    font-size: 1.15rem;
    font-weight: 800;
    color: #18284a;
    letter-spacing: -0.02em;
  }
  
  .niezbednik-category-icon{
    color: #4b6bff;
  }
  
  .niezbednik-category-card:hover .niezbednik-category-icon{
    color: #244ae0;
  }
  
  .title[data-i18n="handbook_title"]{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
    margin-bottom: 24px;
  }
  
  .back-link{
    font-weight: 700;
    color: #617294;
  }
  
  .disclaimer-box{
    max-width: 980px;
    margin: 28px auto 0;
    padding: 20px 20px 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, #183a8f, #123174);
    box-shadow: 0 16px 34px rgba(18,49,116,0.18);
  }
  
  .disclaimer-box p{
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.84);
  }
  
  .footer-about a,
  a[data-i18n="about_project_link"]{
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }
  
  .footer-about a:hover,
  a[data-i18n="about_project_link"]:hover{
    opacity: .88;
  }
  
  @media (max-width: 768px){
    .niezbednik-categories{
      padding: 20px 14px 14px;
      border-radius: 22px;
    }
  
    .niezbednik-category-card{
      min-height: 82px;
      border-radius: 18px;
    }
  
    .niezbednik-category-title{
      font-size: 1.02rem;
    }
  
    .title[data-i18n="handbook_title"]{
      font-size: 2.6rem;
    }
  }
  /* =========================================================
  PREMIUM ARTICLE PAGES — STRONG VISUAL UPGRADE
  вставить в САМЫЙ КОНЕЦ styles.css
  ========================================================= */

:root {
 --article-bg: rgba(255, 255, 255, 0.72);
 --article-card: rgba(255, 255, 255, 0.86);
 --article-card-strong: rgba(255, 255, 255, 0.94);
 --article-border: rgba(37, 99, 235, 0.10);
 --article-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
 --article-shadow-hover: 0 24px 70px rgba(15, 23, 42, 0.10);
 --article-title: #172554;
 --article-text: #334155;
 --article-text-strong: #0f172a;
 --article-muted: #64748b;
 --article-blue-soft: rgba(59, 130, 246, 0.08);
 --article-blue-mid: rgba(59, 130, 246, 0.16);
 --article-red-soft: rgba(239, 68, 68, 0.06);
 --article-red-mid: rgba(239, 68, 68, 0.22);
 --article-note-soft: rgba(14, 165, 233, 0.05);
 --article-note-mid: rgba(14, 165, 233, 0.18);
}

/* контейнер страницы */
.container {
 max-width: 1120px;
}

/* хлебные крошки */
.breadcrumbs {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 margin: 8px 0 22px;
 font-size: 0.95rem;
 color: var(--article-muted);
}

.breadcrumbs a {
 color: var(--article-muted);
 text-decoration: none;
 transition: color 0.2s ease;
}

.breadcrumbs a:hover {
 color: var(--primary);
}

.breadcrumbs .current {
 color: var(--article-text-strong);
 font-weight: 700;
}

/* основной заголовок статьи */
.title {
 max-width: 980px;
 margin: 0 auto 28px;
 text-align: center;
 color: var(--article-title);
 font-size: clamp(2rem, 3.8vw, 3.4rem);
 line-height: 1.02;
 font-weight: 800;
 letter-spacing: -0.055em;
 text-wrap: balance;
}

.title::after {
 display: none;
}

/* панель-контейнер статьи */
.panel {
 max-width: 1080px;
 margin: 0 auto;
 background: var(--article-bg);
 border: 1px solid rgba(255,255,255,0.55);
 border-radius: 30px;
 padding: 26px;
 box-shadow: 0 24px 70px rgba(15, 23, 42, 0.07);
 backdrop-filter: blur(10px);
}

/* карточки разделов */
.section-card {
 position: relative;
 background: linear-gradient(180deg, var(--article-card-strong), var(--article-card));
 border: 1px solid var(--article-border);
 border-radius: 24px;
 padding: 28px 28px 26px 28px;
 margin-bottom: 18px;
 box-shadow: var(--article-shadow);
 overflow: hidden;
 transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.section-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--article-shadow-hover);
 border-color: rgba(37, 99, 235, 0.16);
}

/* цветная вертикальная линия */
.section-card::before {
 content: "";
 position: absolute;
 left: 0;
 top: 22px;
 bottom: 22px;
 width: 5px;
 border-radius: 0 6px 6px 0;
 background: linear-gradient(180deg, rgba(59,130,246,0.95), rgba(96,165,250,0.55));
}

/* мягкое внутреннее сияние */
.section-card::after {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at top right, rgba(255,255,255,0.50), transparent 42%);
 pointer-events: none;
}

/* разные типы карточек */
.section-card--when {
 background:
   radial-gradient(circle at top right, rgba(59,130,246,0.06), transparent 32%),
   linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,251,255,0.94));
}

.section-card--steps {
 background:
   radial-gradient(circle at top right, rgba(59,130,246,0.10), transparent 34%),
   linear-gradient(180deg, rgba(245,249,255,0.98), rgba(239,246,255,0.94));
}

.section-card--docs {
 background:
   radial-gradient(circle at top right, rgba(14,165,233,0.08), transparent 34%),
   linear-gradient(180deg, rgba(248,252,255,0.98), rgba(241,248,255,0.94));
}

.section-card--error {
 background:
   radial-gradient(circle at top right, rgba(239,68,68,0.08), transparent 34%),
   linear-gradient(180deg, rgba(255,250,250,0.98), rgba(255,245,245,0.94));
}

.section-card--error::before {
 background: linear-gradient(180deg, rgba(239,68,68,0.95), rgba(252,165,165,0.55));
}

.section-card--note {
 background:
   radial-gradient(circle at top right, rgba(99,102,241,0.
 06), transparent 34%),
   linear-gradient(180deg, rgba(250,252,255,0.98), rgba(245,248,255,0.94));
}

/* специальный вид для первого блока */
.section-card:first-of-type {
 padding-top: 34px;
 padding-bottom: 30px;
}

.section-card:first-of-type .section-title,
.section-card:first-of-type .procedure-heading {
 text-align: center;
 font-size: clamp(1.9rem, 3vw, 2.5rem);
 margin-bottom: 16px;
}

/* заголовки блоков */
.section-title,
.procedure-heading {
 position: relative;
 z-index: 1;
 margin: 0 0 16px;
 color: var(--article-text-strong);
 font-size: clamp(1.35rem, 2vw, 1.8rem);
 line-height: 1.15;
 font-weight: 800;
 letter-spacing: -0.03em;
 text-align: left;
}

/* обычный текст */
.procedure-text,
.about-intro-text,
.intro-text,
.procedure-note-text {
 position: relative;
 z-index: 1;
 max-width: none !important;
 color: var(--article-text);
 font-size: 1.1rem;
 line-height: 1.85;
 margin: 0 0 14px;
 text-align: left;
}

/* списки */
.procedure-list,
.procedure-steps {
 position: relative;
 z-index: 1;
 margin: 10px 0 0;
 padding: 0;
}

.procedure-item,
.procedure-step {
 color: var(--article-text);
 font-size: 1.05rem;
 line-height: 1.8;
 padding-top: 8px;
 padding-bottom: 8px;
}

.procedure-item {
 padding-left: 32px;
}

.procedure-item::before {
 left: 10px;
 color: #3b82f6;
 font-size: 1.15rem;
}

.procedure-step {
 padding-left: 42px;
}

.procedure-step::before {
 left: 10px;
 color: #2563eb;
 font-weight: 800;
 font-size: 1rem;
}

/* цифры в ordered list делаем красивее */
.section-card--steps .procedure-step::before {
 width: 22px;
 height: 22px;
 border-radius: 999px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(59, 130, 246, 0.10);
 color: #1d4ed8;
 content: counter(step-counter);
 font-size: 0.8rem;
 top: 11px;
 left: 8px;
}

/* карточка disclaimer */
.section-card--note .procedure-note-text {
 margin: 0;
 font-size: 1rem;
 color: var(--article-muted);
}

/* related matters */
.related-procedures {
 margin-top: 28px;
 padding-top: 28px;
 border-top: 1px solid rgba(37, 99, 235, 0.10);
}

.related-procedures h2 {
 margin: 0 0 8px;
 color: var(--article-text-strong);
 font-size: clamp(1.6rem, 2.2vw, 2rem);
 font-weight: 800;
 letter-spacing: -0.03em;
}

.related-procedures p {
 margin: 0 0 16px;
 color: var(--article-muted);
 font-size: 1rem;
}

.related-procedures__grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px;
}

.related-card {
 position: relative;
 display: block;
 text-decoration: none;
 color: inherit;
 background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
 border: 1px solid rgba(37, 99, 235, 0.10);
 border-radius: 20px;
 padding: 18px 18px 16px 20px;
 box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
 transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
 overflow: hidden;
}

.related-card::before {
 content: "";
 position: absolute;
 left: 0;
 top: 16px;
 bottom: 16px;
 width: 4px;
 border-radius: 0 6px 6px 0;
 background: linear-gradient(180deg, rgba(59,130,246,0.85), rgba(96,165,250,0.45));
}

.related-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
 border-color: rgba(37, 99, 235, 0.18);
}

.related-card__title {
 font-size: 1.08rem;
 font-weight: 800;
 line-height: 1.3;
 color: var(--article-text-strong);
 margin-bottom: 6px;
 padding-left: 6px;
}

.related-card__hint {
 font-size: 0.95rem;
 color: var(--article-muted);
 line-height: 1.45;
 padding-left: 6px;
}

/* footer */
.disclaimer-box {
 max-width: 1080px;
 margin: 26px auto 0;
 background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
 border: none;
 border-radius: 24px;
 padding: 22px 26px;
 box-shadow: 0 18px 50px rgba(37, 99, 235, 0.20);
}

.disclaimer-box p {
 color: rgba(255,255,255,0.96);
 font-size: 0.92rem;
 line-height: 1.7;
}

.disclaimer-box .footer-about a,
.disclaimer-box a {
 color: #ffffff !important;
 font-weight: 800;
 text-decoration: none;
}

.disclaimer-box .footer-about a:hover,
.disclaimer-box a:hover {
 text-decoration: underline;
}

/* back link */
.back-link {
 margin-bottom: 14px;
 color: #475569;
 font-weight: 600;
}

.back-link:hover {
 color: var(--primary);
}

/* адаптив */
@media (max-width: 900px) {
 .panel {
   padding: 18px;
   border-radius: 22px;
 }

 .section-card {
   border-radius: 18px;
   padding: 22px 18px 20px 20px;
 }

 .related-procedures__grid {
   grid-template-columns: 1fr;
 }
}

@media (max-width: 640px) {
 .title {
   font-size: clamp(2.2rem, 12vw, 3.4rem);
   line-height: 0.98;
   letter-spacing: -0.05em;
   margin-bottom: 22px;
 }

 .procedure-text,
 .about-intro-text,
 .intro-text,
 .procedure-note-text,
 .procedure-item,
 .procedure-step {
   font-size: 1rem;
   line-height: 1.72;
 }

 .section-title,
 .procedure-heading {
   font-size: 1.35rem;
 }

 .section-card:first-of-type .section-title,
 .section-card:first-of-type .procedure-heading {
   font-size: 2rem;
 }

 .section-card::before,
 .related-card::before {
   width: 3px;
 }
}
/* FIX: вернуть цифры в нумерованных шагах */
.procedure-steps {
    list-style: none;
    padding-left: 0;
    margin: 10px 0 0;
    counter-reset: step-counter;
  }
  
  .procedure-step {
    position: relative;
    counter-increment: step-counter;
    padding: 10px 0 10px 48px;
    color: var(--article-text, #334155);
    line-height: 1.8;
  }
  
  .procedure-step::before {
    content: counter(step-counter);
    position: absolute;
    left: 8px;
    top: 10px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
  }
   /* =========================================================
   ARTICLE WOW STYLE
   Для страниц статей внутри Niezbędnik
   ========================================================= */

:root {
  --article-max: 980px;
  --article-text: #334155;
  --article-heading: #1e293b;
  --article-soft: #64748b;
  --article-line: rgba(37, 99, 235, 0.14);
  --article-card: rgba(255, 255, 255, 0.92);
  --article-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
  --article-shadow-hover: 0 26px 60px rgba(15, 23, 42, 0.10);
}

/* Общая ширина статьи */
.container.article-page,
.article-page .container,
body.article-page .container {
  max-width: var(--article-max);
}

/* Hero сверху */
.article-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 22px 22px 26px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.24), transparent 42%),
    radial-gradient(circle at right bottom, rgba(125, 211, 252, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(239,246,255,0.94));
  border: 1px solid rgba(59, 130, 246, 0.14);
  box-shadow: 0 20px 55px rgba(37, 99, 235, 0.08);
}

.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  opacity: 0.7;
}

.article-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(37, 99, 235, 0.14);
  font-size: 0.86rem;
  font-weight: 700;
  color: #1d4ed8;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

.article-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  flex-shrink: 0;
}

.article-hero .breadcrumbs {
  margin-bottom: 18px;
  font-size: 0.92rem;
  color: var(--article-soft);
}

.article-hero .breadcrumbs a {
  color: var(--article-soft);
  text-decoration: none;
}

.article-hero .breadcrumbs a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.article-hero .title {
  max-width: 860px;
  margin: 0 auto 12px;
  text-align: center;
  font-size: clamp(2.3rem, 5vw, 4.3rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: #1f2a44;
}

.article-hero .title::after {
  display: none;
}

.article-subtitle {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--article-soft);
}

/* Панель статьи */
.article-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Карточки секций */
.section-card {
  --card-accent: #60a5fa;
  --card-bg: rgba(255,255,255,0.95);
  position: relative;
  margin-bottom: 20px;
  padding: 26px 28px 24px 34px;
  border-radius: 24px;
  background: var(--card-bg);
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: var(--article-shadow);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.section-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--article-shadow-hover);
  border-color: rgba(37, 99, 235, 0.16);
}

.section-card::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--card-accent), rgba(255,255,255,0.25));
}

.section-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.25), transparent 36%);
  opacity: 0.65;
}

/* Цвета карточек */
.section-card--when {
  --card-accent: #60a5fa;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,252,255,0.98));
}

.section-card--steps {
  --card-accent: #2563eb;
  --card-bg: linear-gradient(180deg, rgba(248,251,255,0.98), rgba(239,246,255,0.98));
}

.section-card--docs {
  --card-accent: #4f86f7;
 --card-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,250,255,0.98));
}

.section-card--error {
  --card-accent: #ef4444;
  --card-bg: linear-gradient(180deg, rgba(255,251,251,0.98), rgba(254,242,242,0.98));
}

.section-card--note {
  --card-accent: #94a3b8;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
}

/* Заголовки внутри карточек */
.section-card .section-title,
.section-card .procedure-heading {
  margin: 0 0 14px;
  color: var(--article-heading);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.section-card .section-title {
  font-size: 2rem;
  text-align: center;
}

.section-card .section-title::after {
  display: none;
}

.section-card .procedure-heading {
  font-size: 1.65rem;
}

/* Текст */
.section-card .procedure-text,
.section-card .procedure-note-text {
  color: var(--article-text);
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0 0 12px;
  max-width: none;
  text-align: left;
}

/* Маркированные списки */
.procedure-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.procedure-item {
  position: relative;
  padding: 12px 0 12px 30px;
  color: var(--article-text);
  line-height: 1.8;
  font-size: 1.02rem;
}

.procedure-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 0 5px rgba(59,130,246,0.10);
}

/* Нумерованные шаги */
.procedure-steps {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
  counter-reset: step-counter;
}

.procedure-step {
  position: relative;
  counter-increment: step-counter;
  padding: 12px 0 12px 52px;
  color: #55657f;
  line-height: 1.85;
  font-size: 1.02rem;
}

.procedure-step::before {
  content: counter(step-counter);
  position: absolute;
  left: 6px;
  top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
  font-weight: 800;
  font-size: 0.86rem;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.10);
}

/* Мини-дисклеймер */
.section-card--note .procedure-note-text {
  margin: 0;
  font-size: 0.98rem;
}

/* Related block */
.related-procedures {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.related-procedures h2 {
  margin: 0 0 6px;
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--article-heading);
  letter-spacing: -0.03em;
}

.related-procedures > p {
  margin: 0 0 18px;
  color: var(--article-soft);
  font-size: 1rem;
}

.related-procedures__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.related-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  padding: 18px 18px 16px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.related-card::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #60a5fa, #2563eb);
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.18);
}

.related-card__title {
  margin-left: 10px;
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 800;
  color: #1f2a44;
}

.related-card__hint {
  margin-left: 10px;
  margin-top: 6px;
  color: var(--article-soft);
  font-size: 0.94rem;
}

/* Footer about */
.disclaimer-box .footer-about a,
footer.disclaimer-box a {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
}

.disclaimer-box .footer-about a:hover,
footer.disclaimer-box a:hover {
  text-decoration: underline;
}

/* Мобильная версия */
 @media (max-width: 900px) {
  .article-hero {
    padding: 18px 16px 22px;
    border-radius: 24px;
  }

  .section-card {
    padding: 22px 18px 20px 26px;
    border-radius: 20px;
  }

  .section-card::before {
    left: 10px;
    top: 16px;
    bottom: 16px;
    width: 4px;
  }

  .section-card .section-title {
    font-size: 1.7rem;
  }

  .section-card .procedure-heading {
    font-size: 1.38rem;
  }

  .related-procedures__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .article-hero .title {
    font-size: 2.35rem;
    line-height: 1.02;
  }

  .article-subtitle {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .section-card .procedure-text,
  .procedure-item,
  .procedure-step {
    font-size: 0.98rem;
  }

  .procedure-step {
    padding-left: 44px;
  }

  .procedure-step::before {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .related-procedures h2 {
    font-size: 1.65rem;
  }
}
/* FIX: заголовки в niezbednik по центру */
#procedures-root h2,
#procedures-root .section-title {
  width: 100%;
  text-align: center;
  display: block;
}
/* ===== HERO CARD: cleaner blue match ===== */

.hero-block .section-card,
.hero-block .section-card.section-card--note {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #f7faff 0%,
    #edf4ff 100%
  ) !important;
  border: 1px solid rgba(111, 143, 181, 0.18) !important;
  box-shadow:
    0 18px 40px rgba(76, 126, 217, 0.10),
    0 4px 10px rgba(15, 23, 42, 0.04) !important;
  border-radius: 28px;
}

.hero-block .section-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right,
      rgba(91, 141, 239, 0.18) 0%,
      transparent 34%),
    radial-gradient(circle at bottom left,
      rgba(111, 143, 181, 0.10) 0%,
      transparent 30%);
  pointer-events: none;
}

.hero-block .calc-title,
.hero-block .title {
  color: #24306a;
}

.hero-block .calc-subtitle,
.hero-block .procedure-note-text {
  color: #55627f;
}
.hero-block .procedure-note-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: rgba(49, 94, 251, 0.10) !important;
    color: #315efb !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border: 1px solid rgba(49, 94, 251, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65) !important;
    margin-bottom: 18px !important;
    width: fit-content !important;
  }
  
  .hero-block .procedure-note-text::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #315efb !important;
    box-shadow: 0 0 0 4px rgba(49, 94, 251, 0.10) !important;
    flex: 0 0 auto !important;
  }

  .section-title,
.procedure-heading,
.related-title,
.related-procedures__title {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem) !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.hero-block p {
  color: #55657f !important;
}
.hero-block p,
.hero-block li,
.hero-block span{
  color: #55657f !important;
  line-height: 1.7;
}
/* текст в карточках */
.hero-block > div > div > div {
  color: #55657f;
  font-weight: 400;
}

/* заголовки карточек (первая строка) */
.hero-block > div > div > div:first-child {
  color: #0d1125 !important;
  font-weight: 600;
  margin-bottom: 6px;
}
.procedure-text,
.procedure-item,
.procedure-note-text,
.procedure-list li,
.section-card .procedure-text,
.section-card .procedure-item,
.section-card .procedure-note-text,
.section-card .procedure-list li {
  color: #55657f !important;
}
.section-title,
.procedure-heading,
.section-card .section-title,
.section-card .procedure-heading {
  color: #24306a !important;
}
.kt-title__line {
  color: black !important;
}

.kt-title__sub {
  color: black !important;
}