/* Glinkin Wellness — design tokens & base styles */
:root{
  /* Palette — nutribody reference */
  --beige: #EDE6DB;
  --cream: #DFD3C3;
  --sage: #8A9E78;
  --sage-soft: #A8B896;
  --sage-deep: #4A6B40;
  --olive: #5A6A50;
  --olive-deep: #3B3935;
  --ink: #2E2C28;
  --white: #FFFDF9;
  --paper: #F5F0E7;
  --line: rgba(59, 57, 53, 0.12);
  --line-strong: rgba(59, 57, 53, 0.24);
  --muted: #7A7068;

  /* Accents per variation */
  --accent: var(--sage);
  --accent-deep: var(--sage-deep);
  --on-accent: var(--white);

  /* Surface */
  --bg: var(--paper);
  --surface: var(--white);
  --surface-2: var(--beige);
  --surface-3: var(--cream);

  /* Type */
  --serif: "Raleway", system-ui, sans-serif;
  --sans: "Raleway", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Radii */
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --r-xl: 36px;

  /* Shadows — subtle */
  --shadow-1: 0 1px 2px rgba(46,44,40,.04), 0 6px 16px -8px rgba(46,44,40,.08);
  --shadow-2: 0 2px 6px rgba(46,44,40,.05), 0 18px 40px -16px rgba(46,44,40,.14);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.6,.02,.2,1);
}

/* Color variations */
[data-palette="olive-first"]{
  --accent: var(--sage-deep);
  --accent-deep: var(--olive-deep);
}
[data-palette="cream-heavy"]{
  --bg: var(--beige);
  --surface: var(--paper);
  --surface-2: #F0E9DF;
  --accent: var(--sage-deep);
  --accent-deep: var(--olive-deep);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ background: var(--paper); }
html, body, #root{ height: 100%; }

body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","ss02","cv11";
  line-height: 1.5;
}

button, input, textarea, select{ font: inherit; color: inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color: inherit; text-decoration: none; }

/* Type defaults */
h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1;
  color: var(--olive-deep);
}
h1{ font-size: clamp(40px, 5vw, 72px); }
h2{ font-size: clamp(28px, 3.4vw, 48px); }
h3{ font-size: clamp(22px, 2vw, 30px); }
p{ margin: 0; }

