/* ============================================================================
   Zimola krasas un uzbraukiena efekti VISAI vietnei.

   Lidz sim tas stavea iekshpusee sesu web lapu <style> blokos, tapec parejas
   337 lapas bija bez tam.

   Sis fails tiek ievilkts PIRMS lapas sava <style> bloka, tapec lapa vienmer
   ir stiprakaa: kur tai jau ir savs risinajums (web lapas), paliek tas.
   Markupu, kas vajadzigs gredzeniem un otrai linijai, ieliek brand.js.

   Krasas nak no jkonsult.lv logotipa cetriem punktiem, ne no jaunas paletes.
   ==========================================================================*/

:root {
  --b-green:  #57A85B;
  --b-yellow: #F2C51A;
  --b-blue:   #5988C6;
  --b-orange: #F26839;
  /* Viens gradients visam. Katra linija, kas iedegas, lieto SHO, nevis savu
     atsevisku krasu: ta visa lapa runa vienā zime, nevis klust raiba. */
  --b-line: linear-gradient(90deg,
    var(--b-green) 0%, var(--b-yellow) 33%, var(--b-blue) 66%, var(--b-orange) 100%);
  /* Garaka versija ar plakaniem posmiem: to lieto procesa linija, kur katram
     solim jasakrit ar savu krasu, ne jaizpluust vienam otra. */
  --b-line-steps: linear-gradient(90deg,
    var(--b-green) 0%,  var(--b-green) 6%,   var(--b-yellow) 19%, var(--b-yellow) 31%,
    var(--b-blue) 44%,  var(--b-blue) 56%,   var(--b-orange) 69%, var(--b-orange) 81%,
    var(--b-green) 94%, var(--b-green) 100%);
}

/* ===========================================================================
   1. KARTITES
   ========================================================================= */
/* --- kartisu josla: 22 klases ------------------------------------------
   Katrai kartitei rinda ir SAVS gradienta gabals: fons ir cetras reizes
   platāks par kartiti, un katra nakama to parbida par ceturtdalu. Ta rinda
   nekad nav vienkrasaina.
   Sarakstu generē scripts, tapec te netruukst neviena kartisu klase. */
.problem-card, .pricing-card, .price-card,
.csrel-card, .cs-card, .related-card,
.blog-card, .tl-card, .gk-card,
.diff-card, .reason-card, .svc-detail-card,
.benefit-card, .icp-card,
.include-item, .factor-item, .service-item, .industry-chip,
.cert-item, .review-card, .card,
.video-card { position: relative }

.problem-card::before, .pricing-card::before, .price-card::before,
.csrel-card::before, .cs-card::before, .related-card::before,
.blog-card::after, .tl-card::before, .gk-card::before,
.diff-card::before, .reason-card::before, .svc-detail-card::before,
.benefit-card::before, .icp-card::before,
.include-item::before, .factor-item::before, .service-item::before, .industry-chip::before,
.cert-item::before, .review-card::before, .card::after,
.video-card::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px;
  background-image: var(--b-line); background-size: 400% 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  z-index: 3; pointer-events: none;
}
.problem-card::before, .pricing-card::before, .price-card::before,
.csrel-card::before, .cs-card::before, .related-card::before,
.tl-card::before, .gk-card::before, .diff-card::before,
.reason-card::before, .svc-detail-card::before, .benefit-card::before,
.icp-card::before, .include-item::before,
.factor-item::before, .service-item::before, .industry-chip::before, .cert-item::before,
.review-card::before { top: 0 }
/* Attels stav augssaa, tapec josla iet apaksaa. */
.card::after, .video-card::after, .blog-card::after { bottom: 0; z-index: 4 }

