/* ============================================================================
   JKonsult darbu showcase.  Divi bloki, abi neobligati:

     <section class="jkw" id="jkWall"> ... </section>     dzivo klientu siena
     <section class="jkb" id="jkBuild"> ... </section>    no nulles lidz lapai

   Sis ir vienigais koplietotais CSS fails visa repozitorija. Parejam lapam
   stils ir iekshpusee, tapec sheit nedrikst but neviena selektora, kas nav
   ar .jkw / .jkb / .jklb prefiksu: citadi tas sadursies ar lapas savu CSS.
   Krasu mainigie tiek nolasiti no lapas :root, ja tur tadi ir.
   ==========================================================================*/

/* Katram blokam, kas lieto --jk-*, ir JĀBŪT šajā sarakstā. Ieraksta burbuļi un
   laika joslas atzīmes bija neredzamas tieši tāpēc, ka .jkr te trūka: mainīgais
   neatrisinājās, fons kļuva caurspīdīgs, un balts teksts uz smilšu grunts nav
   teksts. Neatrisināts var() neceļ kļūdu, tas vienkārši pazūd. */
.jkw, .jkb, .jkr {
  --jk-paper: #F8F7F3;
  --jk-ink: #0E1211;
  --jk-mute: #5A5D59;
  --jk-rule: #D9D6CE;
  --jk-coral: #EF6A51;
  --jk-forest: #1E3028;
  --jk-accent: #D94234;
  /* Abi darbu bloki stāv uz vienas grunts. Zaļā --forest tikai sadūrās ar hero
     foto virs tās un ar melno būves joslu zemāk: trīs tumši toņi pēc kārtas,
     neviens ar otru nesaistīts. Viena tumsa, un kartītes uz tās spīd spēcīgāk. */
  --jk-dark: #0B0F0E;
  --jk-warm: #EFECE2;
  --jk-wire: #93A2B0;
  --jk-wire-soft: #C3CDD6;
  /* Zimola krasas no lapas :root, ar rezerves vertibam, jo sis fails ir
     koplietots un lapa, kas to ievelk, --b-* var nebut deklareti. */
  --jk-b1: var(--b-green,  #57A85B);
  --jk-b2: var(--b-yellow, #F2C51A);
  --jk-b3: var(--b-blue,   #5988C6);
  --jk-b4: var(--b-orange, #F26839);
}

/* =============================== 01. SIENA ================================
   Piecas istas lapas, katra 390px plata, katra ripo pa savu lapu. Uzbrauc ar
   peli un ta viena klust par istu 1440x1040 darbvirsmu.
   ========================================================================*/

.jkw {
  background: var(--jk-dark);
  padding: clamp(28px, 4vw, 52px) 0 clamp(22px, 3vw, 38px);
  overflow: hidden;
  color: #fff;
}
.jkw-head {
  max-width: 1400px;
  margin: 0 auto clamp(18px, 2.6vw, 30px);
  padding: 0 clamp(16px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 40px;
  align-items: end;
}
.jkw-head .eyebrow { color: rgba(248, 247, 243, .6); margin: 0 0 10px }
.jkw-head h2 {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.06;
  margin: 0;
  max-width: 18ch;
  color: #fff;
}
.jkw-head p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(248, 247, 243, .68);
  max-width: 38ch;
}

/* Skatuve nekad nemaina izmeru. Rezgis taja gan. Agrak peles pozicija tika
   nolasita no pashiem kartinam, tapec fokusesana sarauca rindu, kartinas
   apaksha aizslidenja aiz kursora, nostrada mouseleave, rinda atkal izauga,
   un tas svarstijas bezgaligi. Tresana tagad notiek pret sho fikseto kasti. */
.jkw-stage { position: relative; max-width: 1400px; margin: 0 auto }
/* Ne CSS grid un ne CSS transition: grid-template-columns animesana nozimeja,
   ka iframe mērogs katru kadru janolasa no clientWidth, kas piespiez sinhronu
   izkartojumu 300 reizes sekunde. Kartinu izmeri tiek rekinati skripta. */
.jkw-grid { position: absolute; inset: 0; padding: 0 clamp(16px, 3vw, 28px) }

.jkw-cell {
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7);
  cursor: pointer;
  transition: box-shadow .3s ease;
  /* will-change: left, top, width, height bija sheit un tas neko nedeva.
     will-change palidz tikai tam, ko kompozitors var animet pats (transform,
     opacity, filter). Izkartojuma ipasibam tas ir tukss solijums, kas tikai
     patere atmiņu. */
  contain: paint;
  /* overflow:hidden + border-radius par kompozitetu bernu Chrome atstaj matu
     platuma suvi sturos, un tur izspid kartites savs balts fons. clip-path
     nogriez pasu slani, tapec sturi paliek tiri. */
  clip-path: inset(0 round 10px);
}
/* Katram klientam sava zimola krasa, nevis visiem viens korallis: pieci
   kadri, cetras krasas, tapec sienai ir ritms ari tad, kad neko nedari. */
.jkw-cell.on {
  box-shadow: 0 26px 64px -22px rgba(0, 0, 0, .85);
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: -2px;
}
/* Skata mainisana liek lapai parkartoties, un tiesi vienu kadru ta uzzime
   tuksumu. To nevar noverst bez otra dziva rāmja katrai kartinai, kas maksa
   vairak neka iegust. Tapec aiz dziva rāmja stav tas pashas lapas attels
   tiesi taja pasha meroga un noberzuma, un dzivais rāmis parklajas tam pari. */
.jkw-cell .still {
  position: absolute; top: 0; left: 0; z-index: 0;
  transform-origin: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  /* Katram skatam savs slanis ar savu nemainigu izmeru un attelu. Parslegsanas
     bridi mainas tikai opacity, tapec neviena rastra nav jataisa no jauna. */
  will-change: opacity, transform;
  /* NEKADAS krustosanas starp slaniem. Telefona attels ir 390px plats, tapec
     plata kartina ta paklajuma merogs ir ap 2,3x: parlidojot cauri, tas uz
     bridi ir redzams milzigi pietuvinats. Pareizs attels konkretajam kartinas
     izmeram vienmer ir tikai VIENS, tapec parslegsanai jabut aciggirblidzenai. */
  transition: none;
}
/* saakuma caurspidigs: neielādets iframe zime baltu, un tas atrodas virs
   attela, tapec pirmaja kadra katra kartina bija balts taisnsturis.
   Izmers tiek uzlikts VIENU reizi skripta un nekad vairs, tapec sheit nav ne
   width, ne height, ne transition: parslegsanas starp attelu un dzivo lapu ir
   aciggirblidzena. Izgaisana starp diviem slaniem, kas nav pikselis pret
   pikseli vienadi, ir tiesi tas, kas rada divkarso attelu. */
.jkw-cell iframe {
  position: absolute; top: 0; left: 0; z-index: 1;
  border: 0; transform-origin: 0 0;
  pointer-events: none; will-change: transform;
  opacity: 0;
}
.jkw-cell .veil {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg,
    rgba(11, 15, 14, .32) 0%, rgba(11, 15, 14, 0) 18%,
    rgba(11, 15, 14, 0) 70%, rgba(11, 15, 14, .58) 100%);
  transition: opacity .35s;
}
.jkw-cell.on .veil { opacity: .4 }
/* tablete, nevis josla: 330px augstuma pilna platuma plaksne aizsedz tiesi to
   hero dalu, kuras del siena vispar eksiste */
.jkw-cell .name {
  position: absolute; left: 9px; bottom: 8px; z-index: 3; color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .03em;
  background: rgba(11, 17, 14, .82); backdrop-filter: blur(5px);
  border-radius: 6px; padding: 4px 8px;
  max-width: calc(100% - 18px); overflow: hidden;
  /* Divu kolonnu rezgi uz telefona kartite ir ap 173px, un
     "parcelies.parcelsanas24.lv" tur neietilpst. Bez sa nosaukums tika
     nogriezts tiesi aiz punkta ("...parcelsanas24."), kas izskatas pec vainas,
     nevis pec sasinajuma. Daudzpunkte pasaka, ka vards turpinas. */
  white-space: nowrap; text-overflow: ellipsis;
}
.jkw-cell .kind { display: block; color: rgba(255, 255, 255, .58); font-size: 8.5px; margin-top: 1px }
/* Ar ko ta lapa stradaa. Redzamas TIKAI uzbraucot, jo miera stavokli kartite
   ir telefona platuma un tur tam nav vietas; uzbraucot kartite ir darbvirsmas
   platuma, un tiesi tad cilveks so lapu ari apskata. */
.jkw-tags {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.jkw-cell.on .jkw-tags { opacity: 1; transform: none }
.jkw-tags li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  background: rgba(11, 17, 14, .82); backdrop-filter: blur(5px);
  border: 1px solid rgba(248, 247, 243, .2);
  color: #fff; font-size: 12.5px; font-weight: 500; letter-spacing: -.004em;
  white-space: nowrap;
}
.jkw-tags li::before {
  content: ''; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  background:
    linear-gradient(transparent, transparent),
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.5 2.5 5-5.4' fill='none' stroke='%230B0F0E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,
    var(--jk-b1, #57A85B);
}
.jkw-tags li:nth-child(2)::before { background-color: var(--jk-b2, #F2C51A) }
.jkw-tags li:nth-child(3)::before { background-color: var(--jk-b3, #5988C6) }
/* jkPulse paliek: to lieto .jkr-chrome .rec b atkartojuma koncepta. */
@keyframes jkPulse {
  0%   { box-shadow: 0 0 0 0 rgba(91, 217, 138, .6) }
  70%  { box-shadow: 0 0 0 7px rgba(91, 217, 138, 0) }
  100% { box-shadow: 0 0 0 0 rgba(91, 217, 138, 0) }
}
.jkw-cell .open {
  position: absolute; right: 9px; top: 9px; z-index: 3;
  opacity: 0; transition: opacity .3s;
  background: var(--jk-coral); color: #fff; border-radius: 999px; padding: 3px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
}
.jkw-cell.on .open { opacity: 1 }
/* Vieta ir ta pati, kas vienmer: uzreiz zem kartitem, izstiepta pa malam.
   Mainits ir TIKAI izmers un spilgtums - 12,5px pie .44 necaurspidiguma uz
   melna fona bija tik tikko saskatams. */
.jkw-foot {
  max-width: 1400px; margin: 16px auto 0; padding: 0 clamp(16px, 3vw, 28px);
  color: rgba(248, 247, 243, .92); font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
}
.jkw-foot .hint { color: rgba(248, 247, 243, .8) }
/* Visa sadala stav uz viena apgalvojuma: sie NAV ekranuzņemumi. Lidz sim to
   pateica 12,5px peleks teksts kajene, un to neviens nepamanija. Tagad tas ir
   zime ar pulsejosu punktu, tapat ka konsolei un sesijas ierakstam: ta pati
   valoda, ko lapa jau runa, tikai tur, kur uz to skatas. */
.jkw-foot .who {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 13px; border-radius: 999px;
  background: rgba(127, 208, 138, .12);
  border: 1px solid rgba(127, 208, 138, .42);
  color: #fff; font-size: 14px; letter-spacing: .02em;
}
.jkw-foot .who::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #7FD08A; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(127, 208, 138, .55);
  animation: jkWhoPulse 2.4s ease-out infinite;
}
@keyframes jkWhoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(127, 208, 138, .55) }
  70%  { box-shadow: 0 0 0 6px rgba(127, 208, 138, 0) }
  100% { box-shadow: 0 0 0 0 rgba(127, 208, 138, 0) }
}
@media (prefers-reduced-motion: reduce) {
  .jkw-foot .who::before { animation: none }
}

/* ---- lightbox ---- */
.jklb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(9, 14, 12, .92); backdrop-filter: blur(6px);
  display: none; padding: clamp(14px, 3vw, 34px); gap: clamp(14px, 2.4vw, 28px);
}
.jklb.on { display: flex }
.jklb-view { flex: 1 1 auto; min-width: 0; background: #fff; border-radius: 12px; overflow: hidden; position: relative }
.jklb-view iframe { position: absolute; top: 0; left: 0; width: 1440px; border: 0; transform-origin: 0 0 }
.jklb-side {
  flex: 0 0 clamp(210px, 20vw, 280px); color: #fff;
  display: flex; flex-direction: column; gap: 16px; overflow: auto;
}
.jklb-side h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-family: 'Inter Tight', sans-serif }
.jklb-side dl {
  margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 9px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
}
/* Lidz sim atvertaja skata bija tikai skaitli. Skaitlis pasaka, cik lapa ir
   gara; sis saraksts pasaka, ar ko ta stradaa. */
.jklb-does {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 7px;
}
.jklb-does[hidden] { display: none }
.jklb-does li {
  position: relative; padding-left: 20px;
  font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .88);
}
.jklb-does li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--jk-coral);
}
.jklb-side dt { color: rgba(255, 255, 255, .5); letter-spacing: .06em; text-transform: uppercase; font-size: 10px; align-self: center }
.jklb-side dd { margin: 0; text-align: right; color: #fff }
.jklb-side .why {
  font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .72);
  border-left: 2px solid var(--jk-coral); padding-left: 12px;
}
.jklb-x {
  position: absolute; right: 14px; top: 14px; z-index: 5;
  background: rgba(0, 0, 0, .55); color: #fff; border: 0;
  border-radius: 999px; width: 44px; height: 44px; font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.jklb-go {
  display: inline-block; background: var(--jk-coral); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 10px 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
}
.jklb-go:hover { background: #D9553D }

/* ========================= 02. NO NULLES LIDZ LAPAI ======================
   Karkass uzzimejas pats, istie vardi iekrit taja, atnak krasas, atnak
   fotografijas, un gatavais ekrans nolaizas uz tiem pashiem pikseliem.
   ========================================================================*/

/* Fons pieder sekcijai, nevis ievadam: pretēji tam ievads būtu tumša kaste,
   kas peld uz papīra, kamēr piesprausto kadru josla iet no malas līdz malai. */
/* Apaksseja atkape: skatuve beidzas tieshi ar pedejo kadru, tapec sadala
   aizvēras bez neviena tuksa pikselja un nakama sadala sakas uzreiz aiz tas. */
.jkb { position: relative; background: var(--jk-dark); color: #fff;
  padding-bottom: clamp(40px, 6vw, 88px) }
/* Vairak vietas: pie 480vh katrs posms izskrēja par ātru, lai paspētu izlasīt.
   620vh dod katram posmam apmēram 1,2 ekrāna. */
.jkb-stage { height: 620vh; position: relative }
/* padding-top, nevis top: lapas navigacija ir sticky un stav pari piesprausta
   kadra augsai, kur ir klientu parslegs. 96px = logo 52 + 2x16 rāmis + rezerve. */
.jkb-pin {
  position: sticky; top: 0; height: 100vh;
  box-sizing: border-box; padding-top: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(9px, 1.5vh, 18px);
  overflow: hidden; background: var(--jk-dark);
}
/* Virsraksts dzīvo PIEspraustajā kadrā, nevis virs tā. Iepriekš ievads un
   noslēgums bija atsevišķi bloki pirms un pēc 480vh skatuves, tāpēc starp
   tekstu un logu vienmēr bija tukšs ekrāns, un teksts pazuda tieši tad, kad
   sākās tas, ko tas apraksta. */
.jkb-head { text-align: center; padding: 0 16px }
.jkb-head .eyebrow { color: rgba(248, 247, 243, .55); margin: 0 0 8px }
.jkb-lede {
  margin: 0; font-family: 'Inter Tight', sans-serif;
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 500; letter-spacing: -.01em;
  color: #fff; max-width: 72ch; text-wrap: balance;
}

.jkb-sites { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center }
.jkb-sites button {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .05em;
  border: 1px solid rgba(248, 247, 243, .2); background: transparent;
  color: rgba(248, 247, 243, .6);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: .2s;
}
.jkb-sites button:hover { color: #fff; border-color: rgba(248, 247, 243, .45) }
.jkb-sites button.on { background: var(--jk-paper); border-color: var(--jk-paper); color: var(--jk-ink) }

/* Trešais loceklis ir augstuma budžets, izteikts platumā: 1040/1440 nozīmē, ka
   84vw plats kadrs ir 61vh augsts, un tas ir viss, kas paliek pāri pēc sticky
   navigācijas un soļu joslas zem kadra. */
.jkb-frame {
  position: relative; width: min(76vw, 900px, 84vh); aspect-ratio: 1440/1040;
  border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
}
/* Viss iekshpusee ir uzrakstits neapstradata 1440x1040 merisanas telpa un
   viss audekls tiek merogots vienreiz. Procenti nozimetu, ka katrs burtu
   izmers japarekina pie izmera mainas, un teksts, kuram nevar uzdot izmeru,
   nav ists teksts. */
.jkb-canvas { position: absolute; top: 0; left: 0; width: 1440px; height: 1040px; transform-origin: 0 0 }
.jkb-bg { position: absolute; inset: 0; z-index: 0; opacity: 0 }
.jkb-grid { position: absolute; inset: 0; z-index: 1; opacity: 0 }
.jkb-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(80, 110, 140, .13) }
.jkb-grid u { position: absolute; left: 0; right: 0; height: 1px; background: rgba(80, 110, 140, .07) }
.jkb-skel { position: absolute; inset: 0; z-index: 2 }

.jkb-bx { position: absolute; opacity: 0; border: 1px solid var(--jk-wire); background: transparent }
/* istais aizpildijums brauc uz sava sla:na, lai krasa var ienakt, necinoties
   ar karkasa liniju par to pashu ipashibu */
.jkb-bx .fl { position: absolute; inset: -1px; opacity: 0; border-radius: inherit }
.jkb-bx-i { overflow: hidden }
.jkb-bx-i .g {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - .8px), #AFBAC5 calc(50% - .8px),
      #AFBAC5 calc(50% + .8px), transparent calc(50% + .8px)),
    linear-gradient(to bottom right, transparent calc(50% - .8px), #AFBAC5 calc(50% - .8px),
      #AFBAC5 calc(50% + .8px), transparent calc(50% + .8px));
}
.jkb-bx-i img { position: absolute; display: block; opacity: 0; max-width: none }
.jkb-tr { position: absolute; background: var(--jk-wire-soft); border-radius: 1px; opacity: 0 }
.jkb-tx {
  position: absolute; opacity: 0; white-space: nowrap; transform-origin: left center;
  font-family: 'Inter Tight', system-ui, sans-serif; line-height: 1; color: #23282B;
  display: flex; align-items: center;
}
.jkb-real { position: absolute; top: 0; left: 0; width: 1440px; height: auto; z-index: 3; opacity: 0; will-change: opacity; max-width: none }
.jkb-chrome {
  position: absolute; left: 0; right: 0; top: 0; height: 6.4%; z-index: 5;
  background: #F2F0EA; border-bottom: 1px solid #DAD7CE;
  display: flex; align-items: center; gap: 5px; padding: 0 12px;
  opacity: 0; transform: translateY(-100%); transition: opacity .4s, transform .4s;
}
.jkb-chrome i { width: 7px; height: 7px; border-radius: 50%; background: #CFCBC1; flex: none }
.jkb-chrome span {
  margin-left: 10px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--jk-mute); white-space: nowrap; overflow: hidden;
}

.jkb-steps { display: flex; flex-wrap: wrap; justify-content: center }
.jkb-step {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(248, 247, 243, .3);
  padding: 0 clamp(8px, 1.4vw, 17px); transition: color .3s;
  background: none; border: 0;
}
.jkb-step.on { color: var(--jk-coral) }
.jkb-step.done { color: rgba(248, 247, 243, .62) }
/* Josla ir tas pats gradients, kas procesa linija: pilna platuma, aizklats.
   Platuma animesana butu saspiedusi gradientu pasa aizpildijuma ieksa, tapec
   te aug nevis platums, bet logs. */
.jkb-track {
  width: min(60vw, 520px); height: 3px; border-radius: 3px; position: relative;
  background: rgba(248, 247, 243, .12);
}
.jkb-track i {
  position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(90deg,
    var(--jk-b1) 0%, var(--jk-b2) 33%, var(--jk-b3) 66%, var(--jk-b4) 100%);
  clip-path: inset(0 100% 0 0);
}
.jkb-say {
  font-weight: 500;
  font-size: 13px; color: rgba(248, 247, 243, .7); text-align: center;
  min-height: 1.4em; max-width: 58ch; padding: 0 16px; margin: 0;
}
.jkb-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(248, 247, 243, .3); margin: 0;
}

/* ============================= 03. IERAKSTS =============================
   Ierakstita sesija. Kursors staiga pa lapu ta, ka to dara klients, apstajoties
   tur, kur ir lemumi, ar laika joslu apaksha, lai butu redzams, ka tas ir cels,
   nevis slaidrade.
   ========================================================================*/

/* Grunts nāk no lapas siltās neitrālās kāpnes, nevis no jauna heksa. Rozā
   šeit bija mana izdomāta krāsa, kādas vietnē nekur citur nav. */
.jkr { position: relative; background: var(--jk-warm) }
/* Virsraksts dzīvo piespraustajā kadrā, tāpat kā būves sadaļā. */
.jkr-head { text-align: center; padding: 0 16px }
.jkr-head .eyebrow { margin: 0 0 8px }
.jkr-lede {
  margin: 0; font-family: 'Inter Tight', sans-serif;
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 500; letter-spacing: -.01em;
  color: var(--jk-ink); max-width: 72ch; text-wrap: balance;
}

/* Vairāk vietas lasīšanai: pie 340vh četras pieturas izskrēja par ātru. */
/* Sesas pieturas, ne cetras: pie 460vh puse no lapas aizskreja garam.
   Katrai pieturai apmeram 1,1 ekrana. */
.jkr-stage { height: 700vh; position: relative }
.jkr-pin {
  position: sticky; top: 0;
  /* 100vh uz telefona ietver to gabalu, kas stav ZEM parluka adreses joslas,
     tapec piespraustā kadra apaksa bija ārpus redzamā ekrāna. dvh ir tas, ko
     cilveks tiesham redz; vh paliek ka rezerve vecakiem parlukiem. */
  height: 100vh; height: 100dvh;
  box-sizing: border-box; padding-top: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(10px, 2vh, 20px); overflow: hidden;
}
/* Sliede un kadrs stav BLAKUS, ne viens virs otra. Laika josla apaksa
   pateica tikai to, cik talu ir ticis; sliede saka ari, KUR tas ir un kas
   nak talak, tapec ta ir viena rinda ar kadru, ne josla zem ta. */
.jkr-main {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.4vw, 34px);
  width: min(94vw, 1400px); max-width: 100%;
}
.jkr-frame {
  position: relative; flex: 1 1 auto; min-width: 0;
  width: auto; max-width: min(1120px, calc(160vh - 400px)); aspect-ratio: 16/10;
  background: #fff; border-radius: 11px; overflow: hidden;
  box-shadow: 0 34px 80px -34px rgba(14, 18, 17, .5);
}
.jkr-chrome {
  height: 30px; background: var(--jk-paper); border-bottom: 1px solid var(--jk-rule);
  display: flex; align-items: center; gap: 6px; padding: 0 12px; position: relative; z-index: 6;
}
.jkr-chrome i { width: 8px; height: 8px; border-radius: 50%; background: #B8B5AB; flex: none }
.jkr-chrome .u { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--jk-mute) }
.jkr-chrome .rec {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--jk-accent);
}
.jkr-chrome .rec b { width: 7px; height: 7px; border-radius: 50%; background: var(--jk-accent); animation: jkPulse 2s infinite }
.jkr-view { position: absolute; inset: 30px 0 0; overflow: hidden; z-index: 1 }
.jkr-view img { position: absolute; top: 0; left: 0; width: 100%; height: auto; will-change: transform; max-width: none }
/* Istas lapas stavokli, uzņemti ar isto klikski. Tie stav virs pamatattela un
   tiek nolikti no skripta pec ta pasa meroga, tapec sedz tiesi to gabalu, kas
   lapa tiesham mainas. */
