/* Premium 2026 – švarus, 12 stulpelių tinklelis, 3 paletės iš reels konspekto (config.js `palete`). Spalvos – config.js → node irankiai/sablonas-taikyti.mjs .
   5c: 2 nuotaikos spalvos (fonas 60 % + antra 30 %) + 1 akcentas (10 %) – TIK CTA, <mark> raktiniam žodžiui, rodyklei.
   5d: šriftai – config.js sriftai (cfg:sriftai blokas žemiau, irankiai/sriftai/katalogas.mjs).
   11b: įėjimai expo-out, išėjimai ease-in, sąsaja – spyruoklė; linear – tik scroll-scrub ir nuolatinė juosta.
   Įdomybės (po vieną sekcijai): slinkimo progresas, magnetiniai mygtukai, kursoriaus šviesa, skaičiai suskaičiuoja, bėganti juosta,
   žodžių kaukė, horizontali eigos juosta, 3D tilt, prieš / po slankiklis, prisipildantis kontūrinis žodis. */
/*cfg:sriftai*/
@font-face{font-family:"Big Shoulders";src:url(fonts/big-shoulders-display-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Big Shoulders";src:url(fonts/big-shoulders-display-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:"Archivo";src:url(fonts/archivo-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:"Big Shoulders fb-d";src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:74.23%;ascent-override:132.55%;descent-override:28.69%;line-gap-override:0%}
@font-face{font-family:"Archivo fb-t";src:local("Arial"),local("ArialMT");size-adjust:99.74%;ascent-override:88.03%;descent-override:21.05%;line-gap-override:0%}
:root{--f-display:"Big Shoulders","Big Shoulders fb-d",sans-serif;--f-d:var(--f-display);--f-body:"Archivo","Archivo fb-t",system-ui,sans-serif;--f-b:var(--f-body);--f-d-w:800;--f-d-w0:500;--f-d-case:uppercase;--f-d-track:-.005em;--f-d-track0:calc(-.005em + .04em);--f-d-lh:.93;--f-d-ital:normal}
/*/cfg:sriftai*/

/*cfg:spalvos*/:root{--schema:dark;--schema-antrai:dark;--fonas:#01010D;--antra:#6331FB;--tekstas:#F2F0FA;--tekstas-antrai:#FFFFFF;--blankus:#A3A0B8;--akcentas:#88F9C0;--akcento-tekstas:#01010D;--akcentas-antrai:#88F9C0;--akcento-tekstas-antrai:#01010D;--klaida:#FF9B8F;--klaida-antrai:#FFE3DE}/*/cfg:spalvos*/
/* Paviršiai: kiekviena sekcija yra ant „fono“ (60 %) arba „antros“ (30 %) spalvos. Viduje naudojami tik --bg/--tx/--dim/--ak/--ak-t/--ln,
   todėl ta pati sekcija teisingai atrodo su bet kuria palete (tamsia, šviesia, oranžine). Akcentas (10 %) – TIK CTA, <mark>, rodyklė. */
:root, .s-f, .dk__list a, .ok {
  --bg: var(--fonas); --tx: var(--tekstas); --dim: var(--blankus); --ak: var(--akcentas); --ak-t: var(--akcento-tekstas); --err: var(--klaida);
  --ln: color-mix(in srgb, var(--tx) 13%, transparent); --in: color-mix(in srgb, var(--tx) 5%, var(--bg));
}
.s-a, .dk, .pr, .faq, .form, .ba__cap {
  --bg: var(--antra); --tx: var(--tekstas-antrai); --dim: color-mix(in srgb, var(--tekstas-antrai) 88%, var(--antra)); --ak: var(--akcentas-antrai); --ak-t: var(--akcento-tekstas-antrai); --err: var(--klaida-antrai);
  --ln: color-mix(in srgb, var(--tx) 18%, transparent); --in: color-mix(in srgb, var(--tx) 7%, var(--bg));
  background: var(--bg); color: var(--tx); color-scheme: var(--schema-antrai);
}
:root {
  --wrap: 1240px; --gut: 1.5rem;
  --r: 14px;                                   /* vienas kampų spindulys visur (nuotraukos, kortelės, forma); mygtukai – piliulės */
  /* tarpai ×1,25 (clean: daugiau oro) */
  --s-1: .625rem; --s-2: 1.25rem; --s-3: 1.875rem; --s-4: 2.5rem; --s-5: 3.75rem; --s-6: 6.25rem; --s-7: 10rem;
  --sh: 0 30px 60px -36px rgb(0 0 0 / .55);
  --e-in: cubic-bezier(0.16, 1, 0.3, 1);       /* įėjimai */
  --e-out: cubic-bezier(0.7, 0, 0.84, 0);      /* išėjimai */
  --e-ui: cubic-bezier(0.34, 1.56, 0.64, 1);   /* sąsaja – spyruoklė, mažas peršokimas */
  color-scheme: var(--schema);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 1.0625rem/1.65 var(--f-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }

/* 5d Premium tipografija: šriftų pora – config.js `sriftai` (irankiai/sriftai/katalogas.mjs). --f-d-* – antraštės charakteris pagal šriftą. */
h1, h2, h3 { font-family: var(--f-d); font-weight: var(--f-d-w); line-height: var(--f-d-lh); letter-spacing: var(--f-d-track); text-transform: var(--f-d-case); text-wrap: balance; margin: 0; font-optical-sizing: auto; }
h1 mark, h2 mark { font-style: var(--f-d-ital); }
p, li, dd { text-wrap: pretty; hyphens: manual; }
b, dd, .num { font-variant-numeric: tabular-nums lining-nums; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    h2 { animation: wv both cubic-bezier(0.16, 1, 0.3, 1); animation-timeline: view(); animation-range: entry 0% entry 90%; }
    @keyframes wv { from { font-variation-settings: "wght" var(--f-d-w0); letter-spacing: var(--f-d-track0); } to { font-variation-settings: "wght" var(--f-d-w); letter-spacing: var(--f-d-track); } }
  }
}
a { color: inherit; }
mark { background: var(--ak); color: var(--ak-t); padding: .06em .14em 0; border-radius: .08em; display: inline-block; transform: rotate(-1.5deg); line-height: 1; }
.wrap { width: min(var(--wrap), 100% - 3rem); margin-inline: auto; }
/* 12 stulpelių tinklelis – visos dviejų stulpelių sekcijos ant jo */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--s-4); }
.mono { font-size: .8125rem; letter-spacing: .08em; text-transform: lowercase; color: var(--dim); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ak); color: var(--ak-t); padding: .7rem 1rem; border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--tx); outline-offset: 3px; border-radius: 4px; }
.kicker { display: flex; align-items: center; gap: .7rem; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: var(--s-3); }
body { counter-reset: sk; }
main section:not(.hero) .kicker::before { counter-increment: sk; content: counter(sk, decimal-leading-zero) " —"; content: counter(sk, decimal-leading-zero) " —" / ""; color: var(--tx); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* Mygtukai – akcentas tik čia. Magnetinis (main.js, tik pelė): --mx/--my, grįžta spyruokle */
.btn { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .75rem 1.3rem; border-radius: 999px; border: 0; background: var(--ak); color: var(--ak-t); font: 650 .9375rem/1 var(--f-body); text-decoration: none; cursor: pointer; transform: translate(var(--mx), var(--my)); transition: transform .55s var(--e-ui); }
.btn svg { width: 18px; height: 18px; transition: transform .45s var(--e-ui); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translate(var(--mx), var(--my)) scale(.97); }
.btn.is-mag { transition: transform .12s linear; }
.btn--lg { min-height: 56px; padding: 1rem 1.7rem; font-size: 1rem; }
.btn--ghost { background: transparent; color: var(--tx); box-shadow: inset 0 0 0 1.5px var(--ln); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--tx); }

