/* ================================================================
   vizitinesvetaine.lt — 2026
   Pilno ekrano blokai, scroll-driven animacijos, bento tinklelis.
   Viskas grynu CSS: jokio JS, jokių bibliotekų, jokio CDN.
   ================================================================ */

/* ---------------- Šriftai (self-hosted) ---------------- */
/* U+0304 ir U+0308 palikti abiejuose subsetuose — kitaip lūžta ū ir ė */

@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------- Kintamieji ---------------- */

:root {
  --ink:    #0d0f0c;
  --ink-2:  #171a15;
  --ink-3:  #23271f;
  --cream:  #f2efe4;
  --cream-2:#e7e2d2;
  --lime:   #d9f24b;
  --line-d: #2e332a;   /* linija ant tamsaus */
  --line-l: #d5cfba;   /* linija ant šviesaus */
  --dim-d:  #9aa094;   /* blankus ant tamsaus */
  --dim-l:  #6d6a5c;   /* blankus ant šviesaus */

  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 56px);

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  /* Tamsi tema ir naršyklės dalims: slinkties juostai, formos laukams. */
  color-scheme: dark;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
/* height: auto būtina: HTML height="694" naršyklėje veikia kaip
   height: 694px ir be šito nuotraukos tempiamos iki atributo aukščio. */
img, svg { max-width: 100%; height: auto; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); width: 100%; }

/* Peršokimo nuoroda: už ekrano, kol negauna fokuso. */
.persokti {
  position: absolute; left: var(--pad); top: -100px; z-index: 100;
  background: var(--lime); color: var(--ink); text-decoration: none;
  padding: 12px 18px; border-radius: 100px; font-weight: 600;
}
.persokti:focus { top: 12px; }

/* Fiksuota juosta uždengia elementą, į kurį naršyklė nuslenka jį
   fokusuodama. scroll-margin, o ne scroll-padding ant html: pastarasis
   pastumtų ir scroll-snap taškus, ir sekcijos snap'intųsi 90 px žemiau. */
a, button, input, textarea, summary { scroll-margin-top: 96px; }

.mono {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------------- Skaitymo progreso juosta ---------------- */

.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: var(--lime); transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: grow linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes grow { to { transform: scaleX(1); } }

/* ---------------- Meniu ---------------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px var(--pad);
  /* .85, o ne .72: virš šviesių sekcijų blankios meniu nuorodos su .72
     turėjo tik 3,1:1 kontrastą, su .85 yra 4,9:1. */
  background: rgba(13,15,12,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-d);
}
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -.03em; text-decoration: none; white-space: nowrap;
}
.wordmark b { font-weight: 400; color: var(--dim-d); }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-d); text-decoration: none; }
.nav-links a:hover { color: var(--lime); }
/* Šriftas ir pabraukimas nurodomi čia, o ne paveldimi iš .nav-links a:
   juostos variantas siaurame ekrane stovi už to sąrašo ribų. */
.nav-cta {
  background: var(--lime); color: var(--ink) !important; padding: 10px 18px;
  border-radius: 100px; font-weight: 500;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
}
.nav-cta:hover { background: #e6ff63; }

.meniu-mygtukas { display: none; }
.juostos-cta { display: none; }
.nav-desine { display: flex; align-items: center; }

.slinkties-jutiklis {
  position: absolute; top: 300px; left: 0;
  width: 1px; height: 1px; pointer-events: none;
}

/* ---------------- Blokai ---------------- */

.block {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 0 90px;
  scroll-snap-align: start;
  position: relative;
}
.block.light { background: var(--cream); color: var(--ink); }
.block.dark  { background: var(--ink); color: var(--cream); }
.block.deep  { background: var(--ink-2); color: var(--cream); }
.block.auto  { min-height: 0; padding: 90px 0; }

.block.light .mono { color: var(--dim-l); }
.block.dark .mono, .block.deep .mono { color: var(--dim-d); }

/* Sekcijos antgalvis */
.head { margin-bottom: clamp(28px, 4vw, 48px); }
.head .num { color: var(--lime); }
/* #5c720f, o ne #6c8412: senoji žalia ant cream turėjo 3,7:1, ant balto
   4,25:1. Ši duoda 4,7:1 ir 5,4:1. Ta pati spalva visur, kur žalia ant šviesaus. */
.block.light .head .num { color: #5c720f; }
.head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 6vw, 76px); line-height: .98; letter-spacing: -.035em;
  margin-top: 14px; max-width: 20ch;
  text-wrap: balance;
}
/* 62ch, kad ilgesni sakiniai tilptų į vieną eilutę; pretty neleidžia
   paskutiniam žodžiui likti vienam eilutėje, kai vis dėlto laužoma. */
