/* =========================================================
   Voithos AI Blog — stylesheet
   Fonts: Golos Text (UI/headings), Literata (reading text)
   ========================================================= */
:root{
  /* Brand green */
  --green:#0B9A6D;
  --green-hover:#08805A;
  --green-on-dark:#4ED8A4;
  --green-tint:#E6F4EE;
  --green-ink:#0A3F2E;
  --green-ink-soft:#2F5648;
  --green-ink-soft-62: rgba(10,63,46,.62);

  /* Backgrounds / surfaces */
  --bg-page:#F8F5EF;
  --bg-white:#FFFFFF;
  --bg-neutral-tile:#F1ECE2;
  --bg-cover:#EFEAE1;
  --bg-footer:#2D3336;
  --bg-dark-card:#14181B;

  /* Text */
  --ink:#2D3336;           /* unified per handoff note (was #2C3236 for article body) */
  --nav-text:#3E464D;
  --lead:#4A5157;
  --secondary:#5A6169;
  --card-desc:#6B7278;

  /* Meta text on light (rgba over ink) */
  --meta-45: rgba(20,24,27,.45);
  --meta-42: rgba(20,24,27,.42);
  --meta-40: rgba(20,24,27,.40);
  --meta-35: rgba(20,24,27,.35);
  --meta-32: rgba(20,24,27,.32);
  --meta-26: rgba(20,24,27,.26);
  --meta-25: rgba(20,24,27,.25);
  --meta-20: rgba(20,24,27,.20);
  --meta-16: rgba(20,24,27,.16);
  --meta-14: rgba(20,24,27,.14);
  --meta-10: rgba(20,24,27,.10);
  --meta-08: rgba(20,24,27,.08);

  /* Accents */
  --blue-tint:#E8EFF7;
  --blue-wave:#7FA8D6;
  --blue-icon:#3F6DA3;
  --blue-icon-text:#22405F;
  --orange-tint:#FBEBDA;
  --orange-marker:#F3A65A;
  --orange-text:#C2762A;

  /* Text on dark */
  --white:#FFFFFF;
  --white-62: rgba(255,255,255,.62);
  --white-50: rgba(255,255,255,.50);
  --white-38: rgba(255,255,255,.38);
  --white-16: rgba(255,255,255,.16);
  --white-10: rgba(255,255,255,.10);

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(20,24,27,.05);
  --shadow-panel: 0 1px 2px rgba(20,24,27,.05), 0 18px 40px rgba(20,24,27,.06);
  --shadow-up-btn: 0 0 0 4px var(--bg-page), 0 8px 22px rgba(11,154,109,.34), 0 1px 2px rgba(20,24,27,.12);

  /* Type */
  --font-ui: 'Golos Text', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: var(--font-ui);
  --font-mono: ui-monospace, Menlo, monospace;
  --font-inter: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --donor-green:#00986c;
  --donor-green-hover:#007a56;
  --donor-green-tint:#E6F5F0;
  --donor-text:#2d3336;
  --donor-border:#e5e7eb;

  /* Layout */
  --container: 1290px;
  --pad: clamp(20px, 5vw, 56px);
  /* Gutter used on full-bleed sections (bg spans the whole viewport) so their
     CONTENT is capped/centered at --container width, same as .container. */
  --gutter: max(var(--pad), calc((100% - var(--container)) / 2));
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 14px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 88px; } /* відступ під sticky-хедер (64px) для якорів змісту */
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main{ flex: 1 0 auto; }
img{ max-width: 100%; display: block; }
ul{ list-style: none; margin: 0; padding: 0; }
a{ color: var(--green); text-decoration: none; }
a:hover{ color: var(--green-hover); }
button{ font: inherit; }
h1,h2,h3,p{ margin: 0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons (donor style) ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 12px;
  padding: 0 16px;
  min-height: 36px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:not(.btn--sm){ min-height: 44px; padding: 0 24px; }
.btn--primary{ background: var(--donor-green); color: #fff; }
.btn--primary:hover{ background: var(--donor-green-hover); color: #fff; }
.btn--outline{ background: #fff; border-color: var(--donor-green); color: var(--donor-green); }
.btn--outline:hover{ background: var(--donor-green-tint); color: var(--donor-green); }
.btn--ghost{ background: transparent; border-color: var(--meta-16); color: var(--ink); }
.btn--ghost:hover{ border-color: var(--meta-35); background: var(--bg-white); }
.btn--on-dark{ background: var(--green-on-dark); color: var(--ink); }
.btn--on-dark:hover{ filter: brightness(1.05); }
.btn--sm{ min-height: 36px; padding: 0 16px; }

/* ---------- Site header (donor style) ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: 64px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  background: var(--bg-white);
  border-bottom: 1px solid var(--donor-border);
  font-family: var(--font-inter);
}
.brand{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--donor-text);
  flex: none;
}
.brand:hover{ color: var(--donor-text); }
.brand__avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--bg-neutral-tile);
}
.brand__name{ font: 600 16px/1.2 var(--font-inter); }

.main-nav{
  display: flex;
  gap: 36px;
  font: 600 16px/1.2 var(--font-inter);
  color: var(--donor-text);
}
.main-nav a{
  color: var(--donor-text);
  padding: 8px 0;
  text-underline-offset: 4px;
  transition: color .15s ease;
}
.main-nav a:hover{ color: var(--donor-green); text-decoration: underline; }
.main-nav a[aria-current="page"]{ color: var(--donor-green); font-weight: 600; }

.header-spacer{ flex: 1; }

.lang-switch{
  display: flex;
  align-items: center;
  gap: 16px;
  font: 500 14px/1 var(--font-ui);
  color: var(--secondary);
}
.lang-switch button{
  background: none;
  border: none;
  padding: 0 0 2px;
  color: inherit;
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
}
.lang-switch a{ color: var(--secondary); text-decoration: none; }
.lang-switch a:hover{ color: var(--ink); }
.lang-switch button[aria-pressed="true"]{
  color: var(--green);
  border-bottom-color: var(--green);
}

.header-actions{ display: flex; align-items: center; gap: 8px; }

.nav-toggle{
  display: none;
  flex: none;
  width: 24px; height: 24px;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--donor-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg{ display: block; }

/* ---------- Mobile nav drawer ---------- */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
  font-family: var(--font-inter);
  transition: visibility 0s linear .25s;
}
.mobile-nav[data-open="true"]{
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.mobile-nav__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .25s ease;
}
.mobile-nav[data-open="true"] .mobile-nav__backdrop{ opacity: 1; }
.mobile-nav__panel{
  position: absolute;
  top: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  width: 81%;
  max-width: 320px;
  background: var(--bg-white);
  transform: translateX(-100%);
  transition: transform .25s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
}
.mobile-nav[data-open="true"] .mobile-nav__panel{ transform: translateX(0); }
.mobile-nav__head{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-height: 73px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--donor-border);
}
.mobile-nav__close{
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--donor-text);
  cursor: pointer;
}
.mobile-nav__body{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}
.mobile-nav__links{
  display: flex;
  flex-direction: column;
  font: 600 16px/24px var(--font-inter);
  color: var(--donor-text);
}
.mobile-nav__links a{
  display: flex;
  align-items: center;
  min-height: 51px;
  color: inherit;
  text-underline-offset: 4px;
  transition: color .15s ease;
}
.mobile-nav__links a:hover{ color: var(--donor-green); text-decoration: underline; }
.mobile-nav__links a[aria-current="page"]{ color: var(--donor-green); }
.mobile-nav__lang{
  display: flex;
  gap: 20px;
  font: 500 16px/1 var(--font-ui);
  color: var(--secondary);
  margin-bottom: 8px;
}
.mobile-nav__lang a{ color: var(--secondary); }
.mobile-nav__lang a:hover{ color: var(--ink); }
.mobile-nav__lang .is-current a{ color: var(--green); font-weight: 600; border-bottom: 1.5px solid var(--green); padding-bottom: 2px; }
.mobile-nav__actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  padding: 16px 16px 24px;
}
.mobile-nav__actions .btn{ width: 100%; min-height: 36px; padding: 0 16px; }
body[data-nav-open="true"]{ overflow: hidden; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 10px;
  padding-top: 28px;
  padding-bottom: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  font: 500 13px/1.4 var(--font-ui);
  color: var(--meta-45);
}
.breadcrumbs a{ color: inherit; }
.breadcrumbs a:hover{ color: var(--ink); }
.breadcrumbs [aria-current="page"]{ color: var(--ink); }