/* Slinkimo progresas (CSS scroll-driven – kompozitoriuje, be JS; linear leidžiama – pririšta prie slinkimo) */
.prog { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; background: var(--tx); transform-origin: left; transform: scaleX(0); opacity: .9; pointer-events: none; display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .prog { display: block; animation: prog linear both; animation-timeline: scroll(root); } }
  @keyframes prog { to { transform: scaleX(1); } }
}

/* Antraštė */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .4s ease, box-shadow .4s ease; }
.hd.is-stuck { background: color-mix(in srgb, var(--fonas) 94%, transparent); box-shadow: 0 1px 0 var(--ln); }
.hd__in { display: flex; align-items: center; gap: var(--s-4); height: 84px; }
.mark { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.mark__ico { width: 34px; height: 34px; color: var(--tx); }
.mark b { display: block; font: var(--f-d-w) 1.6rem/1 var(--f-display); text-transform: var(--f-d-case); }
.mark small { display: block; font-size: .75rem; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.nav { display: flex; gap: var(--s-3); }
.nav a { text-decoration: none; font-size: .9375rem; color: var(--dim); transition: color .2s ease; }
.nav a:hover { color: var(--tx); }
.hd__tel { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.hd__tel svg { width: 18px; height: 18px; color: var(--dim); }

/* 5e PLAKATAS (Žilvino etalonas): sluoksniai fonas → milžiniškas pavadinimas (h1) → išskirtas automobilis → šešėlis → tekstas.
   Fono ir iškarpos dėžė identiška (.pl__l): 3:2, dengia ekraną, fokusas --fx/--fy; žodžio apačia – iškarpos --zy aukštyje (pusiau už objekto).
   Slenkant: fonas atsilieka labiausiai, žodis – mažiau, automobilis juda su puslapiu → raidės „nugrimzta“ už jo. Premium – be 3D sukimo. */
.hero { --W: max(100vw, 165svh); --H: calc(var(--W) / 1.5); position: relative; height: 100vh; height: 100svh; min-height: 620px; max-height: 1200px; overflow: hidden; isolation: isolate; background: var(--fonas); display: grid; align-items: end; }
.pl { position: absolute; inset: 0; overflow: hidden; }
.pl::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 4; height: 190px; background: linear-gradient(180deg, color-mix(in srgb, var(--fonas) 82%, transparent), transparent); pointer-events: none; }
.pl__l { position: absolute; width: var(--W); height: var(--H); left: clamp(calc(100% - var(--W)), calc(50% - var(--fx) * var(--W)), 0px); top: clamp(calc(100% - var(--H)), calc(50% - var(--fy) * var(--H)), 0px); }
.pl__l img { width: 100%; height: 100%; }
.pl__bg { z-index: 1; } .pl__obj { z-index: 3; pointer-events: none; }
.pl__word { position: absolute; z-index: 2; left: 0; right: 0; margin: 0; text-align: center; line-height: .78; color: var(--fonas); letter-spacing: -.01em;
  top: calc(clamp(calc(100% - var(--H)), calc(50% - var(--fy) * var(--H)), 0px) + var(--zy) * var(--H)); transform: translateY(-82%); }
.pl__w { display: inline-block; font-size: clamp(6rem, 24vw, 30rem); white-space: nowrap; }
.pl__shade { position: absolute; inset: auto 0 0; z-index: 4; height: 46%; background: linear-gradient(0deg, var(--fonas) 4%, color-mix(in srgb, var(--fonas) 72%, transparent) 42%, transparent); pointer-events: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hero__in { position: relative; z-index: 5; padding-bottom: var(--s-5); align-items: end; }
.hero__txt { grid-column: 1 / 8; }
.hero__side { grid-column: 8 / -1; }
.hero .kicker { color: var(--tx); }
.hero__lead { font: var(--f-d-w) clamp(2.4rem, 4.4vw, 4.6rem)/var(--f-d-lh) var(--f-d); text-transform: var(--f-d-case); letter-spacing: var(--f-d-track); text-wrap: balance; }
.hero__lead mark { margin: .04em .1em .04em 0; }
.hero__sub { font-size: 1.0625rem; color: var(--dim); max-width: 40ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.hero__cta .lnk { color: var(--tx); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ln); text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: text-decoration-color .25s ease; }
.hero__cta .lnk:hover { text-decoration-color: var(--tx); }
@media (prefers-reduced-motion: no-preference) {
  /* įėjimas (11b – expo-out): fonas nusistovi, raidės iškyla iš už automobilio, automobilis atrieda; tik transform */
  .pl__bg img { animation: pl-bg 2.4s var(--e-in) both; }
  .pl__w { animation: pl-w 1.5s var(--e-in) .15s backwards; }
  .pl__obj img { animation: pl-obj 1.7s var(--e-in) .05s backwards; }
  .hero__txt, .hero__side { animation: rise 1.1s var(--e-in) .7s backwards; } .hero__side { animation-delay: .85s; }
  /* slenkant – gylis (scroll-driven, kompozitoriuje; linear – pririšta prie slinkimo) */
  @supports (animation-timeline: scroll()) {
    .pl__bg, .pl__word, .pl__obj { animation: linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    .pl__bg { animation-name: px-bg; } .pl__word { animation-name: px-w; } .pl__obj { animation-name: px-obj; }
  }
}
@keyframes pl-bg { from { transform: scale(1.08); } }
@keyframes pl-w { from { transform: translateY(38%); } }
@keyframes pl-obj { from { transform: translateX(7%); } }
@keyframes px-bg { to { transform: translateY(38svh) scale(1.04); } }
@keyframes px-w { from { transform: translateY(-82%); } to { transform: translateY(calc(-82% + 24svh)); } }
@keyframes px-obj { to { transform: translateY(8svh); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* 5e ISTORIJA – 3 scenos užsikloja (sticky), viena nuotrauka + vienas sakinys */
.story { position: relative; background: var(--fonas); }
.st { position: relative; height: 150vh; height: 150svh; }
.st__in { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; align-items: end; isolation: isolate; }
.st__img { position: absolute; inset: 0; z-index: -1; }
.st__img img { width: 100%; height: 100%; object-fit: cover; }
.st__in::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--fonas) 88%, transparent) 0%, color-mix(in srgb, var(--fonas) 30%, transparent) 45%, transparent 70%); }
.st__t { padding-bottom: var(--s-6); }
.st__n { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tx); margin-bottom: var(--s-2); font-variant-numeric: tabular-nums; }
.st h2 { font-size: clamp(3rem, 7.2vw, 8rem); max-width: 14ch; color: var(--tx); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .st { view-timeline: --st block; }
    .st__img img { animation: st-zoom linear both; animation-timeline: --st; animation-range: entry 0% exit 0%; }
    .st__t { animation: st-t linear both; animation-timeline: --st; animation-range: entry 40% entry 100%; }
  }
}
@keyframes st-zoom { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes st-t { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }

/* Kursoriaus šviesa (tik pelė, main.js): iš anksto nupieštas radialinis sluoksnis, juda tik transform */
.lite { position: absolute; left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--antra) 34%, transparent), transparent); opacity: 0; transition: opacity .6s ease; }
.lite.on { opacity: 1; }