.problem-card:nth-of-type(4n+1)::before, .pricing-card:nth-of-type(4n+1)::before, .price-card:nth-of-type(4n+1)::before,
.csrel-card:nth-of-type(4n+1)::before, .cs-card:nth-of-type(4n+1)::before, .related-card:nth-of-type(4n+1)::before,
.blog-card:nth-of-type(4n+1)::after, .tl-card:nth-of-type(4n+1)::before, .gk-card:nth-of-type(4n+1)::before,
.diff-card:nth-of-type(4n+1)::before, .reason-card:nth-of-type(4n+1)::before, .svc-detail-card:nth-of-type(4n+1)::before,
.benefit-card:nth-of-type(4n+1)::before, .icp-card:nth-of-type(4n+1)::before,
.include-item:nth-of-type(4n+1)::before, .factor-item:nth-of-type(4n+1)::before, .service-item:nth-of-type(4n+1)::before, .industry-chip:nth-of-type(4n+1)::before,
.cert-item:nth-of-type(4n+1)::before, .review-card:nth-of-type(4n+1)::before, .card:nth-of-type(4n+1)::after,
.video-card:nth-of-type(4n+1)::after { background-position: 0% 0 }
.problem-card:nth-of-type(4n+2)::before, .pricing-card:nth-of-type(4n+2)::before, .price-card:nth-of-type(4n+2)::before,
.csrel-card:nth-of-type(4n+2)::before, .cs-card:nth-of-type(4n+2)::before, .related-card:nth-of-type(4n+2)::before,
.blog-card:nth-of-type(4n+2)::after, .tl-card:nth-of-type(4n+2)::before, .gk-card:nth-of-type(4n+2)::before,
.diff-card:nth-of-type(4n+2)::before, .reason-card:nth-of-type(4n+2)::before, .svc-detail-card:nth-of-type(4n+2)::before,
.benefit-card:nth-of-type(4n+2)::before, .icp-card:nth-of-type(4n+2)::before,
.include-item:nth-of-type(4n+2)::before, .factor-item:nth-of-type(4n+2)::before, .service-item:nth-of-type(4n+2)::before, .industry-chip:nth-of-type(4n+2)::before,
.cert-item:nth-of-type(4n+2)::before, .review-card:nth-of-type(4n+2)::before, .card:nth-of-type(4n+2)::after,
.video-card:nth-of-type(4n+2)::after { background-position: 33.333% 0 }
.problem-card:nth-of-type(4n+3)::before, .pricing-card:nth-of-type(4n+3)::before, .price-card:nth-of-type(4n+3)::before,
.csrel-card:nth-of-type(4n+3)::before, .cs-card:nth-of-type(4n+3)::before, .related-card:nth-of-type(4n+3)::before,
.blog-card:nth-of-type(4n+3)::after, .tl-card:nth-of-type(4n+3)::before, .gk-card:nth-of-type(4n+3)::before,
.diff-card:nth-of-type(4n+3)::before, .reason-card:nth-of-type(4n+3)::before, .svc-detail-card:nth-of-type(4n+3)::before,
.benefit-card:nth-of-type(4n+3)::before, .icp-card:nth-of-type(4n+3)::before,
.include-item:nth-of-type(4n+3)::before, .factor-item:nth-of-type(4n+3)::before, .service-item:nth-of-type(4n+3)::before, .industry-chip:nth-of-type(4n+3)::before,
.cert-item:nth-of-type(4n+3)::before, .review-card:nth-of-type(4n+3)::before, .card:nth-of-type(4n+3)::after,
.video-card:nth-of-type(4n+3)::after { background-position: 66.667% 0 }
.problem-card:nth-of-type(4n+4)::before, .pricing-card:nth-of-type(4n+4)::before, .price-card:nth-of-type(4n+4)::before,
.csrel-card:nth-of-type(4n+4)::before, .cs-card:nth-of-type(4n+4)::before, .related-card:nth-of-type(4n+4)::before,
.blog-card:nth-of-type(4n+4)::after, .tl-card:nth-of-type(4n+4)::before, .gk-card:nth-of-type(4n+4)::before,
.diff-card:nth-of-type(4n+4)::before, .reason-card:nth-of-type(4n+4)::before, .svc-detail-card:nth-of-type(4n+4)::before,
.benefit-card:nth-of-type(4n+4)::before, .icp-card:nth-of-type(4n+4)::before,
.include-item:nth-of-type(4n+4)::before, .factor-item:nth-of-type(4n+4)::before, .service-item:nth-of-type(4n+4)::before, .industry-chip:nth-of-type(4n+4)::before,
.cert-item:nth-of-type(4n+4)::before, .review-card:nth-of-type(4n+4)::before, .card:nth-of-type(4n+4)::after,
.video-card:nth-of-type(4n+4)::after { background-position: 100% 0 }

