/* =========================================================================
   iGreitis.lt – dizaino sistema
   Rašyta ranka, be Tailwind: nereikia jokio surinkimo žingsnio.
   ========================================================================= */

:root {
  /* Spalvos – šviesi tema */
  --fonas:          #f6f8f9;
  --pavirsius:      #ffffff;
  --pavirsius-2:    #eef2f4;
  --tekstas:        #0d1b21;
  --tekstas-svelnus:#4a6069;
  --tekstas-blyskus:#7c939c;
  --linija:         #dde5e8;
  --linija-svelni:  #e9eff1;

  --zydra:          #0891b2;
  --zydra-tamsi:    #0b6b83;
  --zydra-fonas:    #0891b214;
  --violetine:      #7c3aed;
  --violetine-fonas:#7c3aed14;
  --zalia:          #0f9d63;
  --geltona:        #d99b06;
  --raudona:        #d13b3b;

  /* Tipografija */
  --sriftas: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sriftas-skaiciai: "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Erdvė – vienas žingsnis 4px */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4rem;   --e9: 6rem;

  --apvalu:     .75rem;
  --apvalu-dq:  1.25rem;
  --seselis:    0 1px 2px #0d1b210d, 0 8px 24px -12px #0d1b2126;
  --seselis-dq: 0 2px 4px #0d1b210a, 0 24px 48px -20px #0d1b2130;

  --plotis: 1200px;
}

/* Tamsi tema – seka sistemą, nebent vartotojas pasirinko rankiniu būdu */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="sviesi"]) {
    --fonas:          #070d10;
    --pavirsius:      #0e181d;
    --pavirsius-2:    #16242a;
    --tekstas:        #e8eef0;
    --tekstas-svelnus:#a2b6be;
    --tekstas-blyskus:#71888f;
    --linija:         #22343b;
    --linija-svelni:  #18272d;

    --zydra:          #22d3ee;
    --zydra-tamsi:    #67e8f9;
    --zydra-fonas:    #22d3ee1a;
    --violetine:      #a78bfa;
    --violetine-fonas:#a78bfa1a;
    --zalia:          #34d399;
    --geltona:        #fbbf24;
    --raudona:        #f87171;

    --seselis:    0 1px 2px #0006, 0 8px 24px -12px #0008;
    --seselis-dq: 0 2px 4px #0007, 0 24px 48px -20px #000a;
  }
}

:root[data-tema="tamsi"] {
  --fonas:          #070d10;
  --pavirsius:      #0e181d;
  --pavirsius-2:    #16242a;
  --tekstas:        #e8eef0;
  --tekstas-svelnus:#a2b6be;
  --tekstas-blyskus:#71888f;
  --linija:         #22343b;
  --linija-svelni:  #18272d;

  --zydra:          #22d3ee;
  --zydra-tamsi:    #67e8f9;
  --zydra-fonas:    #22d3ee1a;
  --violetine:      #a78bfa;
  --violetine-fonas:#a78bfa1a;
  --zalia:          #34d399;
  --geltona:        #fbbf24;
  --raudona:        #f87171;

  --seselis:    0 1px 2px #0006, 0 8px 24px -12px #0008;
  --seselis-dq: 0 2px 4px #0007, 0 24px 48px -20px #000a;
}

/* ---------------------------------------------------------------- Bazė -- */

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

* {
  /* Telefone palietimas nebepiešia šviesaus stačiakampio. */
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Atsarginis stabdis nuo slinkties į šoną. `clip`, ne `hidden`,
     kad nesugestų `position: sticky`. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fonas);
  color: var(--tekstas);
  font-family: var(--sriftas);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::selection { background: #0891b247; color: inherit; }

button, a, [role="button"], summary, label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, select { -webkit-user-select: text; user-select: text; }

:focus-visible {
  outline: 2px solid var(--zydra);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg { max-width: 100%; }

/*
 * Numatytasis įterptinių ikonų dydis.
 *
 * SVG be `width`/`height` išsitempia per visą turimą plotą – anksčiau dėl to
 * ikonos kortelių antraštėse buvo per visą kortelę. Dydis nurodomas `em`,
 * todėl ikona visada dera su šalia esančiu tekstu.
 */
.ik,
h1 > svg, h2 > svg, h3 > svg, h4 > svg,
button > svg, summary > svg,
.zenkl > svg, .tuscia > svg, .saras svg, .zingsniai svg {
  width: 1.125em;
  height: 1.125em;
  flex: none;
}

.ikonos-mygtukas svg { width: 1.0625rem; height: 1.0625rem; }
.mygtukas svg { width: 1.125rem; height: 1.125rem; }
.tuscia > svg { width: 1.75rem; height: 1.75rem; }

/* Spidometro ratas privalo užpildyti rėmą – jam numatytasis dydis netinka. */
.spidometras__ratas { width: 100% !important; height: 100% !important; }

/* --------------------------------------------------------- Tipografija -- */

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
  font-weight: 800;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.125rem); }