/* Utilities */
.eyebrow{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}
.cap{
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.muted{ color: var(--muted); }

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform .35s var(--ease-out), background .25s ease, box-shadow .3s ease;
  font-size: 14px;
  white-space: nowrap;
}
.btn:hover{ background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn .arr{ transition: transform .35s var(--ease-out); display:inline-block; }
.btn:hover .arr{ transform: translateX(4px); }
.btn.ghost{
  background: transparent;
  color: var(--olive-deep);
  border: 1px solid var(--line-strong);
}
.btn.ghost:hover{ background: var(--olive-deep); color: var(--white); border-color: var(--olive-deep); }
.btn.lg{ padding: 18px 36px; font-size: 15px; }
.btn.sm{ padding: 10px 18px; font-size: 13px; }

/* Card base */
.card{
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  position: relative;
}

/* Full-screen app layout */
#root{ display: flex; flex-direction: column; }
.app{ width: 100%; height: 100vh; overflow: hidden; display: flex; position: relative; background: var(--bg); }

/* Smooth page transitions */
.page-shell{
  position: absolute;
  inset: 0;
  overflow: visible;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .55s var(--ease-out);
}
.page-shell.active{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Custom scrollbar in device */
.page-shell::-webkit-scrollbar{ width: 8px; }
.page-shell::-webkit-scrollbar-thumb{ background: rgba(74,82,64,.18); border-radius: 999px; }
.page-shell::-webkit-scrollbar-track{ background: transparent; }

/* Sidebar */
.sidebar{
  flex: 0 0 248px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 5;
}
.sidebar .brand{ display: flex; align-items: center; gap: 12px; padding: 6px; }
.sidebar .brand-mark{
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--olive-deep);
  display:grid; place-items:center;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.sidebar .brand-name{ font-family: var(--serif); font-size: 19px; letter-spacing: -.01em; }
.sidebar nav{ display: flex; flex-direction: column; gap: 2px; }
.nav-item{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 14px;
  transition: background .25s ease, color .25s ease;
  width: 100%;
  text-align: left;
}
.nav-item:hover{ background: var(--surface-2); }
.nav-item.active{ background: var(--surface-2); color: var(--olive-deep); font-weight: 500; }
.nav-item .ico{ width: 16px; height: 16px; opacity: .7; flex: 0 0 16px; }
.sidebar .spacer{ flex: 1; }
.sidebar .footer-item{ display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 13px; color: var(--muted); }

/* Topbar (tablet) */
.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.topbar .brand{ display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; }
.topbar nav{ display: flex; gap: 6px; }
.topbar nav .nav-item{ width: auto; padding: 8px 14px; }

/* Bottom nav (mobile) */
.bottomnav{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px calc(env(safe-area-inset-bottom, 8px) + 8px);
  background: rgba(251,248,242,.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  z-index: 10;
}
.bottomnav .bn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size: 10px; color: var(--muted);
  padding: 4px 0;
}
.bottomnav .bn.center{
  width: 56px; height: 56px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
  margin: -22px auto 0;
  font-size: 22px;
  align-self: start;
}
.bottomnav .bn.active{ color: var(--olive-deep); }
.bottomnav .bn .ico{ width: 18px; height: 18px; }

/* Mobile status bar */
.statusbar{
  display:none;
  position: absolute; left: 0; right: 0; top: 0;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  z-index: 6;
  pointer-events: none;
}
[data-viewport="mobile"] .statusbar{ display: flex; }
[data-viewport="mobile"] .main{ padding-top: 44px !important; padding-bottom: 84px !important; }
[data-viewport="mobile"] .sidebar{ display: none; }
[data-viewport="mobile"] .topbar{ display: none; }
[data-viewport="mobile"] .bottomnav{ display: grid; }
[data-viewport="mobile"] .desktop-only{ display: none !important; }
[data-viewport="mobile"] .mobile-only{ display: revert !important; }

[data-viewport="tablet"] .sidebar{ display: none; }
[data-viewport="tablet"] .bottomnav{ display: none; }
[data-viewport="tablet"] .topbar{ display: flex; }
[data-viewport="tablet"] .desktop-only{ display: none !important; }

[data-viewport="desktop"] .bottomnav{ display: none; }
[data-viewport="desktop"] .topbar{ display: none; }
[data-viewport="desktop"] .mobile-only{ display: none !important; }

.mobile-only{ display: none; }

/* Main column */
.main{
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Image placeholder — sage monochrome with caption */
.img{
  position: relative;
  background:
    linear-gradient(135deg, rgba(138,158,120,.15), rgba(74,107,64,.28)),
    repeating-linear-gradient(
      135deg,
      rgba(138,158,120,.18) 0 2px,
      transparent 2px 9px
    ),
    var(--sage-soft);
  color: var(--cream);
  overflow: hidden;
  display:flex;
  align-items:flex-end;
  border-radius: inherit;
}
.img::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(255,252,245,.22) 0%, transparent 60%),
    radial-gradient(80% 70% at 80% 100%, rgba(46,44,40,.3) 0%, transparent 60%);
}
.img__cap{
  position: relative;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: rgba(250,250,247,.85);
  text-transform: lowercase;
  background: linear-gradient(180deg, transparent, rgba(53,59,44,.45));
  width: 100%;
}
.img__cap::before{
  content:"в—ђ  ";
  opacity:.7;
}
.img--tall{ aspect-ratio: 3/4; }
.img--wide{ aspect-ratio: 16/9; }
.img--square{ aspect-ratio: 1/1; }
.img--hero{ aspect-ratio: auto; }

/* Decorative sage botanical line — used as accent */
.leaf-accent{
  position: absolute;
  opacity: .55;
  pointer-events: none;
}

/* Stagger fade-in on page show */
@keyframes riseIn {
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}
.page-shell.active .rise{
  animation: riseIn .7s var(--ease-out) both;
}
.page-shell.active .rise-1{ animation-delay: .05s; }
.page-shell.active .rise-2{ animation-delay: .15s; }
.page-shell.active .rise-3{ animation-delay: .25s; }
.page-shell.active .rise-4{ animation-delay: .35s; }
.page-shell.active .rise-5{ animation-delay: .45s; }

/* в”Ђв”Ђв”Ђ Responsive helpers в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* Tablet: TopBar instead of Sidebar */
[data-viewport="tablet"] .main { padding-top: 0; }

/* Mobile: full-width stacked layout */
[data-viewport="mobile"] .page { padding: 20px 18px 96px !important; }
[data-viewport="tablet"] .page  { padding: 28px 28px 80px !important; }

/* Page heading sizes on mobile */
[data-viewport="mobile"] h1 { font-size: clamp(30px, 8vw, 42px) !important; }
[data-viewport="mobile"] h2 { font-size: clamp(22px, 6vw, 32px) !important; }

/* Hero 2-column в†’ stack on mobile/tablet */
[data-viewport="mobile"] .hero-split,
[data-viewport="tablet"] .hero-split {
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}

/* 4-col pain-facts в†’ 2 col on mobile */
[data-viewport="mobile"] .grid-4col {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* symptoms: 1 в строку на мобиле (текст не помещался в фикс. высоту), 2 на планшете */
[data-viewport="mobile"] .symptoms-grid {
  grid-template-columns: 1fr !important;
}
[data-viewport="tablet"] .symptoms-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
/* убираем жёсткое соотношение сторон — высота по контенту, текст влезает целиком */
[data-viewport="mobile"] .nb-sym,
[data-viewport="tablet"] .nb-sym {
  aspect-ratio: auto !important;
}
[data-viewport="mobile"] .nb-sym .sc-in,
[data-viewport="tablet"] .nb-sym .sc-in {
  height: auto !important;
}
[data-viewport="mobile"] .nb-sym .sc-d {
  margin-top: 6px !important;
}

/* Results 2-col в†’ 1 col on mobile */
[data-viewport="mobile"] .results-grid {
  grid-template-columns: 1fr !important;
}
[data-viewport="mobile"] .results-grid > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left: none !important;
}

/* Pricing flex в†’ column on mobile */
[data-viewport="mobile"] .pricing-row {
  flex-direction: column !important;
}

/* Urgency banner center on mobile */
[data-viewport="mobile"] .urgency-banner {
  padding: 16px 20px !important;
  gap: 12px !important;
}

/* About/articles banner в†’ stack on mobile */
[data-viewport="mobile"] .split-banner {
  flex-direction: column !important;
  gap: 20px !important;
  padding: 28px 24px !important;
}

/* в”Ђв”Ђв”Ђ Responsive utility classes в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

.grid-3col { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2col { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px; }

[data-viewport="mobile"] .grid-3col { grid-template-columns: 1fr !important; gap: 14px !important; }
[data-viewport="tablet"] .grid-3col { grid-template-columns: repeat(2, 1fr) !important; }
[data-viewport="mobile"] .grid-2col { grid-template-columns: 1fr !important; gap: 14px !important; }
[data-viewport="tablet"] .grid-2col { grid-template-columns: 1fr !important; }

/* Wide 2-col content layouts (about/intro splits) */
[data-viewport="mobile"] .about-split,
[data-viewport="tablet"] .about-split {
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}

/* Featured article in blog */
[data-viewport="mobile"] .featured-article,
[data-viewport="tablet"] .featured-article {
  grid-template-columns: 1fr !important;
}
[data-viewport="mobile"] .featured-article > div:first-child,
[data-viewport="tablet"] .featured-article > div:first-child {
  min-height: 200px !important;
}

/* Hero stats row — hide on mobile */
[data-viewport="mobile"] .hero-stats { display: none !important; }

/* Approach/steps 3-col в†’ 1 col on mobile */
[data-viewport="mobile"] .steps-grid { grid-template-columns: 1fr !important; }

/* Blog header grid в†’ stack on mobile */
[data-viewport="mobile"] .blog-header,
[data-viewport="tablet"] .blog-header {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

/* Dark section padding on mobile */
[data-viewport="mobile"] .dark-section {
  padding: 36px 24px !important;
}

/* About-page hero padding */
[data-viewport="mobile"] .about-hero {
  padding: 40px 24px !important;
}

/* Card grids в†’ 2 col on tablet, 1 on mobile */
[data-viewport="mobile"] .programs-grid {
  grid-template-columns: 1fr !important;
}
[data-viewport="tablet"] .programs-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Post: 3-col layout в†’ single column on tablet/mobile */
[data-viewport="mobile"] .post-layout,
[data-viewport="tablet"] .post-layout {
  grid-template-columns: 1fr !important;
}
[data-viewport="mobile"] .post-toc,
[data-viewport="tablet"] .post-toc {
  display: none !important;
}
[data-viewport="mobile"] .post-sidebar,
[data-viewport="tablet"] .post-sidebar {
  display: none !important;
}

/* Format strip в†’ wrap on mobile */
[data-viewport="mobile"] .format-strip {
  flex-direction: column !important;
  gap: 12px !important;
}

/* Modules sticky в†’ not sticky on mobile */
[data-viewport="mobile"] .sticky-col {
  position: static !important;
}

/* 2-col about layout */
[data-viewport="mobile"] .about-split {
  grid-template-columns: 1fr !important;
  gap: 32px !important;
}

/* Font responsiveness for article */
[data-viewport="mobile"] article h2 {
  font-size: 24px !important;
}
[data-viewport="mobile"] article p {
  font-size: 16px !important;
}

/* в”Ђв”Ђв”Ђ App layout right column в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.app-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* в”Ђв”Ђв”Ђ Mobile TopBar (hamburger) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  z-index: 5;
  flex-shrink: 0;
}
[data-viewport="mobile"] .mobile-topbar { display: flex; }
[data-viewport="mobile"] .bottomnav     { display: none !important; }
[data-viewport="mobile"] .topbar        { display: none !important; }
[data-viewport="mobile"] .statusbar     { display: none !important; }
[data-viewport="mobile"] .main          { padding-top: 0 !important; padding-bottom: 0 !important; }

/* в”Ђв”Ђв”Ђ Hero banner mobile в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
[data-viewport="mobile"] .hero-banner {
  aspect-ratio: 4/5 !important;
  min-height: unset !important;
}
[data-viewport="mobile"] .hero-title {
  top: 14% !important;
  white-space: normal !important;
  width: 100%;
  padding: 0 16px;
}
[data-viewport="mobile"] .hero-title h1 {
  font-size: 52px !important;
}
[data-viewport="mobile"] .hero-bottom {
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 0 18px 24px !important;
  gap: 16px !important;
}
[data-viewport="mobile"] .hero-bottom .btn {
  padding: 12px 24px !important;
  font-size: 14px !important;
}
[data-viewport="tablet"] .hero-banner {
  aspect-ratio: 16/7 !important;
}

/* ─── Карточки симптомов (hover) ─── */
.nb-sym{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--surface); transition:box-shadow .2s; }
.nb-sym:hover{ box-shadow:0 8px 32px rgba(60,55,40,.13); }
.nb-sym .sc-img,.nb-sym .sc-ov{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; }
.nb-sym .sc-img{ width:100%; height:100%; object-fit:cover; }
.nb-sym .sc-ov{ background:linear-gradient(160deg,rgba(40,38,30,.45),rgba(40,38,30,.65)); }
.nb-sym:hover .sc-img,.nb-sym:hover .sc-ov{ opacity:1; }
.nb-sym .sc-in{ position:relative; z-index:1; padding:24px 22px; height:100%; display:flex; flex-direction:column; gap:10px; }
.nb-sym .sc-num{ font-family:var(--serif); font-size:13px; color:var(--sage-deep); letter-spacing:.06em; transition:color .25s; }
.nb-sym .sc-t{ font-size:15px; font-weight:500; line-height:1.3; color:var(--olive-deep); transition:color .25s; }
.nb-sym .sc-d{ font-size:13px; line-height:1.55; margin-top:auto; color:var(--muted); transition:color .25s; }
.nb-sym:hover .sc-num{ color:rgba(250,250,247,.55); }
.nb-sym:hover .sc-t{ color:var(--cream); }
.nb-sym:hover .sc-d{ color:rgba(250,250,247,.75); }

/* в”Ђв”Ђв”Ђ Scroll-reveal (IntersectionObserver) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.nb-js .rise{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.nb-js .rise.nb-in{ opacity:1; transform:none; }
.nb-js .page-shell.active .rise{ animation:none; }   /* отключаем старую load-анимацию в пользу scroll-reveal */

/* ─── Пагинация (под дизайн донора) ────────────────────────────────────────── */
.pagination .nav-links{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 6px; border-radius:50%;
  font-size:13px; color:var(--olive-deep); text-decoration:none;
  border:1px solid var(--line); background:transparent; transition:all .2s ease;
}
.pagination a.page-numbers:hover{ border-color:var(--sage); background:var(--surface-2); }
.pagination .page-numbers.current{ background:var(--olive-deep); color:var(--cream); border-color:transparent; font-weight:500; }
.pagination .page-numbers.dots{ border:none; background:transparent; color:var(--muted); min-width:auto; }
.pagination .page-numbers.prev, .pagination .page-numbers.next{
  border-radius:999px; width:auto; padding:0 18px; gap:8px;
}
.pagination .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ─── Footer ───────────────────────────────────────────────────────────────── */
.nb-soc:hover{ background:rgba(250,250,247,.14); border-color:rgba(250,250,247,.5); }
.nb-foot-link:hover{ color:var(--cream) !important; }
[data-viewport="mobile"] .site-footer{ padding:40px 22px 28px !important; }
[data-viewport="mobile"] .nb-foot-top{ flex-direction:column !important; gap:32px !important; }
[data-viewport="tablet"] .site-footer{ padding:48px 28px 28px !important; }

/* ─── Симптомы: CTA-строка → стек на мобиле ─────────────────────────────────── */
[data-viewport="mobile"] .sym-cta{ flex-direction:column !important; align-items:flex-start !important; gap:14px !important; }
[data-viewport="mobile"] .sym-cta .btn{ white-space:normal !important; text-align:center; }
[data-viewport="mobile"] .sym-cta span{ max-width:none !important; }