/* FABLE — stran »O nas« V1 (page-onas-si.php, /sl/o-nas-p30; v produkciji od 1. 11. 2026). Gradniki strani
   thatbike (css/thatbike.css: .tb, .tb-hero, .tb-h1, .tb-h2, .tb-p, temni način prek spremenljivk --tb-*)
   in glava po CGP iz css/thatbike-v1.css; tu so samo deli te strani (.ab-*). Barve po CGP thatbike: Ink, sivine,
   lime samo kot signal (puščica, trenutni korak zgodbe): na beli Deep Lime #9FC400, na temni Volt Lime #D4FF3A
   (CGP str. 13). Pasovi se izmenjujejo: bela in siva (--tb-band). */

.tb.ab {
  --ab-lime: #9FC400;
}

html[data-theme="dark"] .tb.ab {
  --ab-lime: #D4FF3A;
}

.tb .ab-sec {
  padding: 104px 0;
  background: var(--tb-paper);
}

.tb .ab-band {
  background: var(--tb-band);
}

/* ---------- uvod: temen pas kot na produkcijski strani (besedilo levo, kartica oglasa desno) ---------- */

/* Ozadje: vzorec iz CGP thatbike v4 (str. 10, »Grid · Paper at 2.8% on Ink«, »App splash, web hero«): cel simbol z
   nespremenjeno režo in zamikom iz logotipa (poti iz thatbike-logo-cgp-primary.svg), ena barva, 2,8 %, nikoli
   zasukan. Na željo Luke (31. 10.) gostejši od mreže v CGP in vsak drugi stolpec zamaknjen za pol vrstice:
   vodoravni korak 155 enot (1,3 širine simbola 119,02), navpični 92 enot (1,56 višine simbola 58,9), drugi stolpec
   46 enot niže. Ploščica ima dva stolpca (310 × 92 enot); zamaknjeni simbol je narisan dvakrat (+46 in −46), da se
   del, ki ga odreže spodnji rob, nadaljuje na vrhu naslednje ploščice. Višina simbola 56 px → ploščica 295 × 87,5 px.
   Ostane temen tudi v temnem načinu. */
.tb .ab-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 96px;
  background-color: #0A0A0A;
  /* vzorec se proti levemu in desnemu robu postopno izgubi (Luka 31. 10., kot trak obvestila na domači strani V1) */
  background-image:
    linear-gradient(to right, #0A0A0A 0%, rgba(10, 10, 10, 0) 14%, rgba(10, 10, 10, 0) 86%, #0A0A0A 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.24 -6.9 260 72'%3E%3Cg opacity='.02' fill='%23FFFFFF' stroke='%23FFFFFF' stroke-width='8' stroke-linejoin='round'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3Cg transform='translate(130 36)'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3C/g%3E%3Cg transform='translate(130 -36)'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-position: 0 0, 50% 48px;
  background-size: 100% 100%, auto 137px;  /* gostejša mreža (korak 130 × 72 enot namesto 155 × 92), simbol enako velik kot pri 2× (Luka 31. 10.) */
}

.tb .ab-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

/* »Mi smo thatbike™« vedno v eni vrstici (Luka 31. 10.): velikost po širini stolpca (cqi), brez prelamljanja;
   pri 64 px je naslov širok približno 7,8 velikosti pisave. Brez podpore za cqi velikost po širini okna. */
.tb .ab-hero-copy {
  container-type: inline-size;
}

.tb .ab-hero-h1 {
  margin: 0;
  font-family: var(--tb-display);
  font-size: clamp(30px, 8.5vw, 64px);
  font-size: min(64px, 12cqi);
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.034em;
  color: #fff;
}

/* napis thatbike™ (thatbike-logo.svg, črn) na temnem pasu bel, v obeh načinih */
.tb .ab-hero .ab-hero-logo,
html[data-theme="dark"] .tb .ab-hero .ab-hero-logo {
  filter: invert(1);
}

.tb .ab-hero-p {
  max-width: 34em;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #C4C4C4;
  text-wrap: pretty;
}

.tb .ab-hero-h1 + .ab-hero-p {
  margin-top: 24px;
}