h3 { font-size: 1.1875rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--zydra-tamsi); }
a:hover { color: var(--zydra); }

.svelnus { color: var(--tekstas-svelnus); }
.blyskus { color: var(--tekstas-blyskus); }
.skaiciai { font-variant-numeric: tabular-nums; }
.mazas { font-size: .8125rem; }

.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;
}

/* ------------------------------------------------------------- Maketas -- */

.rezis {
  width: 100%;
  max-width: var(--plotis);
  margin-inline: auto;
  padding-inline: var(--e4);
}

.siauras { max-width: 46rem; margin-inline: auto; }

main { flex: 1 0 auto; padding-top: var(--e8); }

section { margin-top: var(--e9); }
section:first-child { margin-top: 0; }

/* -------------------------------------------------------------- Juosta -- */

.juosta {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fonas) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linija);
}

.juosta__vidus {
  display: flex; align-items: center; gap: var(--e5);
  height: 4rem;
}

.logo {
  display: inline-flex; align-items: center; gap: .5rem;
  /* Tekstas laikomas viename <span>, kitaip flex `gap` atskirtų „.lt“. */
  font-weight: 800; font-size: 1.1875rem; letter-spacing: -.02em;
  color: var(--tekstas); text-decoration: none; flex: none;
}
.logo svg { width: 1.5rem; height: 1.5rem; }
.logo span { display: inline; }
.logo b { color: var(--zydra-tamsi); font-weight: 800; }

.meniu { display: flex; gap: var(--e5); margin: 0 auto 0 var(--e3); padding: 0; list-style: none; }
.meniu a {
  color: var(--tekstas-svelnus); text-decoration: none;
  font-size: .9375rem; font-weight: 500;
  padding: .5rem 0; display: block;
  border-bottom: 2px solid transparent;
}
.meniu a:hover { color: var(--zydra-tamsi); }
.meniu a[aria-current="page"] { color: var(--zydra-tamsi); border-bottom-color: var(--zydra); }

.juosta__irankiai { display: flex; align-items: center; gap: var(--e2); margin-left: auto; }

.zenkl {
  display: inline-flex; align-items: center; gap: .375rem;
  background: var(--pavirsius-2); border: 1px solid var(--linija);
  border-radius: 999px; padding: .3125rem .75rem;
  font-size: .8125rem; color: var(--tekstas-svelnus);
  max-width: 13rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zenkl svg { width: .875rem; height: .875rem; flex: none; }

.ikonos-mygtukas {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--linija); border-radius: .625rem;
  background: var(--pavirsius); color: var(--tekstas-svelnus);
  cursor: pointer; transition: border-color .2s, color .2s;
}
.ikonos-mygtukas:hover { border-color: var(--zydra); color: var(--zydra-tamsi); }

.meniu-jungiklis { display: none; }

@media (max-width: 900px) {
  .meniu { display: none; }
  .meniu-jungiklis { display: inline-flex; }
  .juosta__vidus { gap: var(--e3); }
  .zenkl { display: none; }

  .meniu.atidarytas {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; inset: 4rem 0 auto;
    background: var(--pavirsius); border-bottom: 1px solid var(--linija);
    padding: var(--e2) var(--e4) var(--e4);
    box-shadow: var(--seselis);
    margin: 0;
  }
  .meniu.atidarytas a { padding: .75rem 0; border-bottom: 1px solid var(--linija-svelni); }
  .meniu.atidarytas a[aria-current="page"] { border-bottom-color: var(--linija-svelni); }
}