/* Bėganti paslaugų juosta (nuolatinis judesys – linear leidžiama, 11b) */
.mq { overflow: hidden; border-block: 1px solid var(--ln); padding: var(--s-3) 0; }
.mq__t { display: flex; width: max-content; animation: mq 48s linear infinite; }
.mq ul { display: flex; list-style: none; margin: 0; padding: 0; }
.mq li { display: flex; align-items: center; gap: var(--s-3); padding-right: var(--s-3); font: var(--f-d-w) clamp(1.6rem, 2.6vw, 2.4rem)/1 var(--f-display); text-transform: var(--f-d-case); white-space: nowrap; }
.mq li::after { content: ""; width: .32em; height: .32em; border-radius: 50%; background: var(--dim); }
.mq:hover .mq__t { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* Žodžio kaukės išryškėjimas (main.js suskaido h2 į žodžius; ne h1 – LCP). Kaukė su vieta diakritikams (Ž Š Č Ė) */
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .16em; margin-top: -.16em; padding-bottom: .06em; margin-bottom: -.06em; }
.mw > span { display: inline-block; transition: transform 1.1s var(--e-in); transition-delay: calc(var(--w, 0) * 60ms); }
.js .wm:not(.on) .mw > span { transform: translateY(112%); }

/* 11a – skydelis (antra spalva: viena ryški „scena“ puslapyje) */
.dk { position: relative; }
.dk__head { padding: var(--s-7) 0 var(--s-5); }
.dk__head h2, .pr h2, .flow h2, .why h2, .faq h2, .ct h2 { font-size: clamp(2.8rem, 5.2vw, 5.2rem); }
.dk__head p { max-width: 52ch; color: var(--dim); margin-top: var(--s-3); font-size: 1.125rem; }
.dk__list { list-style: none; margin: 0 auto; padding: 0 0 var(--s-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.dk__list a { display: flex; flex-direction: column; height: 100%; text-decoration: none; border-radius: var(--r); overflow: hidden; background: var(--bg); color: var(--tx); }
.dk__list img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.dk__n { display: flex; gap: .7rem; align-items: baseline; padding: 1.25rem 1.4rem .4rem; font: var(--f-d-w) 1.6rem/1.05 var(--f-display); text-transform: var(--f-d-case); }
.dk__n b { color: var(--dim); font-size: 1rem; }
.dk__d { padding: 0 1.4rem; color: var(--dim); font-size: .9375rem; flex: 1; }
.dk__p { padding: 1.1rem 1.4rem 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-on .dk__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
.dk__pin { display: none; }
.dk-on .dk__pin { display: block; height: 420vh; }
.dk__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.dk__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; transition: opacity 1s var(--e-in); }
.dk-on .dk:not(.is-ready) canvas { opacity: 0; }
.dk__act { position: absolute; left: max(2rem, calc((100vw - var(--wrap)) / 2)); top: 50%; transform: translateY(-50%); width: min(360px, 28vw); z-index: 2; padding: 1.9rem; border-radius: var(--r); background: var(--bg); box-shadow: inset 0 0 0 1px var(--ln), var(--sh); }
.dk__no { font: var(--f-d-w) 1rem/1 var(--f-display); color: var(--dim); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.dk__no b { color: var(--tx); }
.dk__name { font-size: clamp(2.2rem, 3.2vw, 3.2rem); margin-top: var(--s-2); }
.dk__desc { color: var(--dim); margin-top: var(--s-2); min-height: 6.4em; font-size: .9875rem; }
.dk__price { margin-top: var(--s-2); font-size: .875rem; }
.dk__price b { color: var(--tx); font-weight: 650; }
.dk__act .btn { margin-top: var(--s-3); }
.dk__act.is-swap .dk__name, .dk__act.is-swap .dk__desc, .dk__act.is-swap .dk__price { animation: rise .7s var(--e-in) both; }
.dk__act.is-swap .dk__desc { animation-delay: .04s; } .dk__act.is-swap .dk__price { animation-delay: .08s; }
.dk__modes { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 2; display: flex; gap: 4px; padding: 5px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--ln); border-radius: 999px; }
.dk__modes button { appearance: none; border: 0; background: transparent; color: var(--dim); font: 600 .9375rem/1 var(--f-body); padding: .75rem 1.1rem; border-radius: 999px; cursor: pointer; transition: background-color .25s ease, color .25s ease, transform .45s var(--e-ui); }
.dk__modes button:hover { color: var(--tx); }
.dk__modes button:active { transform: scale(.95); }
.dk__modes button[aria-pressed="true"] { background: var(--tx); color: var(--bg); }
.dk__hint { position: absolute; right: max(2rem, calc((100vw - var(--wrap)) / 2)); bottom: 2.6rem; z-index: 2; }

/* WOW „Diagnostikos skenas“ – prisegta scena (sticky, CLS 0), viskas pririšta prie slinkimo (linear leidžiama – scroll-scrub) */
.scan { position: relative; }
.scan__pin { padding: var(--s-6) 0; }
.scan .g12 { align-items: center; }
.scan__txt { grid-column: 1 / 5; }
.scan__txt h2 { font-size: clamp(2.8rem, 4.6vw, 4.6rem); }
.scan__txt > p { color: var(--dim); margin: var(--s-3) 0; max-width: 34ch; }
.scan__log { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: .2rem; }
.scan__log li { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--ln); }
.scan__log li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--tx); transform-origin: 0 50%; }
.scan__log b { font-weight: 600; }
.scan__log span { color: var(--dim); font-size: .9375rem; }
.scan__fig { grid-column: 5 / 13; position: relative; margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 2; background: #0a0c10; }
.scan__fig > picture img, .scan__xi img { width: 100%; height: 100%; object-fit: cover; }
.scan__x { position: absolute; inset: 0; overflow: hidden; transform: translateX(-50%); }
.scan__xi { position: absolute; inset: 0; transform: translateX(50%); }
.scan__line { position: absolute; inset: 0; pointer-events: none; transform: translateX(50%); }
.scan__line::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #fff; }
.scan__line::after { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .16)); }
.scan__pt { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: .55rem; padding: .45rem .8rem .45rem .5rem; border-radius: 999px; background: rgb(10 12 16 / .78); color: #fff; font-size: .8125rem; font-weight: 600; white-space: nowrap; transform-origin: 0 50%; }
.scan__pt i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / .22); }
.scan__pt--bad i { background: var(--akcentas); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akcentas) 35%, transparent); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 961px) {
    .scan { height: 280vh; view-timeline: --scan block; }
    .scan__pin { position: sticky; top: 0; min-height: 100vh; display: grid; align-items: center; }
    .scan__x, .scan__xi, .scan__line, .scan__pt, .scan__log li::before { animation: linear both; animation-timeline: --scan; }
    .scan__x { animation-name: sx; animation-range: contain 8% contain 88%; }
    .scan__xi { animation-name: sxi; animation-range: contain 8% contain 88%; }
    .scan__line { animation-name: sl; animation-range: contain 8% contain 92%; }
    .scan__pt { animation-name: pt; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
    .scan__pt:nth-of-type(1) { animation-range: contain 30% contain 37%; }
    .scan__pt:nth-of-type(2) { animation-range: contain 48% contain 55%; }
    .scan__pt:nth-of-type(3) { animation-range: contain 63% contain 70%; }
    .scan__log li::before { animation-name: lg; }
    .scan__log li:nth-child(1)::before { animation-range: contain 30% contain 37%; }
    .scan__log li:nth-child(2)::before { animation-range: contain 48% contain 55%; }
    .scan__log li:nth-child(3)::before { animation-range: contain 63% contain 70%; }
  }
}
@keyframes sx { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes sxi { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sl { 0% { transform: translateX(0); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes pt { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes lg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Kainos – WOW „Užliejimas“: antra spalva išsilieja ratu iš kairio viršutinio kampo (scale, scroll-driven) */
.pr { padding: var(--s-7) 0; position: relative; isolation: isolate; overflow: clip; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pr { background: var(--fonas); view-timeline: --pr block; }
    .pr::before { content: ""; position: absolute; z-index: -1; left: -150vmax; top: -150vmax; width: 300vmax; height: 300vmax; border-radius: 50%; background: var(--antra);
      transform: scale(0); animation: flood linear both; animation-timeline: --pr; animation-range: entry 12% entry 92%; }
  }
}
@keyframes flood { from { transform: scale(.02); } to { transform: scale(1); } }
.pr .g12 { align-items: start; }
.pr__side { grid-column: 1 / 6; position: sticky; top: 120px; }
.pr__side p { color: var(--dim); margin: var(--s-3) 0 var(--s-4); max-width: 38ch; }
.pr__list { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ln); }
.pr__list li { display: flex; align-items: baseline; gap: var(--s-2); padding: 1.35rem 0; border-bottom: 1px solid var(--ln); font-size: 1.0625rem; }
.pr__list i { flex: 1; border-bottom: 1px dashed var(--ln); transform: translateY(-4px); }
.pr__list b { font: var(--f-d-w) 1.6rem/1 var(--f-display); letter-spacing: var(--f-d-track); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Eiga – horizontaliai slenkanti juosta (kompiuteryje sekcija prisegama, juosta juda su slinkimu; CSS view-timeline, transform) */
.flow { padding: var(--s-6) 0; view-timeline-name: --flow; }
.flow__steps { list-style: none; width: min(var(--wrap), 100% - 3rem); margin: var(--s-5) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gut); }
.step { position: relative; padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r); background: color-mix(in srgb, var(--tx) 4%, var(--bg)); box-shadow: inset 0 0 0 1px var(--ln); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--e-ui); }
.step.is-tilt { transition: transform .1s linear; }
.step__no { display: block; font: var(--f-d-w) clamp(3.5rem, 6vw, 6rem)/.9 var(--f-display); color: transparent; -webkit-text-stroke: 1px var(--dim); margin-bottom: var(--s-3); }
.step h3 { font-size: 2rem; }
.step p { color: var(--dim); margin-top: var(--s-2); font-size: .9875rem; }
@supports (animation-timeline: view()) {
  @media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
    .flow { height: 260vh; padding: 0; }
    .flow__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
    .flow__steps { display: flex; width: max-content; margin-left: 0; margin-right: 0; gap: var(--gut); padding-left: max(1.5rem, calc((100vw - var(--wrap)) / 2)); padding-right: 12vw;
      animation: hz linear both; animation-timeline: --flow; animation-range: contain 0% contain 100%; }
    .step { width: min(440px, 34vw); min-height: 46vh; display: flex; flex-direction: column; justify-content: flex-end; }
    @keyframes hz { to { transform: translateX(calc(-100% + 100vw)); } }
  }
}