.jkr-over {
  position: absolute; z-index: 2; width: auto; height: auto;
  opacity: 0; transition: opacity .28s ease; will-change: opacity;
  pointer-events: none;
}
.jkr-trail { display: none }
.jkr-cur { position: absolute; width: 24px; height: 24px; z-index: 5; pointer-events: none; transition: opacity .3s; will-change: left, top }
.jkr-cur svg { display: block; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45)) }
.jkr-cur::after {
  content: ''; position: absolute; left: -11px; top: -11px; width: 46px; height: 46px;
  border: 2px solid var(--jk-coral); border-radius: 50%; opacity: 0;
}
.jkr-cur.click::after { animation: jkPing .6s ease-out }
@keyframes jkPing { from { transform: scale(.2); opacity: 1 } to { transform: scale(1); opacity: 0 } }
/* Burbulis ir tas, kas sadalaa ir JALASA, tapec tam ir jabut redzamakajam
   kadraa, ne pieticigi noliktam sturi.

   Te bija divi meginajumi, un abi krita. Vispirms burbulis vienmer bija
   tumss: uz gaissas lapas daljas stradaja, uz tumsa hero foto pazuda.
   Tad krasu sāka izveleties pec grunts spilgtuma, un tas krita citadi:
   viena pietura iet PARI robezai (Izaugsme sakas uz gaissas virsrakstu
   joslas un beidzas uz tumsam bildem), tapec burbulis parsledzas pietura
   vidu, un uz ekrana tas izskatijas pec kludas. Lemums uz visu pieturu to
   nelaboja: uz jauktas grunts katrs lemums ir nepareizs kadaa pieturas
   dalaa.

   Tapec grunts te vairs netiek jautats. Burbulis ir BALTA KARTITE ar
   malu un enu, tas pats, kas lapas kartites: balts ar 1px malu lasas gan
   uz tumsa foto, gan uz baltas lapas, gan uz sadalas siltas grunts.
   Kreisa mala ir tas pieturas krasa, kas sliedee. */