.tb .ab-hero-p b {
  font-weight: 600;
  color: #fff;
}

/* Volt Lime na Ink (CGP str. 13: Lime / Ink 17,1, na temni podlagi Volt Lime; Luka 31. 10.) */
.tb .ab-hero-promise {
  margin: 28px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #D4FF3A;
}

.tb .ab-hero-vis {
  display: flex;
  justify-content: center;
}

/* kartica oglasa (ponazoritev, kot about_header_si.png) */
.tb .ab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 340px;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  color: #0A0A0A;
  text-align: left;
  transform: rotate(-2deg);
}

.tb .ab-card-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #0A0A0A;
}

.tb .ab-symbol-primary {
  display: block;
  width: 36px;
  height: auto;
}

/* znak na kartici v uvodu in na piki 2026 v časovnici enobarven: oba trikotnika Paper na Ink (Luka 31. 10., 1. 11.),
   brez Volt Lime */
.tb .ab-card-avatar .ab-symbol-primary path,
.tb .ab-story-dot .ab-symbol-primary path {
  fill: #FFFFFF;
  stroke: #FFFFFF;
}

/* ozadje fotografije: enak siv preliv pri vseh kolesih (Luka 31. 10.; prej v barvi okvirja); fotografije imajo belo
   ozadje, ki ga mix-blend-mode: multiply obarva v preliv */
.tb .ab-card-media {
  display: block;
  margin-top: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #F2F2F3 0%, #DCDCDF 100%);
  overflow: hidden;
}

.tb .ab-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.tb .ab-card-t {
  margin-top: 16px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.tb .ab-card-p {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 600;
}

.tb .ab-card-w {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
  color: #767676;
}

.tb .ab-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 16px;
  border-radius: 10px;
  background: #0A0A0A;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- številke: štirje dokazi takoj za uvodom (Luka 31. 10.) ---------- */

/* več navpičnega prostora med karticami in zaključkom (Luka 31. 10.; prej 72 px) */
.tb .ab-stats-sec {
  padding: 112px 0;
}

.tb .ab-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.tb .ab-stat {
  padding-left: 24px;
  border-left: 2px solid var(--tb-line);
}

.tb .ab-stat-n {
  display: block;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--tb-ink);
}

.tb .ab-stat-l {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--tb-muted);
}

/* ---------- platforma: štiri kartice ---------- */

/* podnaslov v eni vrstici na namizju (širše od privzetih 30em za .tb-p) */
.tb .ab-do-sub {
  max-width: 40em;
}

.tb .ab-do {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}

/* kartice z več zraka in večjim besedilom, da niso preveč nevpadljive ob ostalih sekcijah (Luka 31. 10.) */
.tb .ab-do-card {
  padding: 36px 24px 38px;
  border-radius: 16px;
  background: var(--tb-card);
  box-shadow: inset 0 0 0 1px var(--tb-line);
}

.tb .ab-do-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--tb-display);
  font-size: clamp(17px, 1.4vw, 20px);  /* naslov v eni vrstici tudi pri ožjem namizju (4 stolpci) */
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -.01em;
  color: var(--tb-ink);
}

.tb .ab-arrow {
  width: 16px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--ab-lime);
}

.tb .ab-do-p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tb-body);
  text-wrap: pretty;
}

/* ---------- zgodba: tri postaje na časovnici ---------- */

/* Časovnica (Luka 31. 10.): vodoravna črta skozi pike z znakom vsake postaje. Črto riše vsaka postaja razen zadnje
   (::before od središča svoje pike do središča naslednje, čez razmik 32 px), zato ni treba računati širin stolpcev.
   Črta je v celoti siva, brez lime (Luka 31. 10.). Na ozkem zaslonu ista črta teče navpično ob levem robu. */

.tb .ab-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.tb .ab-story-item {
  position: relative;
}

.tb .ab-story-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 31px;
  left: 32px;
  right: -64px;
  height: 2px;
  background: var(--tb-line);
}

/* Za zadnjo postajo se črta nadaljuje do desnega roba (Luka 31. 10.): zgodba teče naprej in se postopno izgubi. */
.tb .ab-story-item:last-child::before {
  content: "";
  position: absolute;
  top: 31px;
  left: 32px;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--tb-line) 30%, transparent);
}

