/* ============================================================
   makiejevas.lt — Emocijų paleidimo sesijos
   Šilti, ramūs tonai. Serif antraštės + sans tekstas.
   ============================================================ */

:root {
  --bg:        #f6f1e7;   /* pieniškai balta / lino */
  --bg-tint:   #efe7d8;   /* smėlio atspalvis sekcijoms */
  --bg-cta:    #e9ddc9;   /* šiltas akcentinis fonas CTA sekcijai */
  --surface:   #fbf7ef;   /* kortelės */
  --ink:       #403a33;   /* minkšta grafito-ruda tekstui */
  --ink-soft:  #6a625a;   /* antrinis tekstas */
  --accent:    #b56a4a;   /* prigesinta terakota (dekorui: taškai, linijos) */
  --accent-dk: #9c563a;   /* tamsesnė terakota — mygtukų fonas */
  --accent-tx: #8f4c32;   /* tamsiausia terakota — smulkiam tekstui (WCAG AA) */
  --line:      #ddd2bf;   /* švelnios linijos */
  --line-str:  #968971;   /* stipresnė linija — 3.05:1 su --bg (WCAG 1.4.11) */
  --shadow:    0 14px 40px rgba(84, 63, 45, .10);
  --radius:    16px;

  /* Trys ir tik trys konteinerių pločiai */
  --maxw:      680px;   /* skaitymo stulpelis */
  --maxw-wide: 940px;   /* platesnės sekcijos (apie mane, atsiliepimai) */
  --maxw-hero: 1080px;  /* hero ir navigacija */

  /* Sticky header aukštis — iš čia išvedami visi atitraukimai */
  --header-h:  72px;

  /* Šrifto dydžių skalė (5 žingsniai).
     rem skaičiuojamas nuo 16px šaknies, o kūno tekstas yra 19px,
     todėl žingsniai užrašyti taip, kad santykiai su 19px būtų teisingi. */
  --fs-xs:   .86rem;    /* ~13.8px — .section-label, .cta-note, .footer-copy, .eyebrow */
  --fs-sm:   .95rem;    /* ~15.2px — .note, .review cite, .nav-links a, .nav-cta */
  --fs-base: 1.1875rem; /* 19px    — body, .feel-list, .price-list */
  --fs-md:   1.3rem;    /* ~20.8px — .lede riba, .faq summary, .review p, .accent-line, .btn, .inline-link */
  --fs-lg:   1.5rem;    /* 24px    — h3, .footer-name */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Fokusuojamas elementas neturi likti po sticky header'iu viršuje
     nei po lipnia CTA juosta apačioje (telefone ji ~65px aukščio). */
  scroll-padding-top: calc(var(--header-h) + 12px);
  scroll-padding-bottom: 96px;
}
/* Nuo 861px lipnus CTA yra tik piliulė kampe, tad apačioje užtenka mažiau */
@media (min-width: 861px) {
  html { scroll-padding-bottom: 24px; }
}

/* Anchor nuorodos nesustoja po sticky header'iu */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Klaviatūros fokusas — matomas, bet švelnus */
:focus-visible {
  outline: 2px solid var(--accent-dk);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: #e9d7c3; color: var(--ink); }

/* Praleisti navigaciją — matoma tik su klaviatūra.
   fixed, kad būtų matoma net fokusuojant iš puslapio vidurio. */
.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent-dk);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 10px 0;
  font-size: var(--fs-sm);
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* main gauna fokusą per skip-link, bet apvado nerodome */
main:focus { outline: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* overflow-x: hidden pašalintas: pagal specifikaciją jis verčia overflow-y
     skaičiuoti kaip auto, body tampa slinkties konteineriu ir gali sugadinti
     position: sticky. Horizontalaus persipildymo nėra nė viename plotyje. */
}

h1, h2, h3 {
  font-family: "Literata", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.3rem, 6vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 4vw, 2.35rem); margin-bottom: .8em; }
h3 { font-size: var(--fs-lg); margin-top: 2.2em; }

p { margin: 0 0 1.2em; }
a { color: var(--accent-tx); text-decoration: none; }
/* Hover privalo TAMSINTI, ne šviesinti (kitaip kontrastas krenta) */
a:hover { color: #7a3f28; }

/* Nuorodos tekste neatpažįstamos vien iš spalvos → pabraukiame.
   Mygtukai ir dekoratyvios nuorodos į šią taisyklę nepatenka. */
main p a:not(.btn):not(.inline-link),
.footer-contact a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  /* WCAG 2.5.8: bent 24px aukščio taikinys */
  display: inline-block;
  padding-block: 3px;
}
main p a:not(.btn):not(.inline-link):hover,
.footer-contact a:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

strong { font-weight: 600; }

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: clamp(64px, 11vw, 130px) 0;
}
.section-tint { background: var(--bg-tint); }
.section-cta  { background: var(--bg-cta); }

