/* ==========================================================================
   Design system: "Digital Wellness / Neo-Clean"
   Two accents encode the site's two content layers: --mint = clinical/
   evidence layer, --peach = human/story layer. See HANDOFF.md Stage 1.
   ========================================================================== */
:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --ink: #121212;
  --ink-muted: #5c655f;
  --mint: #38b2ac;
  --mint-deep: #1f6f6a;
  --mint-tint: #e3f5f3;
  --peach: #ff7a59;
  --peach-tint: #ffe9e2;
  --lavender: #6d5bd0;
  --lavender-tint: #eee9fb;
  --sand: #b8863b;
  --sand-tint: #fbf1de;
  --rose: #c2548a;
  --rose-tint: #fbe9f1;
  --mist: #e7e9e8;
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.5);
  --radius: 1.25rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto; /* Lenis takes over when JS runs; this is the no-JS fallback */
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin: 0;
}

a { color: inherit; }

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* -------------------- custom cursor -------------------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--ink);
}
.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--mint);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.cursor-ring.is-active {
  width: 56px;
  height: 56px;
  border-color: var(--peach);
}
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button {
  cursor: none;
}

/* -------------------- header -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 1.5rem;
}
.brand {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 0.95rem;
  font-weight: 500;
}
.site-nav a:hover { color: var(--mint-deep); }
.lang-switch {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.lang-switch a {
  text-decoration: none;
  color: var(--ink-muted);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}
.lang-switch a[aria-current="true"] {
  color: var(--mint-deep);
  background: var(--mint-tint);
  font-weight: 700;
}
.lang-switch--mobile { display: none; }

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

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .lang-switch--desktop { display: none; }
  .lang-switch--mobile {
    display: flex;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mist);
  }
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(85vw, 20rem);
    height: 100dvh;
    background: #fff;
    padding: 5.5rem 1.5rem 2rem;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(18, 18, 18, 0.08);
    z-index: 95;
  }
  .site-nav.is-open { transform: translateX(0); }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 18, 18, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
    z-index: 90;
  }
  .nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav ul {
    flex-direction: column;
    gap: 1.25rem;
  }
  .site-nav a { font-size: 1.05rem; color: var(--ink); }
}

/* -------------------- hero -------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 5rem;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2.75rem, 6vw, 5rem);
  max-width: 20ch;
  margin: 0 auto;
}
.hero .lede {
  margin: 1.5rem auto 0;
  max-width: 34rem;
  color: var(--ink-muted);
  font-size: 1.15rem;
}
.hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-family: "Onest", system-ui, sans-serif;
  letter-spacing: 0.01em;
  will-change: transform;
}
.btn-primary {
  background: var(--peach);
  color: #fff;
}
.btn-secondary {
  background: var(--mint-tint);
  color: var(--mint-deep);
  border: 1px solid var(--mint);
}
.magnetic { transition: transform 0.15s var(--ease); }

/* -------------------- glass cards / sections grid -------------------- */
.sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  padding: 3rem 1.5rem 4rem;
}
.section-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --parallax-y: 0px;
  --reveal-y: 0px;
  position: relative;
  display: block;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04);
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(calc(var(--lift) + var(--parallax-y) + var(--reveal-y)));
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), backdrop-filter 0.25s var(--ease), opacity 0.35s var(--ease);
}
.section-card:hover {
  --lift: -5px;
  border-color: var(--mint);
  box-shadow: 0 20px 48px rgba(31, 111, 106, 0.16);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.section-card--featured {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, var(--peach-tint), transparent 70%);
}

/* -------------------- bento layout (homepage only) — deliberately asymmetric, not a uniform
   grid; comparison/reference pages (Методи, Альтернативи) keep the plain scannable grid since
   comparability matters more than spectacle there. -------------------- */