.tb .ab-story-dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tb-paper);
  box-shadow: inset 0 0 0 2px var(--tb-line);
}

.tb .ab-story-item.is-now .ab-story-dot {
  background: #0A0A0A;
  box-shadow: 0 0 0 5px var(--tb-paper);
}

.tb .ab-story-dot svg {
  display: block;
  width: 40px;
  height: auto;
}

/* Figura rabljena-kolesa.si je pokončna, zato po višini; bel izrez na črnem krogu, enako kot znak bajk.si (Luka
   31. 10.). Znak bajk.si je že sam okrogel (črn krog), zato zapolni celo piko. Vse pike so brez obroča (Luka 31. 10.),
   le 5 px praznega roba v barvi ozadja, da se črta ne dotika znaka. */
.tb .ab-story-dot .ab-story-logo-rk {
  width: auto;
  height: 46px;
}

.tb .ab-story-dot:has(.ab-story-logo-rk) {
  background: #000;
  box-shadow: 0 0 0 5px var(--tb-paper);
}

.tb .ab-story-dot:has(.ab-story-img) {
  background: none;
  box-shadow: 0 0 0 5px var(--tb-paper);
}

.tb .ab-story-img {
  display: block;
  width: 100%;
  height: 100%;
}

.tb .ab-story-y {
  display: block;
  margin-top: 24px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--tb-ink);
}

.tb .ab-story-n {
  display: block;
  margin-top: 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--tb-ink);
}

.tb .ab-story-p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tb-body);
  text-wrap: pretty;
}

/* ---------- tri predstavitve: plošče v Graphite #3A3A3A (CGP, siva; Luka 31. 10.) ----------
   Ponazoritve so prevzete s strani thatbike (css/thatbike.css). Vse tri plošče so Graphite (prej Ink, svetle
   tonirane, barve strani thatbike, skrilasto modro-siva, Lime Mist). Kartice in pilule Paper, besedilo Ink, sence
   iz thatbike.css (za temne plošče). Enako v svetlem in temnem načinu. */
.tb .ab-how {
  --ab-tile-a: #3A3A3A;
  --ab-tile-a-rgb: 58 58 58;
  --ab-tile-b: #3A3A3A;
  --ab-tile-c: #3A3A3A;
}

.tb .ab-how .tb-tile-a .tb-tile-vis { background: var(--ab-tile-a); }
.tb .ab-how .tb-tile-b .tb-tile-vis { background: var(--ab-tile-b); }
/* zadnja plošča: ogromen simbol thatbike v ozadju (Paper 4 %, enobarven, nezasukan, CGP str. 10), odrezan ob desnem
   in spodnjem robu kot v zaključku, in še en majhen zgoraj levo z enako prosojnostjo (Luka 31. 10.) */
.tb .ab-how .tb-tile-c .tb-tile-vis {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.24 -6.9 119.02 58.9'%3E%3Cg opacity='.04' fill='%23FFFFFF' stroke='%23FFFFFF' stroke-width='8' stroke-linejoin='round'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 7% 6% / 17% auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.24 -6.9 119.02 58.9'%3E%3Cg opacity='.04' fill='%23FFFFFF' stroke='%23FFFFFF' stroke-width='8' stroke-linejoin='round'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 30% 92% / 150% auto,
    var(--ab-tile-c);
}

/* preliv mozaika zgoraj in spodaj v barvo plošče (v thatbike.css #3b4a52) */
.tb .ab-how .tb-tile-a .tb-tile-vis::after {
  background:
    linear-gradient(to bottom,
      rgb(var(--ab-tile-a-rgb)) 0, rgb(var(--ab-tile-a-rgb) / .88) calc(var(--tb-fade) * .2), rgb(var(--ab-tile-a-rgb) / .55) calc(var(--tb-fade) * .45),
      rgb(var(--ab-tile-a-rgb) / .2) calc(var(--tb-fade) * .72), rgb(var(--ab-tile-a-rgb) / 0) var(--tb-fade),
      rgb(var(--ab-tile-a-rgb) / 0) calc(100% - var(--tb-fade)), rgb(var(--ab-tile-a-rgb) / .2) calc(100% - var(--tb-fade) * .72),
      rgb(var(--ab-tile-a-rgb) / .55) calc(100% - var(--tb-fade) * .45), rgb(var(--ab-tile-a-rgb) / .88) calc(100% - var(--tb-fade) * .2), rgb(var(--ab-tile-a-rgb)) 100%);
}