.jkr-note {
  position: absolute; z-index: 5; border-radius: 12px;
  background: #fff; color: var(--jk-ink);
  padding: 12px 15px 12px 14px; font-size: 13.5px; line-height: 1.45; max-width: 248px;
  border: 1px solid var(--jk-rule);
  border-left: 3px solid var(--jkr-cd, var(--jk-accent));
  box-shadow: 0 20px 44px -16px rgba(14, 18, 17, .6), 0 2px 8px rgba(14, 18, 17, .12);
  opacity: 0; transform: translateY(7px) scale(.985);
  transition: opacity .35s, transform .35s; pointer-events: none;
}
.jkr-note b {
  display: block; font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--jkr-cd, var(--jk-accent)); margin-bottom: 5px; font-family: 'JetBrains Mono', monospace;
}
.jkr-note.on { opacity: 1; transform: translateY(0) scale(1) }
/* Smaile uz to vietu, par kuru burbulis runa. Puse mainas: burbulis stav taja
   kadra pusee, kur ir vairak vietas, tapec smaile ir pretejaa malaa.

   Tas ir PAGRIEZTS kvadrats, kas parklajas ar burbuli, ne malu trijsturis.
   Trijstura pamatne pieskaras burbula malai tiesi tur, kur iet 1px gaissa
   svitra no box-shadow, un ta svitra gaja smailei PARI: uz ekrana izskatijas,
   ka smaile ir atsprāgusi nost. Kvadrats sez zem burbula, tapec savienojuma
   vietas vairs nav. */