@media (min-width: 640px) {
  .sections-grid--bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(7rem, auto);
    grid-auto-flow: dense;
  }
  .sections-grid--bento .section-card--featured { grid-column: span 2; grid-row: span 3; }
  .sections-grid--bento .section-card--mint { grid-column: span 2; grid-row: span 2; }
  .sections-grid--bento .section-card--lavender { grid-column: span 2; grid-row: span 1; }
  .sections-grid--bento .section-card--sand { grid-column: span 1; grid-row: span 2; }
  .sections-grid--bento .section-card--rose { grid-column: span 1; grid-row: span 2; }
  .sections-grid--bento .section-card { display: flex; flex-direction: column; justify-content: flex-end; }
  .sections-grid--bento .section-card--featured { background: radial-gradient(120% 100% at 30% 0%, var(--peach-tint), transparent 75%); }
  .sections-grid--bento .section-card--mint { background: radial-gradient(120% 100% at 30% 0%, var(--mint-tint), transparent 75%); }
  .sections-grid--bento .section-card--lavender { background: radial-gradient(120% 100% at 30% 0%, var(--lavender-tint), transparent 75%); }
  .sections-grid--bento .section-card--sand { background: radial-gradient(120% 100% at 30% 0%, var(--sand-tint), transparent 75%); }
  .sections-grid--bento .section-card--rose { background: radial-gradient(120% 100% at 30% 0%, var(--rose-tint), transparent 75%); }
}
.section-card--mint { background: linear-gradient(180deg, var(--mint-tint), transparent 70%); }
.section-card--mint:hover { border-color: var(--mint); }
.section-card--lavender { background: linear-gradient(180deg, var(--lavender-tint), transparent 70%); }
.section-card--lavender:hover { border-color: var(--lavender); }
.section-card--sand { background: linear-gradient(180deg, var(--sand-tint), transparent 70%); }
.section-card--sand:hover { border-color: var(--sand); }
.section-card--rose { background: linear-gradient(180deg, var(--rose-tint), transparent 70%); }
.section-card--rose:hover { border-color: var(--rose); }
.section-card h2 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}
.section-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.page-header {
  position: relative;
  overflow: hidden;
  padding: 3rem 0 2rem;
  background: linear-gradient(180deg, var(--tint, var(--mint-tint)), transparent 85%);
}
.page-header__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.page-header__blob {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: var(--tint, var(--mint-tint));
  filter: blur(85px);
  opacity: 0.9;
  animation: blobDrift 18s ease-in-out infinite;
}
.page-header .wrap { position: relative; z-index: 1; }
.page-header h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); max-width: 20ch; }
.page-header .lede { margin-top: 0.6rem; max-width: 40rem; color: var(--ink-muted); font-size: 1rem; }

/* -------------------- kinetic typography -------------------- */
.kinetic-word { display: inline-block; overflow: hidden; vertical-align: top; }
.kinetic-word__inner { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .kinetic-word__inner { transform: none !important; }
}

/* -------------------- empty-state (richer "coming soon") -------------------- */
.empty-state {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --reveal-y: 0px;
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin: 3.5rem auto 5rem;
  padding: 2.75rem 2.25rem;
  border-radius: var(--radius);
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04);
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--reveal-y));
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.empty-state:hover { box-shadow: 0 20px 48px rgba(18, 18, 18, 0.08); }
.empty-state__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--tint-deep, var(--mint));
  position: relative;
}
.empty-state__icon::after {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border-radius: 50%;
  background: var(--tint-deep, var(--mint));
  opacity: 0.5;
}
.empty-state p {
  margin: 0 0 1.75rem;
  color: var(--ink-muted);
  line-height: 1.6;
}
.empty-state--mint { --tint-deep: var(--mint); }
.empty-state--lavender { --tint-deep: var(--lavender); }
.empty-state--sand { --tint-deep: var(--sand); }
.empty-state--rose { --tint-deep: var(--rose); }
.empty-state--peach { --tint-deep: var(--peach); }
.page-header--mint { --tint: var(--mint-tint); --tint-deep: var(--mint-deep); }
.page-header--lavender { --tint: var(--lavender-tint); --tint-deep: var(--lavender); }
.page-header--sand { --tint: var(--sand-tint); --tint-deep: var(--sand); }
.page-header--rose { --tint: var(--rose-tint); --tint-deep: var(--rose); }
.page-header--peach { --tint: var(--peach-tint); --tint-deep: var(--peach); }