/* ---------- Badges / eyebrows ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  background: var(--green-tint);
  border-radius: 999px;
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-hover);
}
.eyebrow__dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }

.tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-hover);
  background: var(--green-tint);
  padding: 7px 13px;
  border-radius: 999px;
}
.tag--update{ color: var(--orange-text); }

/* ---------- Hero (home) ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding-top: clamp(10px, 7vw, 10px);
  padding-bottom: 4px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}


.hero__rings{
  /* full-width strip placed right after .hero__inner in the markup, so it
     sits immediately under the heading/subheading instead of beside them */
  position: relative;
  width: 100%;
  aspect-ratio: 1180 / 25; /* half of divider1.svg's native 1180/50 ratio; scales
                              proportionally at any zoom/viewport width
                              instead of stretching */
  margin-top: 14px;
  pointer-events: none;
  z-index: 0;
}
.hero__rings:after{
content: '';
	background-image: url('../assets/divider1.svg');
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

.hero__inner{
  position: relative;
  z-index: 1;
  max-width: 660px;
}
.hero h1{
 margin-top: 20px;
    font: 700 clamp(25.33px, 3.47vw, 41.33px) / 1.05 var(--font-ui);
    letter-spacing: -.03em;
    color: var(--ink);
}
.hero p{
  margin-top: 22px;
  max-width: 560px;
  font: 400 19px/1.6 var(--font-read);
  color: var(--lead);
  text-wrap: pretty;
}

/* ---------- Category / article hero ---------- */
.page-hero{
  padding-top: 28px;
  padding-bottom: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.page-hero__text{ max-width: 640px; }
.page-hero h1{
  margin-top: 18px;
    font: 700 clamp(25.33px, 3.47vw, 41.33px) / 1.05 var(--font-ui);
    letter-spacing: -.03em;
    color: var(--ink);
}
.page-hero p{
  margin-top: 16px;
  font: 400 18px/1.6 var(--font-read);
  color: var(--lead);
  text-wrap: pretty;
}
.page-hero__count{
  font: 500 14px/1 var(--font-ui);
  color: var(--meta-45);
  padding-bottom: 8px;
}

/* ---------- Section divider ---------- */
.section-title-row{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: var(--pad);
  padding-bottom: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-bottom: 4px;
}
.section-title-row h2{
  font: 700 clamp(22px, 3vw, 28px)/1.2 var(--font-ui);
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
.section-title-row .rule{ flex: 1; height: 1px; background: var(--meta-10); }

/* ---------- Filters row ---------- */
.filters{
  padding-top: 40px;
  padding-bottom: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hero + .filters{ padding-top: 20px; }
.chip-group{ display: flex; gap: 8px; flex-wrap: wrap; }
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 var(--font-ui);
  color: var(--nav-text);
  background: var(--bg-white);
  border: 1px solid var(--meta-10);
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
a.chip:hover{ border-color: var(--green); }
a.chip:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.chip__dot{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip[aria-pressed="true"],
.chip[aria-current="page"],
a.chip.is-active{
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.chip[aria-pressed="true"] .chip__dot,
.chip[aria-current="page"] .chip__dot,
.chip.is-active .chip__dot{ background: var(--green-on-dark) !important; }
.chip--new{
  color: var(--meta-35);
  background: transparent;
  border-style: dashed;
  border-color: var(--meta-16);
  cursor: default;
}
.filters__spacer{ flex: 1; }
.sort{
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 14px/1 var(--font-ui);
  color: var(--meta-45);
}
.sort button{
  background: none; border: none; padding: 0; cursor: pointer; color: inherit; font: inherit;
}
.sort button[aria-pressed="true"]{ color: var(--ink); font-weight: 600; }
.sort__sep{ color: var(--meta-25); }

/* ---------- Article grid & cards ---------- */
.empty-state{
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  background: var(--bg-white);
  border: 1px dashed var(--meta-16);
  border-radius: 16px;
  color: var(--meta-45);
  font: 500 16px/1.5 var(--font-ui);
}
.empty-state p{ margin: 0; }
.article-grid{
  padding-top: 28px;
  padding-bottom: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card{
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 12px 12px 24px;
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(20,24,27,.06), 0 20px 36px rgba(20,24,27,.08);
}
.card__cover{
  aspect-ratio: 16 / 10;
  height: auto;
  border-radius: 16px;
  border: 1px dashed var(--meta-16);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-cover);
  overflow: hidden;
}
.card__cover img{
  width: 100%;
  height: 100%;
  /* Keep the original proportions while filling the same-size card frame. */
  object-fit: cover;
  display: block;
}
.card__cover:not(:has(img)){ min-height: 220px; }
.card__cover--blue{ background: var(--blue-tint); border-color: var(--meta-14); }
.card__cover--orange{ background: var(--orange-tint); border-color: var(--meta-14); }
.card__cover-label{
  font: 600 10px/1 var(--font-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--meta-32);
}
.card__body{
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.card__meta-cat{ color: var(--green-hover); }
.card__meta-cat--update{ color: var(--orange-text); }
.card__meta-dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--meta-20); flex: none; }
.card__meta-date{
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
  color: var(--meta-45);
}
.card h3{
  font: 600 20px/1.28 var(--font-ui);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.card p{
  font: 400 14px/1.6 var(--font-read);
  color: var(--card-desc);
  text-wrap: pretty;
}

/* Featured (highlighted) card variant, used standalone on homepage */
.featured{
  margin-top: 18px;
  margin-bottom: 0;
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 0;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}
.featured__cover{ padding: 14px; }
.featured__cover-inner{
  height: 100%;
  aspect-ratio: 16/10;
  border-radius: 20px;
  background: var(--bg-cover);
  border: 1px dashed var(--meta-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.featured__cover-inner span{ font: 600 11px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--meta-34, rgba(20,24,27,.34)); }
.featured__cover-inner .dims{ font: 400 11px/1 var(--font-mono); color: var(--meta-26); text-transform: none; letter-spacing: 0; }
.featured__body{
  padding: 40px 44px 36px 32px;
  display: flex;
  flex-direction: column;
}
.featured__top{ display: flex; align-items: center; gap: 10px; }
.featured__date{ font: 500 13px/1 var(--font-ui); color: var(--meta-45); }
.featured h2{
  margin-top: 20px;
  font: 700 clamp(24px, 3vw, 34px)/1.16 var(--font-ui);
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.featured p{
  margin-top: 16px;
  font: 400 16px/1.65 var(--font-read);
  color: var(--secondary);
  text-wrap: pretty;
}
.featured__bottom{
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--meta-08);
  display: flex;
  align-items: center;
  gap: 18px;
}
.featured__read{ font: 600 15px/1 var(--font-ui); color: var(--green); }
.featured__time{ font: 500 13px/1 var(--font-ui); color: var(--meta-42); }

/* Dark "update" card */
.card--dark{
  justify-content: space-between;
  color: #fff;
  background:#0b9a6d;
}
.card--dark .card__meta-cat{ color: var(--orange-marker); }
.card--dark h3{ color: #fff; font-weight: 600; font-size: 21px; line-height: 1.25; }
.card--dark p{ color: var(--white-62); }
.card--dark .card__meta-date{ color: var(--white-50); }
.card--dark .card__top{ display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 0; }
.card--dark .card__stack{ padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Load more ---------- */
.load-more{ padding-top: 36px; padding-bottom: 0; padding-left: var(--gutter); padding-right: var(--gutter); display: flex; justify-content: center; }

/* ---------- CTA banner (home) ---------- */
.cta-banner{ padding-top: clamp(40px, 8vw, 72px); padding-bottom: clamp(40px, 8vw, 72px); padding-left: var(--gutter); padding-right: var(--gutter); }
.cta-banner__inner{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 52px) clamp(28px, 5vw, 52px) clamp(32px, 5vw, 52px) clamp(28px, 5vw, 56px);
  background: var(--green-tint);
}
.cta-banner__ring{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-banner__text{ position: relative; max-width: 600px; }
.cta-banner h2{
  font: 700 clamp(26px, 3.4vw, 36px)/1.14 var(--font-ui);
  letter-spacing: -.02em;
  color: var(--green-ink);
  text-wrap: balance;
}
.cta-banner p{
  margin-top: 16px;
  font: 400 17px/1.6 var(--font-read);
  color: var(--green-ink-soft);
  text-wrap: pretty;
}
.cta-banner__actions{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.cta-banner__note{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  font: 500 14px/1 var(--font-ui);
  color: var(--green-ink-soft);
}
.platform{ display: inline-flex; align-items: center; gap: 8px; }
.platform__icon{ flex: none; display: block; }
.cta-banner img{ position: relative; width: 341px; height: auto; border-radius: 50%; overflow: hidden;}

/* Compact CTA (category page) */
.cta-compact{ padding-top: clamp(40px,7vw,56px); padding-bottom: clamp(40px,8vw,64px); padding-left: var(--gutter); padding-right: var(--gutter); }
.cta-compact__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--bg-white);
  border: 1px solid var(--meta-08);
  border-radius: 24px;
  padding: 32px 36px;
}
.cta-compact h3{ font: 600 22px/1.2 var(--font-ui); letter-spacing: -.01em; color: var(--ink); }
.cta-compact p{ margin-top: 8px; font: 400 15px/1.6 var(--font-read); color: var(--card-desc); }
.cta-compact .btn{ flex: none; }

/* ---------- Footer ---------- */
.site-footer{
  padding-top: clamp(32px,6vw,56px);
  padding-bottom: 32px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  color: #fff;
  background: var(--bg-footer);
}
.site-footer--compact .footer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer--compact .footer-links{
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font: 500 14px/1 var(--font-ui);
  color: var(--white-62);
}
.site-footer--compact .footer-links a{ color: inherit; }
.site-footer--compact .footer-links a[aria-current="page"]{ color: #fff; }

.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand{ display: flex; align-items: center; gap: 10px; }
.footer-brand img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center; background: var(--white-16); }
.footer-brand span{ font: 600 17px/1 var(--font-ui); color: #fff; }
/* Центр рядка з логотипом (32px) на рівні першого посилання в колонках (14px) */
@media (min-width: 981px){ .footer-brand{ margin-top: -9px; } }
.footer-lede{ margin-top: 16px; max-width: 260px; font: 400 14px/1.6 var(--font-read); color: var(--white-50); }
.footer-col{ display: flex; flex-direction: column; gap: 12px; font: 500 14px/1 var(--font-ui); color: var(--white-62); }
.footer-col a{ color: inherit; }
.footer-col a:hover{ color: #fff; }
.footer-col__title{ font-weight: 600; color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

.footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--white-10);
  font: 400 13px/1 var(--font-ui);
  color: var(--white-38);
}

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--shadow-up-btn);
  color: #fff;
  font: 500 22px/1 var(--font-ui);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}
.back-to-top[data-visible="true"]{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover{ background: var(--green-hover); }

/* =========================================================
   Article page
   ========================================================= */
.article-header{ padding-top: 26px; padding-bottom: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
.article-header__inner{ 
  /*max-width: 900px;*/

   }
.article-header h1{
  margin-top: 20px;
  font: 700 clamp(30px, 2.6vw, 36px) / 1.2 var(--font-ui);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.article-header p{
  margin-top: 20px;
  font: 400 clamp(17px, 2vw, 20px)/1.6 var(--font-read);
  color: var(--lead);
  text-wrap: pretty;
}
.article-meta{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--meta-10);
}
.article-meta__avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 14px/1 var(--font-ui);
  color: var(--green-hover);
  flex: none;
}
.article-meta__author{ display: flex; flex-direction: column; gap: 4px; }
.article-meta__name{ font: 600 14px/1 var(--font-ui); color: var(--ink); }
.article-meta__role{ font: 500 13px/1 var(--font-ui); color: var(--meta-45); }
.article-meta__sep{ width: 1px; height: 32px; background: var(--meta-10); }
.article-meta__item{ font: 500 13px/1 var(--font-ui); color: var(--meta-45); }
.article-meta__dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--meta-20); }

.article-cover{
  /* Use the exact same columns as .article-layout so the cover aligns with
     the article text, rather than with the full page container. */
  margin-top: 34px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: grid;
  /*grid-template-columns: 240px minmax(0,720px) 1fr;*/
  gap: 56px;
}
.article-cover img{
  /* The cover spans the share/TOC column, gap and text column. Its right edge
     stays aligned with the article body while its left edge aligns with the
     article layout gutter. */
  grid-column: 1 / 3;
  width: 100%;
  height: 520px;
  border-radius: 24px;
  background: var(--bg-cover);
  border: 1px dashed var(--meta-16);
  /* Keep the original proportions and remove distortion inside the fixed box. */
  object-fit: cover;
}
.article-cover__inner{
  grid-column: 1 / 3;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: var(--bg-cover);
  border: 1px dashed var(--meta-16);
}
.article-cover__inner span{ font: 600 11px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(20,24,27,.34); }
.article-cover__inner .dims{ font: 400 11px/1 var(--font-mono); color: var(--meta-26); text-transform: none; letter-spacing: 0; }

.article-layout{
  padding-top: 40px;
  padding-bottom: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap: 56px;
  align-items: start;
}

.toc{
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.toc__label{ font: 600 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--meta-40); }
.toc__list{ display: flex; flex-direction: column; gap: 2px; font: 500 14px/1.45 var(--font-ui); }
.toc__list a{
  display: block;
  padding: 8px 12px;
  border-left: 2px solid var(--meta-10);
  color: var(--secondary);
  border-radius: 0 8px 8px 0;
}
.toc__list a:hover{ color: var(--ink); background: rgba(255,255,255,.5); }
.toc__list a[aria-current="true"]{
  border-left-color: var(--green);
  color: var(--ink);
  background: var(--bg-white);
  font-weight: 600;
}
.article-share{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.article-share__label{ font: 600 14px/1 var(--font-ui); color: var(--ink); }
.article-share__links{ display: flex; align-items: center; gap: 10px; }
.share-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--meta-16);
  background: var(--bg-white);
  color: var(--secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.share-btn:hover, .share-btn:focus-visible{ color: var(--green); border-color: var(--green); background: var(--green-tint); }
.share-btn:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.share-btn::after{
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font: 500 12px/1 var(--font-ui);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 5;
}
.share-btn:hover::after, .share-btn:focus-visible::after, .share-btn.is-copied::after{ opacity: 1; visibility: visible; }
.share-btn .icon-check{ display: none; }
.share-btn.is-copied{ color: var(--green); border-color: var(--green); background: var(--green-tint); }
.share-btn.is-copied .icon-link{ display: none; }
.share-btn.is-copied .icon-check{ display: block; }

.article-body{ display: flex; flex-direction: column; gap: 22px; }
.article-body > p{ font: 400 18px/1.75 var(--font-read); color: var(--ink); text-wrap: pretty; }
.article-body h2{
  margin-top: 18px;
  font: 700 30px/1.2 var(--font-ui);
  letter-spacing: -.02em;
  color: var(--ink);
}
.article-body h3{ margin-top: 10px; font: 600 22px/1.3 var(--font-ui); color: var(--ink); }
.article-body a{ color: var(--green); border-bottom: 1px solid rgba(11,154,109,.35); }
.article-body a:hover{ color: var(--green-hover); }
.article-body ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 24px;
  list-style: disc;
  font: 400 18px/1.7 var(--font-read);
  color: var(--ink);
}

.callout{
  display: flex;
  gap: 16px;
  padding: 24px 26px;
  background: var(--blue-tint);
  border-radius: 18px;
}
.callout__icon{
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--font-ui);
  color: var(--blue-icon);
}
.callout p{ margin: 0; font: 400 16px/1.65 var(--font-read); color: var(--blue-icon-text); }

.article-figure{ margin: 0; display: flex; flex-direction: column; gap: 10px; }
.article-figure__frame{
  aspect-ratio: 16/9;
  border-radius: 18px;
  background: var(--bg-cover);
  border: 1px dashed var(--meta-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.article-figure__frame span{ font: 600 11px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(20,24,27,.34); }
.article-figure__frame .dims{ font: 400 11px/1 var(--font-mono); color: var(--meta-26); text-transform: none; letter-spacing: 0; }
.article-figure figcaption{ font: 400 13px/1.5 var(--font-ui); color: var(--meta-45); }

blockquote.pull-quote{
  margin: 0;
  padding: 28px 30px;
  background: var(--bg-white);
  border-radius: 20px;
  border-left: 3px solid var(--green);
}
blockquote.pull-quote p{
  margin: 0;
  font: 400 21px/1.55 var(--font-read);
  font-style: italic;
  color: var(--bg-dark-card);
}

.inline-cta{
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 30px 32px;
  border-radius: 22px;
  background: var(--green-tint);
  flex-wrap: wrap;
}
.inline-cta img{ flex: none; width: 110px; height: auto;border-radius: 50%; overflow: hidden; }
.inline-cta__text{ flex: 1; min-width: 220px; }
.inline-cta h3{ font: 600 22px/1.25 var(--font-ui); color: var(--green-ink); }
.inline-cta p{ margin-top: 8px; font: 400 15px/1.6 var(--font-read); color: var(--green-ink-soft-62); }
.inline-cta .btn{ flex: none; }

/* FAQ accordion */
.faq{ display: flex; flex-direction: column; gap: 10px; }
.faq-item{
  background: var(--bg-white);
  border-radius: 16px;
  border: 1px solid var(--meta-08);
  overflow: hidden;
}
.faq-item__q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: 600 17px/1.35 var(--font-ui);
  color: var(--ink);
}
.faq-item__icon{
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-neutral-tile);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 16px/1 var(--font-ui);
  transition: background-color .15s ease, color .15s ease;
}
.faq-item[data-open="true"] .faq-item__icon{ background: var(--green-tint); color: var(--green-hover); }
.faq-item__icon .icon-minus{ display: none; }
.faq-item__icon .icon-plus{ display: block; }
.faq-item[data-open="true"] .icon-minus{ display: block; }
.faq-item[data-open="true"] .icon-plus{ display: none; }
.faq-item__a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-item__a-inner{ padding: 0 24px 22px; font: 400 16px/1.7 var(--font-read); color: var(--secondary); }
.faq-item[data-open="true"] .faq-item__a{ max-height: 240px; }

/* Related grid uses a slightly smaller card padding variant */
.related{ padding-top: 64px; padding-bottom: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
.related-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.related-grid .card{ padding-bottom: 22px; }

.article-footer-spacer{ height: 64px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px){
  .article-layout{ grid-template-columns: 210px minmax(0,1fr); }
  .article-cover{ grid-template-columns: 210px minmax(0,1fr); }
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (max-width: 980px){
  .main-nav, .lang-switch{ display: none; }
  .header-actions .btn--outline{ display: none; }
  .nav-toggle{ display: flex; }
  html{ scroll-padding-top: 97px; } /* хедер 73px */
  .site-header{ gap: 12px; min-height: 73px; padding-top: 18px; padding-bottom: 18px; padding-left: 16px; padding-right: 16px; }
  .site-header .brand{ gap: 12px; }
  .site-header .brand__avatar{ width: 36px; height: 36px; }

  .article-layout{ grid-template-columns: 1fr; gap: 32px; }
  .article-cover{ grid-template-columns: 1fr; gap: 0; }
  .article-cover img, .article-cover__inner{ grid-column: 1; }
  .article-cover img, .article-cover__inner{ height: min(286px, 55vw); }
  .toc--empty{ display: none; }
  .toc{ position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
  .toc__label{ width: 100%; }
  .toc__list{ flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 6px; font-size: 16px; line-height: 1.45; }
  .toc__list a{
    border-left: none;
    border-bottom: 2px solid var(--meta-10);
    border-radius: 0;
    padding: 14px 4px;
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .toc__list a[aria-current="true"]{ border-bottom-color: var(--green); background: none; }

  .featured{ grid-template-columns: 1fr; }
  .featured__body{ padding: 28px 28px 32px; }

  .article-grid, .related-grid{ grid-template-columns: repeat(2, 1fr); }

  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-grid > :first-child{ grid-column: 1 / -1; }

  .hero__rings{ display: none; }
}

@media (max-width: 680px){

  .hero{ padding-top: 32px; }
  .hero__inner{ max-width: 100%; }
  .hero__ring--1{ width: 260px; height: 260px; right: -100px; top: -60px; }
  .hero__ring--2{ display: none; }
  .hero__ring--3{ width: 120px; height: 120px; right: 10px; top: 20px; }

  .page-hero{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-hero__count{ padding-bottom: 0; }

  .filters{ align-items: flex-start; flex-direction: column; gap: 16px; }
  .filters__spacer{ display: none; }

  .article-grid, .related-grid{ grid-template-columns: 1fr; }
  .featured__cover{ padding: 10px; }

  .cta-banner__inner{ grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 32px 24px; }
  .cta-banner__text{ max-width: 100%; }
  .cta-banner img{ order: -1; width: 140px; margin: 0 auto 8px; }
  .cta-banner__actions{ flex-direction: column; align-items: center; gap: 14px; width: 100%; }
  .cta-banner__actions .btn{ width: 100%; }

  .cta-compact__inner{ flex-direction: column; align-items: flex-start; }
  .cta-compact .btn{ width: 100%; }

  .inline-cta{ flex-direction: column; align-items: flex-start; }
  .inline-cta .btn{ width: 100%; }
  .inline-cta img{ width: 80px; }

  .article-meta{ gap: 10px 14px; }
  .article-meta__sep{ display: none; }

  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer--compact .footer-top{ flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 420px){
  blockquote.pull-quote{ padding: 22px 20px; }
  .callout{ padding: 20px; }


  .cta-banner__note{
    justify-content: center;
  }
  .article-layout{
    padding-top: 28px;
  }
}