/* ------------------------------------------------------------ Mygtukai -- */

.mygtukas {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: none; border-radius: .75rem;
  padding: .8125rem 1.5rem;
  font: inherit; font-weight: 600; font-size: .9375rem;
  cursor: pointer; text-decoration: none;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.mygtukas:active { transform: scale(.97); }
.mygtukas svg { width: 1.125rem; height: 1.125rem; }

.mygtukas--pagrindinis {
  background: var(--tekstas); color: var(--fonas);
  box-shadow: var(--seselis);
}
.mygtukas--pagrindinis:hover { box-shadow: var(--seselis-dq); color: var(--fonas); }

.mygtukas--zydras { background: var(--zydra); color: #fff; }
.mygtukas--zydras:hover { background: var(--zydra-tamsi); color: #fff; }

.mygtukas--kontūras {
  background: transparent; color: var(--tekstas);
  border: 1px solid var(--linija);
}
.mygtukas--kontūras:hover { border-color: var(--zydra); color: var(--zydra-tamsi); }

.mygtukas--pavojus { background: var(--raudona); color: #fff; }

.mygtukas--didelis { padding: 1rem 2rem; font-size: 1.0625rem; border-radius: .875rem; }

/* ------------------------------------------------------------ Kortelės -- */

.kortele {
  background: var(--pavirsius);
  border: 1px solid var(--linija);
  border-radius: var(--apvalu-dq);
  padding: var(--e5);
}
.kortele--tanki { padding: var(--e4); }

.tinklelis { display: grid; gap: var(--e4); }
.tinklelis--2 { grid-template-columns: repeat(2, 1fr); }
.tinklelis--3 { grid-template-columns: repeat(3, 1fr); }
.tinklelis--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

@media (max-width: 780px) {
  .tinklelis--2, .tinklelis--3 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- Matuoklė -- */

.matuokle {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e7);
  align-items: start;
}
@media (max-width: 1000px) { .matuokle { grid-template-columns: 1fr; gap: var(--e6); } }

.matuokle__skydas {
  background: var(--pavirsius);
  border: 1px solid var(--linija);
  border-radius: var(--apvalu-dq);
  padding: var(--e5) var(--e4) var(--e4);
  box-shadow: var(--seselis);
  position: sticky; top: 5rem;
}
@media (max-width: 1000px) { .matuokle__skydas { position: static; } }

.spidometras {
  position: relative;
  width: 100%; max-width: 20rem;
  aspect-ratio: 1;
  margin: 0 auto var(--e5);
  display: grid; place-items: center;
  /* Pasuktas SVG turi 1,41 karto platesnį gabaritą – be šito
     siaurame telefone puslapį stumtų į šoną. */
  overflow: hidden;
}

.spidometras__ratas { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(135deg); }
.spidometras__takas { fill: none; stroke: var(--pavirsius-2); stroke-width: 10; stroke-linecap: round; }
.spidometras__lankas {
  fill: none; stroke: var(--zydra); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset .18s linear, stroke .35s ease, filter .35s ease;
}
.spidometras[data-etapas="upload"] .spidometras__lankas { stroke: var(--violetine); }
.spidometras[data-vyksta="1"] .spidometras__lankas { filter: drop-shadow(0 0 7px currentColor); }

.spidometras__pulsas {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: var(--zydra);
  opacity: 0; pointer-events: none;
}
.spidometras[data-vyksta="1"] .spidometras__pulsas { animation: pulsas 2.4s ease-out infinite; }
.spidometras[data-etapas="upload"] .spidometras__pulsas { background: var(--violetine); }

@keyframes pulsas {
  0%   { transform: scale(.92); opacity: .18; }
  70%  { transform: scale(1.06); opacity: 0; }
  100% { opacity: 0; }
}

.spidometras__vidus {
  position: relative; z-index: 1;
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pavirsius);
  border: 1px solid var(--linija-svelni);
  box-shadow: var(--seselis);
  display: grid; place-content: center; text-align: center;
}

.spidometras__reiksme {
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  font-weight: 800; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: transform .3s ease;
}
.spidometras[data-etapas="baigta"] .spidometras__reiksme { transform: scale(1.08); }

.spidometras__vnt {
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em;
  color: var(--zydra-tamsi); margin-top: .375rem;
}
.spidometras[data-etapas="upload"] .spidometras__vnt { color: var(--violetine); }

.spidometras__busena {
  margin-top: .625rem;
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tekstas-blyskus);
  background: var(--pavirsius-2);
  border-radius: 999px; padding: .25rem .625rem;
  transition: color .3s, background .3s;
}

/* Rodikliai */
.rodikliai { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); margin-bottom: var(--e4); }
@media (min-width: 560px) { .rodikliai { gap: var(--e3); } }

.rodiklis {
  background: var(--pavirsius-2);
  border: 2px solid transparent;
  border-radius: var(--apvalu);
  padding: .625rem .5rem;
  text-align: center;
  transition: border-color .3s, background .3s, transform .3s;
}
@media (min-width: 560px) { .rodiklis { padding: .875rem .75rem; } }

.rodiklis[data-aktyvus="1"] { transform: translateY(-2px); }
.rodiklis[data-tipas="ping"][data-aktyvus="1"]     { border-color: var(--zalia);      background: #0f9d6314; }
.rodiklis[data-tipas="download"][data-aktyvus="1"] { border-color: var(--zydra);      background: var(--zydra-fonas); }
.rodiklis[data-tipas="upload"][data-aktyvus="1"]   { border-color: var(--violetine);  background: var(--violetine-fonas); }

.rodiklis__antraste {
  font-size: .625rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tekstas-blyskus);
}
.rodiklis__reiksme {
  font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums;
  margin: .125rem 0;
}
@media (min-width: 560px) { .rodiklis__reiksme { font-size: 1.5rem; } }
.rodiklis__reiksme span { font-size: .75rem; font-weight: 500; color: var(--tekstas-blyskus); }
.rodiklis__poraste { font-size: .625rem; color: var(--tekstas-blyskus); line-height: 1.3; }

.matuokle__veiksmas { display: grid; place-items: center; gap: var(--e3); }
.matuokle__info { font-size: .75rem; color: var(--tekstas-blyskus); text-align: center; max-width: 24rem; }
.matuokle__klaida {
  font-size: .8125rem; color: var(--raudona); text-align: center;
  max-width: 26rem; margin: 0 auto;
}

/* --------------------------------------------------------- Galimybės -- */

.galimybes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
@media (max-width: 700px) { .galimybes { grid-template-columns: repeat(2, 1fr); } }

.galimybe {
  border: 2px solid var(--linija-svelni);
  border-radius: var(--apvalu);
  padding: var(--e3);
  background: var(--pavirsius);
  opacity: .55;
  transition: opacity .4s, border-color .4s, transform .4s, background .4s;
}
.galimybe[data-atrakinta="1"] {
  opacity: 1; border-color: var(--zalia);
  background: color-mix(in srgb, var(--zalia) 6%, var(--pavirsius));
  transform: translateY(-2px);
}
.galimybe[data-nepavyko="1"] { opacity: 1; border-color: var(--raudona); }

.galimybe__virsus { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e2); }
.galimybe__ikona {
  width: 2rem; height: 2rem; border-radius: .5rem;
  display: grid; place-items: center;
  background: var(--pavirsius-2); color: var(--tekstas-blyskus);
  transition: background .4s, color .4s;
}
.galimybe__ikona svg { width: 1.0625rem; height: 1.0625rem; }
.galimybe[data-atrakinta="1"] .galimybe__ikona { background: color-mix(in srgb, var(--zalia) 16%, transparent); color: var(--zalia); }