/* -------------------- longform articles -------------------- */
.article-hero { padding-bottom: 2.5rem; }
.article-meta {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tint-deep, var(--mint-deep));
  margin-bottom: 0.75rem;
}
.article-hero h1 { max-width: 22ch; }

/* Deliberately just a slim top-edge line, not a full info bar: a bar tall enough to carry a
   title+percent row (~54px) reliably swallows an entire line of body text as it scrolls past —
   opaque, it eats the line outright; translucent, colored cards ghost through it. A 6px strip
   never eats more than a sliver of a line's edge either way. The title/percent readout lives
   next to the reading-companion orb in the side margin instead, where it never sits over text. */
.article-sticky-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.001); /* not fully transparent so mouse/reduced-motion inspection can still find bounds; visually invisible */
  transform: translateY(-100%);
  pointer-events: none;
  transition: transform 0.4s var(--ease);
}
.article-sticky-bar.is-visible { transform: translateY(0); pointer-events: auto; }
.article-sticky-bar__track {
  position: relative;
  height: 4px;
  background: var(--mist);
  box-shadow: 0 1px 8px rgba(18, 18, 18, 0.1);
  overflow: visible;
}
.article-sticky-bar__fill {
  position: relative;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--tint-deep, var(--mint)) 0%, var(--tint, var(--mint-tint)) 45%, var(--tint-deep, var(--mint)) 100%);
  background-size: 220% 100%;
  transform: scaleX(0);
  transform-origin: left;
  animation: barSheen 2.8s linear infinite;
}
@keyframes barSheen {
  0% { background-position: 0% 0; }
  100% { background-position: -220% 0; }
}
.article-sticky-bar__glow {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--tint-deep, var(--mint));
  box-shadow: 0 0 12px 3px var(--tint-deep, var(--mint));
  transition: opacity 0.2s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .article-sticky-bar__fill { animation: none; }
}
.article-body {
  position: relative;
  overflow: hidden;
}
.article-body__content {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink);
}
.article-body__content h2 { font-size: 1.6rem; margin: 3rem 0 1.25rem; }

/* -------------------- reading companion (side-margin orb, tracks scroll progress) -------------------- */
.reading-companion {
  position: absolute;
  top: 3rem;
  left: 50%;
  margin-left: 24rem;
  z-index: 1;
  width: 4rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.reading-companion.is-visible { opacity: 1; }
.reading-companion__orb {
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--tint-deep, var(--mint)), var(--tint, var(--mint-tint)));
  box-shadow: 0 0 30px 6px color-mix(in srgb, var(--tint-deep, var(--mint)) 35%, transparent);
  opacity: 0.85;
  animation: companionBreathe 5s ease-in-out infinite;
}
.reading-companion__percent {
  display: block;
  margin-top: 0.6rem;
  text-align: center;
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--tint-deep, var(--mint-deep));
}
@keyframes companionBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .reading-companion__orb { animation: none; }
}
@media (max-width: 1024px) {
  .reading-companion { display: none; }
}
.article-body__content h3 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
.article-body__content p { margin: 0 0 1.25rem; }
.article-body__content ul, .article-body__content ol { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.article-body__content li { margin-bottom: 0.5rem; }
.article-body__content a { color: var(--tint-deep, var(--mint-deep)); }

.pull-quote {
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem 2.25rem;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--tint, var(--mint-tint)), transparent);
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ink);
}