/* ---------- Navigation ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 241, 231, .82);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
header.scrolled { border-color: var(--line); }

/* Skaitymo progreso juostelė ilgame puslapyje */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  background: var(--accent-dk);
  opacity: 1;
  transition: width .12s linear;
  pointer-events: none;
}

.site-nav {
  max-width: var(--maxw-hero);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-brand {
  font-family: "Literata", serif;
  font-size: var(--fs-base);
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--accent-tx); }
/* Aktyvios sekcijos nuoroda */
.nav-links a[aria-current] { color: var(--accent-tx); }
.nav-cta {
  padding: 8px 16px;
  border: 1px solid var(--accent-dk);
  border-radius: 999px;
  /* CTA yra .site-nav vaikas, ne .nav-links viduje, tad dydį nurodome atskirai */
  font-size: var(--fs-sm);
  line-height: 1.6;
  white-space: nowrap;
  color: var(--accent-tx) !important;
}
.nav-cta:hover { background: var(--accent-dk); color: #fff !important; }
.nav-cta:active { background: var(--accent-tx); color: #fff !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 26px;
  border: 1px solid transparent;   /* kad primary ir ghost būtų vienodo aukščio */
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: 1.2;
  text-align: center;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
  color: #fff;
  box-shadow: 0 10px 26px rgba(156, 86, 58, .28);
}
.btn-primary:hover {
  background: var(--accent-tx);
  border-color: var(--accent-tx);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(156, 86, 58, .34);
}
.btn-primary:active {
  background: #7a3f28;
  border-color: #7a3f28;
  box-shadow: 0 4px 12px rgba(156, 86, 58, .24);
}
.btn-ghost {
  background: transparent;
  color: var(--accent-tx);
  border-color: var(--line-str);
}
.btn-ghost:hover {
  border-color: var(--accent);
  background: rgba(181, 106, 74, .07);
  color: #7a3f28;
  transform: translateY(-2px);
}
.btn-ghost:active { background: rgba(181, 106, 74, .14); }
.cta-note {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin: 14px 0 0;
}

/* Perdavimas į Calendly: tylus antrinis tekstas po CTA mygtuku.
   Paaiškina, kad atsidaro naujas langas ir kad sistema angliška. */
.cta-handoff {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46em;
  margin: 12px 0 0;
}
.mid-cta-inner .cta-handoff,
.cta-wrap .cta-handoff {
  margin-left: auto;
  margin-right: auto;
}
/* Kaina hero'uje: darbalaukyje po abiem mygtukais atskiroje eilutėje.
   DOM tvarka jau atitinka vaizdinę, tad order darbalaukyje nebereikalingas
   (anksčiau order:3 vertė ekrano skaitytuvą skaityti kainą tarp mygtukų). */
.hero-actions .cta-note {
  width: 100%;
  margin: 0;
}

/* Sekcijos žymė — padeda susiorientuoti ilgame puslapyje.
   .eyebrow yra tas pats dydis ir tarpai, skiriasi tik spalva. */
.section-label,
.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 1.1em;
}
.section-label { color: var(--ink-soft); }
/* Hero eyebrow lieka įprastu raidžių dydžiu: didžiosios raidės pirmame
   ekrane skamba kaip reklama, o ne kaip tylus kambarys. */
.eyebrow {
  color: var(--accent-tx);
  text-transform: none;
  letter-spacing: .04em;
  font-size: var(--fs-sm);
}

/* Švelnus paaiškinamasis blokas (pvz. kada verta rinktis kitą pagalbą) */
.note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px 28px;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin-top: 3.4rem;
}
.note strong {
  display: block;
  color: var(--ink);
  margin-bottom: .35em;
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 9vw, 110px);
}
.hero-inner {
  max-width: var(--maxw-hero);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.lede {
  font-size: clamp(1.05rem, 2.3vw, var(--fs-md));
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 1.9em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.hero-portrait {
  justify-self: center;
  width: 100%;
  max-width: 400px;
}
.hero-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow);
  display: block;
}

/* Tarp 701 ir 990px portretas yra .9fr stulpelis ir realiai išeina ~300px,
   tad fiksuojame plotį, kad sizes atitiktų tikrovę ir nebūtų traukiamas 1200w. */
@media (min-width: 701px) and (max-width: 990px) {
  .hero-portrait { max-width: 300px; }
}

/* ---------- Trys dalykai atvirai ----------
   Tas pats ramus ritmas kaip .steps: plonos linijos, jokių kortelių. */