.tb .ab-how .tb-mos-col > .tb-mos-item,
.tb .ab-how .tb-pill,
.tb .ab-how .tb-gloss {
  background: #FFFFFF;
}

.tb .ab-how .tb-mos-p,
.tb .ab-how .tb-pill,
.tb .ab-how .tb-sold,
.tb .ab-how .tb-gloss-txt {
  color: #0A0A0A;
}

/* mesta v ozadju plošče Hitra prodaja (Luka 31. 10.): bele pilule s polnilom kot v thatbike.css, vidnost nastavi
   --ab-city-opacity (v thatbike.css 19 %). */
.tb .ab-how { --ab-city-opacity: .06; }

.tb .ab-how .tb-city-row {
  opacity: var(--ab-city-opacity);
}

/* Prodano kot oznaka Premium na domači strani V1 (home-v1.css, Luka 31. 10.): temna pilula (Ink), spredaj trikotnik
   simbola thatbike v Volt Lime, belo besedilo */
.tb .ab-how .tb-sold-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  top: 12px;
  left: 12px;
  padding: 5px 12px 5px 10px;
  border-radius: 100px;
  background: rgba(10, 10, 10, .82);
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}

/* fotografija pod oznako, da je ne prekriva (Luka 31. 10.): oznaka je 12 px od vrha in visoka okoli 28 px.
   Ozadje slike je siv preliv kot na kartici v uvodu; belo ozadje fotografije ga prevzame (multiply). */
.tb .ab-how .tb-sold-media {
  padding-top: 50px;
  background: linear-gradient(180deg, #F2F2F3 0%, #DCDCDF 100%);
}

.tb .ab-how .tb-sold-photo {
  background: transparent;
  border-bottom: 0;
  mix-blend-mode: multiply;
}

.tb .ab-how .tb-sold-badge::before {
  content: "";
  flex: 0 0 auto;
  height: 12px;
  aspect-ratio: 55.76 / 52;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55.76 52'%3E%3Cpath d='M51.76 4 L4 48 L4 4 Z' fill='%23D4FF3A' stroke='%23D4FF3A' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tb .ab-how .tb-gloss:not(.is-main) {
  opacity: .85;
}

.tb .ab-how .tb-gloss.is-main .tb-gloss-tr {
  color: #0A0A0A;
}

.tb .ab-how .tb-gloss.is-main .tb-gloss-tr svg {
  color: #9FC400;
}

.tb .ab-how .tb-tile-check svg {
  color: var(--ab-lime);
}

/* ---------- zaključek (Luka 31. 10.: brez kartice, obrobe in ikone v krogu) ----------
   Temen pas Ink. Velik naslov levo (zadnja beseda v Volt Lime, CGP: lime kot signal), desno besedilo, glavni gumb
   Volt Lime in drugotna povezava brez okvirja. Spodaj ena vrstica s kontaktom nad tanko črto. V ozadju ogromen simbol
   thatbike (Paper 2 %, enobarven, nezasukan, CGP str. 10), odrezan ob desnem in spodnjem robu. Temen tudi v temnem načinu. */
.tb .ab-end {
  position: relative;
  overflow: hidden;
  padding: 136px 0 48px;
  background: #0A0A0A;
  color: #A1A1AA;
}

.tb .ab-end-mark {
  position: absolute;
  right: -3%;
  bottom: -14%;
  width: min(760px, 60vw);
  height: auto;
  opacity: .02;
  pointer-events: none;
}

/* še en manjši simbol zgoraj levo, enaka prosojnost (Luka 31. 10.) */
.tb .ab-end-mark-sm {
  top: 40px;
  right: auto;
  bottom: auto;
  left: max(16px, calc(50% - 640px));
  width: 150px;
}

.tb .ab-end-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: 64px;
}