.stat-callout {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin: 2.5rem 0;
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.stat-callout__number {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 3.25rem;
  color: var(--tint-deep, var(--mint-deep));
  line-height: 1;
  white-space: nowrap;
}
.stat-callout__label { color: var(--ink-muted); font-size: 0.95rem; }

.article-widget { margin: 2.75rem 0; }
.article-widget-label {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 1rem;
}

/* -------------------- savings calculator (finance article) -------------------- */
.savings-calculator {
  margin: 2.75rem 0;
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--glass-bg);
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 640px) {
  .savings-calculator { grid-template-columns: 1fr 1fr; align-items: center; }
}
.savings-calculator__inputs {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.savings-calculator__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.savings-calculator__field input {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink);
  border: none;
  border-bottom: 2px solid var(--tint, var(--mint-tint));
  background: transparent;
  padding: 0.3rem 0.1rem;
  width: 100%;
  transition: border-color 0.25s var(--ease);
}
.savings-calculator__field input:focus {
  outline: none;
  border-color: var(--tint-deep, var(--mint-deep));
}
.savings-calculator__outputs {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.savings-calculator__output { display: flex; flex-direction: column; }
.savings-calculator__number {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--tint-deep, var(--mint-deep));
  line-height: 1.1;
}
.savings-calculator__number::after { content: " \20B4"; font-size: 1.1rem; font-weight: 600; }
.savings-calculator__output-label { font-size: 0.85rem; color: var(--ink-muted); }

/* -------------------- compare table (two-column side-by-side, e.g. method A vs method B) -------------------- */
.compare-table {
  display: grid;
  gap: 1.25rem;
  margin: 2.5rem 0;
}
@media (min-width: 640px) {
  .compare-table { grid-template-columns: 1fr 1fr; }
}
.compare-table__col {
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.compare-table__col h3 {
  font-size: 1.05rem;
  margin-bottom: 1rem;
  color: var(--tint-deep, var(--mint-deep));
}
.compare-table__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.compare-table__col li { padding-left: 1.4rem; position: relative; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.5; }
.compare-table__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tint-deep, var(--mint-deep));
}

/* -------------------- warning callout (medical caution — stays rose regardless of hub accent, deliberately, so it always reads as "pay attention" rather than blending into the page's own tint) -------------------- */
.callout-warning {
  display: flex;
  gap: 1rem;
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: var(--rose-tint);
  border: 1px solid color-mix(in srgb, var(--rose) 30%, transparent);
}
.callout-warning__icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}
.callout-warning__body { font-size: 0.95rem; line-height: 1.6; }
.callout-warning__body strong { color: var(--rose); }

/* -------------------- myth vs fact split card -------------------- */
.myth-fact {
  display: grid;
  gap: 1px;
  margin: 2.5rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--mist);
}
@media (min-width: 640px) {
  .myth-fact { grid-template-columns: 1fr 1fr; }
}
.myth-fact__col { padding: 1.75rem; background: var(--bg); }
.myth-fact__col--myth { background: var(--bg-soft); }
.myth-fact__col--fact { background: var(--tint, var(--mint-tint)); }
.myth-fact__label {
  display: block;
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}
.myth-fact__col--myth .myth-fact__label { color: var(--ink-muted); }
.myth-fact__col--fact .myth-fact__label { color: var(--tint-deep, var(--mint-deep)); }
.myth-fact__col--myth p { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-muted) 40%, transparent); }
.myth-fact__col p { margin: 0; font-size: 0.95rem; line-height: 1.55; }

.article-sources {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mist);
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.article-related-head {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 3rem 0 1rem;
}
.article-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}
.article-related a {
  display: block;
  padding: 1.1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--bg-soft);
  border: 1px solid var(--mist);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
}
.article-related a:hover { border-color: var(--tint-deep, var(--mint)); }

.stub-note {
  color: var(--ink-muted);
  padding: 1.5rem 0;
}

/* -------------------- content hub sections (Методи/Альтернативи/Історії/Про проект) -------------------- */
.content-section { padding: 1rem 1.5rem 4rem; }
.content-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.75rem; }
.content-section .sections-grid { padding: 0 0 1rem; }
.section-card h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.section-card--static { cursor: default; }

/* -------------------- shared tilt+glow treatment for non-.section-card "plates" (banners,
   disclosure boxes) — same interaction language as the cards, applied via tilt.js. -------------------- */
.tilt-plate {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --reveal-y: 0px;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(calc(var(--lift) + var(--reveal-y)));
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  border: 1px solid transparent;
}
.tilt-plate:hover {
  --lift: -4px;
  border-color: currentColor;
  box-shadow: 0 16px 36px rgba(18, 18, 18, 0.1);
}