.jkr-note::after {
  content: ''; position: absolute; top: var(--jkr-ty, 22px);
  width: 14px; height: 14px; margin-top: -7px;
  background: #fff; border: 1px solid var(--jk-rule); box-sizing: border-box;
  transform: rotate(45deg); border-radius: 2px;
  right: -5px; clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* clip-path nogriez to pusi, kas iet burbulim PARI: bez ta kvadrata malas
   uzzimejas ari burbula ieksa un lasas ka svitra.

   Griezums tiek rekinats kvadrata PASA koordinatas, pirms pagriesana, tapec
   sturi jaskaita ta, kur tie nonak PEC rotate(45deg): kreisais augssejais
   kljust par augssejo smaili, labais augssejais par labo, labais apakssejais
   par apaksejo, kreisais apakssejais par kreiso. Pirmaja versijaa te bija
   likti taadi sturi, kas dod diamanta APAKSSEJO pusi, tapec smaile radija uz
   leju, ne uz sanu: uz ekrana tas izskatijas pagriezts par 90 gradiem. */
.jkr-note.jkr-right::after {
  right: auto; left: -5px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* --------------------------- sanu sliede ---------------------------------
   Tas pats celjs, kas procesa sadalaa: numureti mezgli ar ikonu, saistiti ar
   vienu liniju, un linija tiek IEKRASOTA lidz tai vietai, kur skrollejums ir
   ticis. Divas linijas viena virs otras: apakseja bala, augseja pilnaa
   gradienta krasa un aizklata no apaksas.
   ------------------------------------------------------------------------*/
/* Sliede ir TIKPAT augsta, cik kadrs: pieturas tiek izklatas pa visu kadra
   augstumu, ne saspiestas viena kaudzee ta vidu. Tapec sliede lasas ka kadra
   mala, ne ka saraksts, kas nejausi stav blakus. */
.jkr-rail {
  position: relative; flex: 0 0 auto; width: 232px; align-self: stretch;
  display: flex;
}
.jkr-stops {
  list-style: none; margin: 0; padding: 0; position: relative;
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between;
}
/* Linija sakas pirmaa mezgla centraa un beidzas pedejaa: tapec ta galos
   neizlien ara. Vietu rekina skripts, jo pieturu skaits nav nemainigs. */
.jkr-line, .jkr-lit {
  position: absolute; left: 21px; width: 3px; border-radius: 3px; z-index: 0;
}
.jkr-line { background: var(--jk-ink); opacity: .14 }
.jkr-lit {
  background: linear-gradient(180deg,
    var(--jk-b1) 0%, var(--jk-b2) 33%, var(--jk-b3) 66%, var(--jk-b4) 100%);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .18s linear;
}
.jkr-stop {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 14px;
  padding: 0;
}
/* Mezgls ir TAS PATS, kas procesa solja aplis: neitrals aplis ar plānu malu
   un tumsu zimejumu, un krasu nes GREDZENS, kas tiek uzzimets apkart, kad
   pietura ir sasniegta. Krasaina mala ap krasainu zimejumu te bija cita
   valoda; sistema ir gradienta linija, kas pati sevi uzzime. */
.jkr-node {
  flex: 0 0 auto; position: relative; box-sizing: border-box;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--jk-rule); background: var(--jk-paper);
  display: flex; align-items: center; justify-content: center;
  color: var(--jk-mute);
  transition: color .3s ease, border-color .3s ease, background .3s ease,
    transform .3s cubic-bezier(.22, 1, .36, 1);
}
.jkr-node > svg { width: 22px; height: 22px; display: block }
/* svg.jkr-ring, ne tikai .jkr-ring: gredzens ir TIESHS svg berns mezglaa,
   tapec .jkr-node > svg { width: 22px } to keera lidzi un uzlika gredzenam
   ikonas izmeru. Abiem bija viena svara selektors, un uzvareja tas, kas stav
   zemak. Gredzens iznaca 22px vietaa 46px un salida ikonai virsu. */
.jkr-node > svg.jkr-ring {
  position: absolute; left: -1px; top: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  pointer-events: none; overflow: visible;
}
.jkr-ring circle {
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
  transition: stroke-dashoffset .75s cubic-bezier(.22, 1, .36, 1), opacity .12s;
}
.jkr-stop.done .jkr-ring circle { stroke-dashoffset: 0; opacity: 1 }
.jkr-num {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em;
  color: var(--jk-mute); width: 19px; flex: 0 0 auto;
  transition: color .3s ease;
}
.jkr-lab {
  font-family: 'Inter Tight', sans-serif; font-size: 15px; line-height: 1.25;
  font-weight: 500; letter-spacing: -.008em; color: var(--jk-mute); min-width: 0;
  transition: color .3s ease;
}
/* Pietura, kas jau ir aiz muguras, paliek iededzinata: cels ir redzams viss,
   ne tikai tas punkts, kur tu stavi. Mainas zimejums un vards; krasa nak no
   gredzena, tapat ka procesa solim. */
.jkr-stop.done .jkr-node { border-color: transparent; color: var(--jk-ink) }
.jkr-stop.done .jkr-num { color: var(--jk-ink) }
.jkr-stop.done .jkr-lab { color: var(--jk-ink) }
.jkr-stop.now .jkr-node { transform: scale(1.06) }
.jkr-stop.now .jkr-lab { font-weight: 650 }
/* Uz darbvirsmas vards stav pie katra mezgla, tapec atseviska rinda nav
   vajadziga. Uz telefona ir otradi: sk. mazo ekranu bloku. */
.jkr-now { display: none }

/* ============================ mazie ekrani ==============================
   Siena klust par rezgi ar attieciba 390x844, jo pieci dzivi ramji uz mobilajiem
   datiem nav ne iespejami, ne vajadzigi.

   Buve un ieraksts turpretī SKRIEN ari uz telefona. Ieprieksh tie te tika
   izsleegti: buve uzreiz paradija gatavo lapu ar pieciem pieskaramiem soliem, un
   ieraksts kluva par nekustigu bilzhu sarakstu. Abas sadalas eksiste TIKAI tapec,
   ka kaut kas notiek laika gaita, tapec bez tā cilveks vienkarshi aizskrollee tam
   garam un nekad neredz, ko tas raada. Pieciem soliem 620vh uz telefona butu
   mokas, tapec skatuve ir isaka, bet piespraudums paliek.
   ======================================================================*/
@media (prefers-reduced-motion: reduce), (max-width: 900px) {
  .jkb-frame { width: 100% }
  .jkb-steps { gap: 6px }
  .jkb-step {
    border: 1px solid rgba(248, 247, 243, .22); border-radius: 999px;
    padding: 6px 12px; cursor: pointer;
  }
  .jkb-step.on { border-color: var(--jk-coral) }
  .jkw-stage { height: auto !important }
  /* Divas kolonnas ari uz telefona. Vienā kolonnā piecas kartītes ar 390x844
     attiecību ir 4200px, tas ir pieci pilni ekrāni klientu lapu vidū
     pakalpojuma lapas, un neviens tik tālu neskrollē. Divās kolonnās tas ir
     nedaudz vairāk par vienu ekrānu. */
  .jkw-grid {
    position: static; padding: 0 clamp(16px, 3vw, 28px);
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  }
  .jkw-cell {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    aspect-ratio: 390/844;
  }
  .jkw-head { grid-template-columns: 1fr }
  /* Uz darbvirsmas kartite ir visa lapa un tablete stav uz hero tumsas apaksas.
     Uz telefona kartite ir 390x620 IZGRIEZUMS, tapec ta pati tablete nokrit
     lapas VIDU: uz komanda24 tā apsēdās uz WhatsApp pogas, uz Medfix uz
     specialistu rindas. Peldosa plaksne uz dzivas pogas izskatas pec vainas.
     Pilna platuma josla pie apakssas malas lasas ka paraksts zem attela. */
.jkw-cell .name {
    left: 0; right: 0; bottom: 0; max-width: none;
    border-radius: 0; padding: 8px 10px;
    background: rgba(9, 14, 12, .9);
    /* 26 zimes x 0,04em retinajuma ir apmeram 10px, un tiesi tie deva
       daudzpunkti garakajam nosaukumam 153px joslā. Monospace pie 9,5px tur
       stav bez retinajuma tikpat labi. */
    letter-spacing: 0;
  }
  .jkr-frame { width: 100%; max-width: none; aspect-ratio: 3/4 }
  /* Kursors ir peles zimulis, un uz telefona peles nav. Burbuli PALIEK: tie ir
     piesieti kadram, ne kursoram, un tiesi tie pasaka, par kuru lapas vietu
     iet runa. */
  .jkr-cur, .jkr-trail { display: none }
  .jkr-note { max-width: min(226px, 78%); font-size: 12.5px }
  .jklb { flex-direction: column }
  .jklb-side { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px }
  .jklb-side .why { display: none }
}
/* Šaurā kolonnā 390x844 kļūst par zīmuli, tāpēc kartīte kļūst īsāka, nevis
   šaurāka: joprojām lapas augša, tikai mazāk no tās. */
@media (max-width: 560px) {
  .jkw-cell { aspect-ratio: 390/620 }
  /* 8px bija par mazu pat zimei: audits to atrada ka vienigo tekstu zem
     8,5px uz visas lapas. */
  /* Saurakas malas dod garakajam nosaukumam vel ~14px, tapec lielaka dala no
     tiem ietilpst pilniba un daudzpunkte paliek tikai ka drosinatajs. */
  .jkw-cell .name { font-size: 9.5px; padding: 5px 8px }
  .jkw-cell .kind { font-size: 9px }
}

/* ==================== buve un ieraksts uz telefona ======================
   Piespraudums PALIEK, tikai skatuve ir isaka. Uz darbvirsmas buvei ir 620vh
   un ierakstam 700vh; uz telefona tas butu attiecigi 8 un 9 pilni ekrani
   viena sadala, tapec te ir 340vh un 400vh: katram posmam paliek nedaudz
   vairak par pusi ekrana, kas pietiek, lai to redzetu notiekam, un nepietiek,
   lai apniktu.

   Augssejais atstatums ir 76px, nevis 96px: lapas galvene uz telefona ir 73px
   augsta, ne 52px ka uz darbvirsmas. ======================================*/
@media (max-width: 900px) {
  /* Apakssa stav .sticky-mobile josla ar divam pogam: 71px, kas piespraustajam
     kadram NEPIEDER. Bez sis rezerves ieraksta pulkstenis un piezimes rinda
     palika tieshi zem tas, un buves saturs, kas ir tikai 494px augsts, tika
     centrets pa visiem 844px un atstaja 227px tuksa melna virs uzraksta.
     Ar rezervi tas pats saturs stav ap 100px no augssas un no apakssas. */
  .jkb-stage { height: 340vh }
  .jkb-pin { padding-top: 76px; padding-bottom: 76px; gap: 8px }
  /* Josla zem kadra ir vienigais, kas pasaka, cik tālu posms ir ticis, un uz
     telefona tas ir vajadzigaks neka uz darbvirsmas, jo soli ir mazaki. */
  .jkb-track { display: block }
  .jkr-stage { height: 400vh }
  /* Kadram ir jastav LAPAS IEKSHA, ne pari visam ekranam.

     Pie pilna platuma klienta lapa aizņēma no malas lidz malai, sturi tika
     nogriezti, un skrollejot tas izskatijas ta, it ka butu aizgajis uz citu
     vietni. Ar malam apkart, apaliem sturiem un enu redz, ka tas ir logs
     lapaa, tapat ka uz darbvirsmas. */
  /* Atstarpes augssa un apaksa NAV uzminetas: tas nolasa skripts no pasas
     galvenes un pasas pogu joslas (sk. fitPin showcase.js). 76px bija viens
     skaitlis abam, un galvene ir 73px pie 390 un 98px pie 768: tapec pie
     549px uzraksts aizgaja zem galvenes, un kadra apaksa zem pogu joslas. */
  .jkr-pin { padding-top: var(--jkr-top, 76px); padding-bottom: var(--jkr-bot, 76px);
    padding-left: clamp(14px, 4vw, 22px); padding-right: clamp(14px, 4vw, 22px) }
  /* 3:4 ir TELEFONA EKRANA proporcija, tapec pilnaa platuma tas lasijas ka
     lapa, uz kuras tu esi, ne ka logs, kuru tu skaties. Kvadrats lasas ka
     logs, un turklat viss kopa ietilpst redzamajaa ekrana ari tad, kad
     parluka josla nem savu dalu. */
  /* Kvadrats, un platums nak no ta, cik AUGSTUMA ir palicis pari. Bez ta
     kadrs pie 549px izauga par 505px un izgaja zem pogu joslas. */
  .jkr-frame { aspect-ratio: 1/1; width: min(100%, var(--jkr-fit, 100%));
    border-radius: 12px; box-shadow: 0 18px 44px -20px rgba(14, 18, 17, .5) }
  .jkr-now { margin: 0 0 2px }
  /* Uz telefona sliede nevar stavet blakus kadram, tapec ta apgriezas: tie
     pasi mezgli, ta pati gradienta linija, tikai gulus zem kadra. Vardi
     nokrit prom, jo pie 390px septini vardi blakus nav lasami; paliek
     numurs un ikona, un pilnais nosaukums stav burbuli. */
  /* Sliede stav VIRS kadra, ne zem ta. Zem kadra ta bija pirmais, kas
     nokrita ārpus ekrāna: apaksaa stav lipiga divu pogu josla, un virs tas
     vairs nepalika vietas. Skrollejot tas nozimeja, ka progresa joslu
     neredz vispar, un tad ta ir lieka. */
  .jkr-main { flex-direction: column-reverse; gap: 12px; width: 100% }
  .jkr-rail { width: 100%; align-self: auto; flex-direction: column }
  .jkr-stops { flex-direction: row; align-items: flex-start; justify-content: space-between }
  .jkr-stop { flex: 1 1 0; flex-direction: column; gap: 5px; padding: 0; justify-content: flex-start }
  /* Vardi pie katra mezgla pie 390px neietilpst, tapec paliek tikai zimejums
     un numurs, un pilnais vards stav zem joslas, viens, par to pieturu, kur
     ieraksts ir tagad. */
  .jkr-lab { display: none }
  .jkr-num { width: auto; text-align: center; font-size: 9.5px }
  .jkr-node { width: 34px; height: 34px }
  .jkr-node > svg { width: 17px; height: 17px }
  .jkr-line, .jkr-lit { left: auto; width: auto }
  .jkr-now {
    display: block; margin: 9px 0 0; text-align: center;
    font-family: 'Inter Tight', sans-serif; font-size: 14.5px; font-weight: 600;
    letter-spacing: -.01em; color: var(--jk-ink); min-height: 1.2em;
  }
}

/* ======================= bez kustibas =================================
   Sis bloks stav PEC mobila, tapec uz telefona ar iesleegtu "mazak kustibas"
   uzvar tas: nekada piespraustā skrollēšana, viss uzreiz un klusi.
   ======================================================================*/
@media (prefers-reduced-motion: reduce) {
  .jkb-stage { height: auto }
  .jkb-pin { position: static; height: auto; padding: 26px 0 34px }
  .jkb-track { display: none }
  .jkr-stage { height: auto }
  .jkr-pin { position: static; height: auto; padding: 20px clamp(16px,5vw,24px) 30px;
    overflow: visible }
  .jkr-rail { display: none }
  .jkr-note { opacity: 1; position: static; transform: none; max-width: none;
    margin: 8px 0; transition: none }
  /* Bez kustibas ieraksts ir solu virkne: izgriezums no lapas un teksts zem ta.
     Logs ir 4:3, jo tas ir tuvakais tam, ko cilveks tur redz viena acu metiena. */
  .jkr-steps { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 26px }
  .jkr-step { margin: 0 }
  .jkr-win {
    position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden;
    border-radius: 10px; border: 1px solid var(--jk-rule); background: #fff;
  }
  .jkr-win img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none }
  .jkr-step figcaption {
    margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--jk-ink);
  }
  .jkr-step figcaption b {
    display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--jk-coral);
    margin-bottom: 5px; font-weight: 500;
  }
}