.tb .ab-end-h {
  margin: 0;
  font-family: var(--tb-display);
  font-size: clamp(44px, 6.4vw, 92px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
  color: #fff;
  text-wrap: balance;
}

.tb .ab-end-h span {
  color: #D4FF3A;
}

.tb .ab-end-p {
  max-width: 26em;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

.tb .ab-end-p .tb-brand {
  color: #fff;
}

.tb .ab-end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 32px;
}

.tb .ab-end-btn,
.tb .ab-end-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 28px;
  border-radius: 12px;
  background: #D4FF3A;
  font-size: 17px;
  font-weight: 600;
  color: #0A0A0A;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s var(--tb-ease);
}

.tb .ab-end-btn:hover { background: #C6F22C; }
.tb .ab-end-btn:active { transform: scale(.98); }

.tb .ab-end-link,
.tb .ab-end-link:hover,
.tb .ab-end-foot a,
.tb .ab-end-foot a:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .25s var(--tb-ease), color .2s ease;
}

.tb .ab-end-link { font-size: 17px; }

.tb .ab-end-link:hover,
.tb .ab-end-foot a:hover {
  background-size: 100% 1.5px;
}

.tb .ab-end-btn:focus-visible,
.tb .ab-end-link:focus-visible,
.tb .ab-end-foot a:focus-visible {
  outline: 2px solid #D4FF3A;
  outline-offset: 4px;
}

.tb .ab-end .ab-out {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform .2s var(--tb-ease);
}

.tb .ab-end-btn:hover .ab-out,
.tb .ab-end-link:hover .ab-out,
.tb .ab-end-foot a:hover .ab-out {
  transform: translate(2px, -2px);
}

.tb .ab-end-foot {
  position: relative;
  margin-top: 120px;
}

/* črta na odstavku, ne na .tb-wrap, da je široka kot besedilo (brez notranjega roba ovoja) */
.tb .ab-end-foot p {
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 16px;
}

.tb .ab-end-foot a {
  margin-left: 6px;
  color: #D4FF3A;
}

/* ---------- kontakt v pojavnem oknu (Luka 31. 10.): <dialog> s kontaktnim obrazcem, odprt s »Stopi v stik z nami«.
   Kartica Paper (v temnem načinu --tb-card), polja s polnilom kot na strani, gumb Ink s puščico v Volt Lime. ---------- */
.tb .ab-dlg {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 40px 36px 36px;
  border: 0;
  border-radius: 20px;
  background: var(--tb-card);
  box-shadow: 0 40px 80px -24px rgba(10, 10, 10, .5);
  color: var(--tb-ink);
  overflow: auto;
}

.tb .ab-dlg::backdrop {
  background: rgba(10, 10, 10, .6);
  backdrop-filter: blur(2px);
}

.tb .ab-dlg-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tb-muted);
  cursor: pointer;
}

.tb .ab-dlg-close:hover { background: var(--tb-band); color: var(--tb-ink); }
.tb .ab-dlg-close svg { width: 20px; height: 20px; }

.tb .ab-dlg-h {
  margin: 0 0 24px;
  padding-right: 32px;
  font-family: var(--tb-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--tb-ink);
}

.tb .ab-dlg-form {
  display: flex;
  flex-direction: column;
}

.tb .ab-dlg-l {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tb-body);
}

.tb .ab-dlg input[type="text"],
.tb .ab-dlg input[type="email"],
.tb .ab-dlg textarea {
  width: 100%;
  min-height: 50px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--tb-band);
  box-shadow: none;
  font-size: 16px;
  color: var(--tb-ink);
  transition: border-color .15s ease, background-color .15s ease;
}

.tb .ab-dlg textarea {
  min-height: 140px;
  resize: vertical;
}

.tb .ab-dlg input[type="text"]:focus,
.tb .ab-dlg input[type="email"]:focus,
.tb .ab-dlg textarea:focus {
  outline: none;
  border-color: var(--tb-ink);
  background: var(--tb-card);
}

.tb .ab-dlg label.error,
.tb .ab-dlg .error-list,
.tb #error_list {
  font-size: 13px;
  color: #c0392b;
}