.galimybe__pav { font-size: .875rem; font-weight: 700; margin-top: var(--e3); }
.galimybe__apr { font-size: .75rem; color: var(--tekstas-blyskus); }

/* ------------------------------------------------------------ Lentelė -- */

.slenka { overflow-x: auto; border: 1px solid var(--linija); border-radius: var(--apvalu); }
table { border-collapse: collapse; width: 100%; background: var(--pavirsius); }
th, td { text-align: left; padding: .8125rem 1rem; border-bottom: 1px solid var(--linija-svelni); font-size: .9375rem; }
thead th {
  font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tekstas-blyskus); font-weight: 700;
  border-bottom: 1px solid var(--linija); white-space: nowrap;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
td.sk { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -------------------------------------------------------- Rezultatai -- */

.rez-eilute {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: .6875rem .875rem;
  border: 1px solid var(--linija-svelni);
  border-radius: .625rem;
  background: var(--pavirsius-2);
  transition: border-color .2s;
}
.rez-eilute + .rez-eilute { margin-top: .5rem; }
.rez-eilute:hover { border-color: var(--linija); }
.rez-eilute__kaire { min-width: 0; }
.rez-eilute__pav { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rez-eilute__meta { font-size: .75rem; color: var(--tekstas-blyskus); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rez-eilute__desine { text-align: right; flex: none; }
.rez-eilute__greitis { font-size: .9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rez-eilute__greitis span { font-size: .6875rem; font-weight: 500; color: var(--tekstas-blyskus); }

/* Pakyla */
.vieta {
  width: 1.625rem; height: 1.625rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 800;
  background: var(--pavirsius); color: var(--tekstas-blyskus);
  border: 1px solid var(--linija);
}
.vieta[data-v="1"] { background: #f0b400; color: #fff; border-color: #f0b400; }
.vieta[data-v="2"] { background: #b8c4c9; color: #fff; border-color: #b8c4c9; }
.vieta[data-v="3"] { background: #cd7f32; color: #fff; border-color: #cd7f32; }
.vieta svg { width: .75rem; height: .75rem; }

.rez-eilute[data-v="1"] {
  background: color-mix(in srgb, #f0b400 10%, var(--pavirsius));
  border-color: color-mix(in srgb, #f0b400 35%, transparent);
}

.kortele--top { background: linear-gradient(160deg, color-mix(in srgb, #f0b400 7%, var(--pavirsius)), var(--pavirsius)); }

.tuscia { text-align: center; padding: var(--e6) var(--e4); color: var(--tekstas-blyskus); }
.tuscia svg { width: 1.75rem; height: 1.75rem; margin-bottom: var(--e2); opacity: .5; }
.tuscia strong { display: block; color: var(--tekstas); font-size: .9375rem; margin-bottom: .25rem; }
.tuscia p { font-size: .8125rem; max-width: 24ch; margin: 0 auto; }

/* ---------------------------------------------------------------- KPI -- */

.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
@media (max-width: 900px) { .kpi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi { grid-template-columns: 1fr; } }

.kpi__reiksme { font-size: 1.875rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.kpi__reiksme span { font-size: .9375rem; font-weight: 500; color: var(--tekstas-blyskus); }
.kpi__pav { font-size: .8125rem; color: var(--tekstas-svelnus); }
.kpi__poraste { font-size: .75rem; color: var(--tekstas-blyskus); margin-top: .25rem; }

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

.duk { border: 1px solid var(--linija); border-radius: var(--apvalu); overflow: hidden; background: var(--pavirsius); }
.duk details + details { border-top: 1px solid var(--linija-svelni); }
.duk summary {
  cursor: pointer; padding: var(--e4);
  font-weight: 600; font-size: .9375rem;
  display: flex; justify-content: space-between; align-items: center; gap: var(--e3);
  list-style: none;
}
.duk summary::-webkit-details-marker { display: none; }
.duk summary::after {
  content: ""; flex: none;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--tekstas-blyskus);
  border-bottom: 2px solid var(--tekstas-blyskus);
  transform: rotate(45deg); transition: transform .25s;
}
.duk details[open] summary::after { transform: rotate(-135deg); }
.duk summary:hover { color: var(--zydra-tamsi); }
.duk__turinys { padding: 0 var(--e4) var(--e4); color: var(--tekstas-svelnus); font-size: .9375rem; }

/* ------------------------------------------------------------- Sąrašai -- */

.zingsniai { list-style: none; counter-reset: z; padding: 0; margin: 0; }
.zingsniai li { counter-increment: z; position: relative; padding: var(--e4) 0 var(--e4) 3rem; border-bottom: 1px solid var(--linija-svelni); }
.zingsniai li::before {
  content: counter(z, decimal-leading-zero);
  position: absolute; left: 0; top: calc(var(--e4) + .1rem);
  font-family: var(--sriftas-skaiciai); font-size: .8125rem; font-weight: 700;
  color: var(--zydra-tamsi);
}
.zingsniai strong { display: block; margin-bottom: .25rem; }
.zingsniai p { color: var(--tekstas-svelnus); font-size: .9375rem; margin: 0; }

.saras { list-style: none; padding: 0; margin: 0 0 var(--e4); }
.saras li { position: relative; padding: .5rem 0 .5rem 1.5rem; border-bottom: 1px solid var(--linija-svelni); color: var(--tekstas-svelnus); font-size: .9375rem; }
.saras li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem;
  width: .5rem; height: 2px; background: var(--zydra);
}

.zymos { display: flex; flex-wrap: wrap; gap: .5rem; }
.zyma {
  display: inline-block; padding: .4375rem 1rem;
  border: 1px solid var(--linija); border-radius: 999px;
  font-size: .8125rem; font-weight: 600; text-decoration: none;
  color: var(--tekstas-svelnus); background: var(--pavirsius);
  transition: border-color .2s, color .2s;
}
.zyma:hover { border-color: var(--zydra); color: var(--zydra-tamsi); }

.pastaba {
  border-left: 3px solid var(--geltona);
  background: color-mix(in srgb, var(--geltona) 8%, transparent);
  padding: var(--e4) var(--e5);
  border-radius: 0 var(--apvalu) var(--apvalu) 0;
  font-size: .9375rem; color: var(--tekstas-svelnus);
}

/* --------------------------------------------------------------- Kelias -- */

.kelias { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; font-size: .8125rem; color: var(--tekstas-blyskus); margin-bottom: var(--e4); padding: 0; list-style: none; }
.kelias a { color: var(--tekstas-blyskus); text-decoration: none; }
.kelias a:hover { color: var(--zydra-tamsi); }
.kelias li::after { content: "›"; margin-left: .375rem; opacity: .6; }
.kelias li:last-child::after { content: none; }
.kelias li:last-child { color: var(--tekstas); font-weight: 600; }

/* -------------------------------------------------------------- Antraštė -- */

.antraste { text-align: center; max-width: 42rem; margin: 0 auto var(--e7); }
.antraste p { font-size: 1.0625rem; color: var(--tekstas-svelnus); margin-top: var(--e3); }
.antraste--kaire { text-align: left; margin-inline: 0; }

.pabraukta {
  background: linear-gradient(100deg, var(--zydra), var(--violetine));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

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

footer {
  margin-top: var(--e9);
  background: var(--pavirsius);
  border-top: 1px solid var(--linija);
  padding: var(--e7) 0 var(--e5);
}

.poraste__tinklelis { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--e6); }
@media (max-width: 1000px) { .poraste__tinklelis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .poraste__tinklelis { grid-template-columns: 1fr; gap: var(--e5); } }

.poraste h4 { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tekstas-blyskus); margin-bottom: var(--e3); }
.poraste ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.poraste a { color: var(--tekstas-svelnus); text-decoration: none; font-size: .875rem; }
.poraste a:hover { color: var(--zydra-tamsi); }

.poraste__apacia {
  margin-top: var(--e6); padding-top: var(--e4);
  border-top: 1px solid var(--linija-svelni);
  display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: space-between;
  font-size: .75rem; color: var(--tekstas-blyskus);
}

/* -------------------------------------------------------------- Slapukai -- */

.slapukai {
  position: fixed; inset: auto 0 0; z-index: 100;
  padding: var(--e4);
}
.slapukai__vidus {
  max-width: 52rem; margin-inline: auto;
  background: var(--pavirsius); border: 1px solid var(--linija);
  border-radius: var(--apvalu-dq); box-shadow: var(--seselis-dq);
  padding: var(--e5);
  display: flex; align-items: center; gap: var(--e5);
}
@media (max-width: 700px) { .slapukai__vidus { flex-direction: column; text-align: center; } }
.slapukai__mygtukai { display: flex; gap: .5rem; flex: none; }
@media (max-width: 480px) { .slapukai__mygtukai { width: 100%; flex-direction: column; } }

/* ------------------------------------------------------------- Pagalba -- */

.tarpas-v4 { margin-top: var(--e4); }
.tarpas-v5 { margin-top: var(--e5); }
.tarpas-v6 { margin-top: var(--e6); }
.centre { text-align: center; }
.slepti { display: none !important; }