.open-facts { margin-top: 1.5em; }
.open-facts > div {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.open-facts > div:last-child { border-bottom: 1px solid var(--line); }
.open-facts h3 {
  margin: 0 0 .35em;
  font-size: var(--fs-md);
}
.open-facts p { margin: 0; color: var(--ink-soft); }

/* ---------- Steps (kaip vyksta sesija) ---------- */
.steps {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
  display: grid;
}
/* Įvadinis sakinys turi būti arčiau savo sąrašo nei kitos pastraipos */
p + .feel-list,
p + .steps { margin-top: -.55em; }
.steps li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li strong {
  color: var(--ink);
  font-weight: 600;
}
.step-num {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent-tx);
  font-family: "Literata", serif;
  font-size: var(--fs-base);
}

/* ---------- Feel lists ---------- */
.feel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.feel-list li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
}
.feel-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .7;
}

/* ---------- Reviews ---------- */
#atsiliepimai .wrap { max-width: var(--maxw-wide); }
.reviews {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 1em;
}
@media (max-width: 760px) {
  .reviews { grid-template-columns: 1fr; }
}
.review {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
  box-shadow: 0 8px 26px rgba(84, 63, 45, .05);
}
.review p {
  font-family: "Literata", serif;
  font-size: var(--fs-md);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 .8em;
}
.review cite {
  font-style: normal;
  font-weight: 500;
  color: var(--accent-tx);
  font-family: "Inter", sans-serif;
  font-size: var(--fs-sm);
}

/* ---------- Tarpinis CTA po atsiliepimų ---------- */
.mid-cta { padding: 0 0 clamp(64px, 11vw, 130px); }
.mid-cta-inner { text-align: center; }