/* Prieš / po + ką gaunate */
.why { padding: var(--s-7) 0; }
.why .g12 { align-items: center; }
.ba { grid-column: 1 / 7; position: relative; margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 5 / 4; touch-action: pan-y; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__top { position: absolute; inset: 0; overflow: hidden; transform: translateX(calc((var(--p, 50) - 100) * 1%)); }
.ba__top img { transform: translateX(calc((100 - var(--p, 50)) * 1%)); }
.ba__line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #F5F3EE; transform: translateX(calc(var(--p, 50) * 1cqw)); pointer-events: none; }
.ba { container-type: inline-size; }
.ba__knob { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: #F5F3EE; color: #111; transform: translateX(calc(var(--p, 50) * 1cqw)); pointer-events: none; box-shadow: var(--sh); }
.ba__knob svg { width: 22px; height: 22px; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba input:focus-visible ~ .ba__knob { outline: 2px solid var(--ak); outline-offset: 3px; }
.ba__cap { position: absolute; top: 1rem; padding: .4rem .7rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; pointer-events: none; }
.ba__cap--a { left: 1rem; } .ba__cap--b { right: 1rem; }
.why__txt { grid-column: 8 / 13; }
.why__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.why__list li { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-3); padding: 1.4rem 0; border-top: 1px solid var(--ln); }
.why__list b { font: var(--f-d-w) 1.5rem/1.05 var(--f-display); text-transform: var(--f-d-case); }
.why__list span { color: var(--dim); }

/* DUK */
.faq { padding: var(--s-7) 0; }
.faq h2 { grid-column: 1 / 5; }
.faq__list { grid-column: 6 / 13; }
.faq details { border-bottom: 1px solid var(--ln); }
.faq summary { display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; padding: 1.5rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.125rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--dim); transition: transform .5s var(--e-ui); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { color: var(--dim); padding: 0 0 1.5rem; max-width: 60ch; }

/* Kontaktai + forma */
.ct { padding: var(--s-7) 0; }
.ct .g12 { align-items: start; }
.ct__info { grid-column: 1 / 6; }
.ct__lead { color: var(--dim); margin-top: var(--s-3); }
.ct__tel { display: inline-block; margin-top: var(--s-4); font: var(--f-d-w) clamp(2.4rem, 4vw, 3.6rem)/1 var(--f-display); text-decoration: none; font-variant-numeric: tabular-nums; }
.ct__tel:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ct__addr { margin-top: var(--s-3); font-size: 1.125rem; }
.ct__hours { display: grid; grid-template-columns: auto 1fr; gap: .5rem var(--s-3); margin: var(--s-3) 0 0; color: var(--dim); }
.ct__hours div { display: contents; }
.ct__hours dt { font-weight: 600; color: var(--tx); }
.ct__hours dd { margin: 0; }
.form { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r); }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .9375rem; }
.opt { color: var(--dim); font-weight: 400; }
.field input, .field select, .field textarea { font: inherit; color: var(--tx); background: var(--in); border: 1.5px solid var(--ln); border-radius: var(--r); padding: .85rem 1rem; min-height: 50px; transition: border-color .2s ease; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--tx); outline: none; }
.field [aria-invalid="true"] { border-color: var(--err); }
.err { color: var(--err); font-size: .875rem; }
.err:empty { display: none; }
.form .btn { justify-self: start; }
.ok { grid-column: 1 / -1; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--bg); color: var(--tx); }