/* -------------------- interactive card-toggle button (glass + expand) -------------------- */
.card-toggle {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.card-toggle:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}
.card-toggle__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s var(--ease), opacity 0.3s var(--ease);
}
.card-toggle.is-open .card-toggle__panel { opacity: 1; }
.card-toggle__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
}
.card-toggle__hint::after {
  content: "+";
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.3s var(--ease);
}
.card-toggle.is-open .card-toggle__hint::after { transform: rotate(45deg); }
.section-card--mint .card-toggle__hint { color: var(--mint-deep); }
.section-card--lavender .card-toggle__hint { color: var(--lavender); }
.section-card--sand .card-toggle__hint { color: var(--sand); }
.section-card--rose .card-toggle__hint { color: var(--rose); }
.section-card--peach .card-toggle__hint { color: var(--peach); }

.story-list { display: flex; flex-direction: column; gap: 1.5rem; padding: 0 0 1rem; }
.story-card { padding: 2.25rem; }
.story-card .story-meta {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--peach);
  margin-bottom: 0.6rem;
}
.story-card h3 { font-size: 1.4rem; margin-bottom: 0.85rem; }
.story-card p { margin: 0 0 1rem; }
.story-card blockquote {
  margin: 1.25rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--peach);
  font-style: italic;
  color: var(--ink);
}
.story-disclosure {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto 3rem;
  padding: 1.1rem 1.35rem;
  border-radius: 0.75rem;
  background: var(--peach-tint);
  color: #8a4a35;
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: center;
}

/* -------------------- breathing exercise -------------------- */
.breathing {
  padding: 4rem 0 5rem;
  background: linear-gradient(180deg, var(--lavender-tint), transparent 80%);
}
.breathing__inner { max-width: 32rem; margin: 0 auto; text-align: center; }
.breathing__inner p { color: var(--ink-muted); }
.breathing__orb {
  position: relative;
  width: 12rem;
  height: 12rem;
  margin: 2.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lavender-tint), transparent 70%);
}
.breathing__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 1.5px solid var(--lavender);
  opacity: 0;
  animation: breathRing 4s ease-out infinite;
}
.breathing__ring--2 {
  border-color: var(--mint);
  animation-delay: 2s;
}
@keyframes breathRing {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.3); opacity: 0; }
}
.breathing__core {
  position: relative;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 42%),
    linear-gradient(160deg, var(--lavender), var(--mint));
  box-shadow: 0 0 44px 8px rgba(109, 91, 208, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transform: scale(1);
  transition: transform 4s ease-in-out, box-shadow 4s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .breathing__ring { animation: none; opacity: 0.3; }
}
.breathing__phase {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  color: var(--lavender);
  min-height: 1.5em;
}
@media (prefers-reduced-motion: reduce) {
  .breathing__core { transition: none; }
}

/* -------------------- accordion -------------------- */
.accordion-section { padding: 1rem 1.5rem 5rem; }
.accordion-section h2 { margin-bottom: 1.5rem; font-size: 1.6rem; }
.article-faq { margin: 1.5rem 0 2.5rem; }
.accordion__item {
  border-bottom: 1px solid var(--mist);
}
.accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  cursor: pointer;
}
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
}
.accordion__icon::before, .accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--tint-deep, var(--lavender));
  border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.accordion__icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.accordion__icon::after { left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); opacity: 0; }
.accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.35s var(--ease);
}
.accordion__panel ul {
  margin: 0;
  padding: 0 0 1.5rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.accordion__panel li {
  color: var(--ink-muted);
  padding-left: 1.25rem;
  position: relative;
  opacity: 0;
  transform: translateY(6px);
}
.accordion__panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tint-deep, var(--lavender));
}