/* Kad rinda ir platāka neka vieta, ta tiek nogriezta pie sadalas malas un
   bidita ar bultam. Nekas nekustas pats no sevis. */
.jkw.jkw-pan .jkw-grid { overflow: hidden }
.jkw-nav { position: absolute; inset: 0; pointer-events: none; z-index: 12 }
.jkw-nav[hidden] { display: none }
.jkw-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  pointer-events: auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248, 247, 243, .94); color: var(--jk-ink);
  border: 0; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .8);
  transition: opacity .2s, background .2s;
}
.jkw-arrow svg { width: 21px; height: 21px }
.jkw-prev { left: clamp(4px, 1vw, 12px) }
.jkw-next { right: clamp(4px, 1vw, 12px) }
.jkw-arrow:hover { background: #fff }
.jkw-arrow:focus-visible { outline: 2px solid var(--jk-coral); outline-offset: 3px }

/* Lapas pasa fokusa gredzens ir var(--ink) #0E1211, un uz #0B0F0E fona tas ir
   1,02 pret 1: taustinu celjs pa sadalu bija neredzams. Kas stav uz tumsa,
   zime savu gredzenu. */
.jkw-cell:focus-visible,
.jkb-step:focus-visible,
.jkb-sites button:focus-visible,
.jklb-x:focus-visible,
.jklb-go:focus-visible { outline: 2px solid var(--jk-coral); outline-offset: 3px }
/* Gala sasniegts: poga paliek vieta, lai rinda nelektu, bet vairs nesola neko. */
.jkw-arrow:disabled { opacity: 0; pointer-events: none }

/* ---- CTA sadalu beigas -----------------------------------------------------
   Poga NAV parkrasota: ta tiek klonēta no lapas savas CTA joslas kopa ar
   klasem, tapec ta ir tieshi ta pati .btn-primary, kas lapai jau ir. Sheit ir
   tikai novietojums. Ieprieks te bija sava poga ar --jk-* mainigajiem, un tie
   ir deklareti tikai uz .jkw/.jkb/.jkr: sadalas #situacija/#process tie
   neatrisinajas, fons pazuda un palika gaiss aplis uz gaisa fona. */
.jk-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  max-width: 1400px; margin: clamp(20px, 3vw, 34px) auto 0;
  padding: 0 clamp(16px, 3vw, 28px);
}
.jk-cta-note { font-size: 14px; margin: 0; opacity: .72 }