/* Kontūrinis milžiniškas žodis – slenkant prisipildo (užpildyta kopija išnyra iš kaukės, transform) */
.ghost { position: relative; margin: 0; overflow: hidden; white-space: nowrap; font: var(--f-d-w) clamp(5.5rem, 21vw, 20rem)/.8 var(--f-d); letter-spacing: var(--f-d-track); text-transform: var(--f-d-case); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--tx) 26%, transparent); user-select: none; pointer-events: none; padding: .08em 0 0 max(1.5rem, calc((100vw - var(--wrap)) / 2)); }
.ghost::after { content: attr(data-t); position: absolute; left: max(1.5rem, calc((100vw - var(--wrap)) / 2)); top: .08em; color: color-mix(in srgb, var(--tx) 9%, var(--bg)); -webkit-text-stroke: 0; transform: translateY(102%); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) { .ghost::after { animation: fill linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; } }
  @keyframes fill { to { transform: none; } }
}

.ft { border-top: 1px solid var(--ln); padding: var(--s-4) 0; color: var(--dim); font-size: .9375rem; }
.ft__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); }
.ft b { color: var(--tx); }
.ft__small { font-size: .8125rem; }

/* Atsiradimas slenkant */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--e-in), transform 1.1s var(--e-in); }
.js .rv.on { opacity: 1; transform: none; }