/* ---------- About ---------- */
.about-wrap {
  max-width: var(--maxw-wide);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
/* Portretas nebeklijuojamas: teksto stulpelis dabar platus,
   o sticky palikdavo ilgą tuščią plotą po nuotrauka. */
.about-portrait { align-self: start; }
.about-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}
.about-text h2 { margin-top: 0; }
.inline-link {
  display: inline-block;
  margin-top: .4em;
  font-family: "Literata", serif;
  font-size: var(--fs-md);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.inline-link:hover { border-color: var(--accent); }

/* ---------- Story ---------- */
.story p { color: var(--ink); }
.accent-line {
  font-family: "Literata", serif;
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: 1.4;
  margin: 2.4em 0;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
}

/* ---------- FAQ ---------- */
.faq { margin-top: 1em; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: "Literata", serif;
  font-size: var(--fs-md);
  color: var(--ink);
  transition: color .2s ease;
}
.faq summary:hover { color: var(--accent-tx); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq-body {
  overflow: hidden;
  padding: 0 44px 8px 0;
}
.faq-body p { margin: 0 0 18px; color: var(--ink-soft); }
.faq details[open] .faq-body { animation: fadeIn .4s ease; }

/* ---------- CTA / kaina ---------- */
.cta-wrap { text-align: center; }
.cta-wrap h2 { margin-bottom: 1em; }
.price-list {
  list-style: none;
  margin: 0 auto 2.2em;
  padding: 0;
  max-width: 440px;
  display: grid;
  text-align: left;
}
.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
}
.price-list li:first-child { border-top: 1px solid var(--line); }
.price-list span { color: #625a52; }
.price-list strong { text-align: right; font-weight: 500; }

/* Sąlygos prie registracijos: konfidencialumas, atšaukimas, grąžinimas.
   Tyliau nei pagrindinis tekstas, bet lengvai randama prieš apsisprendžiant. */
.terms {
  max-width: 480px;
  margin: 3.4rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: var(--fs-sm);
  color: #625a52;   /* 4.85:1 su --bg-cta fonu (WCAG AA) */
  line-height: 1.65;
}
.terms p { margin: 0 0 1em; }
.terms p:last-child { margin-bottom: 0; }
.terms strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Lipnus CTA ----------
   Telefone: pilno pločio juosta apačioje.
   Darbalaukyje: diskretiška plaukiojanti piliulė dešiniajame kampe,
   nes header'yje jau yra „Pokalbis" nuoroda.
   Kol nematomas, laikomas visibility:hidden, tad neklaidina nei
   klaviatūros tab tvarkos, nei ekrano skaitytuvo. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 247, 239, .95);
  backdrop-filter: saturate(1.2) blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(84, 63, 45, .12);
  transform: translateY(115%);
  visibility: hidden;
  transition: transform .35s ease, visibility .35s;
}
.sticky-cta.is-visible {
  transform: none;
  visibility: visible;
}
.sticky-cta-inner {
  max-width: var(--maxw-hero);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sticky-cta-text {
  margin: 0;
  line-height: 1.35;
  min-width: 0;
}
.sticky-cta-text strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.sticky-cta-text span {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.sticky-cta .btn {
  flex: 0 0 auto;
  padding: 12px 24px;
  font-size: var(--fs-sm);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(156, 86, 58, .24);
}
.sticky-cta .btn:hover { transform: none; }

@media (min-width: 861px) {
  .sticky-cta {
    left: auto;
    right: 24px;
    bottom: 24px;
    padding: 10px 10px 10px 24px;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow);
    transform: translateY(140%);
  }
  .sticky-cta.is-visible { transform: none; }
}

/* ---------- Footer ---------- */
footer {
  background: #2f2a24;
  color: #e8dfd1;
  padding: clamp(56px, 8vw, 90px) 0 44px;
  text-align: center;
}
/* Tamsiame fone --accent-dk fokuso žiedas duoda tik 2.58:1 → šviesus žiedas */
footer :focus-visible { outline-color: #f4ecdd; }

.footer-inner { display: grid; justify-items: center; gap: 4px; }
.footer-name {
  font-family: "Literata", serif;
  font-size: var(--fs-lg);
  color: #f4ecdd;
  margin: 0;
}
.footer-tag { color: #b7ac9a; margin: 0 0 1.4em; }
.socials {
  font-style: normal;
  display: flex;
  gap: 14px;
  margin-bottom: 1.6em;
}
.socials a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #e8dfd1;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.socials a:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.socials a:active {
  background: var(--accent-dk);
  color: #fff;
  transform: translateY(1px);
}
.footer-contact { margin: 0 0 1em; color: #cabfad; }
.footer-contact a { color: #e8dfd1; }
.footer-contact a:hover { color: #fff; }
.footer-copy { color: #a89d89; font-size: var(--fs-xs); margin: 0; }

/* ---------- Reveal animation ----------
   Slepiama tik kai JS patvirtintas (html.js). Be JS — turinys matomas.
   will-change čia nereikalingas: opacity ir transform jau yra kompozitoriaus
   savybės, o dešimtys elementų vienu metu su will-change tik eikvoja atmintį. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.in { opacity: 1; transform: none; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .about-wrap { grid-template-columns: 1fr; }
  /* Fiksuotas plotis, kad maketas nepriklausytų nuo sizes atributo */
  .about-portrait {
    width: 230px;
    max-width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  /* Navigacija čia persilaužia į dvi eilutes, tad tikrasis header'io
     aukštis yra ~97px, ne 72px. Nuo šio kintamojo priklauso ir
     scroll-padding-top, ir [id] scroll-margin-top. */
  :root { --header-h: 97px; }

  body { font-size: 1.0625rem; } /* 17px */

  /* Navigacija: visos nuorodos lieka pasiekiamos horizontaliai slenkančioje juostoje */
  .site-nav {
    flex-wrap: wrap;
    padding: 8px 18px 6px;
    gap: 6px;
  }
  .nav-links {
    order: 3;
    width: 100%;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li { display: list-item; }
  /* Liečiami taikiniai: CTA piliulė 44px, paprastos nuorodos virš 24px minimumo */
  .nav-links a { white-space: nowrap; display: inline-block; line-height: 1.2; padding: 7px 0; }
  /* CTA piliulė lieka pirmoje eilutėje su vardu, nuorodos slenka antroje */
  .nav-cta { padding: 12px 18px; line-height: 1.2; }

  /* Hero: pagrindinis CTA turi tilpti virš lankstos */
  .hero { padding: clamp(28px, 6vw, 96px) 0 clamp(56px, 9vw, 110px); }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .hero-text { order: 2; }
  .hero-portrait { order: 1; max-width: 152px; }
  .eyebrow { margin-bottom: .5em; }
  .lede {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.2em;
    line-height: 1.6;
  }
  /* Siaurame ekrane mygtuko etiketė turi tilpti į vieną eilutę */
  .btn { width: 100%; font-size: var(--fs-base); padding: 14px 22px; }
  /* Lipnioje juostoje mygtukas lieka šalia teksto, ne per visą plotį */
  .sticky-cta .btn { width: auto; padding: 12px 20px; font-size: var(--fs-sm); }
  .sticky-cta-inner { gap: 12px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  /* Telefone kaina rodoma iškart po pagrindiniu mygtuku */
  .hero-actions .cta-note { order: 0; text-align: center; }
  /* „Kaip tai veikia“ telefone lieka žemiau lankstos ir tik ilgina hero
     ekrane, kur lanksta svarbiausia. Darbalaukyje abu mygtukai vienoje
     eilutėje, tad ten jis lieka. */
  .hero-actions .btn-ghost { display: none; }

  .review { padding: 26px 24px; }
  .note { padding: 20px 22px; }
  .steps li { gap: 14px; }
}

/* Siauriausi ekranai: atlaisviname eilutės plotį sąrašuose */
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .steps li { gap: 12px; }
  .step-num { width: 30px; height: 30px; font-size: var(--fs-sm); }
  .review { padding: 24px 18px; }
  .note { padding: 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .btn:active,
  .socials a:hover, .socials a:active { transform: none; }
}