/* -------------------- ambient background (blurred drifting blobs) -------------------- */
.ambient-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ambient-blob-wrap {
  position: absolute;
  width: 38rem;
  height: 38rem;
}
.ambient-blob-wrap--xl {
  width: 48rem;
  height: 48rem;
}
.ambient-blob {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.9;
  animation: blobDrift 16s ease-in-out infinite;
}
.ambient-blob--mint { background: radial-gradient(circle, var(--mint-tint) 0%, var(--mint-tint) 12%, transparent 100%); }
.ambient-blob--lavender { background: radial-gradient(circle, var(--lavender-tint) 0%, var(--lavender-tint) 12%, transparent 100%); }
.ambient-blob--peach { background: radial-gradient(circle, var(--peach-tint) 0%, var(--peach-tint) 12%, transparent 100%); }
/* article ambient runs closer/bolder: recentered on the reading column, deeper core color, wider visible plateau before the fade */
.ambient-bg--article .ambient-blob { filter: blur(85px); opacity: 1; }
.ambient-bg--article .ambient-blob--mint { background: radial-gradient(circle, var(--mint) 0%, var(--mint-tint) 26%, var(--mint-tint) 48%, transparent 100%); }
.ambient-bg--article .ambient-blob--lavender { background: radial-gradient(circle, var(--lavender) 0%, var(--lavender-tint) 26%, var(--lavender-tint) 48%, transparent 100%); }
.ambient-bg--article .ambient-blob--peach { background: radial-gradient(circle, var(--peach) 0%, var(--peach-tint) 26%, var(--peach-tint) 48%, transparent 100%); }
@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2.5rem, -2rem) scale(1.1); }
}
.ambient-blob-wrap:nth-child(2) .ambient-blob { animation-duration: 20s; animation-delay: -5s; }
.ambient-blob-wrap:nth-child(3) .ambient-blob { animation-duration: 18s; animation-delay: -9s; }
.ambient-blob-wrap:nth-child(4) .ambient-blob { animation-duration: 22s; animation-delay: -3s; }
.ambient-blob-wrap:nth-child(5) .ambient-blob { animation-duration: 17s; animation-delay: -7s; }
.ambient-blob-wrap:nth-child(6) .ambient-blob { animation-duration: 19s; animation-delay: -11s; }
.ambient-blob-wrap:nth-child(7) .ambient-blob { animation-duration: 21s; animation-delay: -2s; }
.ambient-blob-wrap:nth-child(8) .ambient-blob { animation-duration: 16s; animation-delay: -8s; }
.ambient-blob-wrap:nth-child(9) .ambient-blob { animation-duration: 23s; animation-delay: -4s; }
.ambient-blob-wrap:nth-child(10) .ambient-blob { animation-duration: 18.5s; animation-delay: -10s; }
@media (prefers-reduced-motion: reduce) {
  .ambient-blob { animation: none; }
}

/* -------------------- health calendar timeline (centered wave) -------------------- */
.timeline-section { padding: 1rem 1.5rem 6rem; position: relative; }
.timeline-source {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 0 auto 1rem;
  text-align: center;
}
.timeline-legend {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  margin: 0 auto 4rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--mint-tint);
  color: var(--mint-deep);
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: center;
}
.timeline-legend strong { color: var(--ink); }
.timeline {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
}
.timeline__svg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.timeline__path-bg {
  fill: none;
  stroke: var(--mist);
  stroke-width: 7;
}
.timeline__path-fill {
  fill: none;
  stroke: var(--mint);
  stroke-width: 7;
  stroke-linecap: round;
}
.timeline__list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline__item {
  display: grid;
  grid-template-columns: 1fr 3rem 1fr;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  align-content: center;
  padding: 2.75rem 0;
  min-height: 19rem;
}
.timeline__item--r .timeline__body { grid-column: 3; grid-row: 1; text-align: left; }
.timeline__item--r .timeline__dot-col { grid-column: 2; grid-row: 1; }
.timeline__item--r .bar { margin-right: auto; }
.timeline__item--l .timeline__dot-col { grid-column: 2; grid-row: 1; }
.timeline__item--l .timeline__body { grid-column: 1; grid-row: 1; text-align: right; }
.timeline__item--l .bar { margin-left: auto; }
.timeline__item--l .bar__label { flex-direction: row-reverse; }

.timeline__dot-col {
  justify-self: center;
  transform: translateX(var(--wave-offset, 0));
}
/* Wave offset is computed and set by timeline.js (a smooth sine function evaluated at each
   dot's actual Y), not hardcoded here — this custom property just defines the default. */