/* ---- ko lapa dod --------------------------------------------------------
   Janja prasitas rindas ("uzlabots atrums, konversiju pieaugums, ppc ready").
   Tas stav sadalas augsa, virs kartitem: tas ir tas, ko sadala SOLA, un tas
   jaredz pirms darbiem, ne pec klikska uz kadu no tiem. Ar CTA pogu sadalas
   beigas tam nav nekada sakara: ta ir darbiba, sis ir apgalvojums.

   Teksts stav LAPAS markupa, ne seit, jo sis fails ir kopigs LV, EN un RU. */
.jkw-benefits {
  grid-column: 1 / -1;
  list-style: none; margin: clamp(14px, 2vw, 22px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.jkw-benefits li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: rgba(248, 247, 243, .07);
  border: 1px solid rgba(248, 247, 243, .18);
  color: #fff; font-size: 14px; font-weight: 500; letter-spacing: -.005em;
}
/* Kekssis zimets, ne burts: tas nekad nemainas ne ar fontu, ne ar valodu. */
.jkw-benefits li::before {
  content: ''; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  background:
    linear-gradient(transparent, transparent),
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.5 2.5 5-5.4' fill='none' stroke='%230B0F0E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat,
    var(--jk-b1, #57A85B);
}
.jkw-benefits li:nth-child(2)::before { background-color: var(--jk-b2, #F2C51A) }
.jkw-benefits li:nth-child(3)::before { background-color: var(--jk-b3, #5988C6) }
@media (max-width: 560px) {
  .jkw-benefits li { font-size: 13px; padding: 8px 13px 8px 11px }
}

/* Telefona logaa stav attels, ne iframe: to var ritinat cauri visai lapai,
   un tas ir uzreiz, jo attels jau ir ieladets kartitee. */
.jklb-still { width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch }
.jklb-still img { display: block; width: 100%; height: auto; max-width: none }