.problem-card:hover::before, .pricing-card:hover::before, .price-card:hover::before,
.csrel-card:hover::before, .cs-card:hover::before, .related-card:hover::before,
.blog-card:hover::after, .tl-card:hover::before, .gk-card:hover::before,
.diff-card:hover::before, .reason-card:hover::before, .svc-detail-card:hover::before,
.benefit-card:hover::before, .icp-card:hover::before,
.include-item:hover::before, .factor-item:hover::before, .service-item:hover::before, .industry-chip:hover::before,
.cert-item:hover::before, .review-card:hover::before, .card:hover::after,
.video-card:hover::after { transform: scaleX(1) }

/* --- pacelsanas un mala ------------------------------------------------ */
.problem-card, .pricing-card, .price-card,
.csrel-card, .cs-card, .related-card,
.blog-card, .tl-card, .gk-card,
.diff-card, .reason-card, .svc-detail-card,
.benefit-card, .icp-card,
.include-item, .factor-item, .service-item, .industry-chip,
.cert-item, .review-card, .card,
.video-card {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              border-color .3s ease, box-shadow .35s ease;
}
.csrel-card:hover, .cs-card:hover, .video-card:hover,
.pricing-card:hover, .price-card:hover, .related-card:hover,
.blog-card:hover, .tl-card:hover, .gk-card:hover {
  transform: translateY(-2px); border-color: var(--ink, #0E1211);
  box-shadow: 0 14px 30px rgba(14, 18, 17, .08);
}
.problem-card:hover, .diff-card:hover, .reason-card:hover,
.svc-detail-card:hover, .benefit-card:hover, .icp-card:hover,
.include-item:hover, .factor-item:hover,
.service-item:hover, .industry-chip:hover, .cert-item:hover, .review-card:hover,
.card:hover {
  transform: translateY(-2px); border-color: var(--rule-strong, #B8B5AB);
  box-shadow: 0 14px 32px -18px rgba(14, 18, 17, .35);
}

/* Kartites ieksha ari kaut kas atbild, ne tikai pati kaste. */
.card:hover .card-link { color: var(--ink, #0E1211); border-color: var(--ink, #0E1211) }
.csrel-card:hover .csrel-card-read,
.cs-card:hover .cs-card-read { text-decoration: underline }
.video-card:hover .video-play { opacity: 1; transform: scale(1.05) }
.btn-primary:hover .arrow, .btn-text:hover .arrow { transform: translateX(4px) }

/* --- kaili saraksti ------------------------------------------------------
   vstrip-item, info-item un member-card ir BEZ malas un BEZ fona. Tiem josla
   un ena uzzime kasti, kuras nav: skaitlju rinda no ta izskatas sabojata.
   Uzbraucot tur iedegas tikai numurs, un vairak tur nevajag. */
.vstrip-item .num, .info-item .num { transition: color .3s ease }
.vstrip-item:hover .num, .info-item:hover .num { color: var(--b-green) }
.vstrip-item:nth-of-type(4n+2):hover .num, .info-item:nth-of-type(4n+2):hover .num { color: #B8930C }
.vstrip-item:nth-of-type(4n+3):hover .num, .info-item:nth-of-type(4n+3):hover .num { color: var(--b-blue) }
.vstrip-item:nth-of-type(4n+4):hover .num, .info-item:nth-of-type(4n+4):hover .num { color: var(--b-orange) }

/* ===========================================================================
   2. PROCESA LINIJA
   Divas linijas viena virs otras: apakseja ir bala, augseja pilnaa krasa un
   aizklata. Uzbraucot solim atklajas TIKAI ta gabals, kas pieder sim solim.
   Aizklajumu rekina brand.js, jo solju skaits lapaa ir 3, 4 vai 5.
   ========================================================================= */
.steps-wrap .steps-line {
  /* Linija ir .steps-grid BLAKUS, ne ieksha, tapec .steps-grid .steps-line
     nekad nesakristu. Divu klasu selektors parspej lapas savu .steps-line,
     kur background isais pieraksts nodzes gradientu. */
  height: 2px;
  background-image: var(--b-line-steps);
  background-color: transparent;
  opacity: .26;
  transition: opacity .35s ease;
}
.steps-wrap .steps-line-lit {
  position: absolute; z-index: 0; border-radius: 2px;
  background-image: var(--b-line-steps);
  opacity: 0;
  /* Sakuma aizklats viss: bez sha pirms pirma uzbraukiena butu redzama visa
     pilnaa krasa. */
  clip-path: inset(0 100% 0 0);
  transition: opacity .3s ease, clip-path .45s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.steps-wrap.jk-step-on .steps-line { opacity: .12 }
.steps-wrap.jk-step-on .steps-line-lit { opacity: 1 }

/* Solja aplis pacelas un panem sava posma krasu. */
.step-item .step-node {
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
}
.step-item:hover .step-node { transform: translateY(-2px) }
.step-item:nth-child(4n+1):hover .step-node { border-color: var(--b-green);  color: var(--b-green) }
.step-item:nth-child(4n+2):hover .step-node { border-color: var(--b-yellow); color: #B8930C }
.step-item:nth-child(4n+3):hover .step-node { border-color: var(--b-blue);   color: var(--b-blue) }
.step-item:nth-child(4n+4):hover .step-node { border-color: var(--b-orange); color: var(--b-orange) }

/* ===========================================================================
   3. GREDZENS, KAS UZZIMEJAS
   pathLength="100" nozime, ka celja garums vienmer ir 100 neatkarigi no
   izmera, tapec dasharray 100 ar dashoffset 100 to paslepj pilniba, un
   dashoffset 0 to uzzime apkart. Tas ir zimejums, ne izgaisinajums.
   ========================================================================= */
.highlight-icon, .step-node { position: relative }
.hi-ring {
  position: absolute; left: -3px; top: -3px;
  width: calc(100% + 6px); height: calc(100% + 6px);
  pointer-events: none; overflow: visible;
}
.step-node .hi-ring { left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px) }
.hi-ring rect, .hi-ring circle {
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  /* Bez opacity uz neuzbraukta lauciņa sturi paliek krasains punkts: apalais
     linijas gala vaks uzzime pats sevi ari tad, kad zimejamas linijas garums
     ir nulle. Tas pats, kas jau bija jaatrisina mapes gredzenam. */
  opacity: 0;
  transition: stroke-dashoffset .75s cubic-bezier(.22, 1, .36, 1), opacity .12s;
}
.highlight-item:hover .highlight-icon .hi-ring rect,
.step-item:hover .step-node .hi-ring circle { stroke-dashoffset: 0; opacity: 1 }
.highlight-item .highlight-icon { transition: transform .3s ease }
.highlight-item:hover .highlight-icon { transform: translateY(-2px) }

/* ===========================================================================
   4. BUJ: zimola stavus svitra pie katra jautajuma
   Ta pati doma, kas mapes sarakstaa: katra rinda tur savu gabalu, un atverta
   rinda to iededz.
   ========================================================================= */
.faq-list { position: relative }
.faq-item { position: relative }
.faq-item::before {
  content: ''; position: absolute; left: -14px; top: -1px; bottom: -1px; width: 2px;
  border-radius: 2px; opacity: .16;
  background: linear-gradient(180deg, var(--b-green), var(--b-yellow));
  transition: opacity .3s ease, width .3s ease;
}
.faq-item:nth-child(4n+2)::before { background: linear-gradient(180deg, var(--b-yellow), var(--b-blue)) }
.faq-item:nth-child(4n+3)::before { background: linear-gradient(180deg, var(--b-blue), var(--b-orange)) }
.faq-item:nth-child(4n+4)::before { background: linear-gradient(180deg, var(--b-orange), var(--b-green)) }
.faq-item:hover::before { opacity: .5 }
.faq-item[open]::before { opacity: 1; width: 3px }

@media (max-width: 900px) {
  /* Sanaraa lapaa 14px pa kreisi no BUJ nav, tapec svitra stav pie pasas malas. */
  .faq-item::before { left: -8px }
}

@media (prefers-reduced-motion: reduce) {
.problem-card::before, .pricing-card::before, .price-card::before, .csrel-card::before,
.cs-card::before, .related-card::before, .blog-card::after, .tl-card::before,
.gk-card::before, .diff-card::before, .reason-card::before, .svc-detail-card::before,
.benefit-card::before, .icp-card::before, .include-item::before,
.factor-item::before, .service-item::before, .industry-chip::before, .cert-item::before, .review-card::before,
.card::after, .video-card::after, .problem-card, .pricing-card,
.price-card, .csrel-card, .cs-card, .related-card,
.blog-card, .tl-card, .gk-card, .diff-card,
.reason-card, .svc-detail-card, .benefit-card, .icp-card,
.icp-box, .include-item, .factor-item, .service-item, .industry-chip,
.cert-item, .review-card, .card, .video-card,
  .steps-line, .steps-line-lit, .step-item .step-node,
  .hi-ring rect, .hi-ring circle, .highlight-item .highlight-icon,
  .vstrip-item .num, .info-item .num,
  .faq-item::before { transition: none }
}

/* ===========================================================================
   5. RINDA, KAS NEIETILPST -> SLIDERIS
   Tas pats izskats, kas lapas savam .csrel-grid[data-mode="scroll"]: ta jau ir
   uzrakstita 58 lapaas, tapec sheit tikai tas pats parejiem rezgiem, kam sava
   slidera nav. Ieslegsana notiek brand.js pec MERIJUMA, ne pec minejuma.
   ========================================================================= */
.jk-slider {
  /* !important sheit ir apzinats: brand.css tiek ievilkts PIRMS lapas sava
     stila, un lapai ir .cs-grid{display:grid}, kas citadi uzvar. Sis ir
     vienigais gadijums failaa, kur lapai tiek atnemta virsroka, un tas ir
     tapec, ka slidera slēdzis nak no merijuma, ne no lapas. */
  display: flex !important; gap: 20px; overflow-x: auto !important;
  scroll-snap-type: x mandatory; scroll-padding: 24px;
  padding: 8px 24px 20px; margin: 0 -24px;
  scrollbar-width: thin;
}
.jk-slider::-webkit-scrollbar { height: 6px }
.jk-slider::-webkit-scrollbar-thumb { background: var(--rule-strong, #B8B5AB); border-radius: 3px }
.jk-slider > * {
  flex: 0 0 340px; min-width: 300px; max-width: 400px;
  scroll-snap-align: start;
}
/* Saistito pakalpojumu kartites ir zemakas un isakas, tapec tam pietiek ar
   mazaku platumu; citadi piecas kartites izstieptos pari ekranam. */
.related-grid.jk-slider > * { flex: 0 0 260px; min-width: 240px; max-width: 300px }

/* ==========================================================================
   HORIZONTALA PARPLUDE UZ TELEFONA

   Merits, ne minets: 390px un 360px platuma 19 lapas stumj lapu platumaa,
   un cilveks tas var skrollet uz sanem. Cetras no piecam iemesliem ir
   trukstosa parnese, un tos var salabot vienuviet, jo neviena lapa savu
   overflow-wrap/flex-wrap tam nedeklare, tapec sheit nav ko parrakstit.
   Atlikusos divus (highlights-row kartiba un inline stat-grid) sheit
   salabot nevar, tie ir izlaboti pasas lapas.
   ======================================================================= */

/* Gari vardi virsrakstos: "produkcijas"/"lemumpienemejus" tipa salikteni
   360px platuma izstiepa lapu lidz +44px. */
.hero h1, .article-hero h1, .cta-band h2, .cert-item h3 { overflow-wrap: break-word }

/* Gari URL un koda fragmenti rakstos: 533px plats <code> 342px kolonna. */
.article-body code { overflow-wrap: anywhere }
/* <pre> ir white-space:pre, tapec overflow-wrap tur neko nedara. Vienigais
   veids ir laut blokam skrollet pasam, nevis stumt visu lapu. */
.article-body pre { overflow-x: auto; max-width: 100% }
.article-body pre code { overflow-wrap: normal }

/* Raksta meta rinda (kategorija, datums, lasisanas laiks) ir flex bez
   parneses, tapec "8 min lasisana" aizgaja ara no ekrana. */
.article-meta { flex-wrap: wrap }

/* Sertifikatu regs uz telefona: divas 175px kartites blakus neietilpst.
   Latviski tas tikko ietilpa, krieviski (Налогоплательщик) izgaja lapai
   ara par 2px pie 390 un 32px pie 360. Klase dubultota tapec, ka lapas
   iekseja CSS ielasas PEC brand.css, tapec ar vienu klasi te nepietiek. */
@media (max-width: 480px) { .cert-grid.cert-grid { grid-template-columns: 1fr } }

/* Cena ir 42px viena rinda. Krieviski "индивидуально" viens pats ir platāks
   par savu kasti (303px saturs 262px kastee), tapec 360px lapa aizgaja 10px
   platumaa. Vards nav jalauz uz pusem: pietiek, ka burti sarukst tikai tur,
   kur ekrans tiesham ir sauras. Lidz 494px platumam 42px paliek nemainigi.
   Klase dubultota, jo lapas iekseja CSS ielasas PEC brand.css. */
/* LABOTS: sis noteikums sakuma bija BEZ media query, un ar dubulto klasi ta
   specifika parspeja /web-izstrade/ pashas noteikumu
   .pricing-price{font-size:clamp(26px,2.2vw,33px)}, kas ir pieskanots tas
   cetru kartisu regam. Rezultata cena tur zimejas 42px vietaa, kur kaste
   rekinata ar 33px, un ar white-space:nowrap teksts tika nogriezts.
   Tagad tikai zem 560px, kur regs jau ir viena kolonna, tapec platuma pietiek
   un neviena lapas paskaneta vertiba netiek parrakstita uz datora. */
@media (max-width: 560px) {
  .pricing-price.pricing-price { font-size: clamp(24px, 7vw, 34px) }
}
.pricing-price { overflow-wrap: break-word }

/* ==========================================================================
   DATORA IZKARTOJUMS. Visur, kur klase dubultota, tas ir tapec, ka lapas
   iekseja CSS ielasas PEC brand.css; ar vienu klasi te nepietiktu.
   ======================================================================= */

/* Klienta logotips: max-width:190px, bet kaste ir 124px, tapec Serpantinas
   uzraksts izplūda 66px un uzgūla klienta aprakstam un saitei (merits
   attalums lidz nakamajam blokam bija -44px). Kaste ir robeza. */
div.cs-client-logo img { max-width: 100% }

/* Faktu rinda: repeat(auto-fit, minmax(120px,180px)). 180px griesti nozime,
   ka 682px vieta ietilpst tikai tris celini, tapec ceturtais fakts,
   "Galvenais rezultats", nokrita otraja rinda viens pats un salauzas divas
   rindas, kamer blakus palika ~500px tuksuma. 1fr laut tiem dalities. */
@media (min-width: 601px) {
  .cs-client-facts.cs-client-facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) }
}

/* Izcelta frāze ar white-space:nowrap: latviski ietilpa, krieviski
   "Запросы, где вы можете начать показываться" izgaja virsraksta kastei ara
   par 45px. Frazei jaļauj parnesties; box-decoration-break notur izcelumu
   noapaļotu abos gabalos, kas bija vienigais iemesls likt nowrap. */
.mark.mark, .nb.nb { white-space: normal }
.mark { -webkit-box-decoration-break: clone; box-decoration-break: clone }

/* ==========================================================================
   PIEKLUVIBA UN MOBILAA NAVIGACIJA
   ======================================================================= */

/* Fokusa gredzens bija outline:2px solid var(--ink), t.i. #0E1211, un kajene
   ir #0B0E0D. Merits kontrasts 1.03:1, praktiski neredzams. Ar tastaturu
   ejot cauri kajenei (20+ saites uz 298 lapam) cilveks neredzeja, kur
   atrodas fokuss. Zimola zila #5988C6 jau ir lapaa (hover gradienta),
   un ta merit dod 5.32:1 pret tumso un 3.38:1 pret gaiso, t.i. abas puses
   virs WCAG 3:1 robezas. Selektors ar html priekshaa, jo lapas iekseja CSS
   ielasas PEC brand.css. */
html :focus-visible { outline: 2px solid #5988C6; outline-offset: 3px }

/* .nav-cta uz telefona jaslepj: 337 no 340 lapam to dara, tris ne. Tur
   poga palika redzama 221px plata, .nav-right izauga lidz 284px, un tapec
   logotips (flex-shrink:1) tika saspiests par 7% pie 390px un 15% pie
   360px. Specifiskaks selektors ta paша iemesla del. */
@media (max-width: 640px) { header.nav .nav-cta { display: none } }

/* ---------------------------------------------------------------------------
   JOSLA NEDRIKST IZLIST NO APALA STURA

   Josla ir taisna un iet no malas lidz malai. Kartitem ar mazu lokjumu tas
   ir labi, bet .icp-card lokjums ir 16px, tapec joslas gali karajas gaisa
   arpus sturiem. overflow:hidden liek joslai sekot kartites formai. */
.icp-card, .icp-box { overflow: hidden }

/* ===========================================================================
   SKAITLU JOSLAS IKONAS

   Ta pati receptes, kas .highlight-icon un mapes plaksnitei: neitrals
   lauciņs, tumss zimejums un gradienta gredzens, kas tiek UZZIMETS apkart,
   uzbraucot. Fons te ir gaissaks par joslu, ne tads pats: josla pati ir
   #F2F0E8, tapec tada pati plaksnite uz tas nebutu redzama.
   ========================================================================= */
.vstrip-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px;
  background: var(--paper, #F8F7F3); border: 1px solid var(--rule, #D9D6CE);
  color: var(--ink, #0E1211);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.vstrip-icon > svg { width: 24px; height: 24px; display: block }
/* svg.hi-ring, ne tikai .hi-ring: gredzens ir tiesss svg berns, tapec
   .vstrip-icon > svg to kertu lidzi un uzliktu tam zimejuma izmeru. */
.vstrip-icon > svg.hi-ring {
  position: absolute; left: -3px; top: -3px;
  width: calc(100% + 6px); height: calc(100% + 6px);
}
.vstrip-item:hover .vstrip-icon { transform: translateY(-2px) }
.vstrip-item:hover .vstrip-icon .hi-ring rect { stroke-dashoffset: 0; opacity: 1 }
@media (prefers-reduced-motion: reduce) {
  .vstrip-icon, .vstrip-icon .hi-ring rect { transition: none }
}

/* Uz telefona josla ir VIENA kolonna, tapec ikona virs teksta katram punktam
   pielika ~64px augstuma: pieci punkti = veselas 976px jeb 1,16 ekrana par
   pieciem isiem faktiem. Gulus tas pats ikonas lauciņs neaiznem nekadu
   papildu augstumu, un josla atgriezas pie sava izmera.

   Sis ir tas pats izkartojums, kas lapas .highlight-item: ikona pa kreisi,
   teksts pa labi. */
@media (max-width: 640px) {
  /* Blivums pec lapas .highlight-item parauga: 40px lauciņs, virsraksts
     16px, apraksts 14px un bez numura. Ieprieks katrs punkts bija 84px un
     pieci aiznema 678px; tas ir pieci isi fakti par gandriz veselu ekranu. */
  .vstrip-item {
    display: grid; grid-template-columns: 40px 1fr;
    column-gap: 13px; align-items: start;
  }
  .vstrip-icon {
    grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0;
    width: 40px; height: 40px; border-radius: 10px;
  }
  .vstrip-icon > svg { width: 20px; height: 20px }
  /* Divkarsa klase visur zemak: lapas savs .vstrip-item h3 stav CSS failaa
     ZEMAK par so un ir tikpat specifisks, tapec bez tas izmers paliktu 20px.

     Numurs nost. Uz telefona josla ir viena kolonna, tapec kartiba ir jau
     redzama pati par sevi: punkti stav viens zem otra. Numurs tur pievieno
     rindu virs katra virsraksta un neko nepasaka. Tas pats izkartojums, kas
     lapas .highlight-item, kur numura nav vispar. */
  .vstrip-item.vstrip-item .num { display: none }
  .vstrip-item.vstrip-item h3 { grid-column: 2; grid-row: 1; font-size: 16px; margin: 0 0 3px; line-height: 1.3 }
  .vstrip-item.vstrip-item p { grid-column: 2; grid-row: 2; font-size: 13.5px; line-height: 1.45 }
  .vstrip-grid { gap: 20px }

  /* Atsauksmju kartite bija uzlikta darbvirsmas blivumaa: 22px mala uz 342px
     platas kartites un 15px teksts. Uz telefona no tas iznaca 292px augsta
     kaste par vienu isu citatu. Sheit tiek nonemta tikai gaisa, ne teksts. */
  .review-card.review-card {
    padding: 18px; gap: 11px; border-radius: 12px;
  }
  .review-card .review-stars svg { width: 16px; height: 16px }
  .review-card .review-quote { font-size: 14.5px; line-height: 1.5 }
  .review-card .review-meta { padding-top: 13px; gap: 1px }
  .review-card .review-meta strong { font-size: 13.5px }
  .review-card .review-meta span { font-size: 12.5px }
}

/* ---------------------------------------------------------------------------
   MAZAJIEM GREDZENIEM PILNS GRADIENTS, NE CETURTDALA

   Lapaa ierakstits nodoms bija tads, ka sadalas gradients tiek sagriezts
   cetras dalas un katra ikona nes vienu no tam, lai cetras ikonas KOPA
   salasa vienu pareju. Uz liela lauka tas stradaa, bet 48-56px riņķī viena
   ceturtdala ir divas blakus esosas krasas, un tas lasas ka viens tonis.

   Tapec mazie gredzeni nem pilnu cetru krasu sveipu. Kartites gredzens
   (.jki-ring) paliek pa vecam: tas iet apkart visai kartitei, kur ceturtdala
   ir gara un krasu pareja ir redzama.
   ------------------------------------------------------------------------ */
/* Sarakstiem gabalus liek skripts (sequenceGradients), tapec te paliek tikai
   tie gredzeni, kas nestav rinda: mapes kartite un ieraksta sliede. */
.jki-ico .jki-ico-ring rect,
.jkr-node .jkr-ring circle { stroke: url(#hiGfull) }

/* ---------------------------------------------------------------------------
   KOMANDAS KARTITES: PLATAA EKRANA RINDA APLAUZAS UN CENTREJAS

   Komandas josla ir horizontals ritinatajs. Uz telefona tas ir pareizi: ar
   pirkstu pabida un skaties. Uz platas ekrana desmit kartites ir ap 2000px,
   tapec tas sakas pie kreisas malas un aiziet ARA pa labi: rinda izskatas
   pastumta uz vienu pusi, un puse komandas nav redzama, kamer neaizritina.

   No 1000px josla aplauzas vairakas rindas un centrejas. Visa komanda ir
   redzama uzreiz, un bloks stav lapas videe.

   Divkarsa klase, jo lapas savs .h-scroller stav CSS failaa zemak par so.
   ------------------------------------------------------------------------ */
@media (min-width: 1000px) {
  .h-scroller.h-scroller {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    row-gap: 34px;
    scroll-snap-type: none;
    margin-left: 0; margin-right: 0;
  }
}