@media (max-width: 1180px) { .nav { display: none; } }
@media (max-width: 960px) {
  .hero__txt, .hero__img, .pr__side, .pr__list, .ba, .why__txt, .faq h2, .faq__list, .ct__info, .form { grid-column: 1 / -1; }
  .hero__side { grid-column: 1 / -1; }
  .dk__list { grid-template-columns: 1fr 1fr; }
  .flow__steps { grid-template-columns: 1fr 1fr; }
  .pr__side { position: static; }
  .scan__txt, .scan__fig { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hd__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dk__list, .flow__steps, .form { grid-template-columns: 1fr; }
  .hero__facts { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .why__list li { grid-template-columns: 1fr; gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .mq__t { animation: none; }
  .js .wm .mw > span { transform: none; }
}

/* LOGO REVEAL (5e, technika 3 „makro kamera pro formą“) – index.html <!--lr-->. Tik transform; ≤ 2,6 s; hero įėjimas palaukia. */
.lr { display: none; }
.lr-on .lr { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: var(--fonas); color: var(--tekstas); animation: lr-out .55s var(--e-out) 2.05s forwards; }
.lr__art { display: grid; justify-items: center; gap: 1.2rem; }
.lr__mk { width: 104px; height: 104px; transform-origin: 50% 68%; animation: lr-mk 1.5s var(--e-in) both; }
.lr__mk { position: relative; } .lr__mk svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lr__nd { transform-origin: 50% 68.75%; animation: lr-nd .85s var(--e-ui) .95s both; }
.lr__w { overflow: hidden; padding-top: .14em; font: var(--f-d-w) 2.8rem/1 var(--f-d); text-transform: var(--f-d-case); letter-spacing: .06em; }
.lr__w span { display: block; animation: lr-w .9s var(--e-in) 1.05s both; }
.lr__skip { position: absolute; right: 1.5rem; bottom: 1.5rem; min-height: 44px; padding: .6rem 1.1rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--tekstas) 10%, transparent); color: var(--tekstas); font: 600 .875rem/1 var(--f-body); cursor: pointer; }
.lr__skip:hover { background: color-mix(in srgb, var(--tekstas) 18%, transparent); }
@keyframes lr-mk { from { transform: scale(26) rotate(-16deg); } }
@keyframes lr-nd { from { transform: rotate(-150deg); } }
@keyframes lr-w { from { transform: translateY(115%); } }
@keyframes lr-out { to { transform: translateY(-100%); } }
.lr-on .pl__bg img { animation-delay: 2.1s; } .lr-on .pl__w { animation-delay: 2.25s; } .lr-on .pl__obj img { animation-delay: 2.15s; }
.lr-on .hero__txt { animation-delay: 2.7s; } .lr-on .hero__side { animation-delay: 2.85s; }