.head p { margin-top: 18px; max-width: 62ch; color: var(--dim-d); font-size: 18px; text-wrap: pretty; }
/* .platus — kai po antgalviu eina dviejų stulpelių turinys ir siauras
   įvadas paliktų dešinę pusę tuščią. */
.head.platus p { max-width: none; }
.block.light .head p { color: var(--dim-l); }

/* ---------------- HERO ---------------- */

.hero { justify-content: flex-end; padding-bottom: 60px; }
.hero-top { flex: 1; display: flex; align-items: flex-end; }

.giant {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(52px, 13.5vw, 210px);
  /* -.05em buvo per tankiai: raidės fiziškai suaugdavo (SVETAINĖ virsdavo
     6 rašalo dėmėmis vietoj 9). -.025em — riba su atsarga visuose dydžiuose. */
  line-height: .95; letter-spacing: -.025em;
  text-transform: uppercase;
}
/* padding + neigiama paraštė: kaukė nenukerpa ė, ū, ž viršūnių */
.giant .row { display: block; overflow: hidden; padding-top: .16em; margin-top: -.16em; }
.giant .row span { display: block; will-change: transform; }
.giant em { font-style: normal; color: var(--lime); }

/* Optinis kerningas. Vienintelė pora, kuri kliūva: E–T žodyje SVETAINĖ —
   viršuje E ranka ir T skersinis beveik susiliečia. Reikšmė parinkta akimis
   per _kerning.html. Žymė apima „tainė", kad kerningas nutrūktų tik ties E|T,
   o likusios poros liktų tokios, kokias jas daro pats šriftas. */
.giant i { font-style: normal; }
.giant .k-et { margin-left: .014em; }

.hero-meta {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-d);
  /* center, o ne end: mygtukai turi vidinį tarpą, tad lygiuojant dėžučių
     apačias jų užrašai pakibdavo 16 px aukščiau už pastraipos tekstą. */
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 32px; align-items: center;
}
.hero-meta p { color: var(--dim-d); max-width: 42ch; }
.hero-meta .price-chip {
  font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.03em; line-height: 1;
}
.hero-meta .price-chip small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--dim-d); margin-top: 8px; text-transform: uppercase; font-weight: 400; }