@media (max-width: 720px) {
  .timeline__dot-col { transform: none !important; }
}
.timeline__dot {
  position: relative;
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mist);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.timeline__dot::after {
  content: "";
  position: absolute;
  inset: -0.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--mint);
  opacity: 0;
  transform: scale(0.6);
}
.timeline__item.is-active .timeline__dot {
  border-color: var(--mint);
  background: var(--mint-tint);
  transform: scale(1.2);
}
.timeline__item.is-active .timeline__dot::after {
  animation: dotPing 0.9s var(--ease);
}
@keyframes dotPing {
  0% { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.8); }
}
.timeline__time {
  display: inline-block;
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  color: var(--mint-deep);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.timeline__body h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.timeline__body p { margin: 0 0 1rem; color: var(--ink-muted); }

.bar { max-width: 22rem; }
.bar__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.bar__track {
  height: 8px;
  border-radius: 999px;
  background: var(--mist);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), var(--mint-deep));
  transition: width 1.1s var(--ease);
}

@media (max-width: 720px) {
  .timeline__item { grid-template-columns: 2.25rem 1fr; column-gap: 1.25rem; min-height: 0; }
  .timeline__item--r .timeline__body,
  .timeline__item--l .timeline__body { grid-column: 2; text-align: left; }
  .timeline__item--r .timeline__dot-col,
  .timeline__item--l .timeline__dot-col { grid-column: 1; }
  .timeline__item--r .bar,
  .timeline__item--l .bar { margin: 0; }
  .timeline__item--l .bar__label { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline__dot, .bar__fill { transition: none !important; }
  .timeline__item.is-active .timeline__dot::after { animation: none; opacity: 0; }
}

.site-footer {
  border-top: 1px solid var(--mist);
  margin-top: 3rem;
  padding: 3rem 0 2rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.site-footer__sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--mist);
}
.site-footer__col h4 {
  font-family: "Onest", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.site-footer__col a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.site-footer__col a:hover { color: var(--mint-deep); }

/* -------------------- homepage content previews -------------------- */
.home-preview { padding: 3rem 1.5rem 4rem; }
.home-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.home-preview__head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.home-preview__link {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.home-preview--peach .home-preview__link { color: var(--peach); }
.home-preview--mint .home-preview__link { color: var(--mint-deep); }
.home-preview--lavender .home-preview__link { color: var(--lavender); }
.home-preview--sand .home-preview__link { color: var(--sand); }
.home-preview--rose .home-preview__link { color: var(--rose); }

.mini-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem;
}
.mini-timeline__item {
  display: block;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--tint, var(--mint-tint));
  position: relative;
  text-decoration: none;
  color: inherit;
}
.mini-timeline__time {
  display: block;
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tint-deep, var(--mint-deep));
  margin-bottom: 0.5rem;
}
.mini-timeline__item p { margin: 0; font-size: 0.95rem; }

.orb-teaser {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--lavender-tint);
}
.orb-teaser__orb {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--lavender), var(--mint));
  box-shadow: 0 0 32px 6px rgba(109, 91, 208, 0.3);
  animation: blobDrift 6s ease-in-out infinite;
}
.orb-teaser__text { flex: 1; min-width: 14rem; }
.orb-teaser__text p { margin: 0 0 1rem; color: var(--ink-muted); }

.toolkit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.25rem;
}
.toolkit-chip {
  padding: 1.25rem 1.5rem;
  border-radius: 999px;
  background: var(--sand-tint);
  font-weight: 600;
  font-family: "Onest", system-ui, sans-serif;
  font-size: 0.95rem;
  text-align: center;
  color: var(--ink);
}
.toolkit-row--rose .toolkit-chip { background: var(--rose-tint); }

.trust-block {
  padding: 2.5rem;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  text-align: center;
}
.trust-block p { max-width: 40rem; margin: 0 auto 1.5rem; color: var(--ink-muted); }

/* -------------------- reduced motion / touch guardrails -------------------- */
@media (prefers-reduced-motion: reduce) {
  .section-card,
  .btn,
  .cursor-ring { transition: none !important; }
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}