.tb .ab-dlg-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 6px;
  padding: 0 28px;
  border: 0;
  border-radius: 12px;
  background: #0A0A0A;
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
}

.tb .ab-dlg-send:hover { background: #1C1C1C; }
.tb .ab-dlg-send .ab-out { width: 16px; height: 16px; color: #D4FF3A; }

.tb .ab-dlg-msg {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.tb .ab-dlg-err { color: #c0392b; }

/* atribut hidden mora obveljati tudi proti display iz sloga teme */
.tb .ab-dlg [hidden] { display: none !important; }

/* skrit iframe, v katerega se pošlje obrazec */
.tb .ab-dlg-frame {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  visibility: hidden;
}

/* »Stopi v stik z nami« je povezava, ki odpre okno: kazalec kot pri povezavi */
.tb .ab-end-foot a[data-ab-contact] { cursor: pointer; }

/* ---------- okrogle zastavice na tej strani (tudi izbira jezika v glavi in nogi): slovenska obrezana levo, da je grb
   v krogu (Luka 31. 10.) ----------
   Slika zastave je 96 × 48, krog pokaže 48 × 48; na sredini bi bil grb (x ≈ 18–34) skoraj odrezan. Zastava ostane
   nespremenjena, premakne se samo izrez (4 % = začetek pri x ≈ 2). */
body.ab-v1 img[src$="/flag/country/h48/si.png"] {
  object-position: 4% 50%;
}

/* ---------- mobilno ---------- */

@media (max-width: 760px) {
  .tb .ab-how .tb-sold-badge { top: 10px; left: 10px; gap: 5px; padding: 4px 10px 4px 8px; font-size: 12.5px; }
  .tb .ab-how .tb-sold-badge::before { height: 10px; }
  .tb .ab-how .tb-sold-media { padding-top: 42px; }
}

@media (max-width: 900px) {
  .tb .ab-sec { padding: 72px 0; }
  .tb .ab-hero { padding: 56px 0 72px; }
  .tb .ab-hero-in { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .tb .ab-hero-p { margin-left: auto; margin-right: auto; }
  .tb .ab-card { max-width: 300px; }
  .tb .ab-stats-sec { padding: 80px 0; }
  .tb .ab-do-card { padding: 28px 24px 30px; }
  .tb .ab-do-h { white-space: normal; font-size: 18px; }
  .tb .ab-do-p { font-size: 16px; }
  .tb .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .tb .ab-stat { padding-left: 16px; }
  .tb .ab-stat-n { font-size: 32px; }
  .tb .ab-story { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .tb .ab-story-item { padding-left: 76px; min-height: 56px; }
  .tb .ab-story-item:not(:last-child)::before { top: 28px; left: 27px; right: auto; bottom: -60px; width: 2px; height: auto; }
  .tb .ab-story-item:last-child::before { top: 28px; left: 27px; right: auto; bottom: -48px; width: 2px; height: auto; background: linear-gradient(to bottom, var(--tb-line) 50%, transparent); }
  .tb .ab-story-dot { position: absolute; top: 0; left: 0; width: 56px; height: 56px; }
  .tb .ab-story-dot svg { width: 34px; }
  .tb .ab-story-dot .ab-story-logo-rk { width: auto; height: 40px; }
  .tb .ab-story-y { margin-top: 6px; font-size: 36px; }
  .tb .ab-end { padding: 88px 0 36px; }
  .tb .ab-end-in { grid-template-columns: 1fr; gap: 28px; }
  .tb .ab-end-mark { width: 120vw; right: -40%; bottom: -8%; }
  .tb .ab-end-mark.ab-end-mark-sm { width: 96px; top: 24px; right: auto; bottom: auto; left: 16px; }
  .tb .ab-end-foot { margin-top: 72px; }
  .tb .ab-do { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
}

@media (max-width: 560px) {
  .tb .ab-dlg { padding: 32px 20px 24px; border-radius: 16px; }
  .tb .ab-dlg-h { font-size: 24px; }
  .tb .ab-end-p { font-size: 17px; }
  .tb .ab-end-btn { width: 100%; justify-content: center; }
  .tb .ab-do { grid-template-columns: 1fr; }
}