.btn {
  display: inline-block; text-decoration: none; font-size: 16px; font-weight: 500;
  padding: 16px 30px; border-radius: 100px; border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: #e6ff63; }
.btn-line { border-color: var(--line-d); color: var(--cream); }
.block.light .btn-line { border-color: var(--line-l); color: var(--ink); }
.btn-line:hover { border-color: var(--lime); color: var(--lime); }

.scroll-cue {
  position: absolute; left: var(--pad); bottom: 22px;
  display: flex; align-items: center; gap: 10px; color: var(--dim-d);
}
.scroll-cue i {
  width: 1px; height: 26px; background: var(--dim-d); display: block;
  animation: cue 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue { 0%,100% { transform: scaleY(.3); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }

/* ---------------- Bėganti juosta ---------------- */

.marquee {
  position: relative;
  border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
  background: var(--ink-2); overflow: hidden; padding: 16px 0;
  scroll-snap-align: none;
}
.marquee-pauze {
  position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
  font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim-d); background: var(--ink-2);
  border: 1px solid var(--line-d); border-radius: 100px; padding: 9px 12px;
  cursor: pointer;
}
.marquee-pauze:hover { color: var(--lime); border-color: var(--lime); }
/* Stabdoma mygtuku, užvedus pelę (kad būtų galima perskaityti) ir kai
   juosta už ekrano ribų. */
.marquee.sustabdyta .marquee-track,
.marquee.nematoma .marquee-track,
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track { display: flex; width: max-content; animation: slide 34s linear infinite; }
.marquee-track span {
  font-family: var(--display); font-weight: 600; font-size: clamp(20px, 3vw, 34px);
  letter-spacing: -.02em; padding: 0 26px; white-space: nowrap; color: var(--cream);
}
.marquee-track span:nth-child(even) { color: var(--lime); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------------- BENTO ---------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tile {
  background: #fff; border: 1px solid var(--line-l); border-radius: 14px;
  padding: 26px; position: relative; overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.block.dark .tile, .block.deep .tile { background: var(--ink-2); border-color: var(--line-d); }
.tile:hover { transform: translateY(-4px); border-color: #9bb02e; box-shadow: 0 14px 30px rgba(13,15,12,.08); }
.block.dark .tile:hover, .block.deep .tile:hover { box-shadow: none; border-color: var(--lime); }

.tile h3 {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: -.02em; margin: 12px 0 8px;
}
.tile p { font-size: 15.5px; color: var(--dim-l); }
.block.dark .tile p, .block.deep .tile p { color: var(--dim-d); }

/* Trys lygios plytelės. Keturių stulpelių tinklelis trimis nesidalina,
   tad šitai eilei stulpelių skaičius keičiamas atskirai. */
.bento.trys { grid-template-columns: repeat(3, 1fr); }

.t-span2 { grid-column: span 2; }
.t-span3 { grid-column: span 3; }
.t-span4 { grid-column: 1 / -1; }
.t-row2  { grid-row: span 2; }
.t-lime  { background: var(--lime) !important; border-color: var(--lime) !important; color: var(--ink); }
.t-lime p, .t-lime .mono { color: #3d4a08 !important; }

/* Kaina su animuotu skaičiumi */
@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }

.bignum {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(64px, 11vw, 150px); line-height: .9; letter-spacing: -.05em;
  /* Vienodo pločio skaitmenys: skaičiuojant 0 → 299 plotis nešokinėja,
     o animuotas skaičius tiksliai uždengia tikrąjį tekstą. */
  font-variant-numeric: tabular-nums;
}
.bignum .cnt { position: relative; display: inline-block; }
/* HTML'e stovi tikras „299“. Tik jei naršyklė moka scroll-driven
   animacijas, jis padaromas permatomas ir ant viršaus dedamas skaitliukas.
   Anksčiau skaitliukas buvo vienintelis šaltinis, ir Safari iki 26 versijos
   bei senesnė Firefox rodė „0 €“. */
@supports (animation-timeline: view()) {
  .bignum .cnt {
    color: transparent;
    counter-reset: n var(--n);
    animation: count 1.1s cubic-bezier(.2,.7,.2,1) both;
    animation-timeline: view();
    animation-range: entry 12% cover 34%;
  }
  .bignum .cnt::after {
    content: counter(n);
    /* Alternatyvus tekstas tuščias, kad ekrano skaitytuvas skaičiaus
       neskaitytų du kartus. Kur sintaksė nepalaikoma, lieka eilutė viršuje. */
    content: counter(n) / "";
    position: absolute; left: 0; top: 0;
    color: var(--ink);
  }
}
@keyframes count { from { --n: 0 } to { --n: 299 } }
.bignum i { font-style: normal; font-size: .38em; letter-spacing: -.02em; }

/* žymių sąrašas */
.checks { list-style: none; margin-top: 6px; }
.checks li { padding: 8px 0 8px 26px; position: relative; font-size: 15.5px; border-top: 1px solid var(--line-l); }
.block.dark .checks li, .block.deep .checks li { border-color: var(--line-d); }
.checks li:first-child { border-top: none; }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: 16px; width: 10px; height: 5px;
  border-left: 2px solid #5c720f; border-bottom: 2px solid #5c720f; transform: rotate(-45deg);
}
.block.dark .checks li::before, .block.deep .checks li::before { border-color: var(--lime); }

/* žymos */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chips li {
  list-style: none; font-size: 13.5px; padding: 5px 12px; border-radius: 100px;
  border: 1px solid var(--line-l); color: var(--dim-l);
}
.block.dark .chips li, .block.deep .chips li { border-color: var(--line-d); color: var(--dim-d); }

/* ---------------- Eiga: dideli žingsniai ---------------- */

.steps { border-top: 1px solid var(--line-d); }
.step {
  display: grid; grid-template-columns: 120px 1fr 1.1fr; gap: 30px; align-items: start;
  padding: 34px 0; border-bottom: 1px solid var(--line-d);
  transition: background .2s ease;
}
.step:hover { background: rgba(217,242,75,.045); }
.step-n {
  font-family: var(--display); font-weight: 800; font-size: 46px; line-height: 1;
  letter-spacing: -.04em; color: var(--lime);
}
.step h3 { font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: -.025em; }
.step p { color: var(--dim-d); }

.rule {
  margin-top: 30px; padding: 24px 28px; border-radius: 14px;
  background: var(--lime); color: var(--ink); font-size: 17px;
}
.rule b { font-weight: 600; }

/* ---------------- Darbai ---------------- */

/* Tikros pavyzdinių puslapių ekrano nuotraukos. Rodoma tik viršutinė
   dalis (object-position: top), nes ten ir yra puslapio charakteris. */
.work-shot {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: top;
  border-radius: 10px; border: 1px solid var(--line-l);
  background: var(--cream-2); margin-bottom: 16px;
}

/* Plytelė kaip nuoroda */
a.tile { text-decoration: none; color: inherit; display: block; transition: border-color .18s ease, transform .18s ease; }
a.tile:hover { border-color: #5c720f; transform: translateY(-3px); }
a.tile:focus-visible { outline: 2px solid #5c720f; outline-offset: 3px; }

.atidaryti {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #5c720f;
}
.atidaryti::after { content: '→'; transition: transform .18s ease; }
a.tile:hover .atidaryti::after { transform: translateX(4px); }

/* ---------------- Atsiliepimai ---------------- */

.quote p { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -.015em; line-height: 1.4; }
.quote .who { margin-top: 12px; }

/* ---------------- DUK ---------------- */

.faq { margin-top: 18px; }
.faq details { border-bottom: 1px solid var(--line-l); }
.block.dark .faq details, .block.deep .faq details { border-color: var(--line-d); }
.faq details:first-child { border-top: 1px solid var(--line-l); }
.block.dark .faq details:first-child, .block.deep .faq details:first-child { border-top-color: var(--line-d); }
.faq summary {
  padding: 16px 0; cursor: pointer; font-size: 17px; font-weight: 500;
  list-style: none; display: flex; justify-content: space-between; gap: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #5c720f; }
.block.dark .faq summary:hover, .block.deep .faq summary:hover { color: var(--lime); }
.faq summary::after { content: "+"; font-family: var(--mono); color: #5c720f; font-size: 19px; }
.block.dark .faq summary::after, .block.deep .faq summary::after { color: var(--lime); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 18px; color: var(--dim-l); max-width: 64ch; font-size: 16px; }
/* Lengvas kontaktas po klausimų: viena eilutė, du veiksmai. */
.po-duk { margin-top: 22px; font-size: 16px; color: var(--dim-l); max-width: 64ch; text-wrap: pretty; }
.po-duk a { color: #5c720f; text-underline-offset: 3px; white-space: nowrap; }
.po-duk a:hover { color: var(--ink); }
.block.dark .faq details p, .block.deep .faq details p { color: var(--dim-d); }

/* ---------------- Kontaktai ---------------- */

.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-d); margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 16px;
  background: var(--ink-2); border: 1px solid var(--line-d); border-radius: 10px; color: var(--cream);
}
.field textarea { min-height: 118px; resize: vertical; }
/* #80867b: 4,7:1 ant lauko fono. Senasis #6b7166 turėjo 3,5:1. */
.field input::placeholder, .field textarea::placeholder { color: #80867b; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--lime); outline-offset: -1px; border-color: var(--lime); }
.form-note { margin-top: 12px; font-size: 13.5px; color: var(--dim-d); }
.form-note.privatumas { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-d); max-width: none; }
.form-note.ok, .form-note.err {
  border-left: 3px solid; padding: 10px 0 10px 12px; font-size: 14.5px;
}
.form-note.ok  { border-color: var(--lime); color: var(--lime); }
.form-note.err { border-color: #f2705b; color: #f2705b; }
form button[disabled] { opacity: .55; cursor: progress; }

.info { border: 1px solid var(--line-d); border-radius: 14px; padding: 26px; background: var(--ink-2); }
.info + .info { margin-top: 16px; }
.info h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; margin-bottom: 14px; }
.info ul { list-style: none; }
.info li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line-d); font-size: 15.5px; }
.info li:first-child { border-top: none; }
.info .v { color: var(--dim-d); text-align: right; }
.socials { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.socials a { font-size: 14px; text-decoration: none; border: 1px solid var(--line-d); border-radius: 100px; padding: 8px 16px; color: var(--lime); }
.socials a:hover { border-color: var(--lime); }

/* ---------------- Poraštė ---------------- */

.foot {
  border-top: 1px solid var(--line-d); padding: 28px 0;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  color: var(--dim-d); font-size: 14px;
}

.rekvizitai {
  border-top: 1px solid var(--line-d); padding: 22px 0 0;
  display: flex; align-items: baseline; gap: 8px 20px; flex-wrap: wrap;
  color: var(--dim-d); font-size: 13px;
}
.rekvizitai .mono { color: var(--dim-d); opacity: .7; }
.rekvizitai a { color: var(--dim-d); text-decoration: none; border-bottom: 1px solid var(--line-d); }
.rekvizitai a:hover { color: var(--lime); border-color: var(--lime); }
.foot a:hover, .form-note.privatumas a:hover { color: var(--lime); }

/* ================================================================
   SCROLL-DRIVEN ATSKLEIDIMAI
   Tik jei naršyklė palaiko — kitaip turinys tiesiog matomas.
   ================================================================ */

@supports (animation-timeline: view()) {
  .reveal {
    animation: rise .8s cubic-bezier(.16,.84,.3,1) both;
    animation-timeline: view();
    animation-range: entry 4% cover 26%;
  }
  .bento > .tile {
    animation: rise .7s cubic-bezier(.16,.84,.3,1) both;
    animation-timeline: view();
    animation-range: entry 2% cover 24%;
  }
  .bento > .tile:nth-child(2) { animation-range: entry 4% cover 27%; }
  .bento > .tile:nth-child(3) { animation-range: entry 6% cover 30%; }
  .bento > .tile:nth-child(4) { animation-range: entry 8% cover 33%; }
  .step {
    animation: rise .7s cubic-bezier(.16,.84,.3,1) both;
    animation-timeline: view();
    animation-range: entry 2% cover 22%;
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Hero įėjimas — pakopomis */
.giant .row span { animation: heroIn .9s cubic-bezier(.16,.84,.3,1) both; }
.giant .row:nth-child(1) span { animation-delay: .05s }
.giant .row:nth-child(2) span { animation-delay: .16s }
.giant .row:nth-child(3) span { animation-delay: .27s }
.hero-meta > * { animation: heroIn .9s cubic-bezier(.16,.84,.3,1) both; animation-delay: .42s; }
@keyframes heroIn { from { transform: translateY(105%); opacity: 0 } to { transform: none; opacity: 1 } }

/* ================================================================
   MOBILUS
   ================================================================ */

@media (max-width: 900px) {
  html { scroll-snap-type: none; }
  .block { min-height: 0; padding: 88px 0 64px; }
  .hero { min-height: 92svh; padding-bottom: 48px; }
  .hero-meta { grid-template-columns: 1fr; gap: 22px; }
  .bento, .bento.trys { grid-template-columns: 1fr; }
  .t-span2, .t-span3, .t-row2 { grid-column: auto; grid-row: auto; }
  .step { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .step-n { font-size: 34px; }
  .contact { grid-template-columns: 1fr; gap: 30px; }
  .nav-desine {
    position: relative;
    min-height: 44px;
    justify-content: flex-end;
  }

  .juostos-cta {
    display: inline-block;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav.slinkta .juostos-cta {
    visibility: hidden; opacity: 0; transform: scale(.92);
  }

  .meniu-mygtukas {
    /* Absoliučiai virš „Susisiekti": taip persileidžiant juosta nešoka,
       nes plotį visą laiką nustato platesnysis iš dviejų. */
    position: absolute; right: 0; top: 50%;
    display: grid; place-items: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    background: none; border: 1px solid var(--line-d); border-radius: 100px;
    cursor: pointer; padding: 0;
    /* Puslapio viršuje meniu nereikalingas: žmogus ką tik atėjo ir jam
       rūpi tik „Susisiekti". Mygtukas parodomas tik nuslinkus žemyn.
       Slepiama per visibility, kad nebūtų pasiekiamas ir klaviatūra. */
    visibility: hidden; opacity: 0;
    transform: translateY(-50%) scale(.8);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav.slinkta .meniu-mygtukas {
    visibility: visible; opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  /* Trys brūkšneliai iš vieno elemento ir dviejų pseudoelementų. Reikia
     būtent jų, o ne šešėlių: atidarant viršutinis ir apatinis sukasi į
     priešingas puses, o šešėlio atskirai pasukti negalima. */
  .meniu-mygtukas span {
    position: relative;
    display: block; width: 17px; height: 1.5px; background: var(--cream);
    transition: background .18s;
  }
  .meniu-mygtukas span::before,
  .meniu-mygtukas span::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1.5px;
    background: var(--cream);
    transition: transform .18s, background .18s;
  }
  .meniu-mygtukas span::before { top: -5.5px; }
  .meniu-mygtukas span::after { top: 5.5px; }

  .meniu-mygtukas[aria-expanded="true"] span { background: transparent; }
  .meniu-mygtukas[aria-expanded="true"] span::before {
    background: var(--lime); transform: translateY(5.5px) rotate(45deg);
  }
  .meniu-mygtukas[aria-expanded="true"] span::after {
    background: var(--lime); transform: translateY(-5.5px) rotate(-45deg);
  }

  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--pad) 18px;
    background: var(--ink-2);
    border-bottom: 1px solid var(--line-d);
    /* clip, o ne display:none, kad liktų perėjimas ir kad naršyklė
       galėtų rasti nuorodas paieškoje puslapyje. */
    visibility: hidden; opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s, transform .18s, visibility .18s;
  }
  .nav-links.atverta { visibility: visible; opacity: 1; transform: none; }

  .nav-links a:not(.nav-cta) {
    padding: 15px 2px;
    font-size: 13px;
    border-bottom: 1px solid var(--line-d);
    color: var(--cream);
  }
  .nav-links .nav-cta { margin-top: 16px; text-align: center; padding: 14px 18px; }
  .scroll-cue { display: none; }
  .info .v { text-align: left; }
}

@media (max-width: 560px) {
  .info li { flex-direction: column; gap: 2px; }
}

/* ================================================================
   MAŽIAU JUDESIO
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .marquee-track { animation: none; }
  .marquee-pauze { display: none; }
  .giant .row span, .hero-meta > * { opacity: 1; transform: none; }
}

/* ================================================================
   SUTIKIMAS DĖL SEKIMO

   Meta pikselis rašo slapuką, tad Lietuvoje jis gali krautis tik
   gavus sutikimą. Juosta rodoma tik tada, kai index.html įrašytas
   pikselio numeris. Kol jo nėra, svetainė elgiasi kaip anksčiau.
   ================================================================ */

.sutikimas {
  position: fixed;
  left: var(--pad); right: var(--pad); bottom: 20px;
  z-index: 90;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 18px 20px;
  background: var(--ink-2);
  border: 1px solid var(--line-d);
  color: var(--cream);
  font-size: 14px;
  line-height: 1.55;
}

.sutikimas p { margin: 0; flex: 1 1 260px; color: var(--dim-d); }
.sutikimas strong { color: var(--cream); font-weight: 600; }

.sutikimas .mygtukai { display: flex; gap: 10px; flex: 0 0 auto; }

.sutikimas button {
  font: 600 13px/1 var(--body);
  padding: 11px 16px;
  border: 1px solid var(--line-d);
  background: none;
  color: var(--cream);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.sutikimas button:hover { border-color: var(--lime); color: var(--lime); }

.sutikimas button.taip {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.sutikimas button.taip:hover { background: #e6ff63; color: var(--ink); }

@media (max-width: 560px) {
  .sutikimas { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
  .sutikimas .mygtukai { width: 100%; }
  .sutikimas button { flex: 1; }
}