/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 SPLETNE APLIKACIJE (pregledna/hub stran)
   Sekcije POD heroem (vrstice po aplikaciji/faq/cta-band) ohranjajo
   splošno vizualno logiko ostalih produktnih kategorij — NAMENOMA
   samostojna kopija. Predpona razredov "apl-" (aplikacije).

   Ta stran poveže tri že zgrajene, samostojne produktne strani
   (aplikacija-tastudio.html, aplikacija-booking-studio.html,
   aplikacija-delime.html) — ne podvaja njihove polne vsebine, ampak
   daje kratek, a resničen uvod v vsako + CTA na polno stran. DeliMe
   dobi vizualno najbolj poudarjeno "flagship" vrstico (posebna
   dvobarvna značka + prva po vrstnem redu) — OD 15. 9. 2026
   (nadaljevanje 19) na svetli podlagi, ne več temni (glej razdelek
   "NADALJEVANJE 19"), OD 17. 9. 2026 (nadaljevanje 20) na ".on-strong"
   + asimetričen "half-dark" steel panel za sliko, glej razdelek
   "NADALJEVANJE 20" spodaj. ═══════════════════════════════════════ */

/* ═══ 1. HERO — "VARIANTA B — SOFTWARE/DIGITAL" (8. 9. 2026, glej
   dnevnik). Zamenjuje prejšnji temen navy gradient hero z istim
   svetlim "light hero" sistemom kot `programske-resitve.css`
   (gt-/db-/pr- razredi), a s CYAN-vodeno paleto namesto modro-vodene
   (razlika med dvema "digitalnima" stranema — glej programske-
   resitve.css za modro-vodeno varianto). Enako "minimal blue
   technical grid/nodes" + "smaller green details" načelo. Ta stran je
   pregledna (hub) za tri aplikacije, zato vizual NAMENOMA ostaja
   generični posnetek (delime-nadzorna-plosca.webp — isti asset kot
   prej, "ena od aplikacij", NE trditev o specifičnem produktu — glej
   opombo v HTML-ju), samo dobi "layered UI depth" (zamaknjene okenske
   plasti v CSS, brez novih slik/besedila) namesto generične kartice.
   Copy/CTA/route-i NESPREMENJENI — samo ozadje/kompozicija/barvni
   sistem heroja. ═══ */
.apl-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(172deg, #f5f8fb 0%, #e6edf4 52%, #dbe4ee 100%);
  color:var(--ink);
  padding:calc(var(--sp-7) + 20px) 0 var(--sp-7);
}
.apl-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 80% 6%, rgba(23,185,236,.075), transparent 46%),
    radial-gradient(circle at 4% 96%, rgba(171,208,57,.04), transparent 40%);
}
.apl-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-6); align-items:center;
}
/* 10. 9. 2026 (nadaljevanje 2): na željo obrnjeno — slika LEVO, besedilo
   DESNO (prej obratno). Samo vizualni vrstni red (CSS "order"), DOM/
   vsebina/CTA nedotaknjeni; slika s tem samodejno dobi prvi (širši,
   1.05fr) stolpec. Prej je bil "order:-1" samo pod 960px prelomom (za
   enotno mobilno zaporedje) — zdaj velja povsod, zato je ta mobilna
   podvojitev spodaj odveč, a ostaja neškodljiva. */
.apl-hero-vizual{ order:-1; }
.apl-hero h1{ font-size:clamp(38px,4.8vw,58px); margin:2px 0 var(--sp-3); max-width:560px; color:var(--navy); }
.apl-hero .lead{ max-width:490px; margin-bottom:var(--sp-4); }
.apl-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.apl-hero-znacke{ display:flex; gap:var(--sp-4); flex-wrap:wrap; font-size:13px; color:var(--muted); }
.apl-hero-znacke span{ display:inline-flex; align-items:center; gap:7px; }
.apl-hero-znacke span::before{
  content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0;
  background:var(--cyan); box-shadow:0 0 0 3px rgba(23,185,236,.16);
}

/* značka — bivši generični ".eyebrow.on-navy" zdaj postane pravokotna
   "tehnična status" nalepka, isti vzorec kot ".gt-hero-znacka", cyan-
   vodena (razlika od modro-vodene značke na programske-resitve.html).
   Besedilo NESPREMENJENO ("Spletne aplikacije"). */
.apl-hero-znacka{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:7px 12px 7px 10px; border-radius:6px; margin-bottom:var(--sp-2);
  background:rgba(23,185,236,.07); color:#0b6f8c; border:1px solid rgba(23,185,236,.24);
}
.apl-hero-znacka .pika{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--cyan); box-shadow:0 0 0 3px rgba(23,185,236,.18);
}

/* ── produktna slika — "layered UI depth" (ista tehnika kot
   programske-resitve.css: dve zamaknjeni psevdo-"okenski" plasti za
   glavno sliko, čisto barva+senca, brez novih slik/besedila). ── */
.apl-hero-vizual{ position:relative; }
.apl-hero-vizual::before, .apl-hero-vizual::after{
  content:''; position:absolute; z-index:0; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:0 20px 45px -24px rgba(23,34,46,.22);
  pointer-events:none;
}
.apl-hero-vizual::before{
  inset:16px -12px -16px 12px; transform:rotate(-2.4deg);
  background:linear-gradient(160deg, rgba(23,185,236,.10), rgba(255,255,255,.92));
}
.apl-hero-vizual::after{
  inset:-12px 16px 12px -16px; transform:rotate(2deg);
  background:linear-gradient(160deg, rgba(171,208,57,.06), rgba(255,255,255,.88));
}
/* nosilec SAMO data-parallax (scroll) — ".product-moment" znotraj nosi
   SAMO svojo neskončno "micro-float" animacijo (glej gotcha #1). Le
   ta hero-specifičen selektor dobi float — vrstice TAStudio/Booking/
   DeliMe spodaj na strani (isti ".product-moment" razred) NISO
   prizadete. */
.apl-hero-media-wrap{ display:block; width:100%; position:relative; z-index:1; }
.apl-hero-vizual .product-moment{
  aspect-ratio:16/10; padding:0;
  animation:aplFloat 8s ease-in-out infinite;
}
@keyframes aplFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.apl-hero-vizual .produkt-slika-plast img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center 40%;
  position:relative; z-index:1;
}

/* ── ambientno ozadje: statična navy globina + cyan (vodilna,
   največja) + modra (minimalna) + zelo majhna zelena — ista
   arhitektura kot GreenTill/Davčne blagajne/Programske rešitve. ── */
.apl-ambient-navy{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:520px; height:520px; right:-8%; top:18%;
  filter:blur(30px);
  background:radial-gradient(circle, rgba(42,61,80,.08), rgba(51,72,97,.03) 55%, transparent 74%);
}
.apl-ambient-wrap{ position:absolute; z-index:0; pointer-events:none; }
.apl-ambient{ position:absolute; inset:0; border-radius:50%; filter:blur(10px); }

.apl-ambient-wrap--cyan{ width:480px; height:480px; right:2%; top:-120px; }
.apl-ambient--cyan{
  background:radial-gradient(circle, rgba(23,185,236,.21), transparent 70%);
  animation:aplDriftCyan 20s ease-in-out infinite;
}
.apl-ambient-wrap--blue{ width:300px; height:300px; right:-4%; top:32%; }
.apl-ambient--blue{
  background:radial-gradient(circle, rgba(4,123,193,.13), transparent 72%);
  filter:blur(14px);
  animation:aplDriftBlue 19s ease-in-out infinite; animation-delay:-9s;
}
.apl-ambient-wrap--green{ width:200px; height:200px; left:-4%; bottom:-90px; }
.apl-ambient--green{
  background:radial-gradient(circle, rgba(171,208,57,.13), transparent 70%);
  animation:aplDriftGreen 24s ease-in-out infinite; animation-delay:-14s;
}
@keyframes aplDriftCyan{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-32px,44px,0) scale(1.07); } }
@keyframes aplDriftBlue{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(26px,-36px,0) scale(1.05); } }
@keyframes aplDriftGreen{ 0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:1; } 50%{ transform:translate3d(30px,-18px,0) scale(.95); opacity:.85; } }

/* ── tehnična črtna grafika — NAMENOMA minimalna, ista logika kot
   programske-resitve.css (glej tam za polno razlago). ── */
.apl-hero-tech{
  position:absolute; z-index:0; top:calc(50% - 220px); right:-3%; width:460px; height:460px;
  opacity:.55; pointer-events:none;
}
.apl-hero-tech svg{ width:100%; height:100%; }
.apl-line{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; animation:aplDrawLine 2s cubic-bezier(.4,0,.2,1) both; }
.apl-line--cyan{ animation-delay:.6s; }
.apl-line--blue{ animation-delay:1.1s; }
@keyframes aplDrawLine{ from{ stroke-dashoffset:1; opacity:0; } to{ stroke-dashoffset:0; opacity:.9; } }
.apl-node{ opacity:0; transform-origin:center; animation:aplNodeIn .5s ease-out both; }
.apl-node--cyan{ animation-delay:2.4s; filter:drop-shadow(0 0 3px rgba(23,185,236,.55)); }
.apl-node--blue{ animation-delay:2.8s; filter:drop-shadow(0 0 3px rgba(4,123,193,.5)); }
@keyframes aplNodeIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
.apl-node.apl-node--accent{ animation:aplNodeIn .5s ease-out 3s both, aplPulse 4.2s ease-in-out 3.8s infinite; }
@keyframes aplPulse{ 0%,100%{ opacity:.45; transform:scale(1); filter:drop-shadow(0 0 3px rgba(24,165,75,.45)); } 50%{ opacity:1; transform:scale(1.15); filter:drop-shadow(0 0 7px rgba(24,165,75,.8)); } }

@media (max-width:960px){
  .apl-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .apl-hero-vizual{ order:-1; }
  .apl-hero h1{ max-width:none; }
  .apl-hero .lead{ max-width:none; }
  .apl-hero-tech{ opacity:.4; }
}
@media (max-width:760px){
  .apl-line--blue, .apl-node--blue, .apl-node--accent{ display:none; }
  .apl-hero-tech{ opacity:.32; }
  .apl-ambient-wrap--blue{ display:none; }
  .apl-ambient-wrap--cyan{ width:280px; height:280px; }
  .apl-ambient-wrap--green{ width:160px; height:160px; }
  .apl-ambient-navy{ width:320px; height:320px; opacity:.7; }
  .apl-hero-vizual::before, .apl-hero-vizual::after{ display:none; }
}
@media (max-width:600px){
  .apl-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); }
}
@media (prefers-reduced-motion: reduce){
  .apl-line, .apl-node,
  .apl-ambient--cyan, .apl-ambient--blue, .apl-ambient--green,
  .apl-hero-vizual .product-moment{ animation:none !important; }
  .apl-line{ stroke-dashoffset:0; opacity:.9; }
  .apl-node{ opacity:1; transform:none; }
}

/* ═══ 2. VRSTICE PO APLIKACIJI — dvostolpčna, izmenično obrnjena
   uredniška postavitev (slika/vsebina), enak vzorec kot ".dl-vrsta-*"
   na aplikacija-delime.html, tu podvojen s stransko predpono "apl-"
   (glej dogovor o samostojnosti strani). ═══ */
.apl-vrsta-drza{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-6); align-items:center;
}
.apl-vrsta-drza--obrni{ grid-template-columns:.95fr 1.05fr; }
.apl-vrsta-drza--obrni .apl-vrsta-media{ order:2; }
.apl-vrsta-drza--obrni .apl-vrsta-vsebina{ order:1; }

.apl-vrsta-media .product-moment{ aspect-ratio:16/11; padding:0; }
.apl-vrsta-media .produkt-slika-plast img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:top center;
  position:relative; z-index:1;
}

/* ── 2.1 slika kot "pravi izdelčni posnetek" (10. 9. 2026, brif "ALTERNATING
   LAYOUT + FAQ POPRAVEK" razdelek 4) — zelo subtilen cyan ambient glow za
   vsako sliko vrstice, ki sedi ZA ".product-moment" (ki ima svoj overflow:
   hidden+zaobljen rob+senco že iz components.css) in namerno rahlo uhaja
   izven njegovega roba v enem kotu — daje "premium showcase" globino, ne da
   bi kadarkoli prekrival ali obrezoval sliko samo. Zaobljen rob/senca/obreza
   so že podedovani iz globalnega ".product-moment" (components.css), tu
   dodajamo samo ambientni sij. ── */
.apl-vrsta-media{ position:relative; }
.apl-vrsta-media::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:58%; height:58%; top:-11%; right:-9%; border-radius:50%; filter:blur(54px);
  background:radial-gradient(circle, rgba(23,185,236,.18), transparent 72%);
}

/* ── 2.2 hover na slikovnem okvirju — namesto globalnega ".produkt-vizual:
   hover" (components.css, -2px/uporabljen tudi na davcne-blagajne/
   tiskalniki/programske-resitve) tu rahlo ojačimo SAMO za to stran (brif
   razdelek 8: translateY(-3px) + globlja senca, brez velike povečave —
   povečava slike same (1.03) ostaje nedotaknjena, podedovana globalno). ── */
@media (hover:hover) and (pointer:fine){
  .apl-vrsta-media.produkt-vizual:hover .product-moment{
    transform:translateY(-3px);
    box-shadow:0 40px 90px rgba(4,10,20,.42);
  }
}

.apl-vrsta-vsebina h2{ font-size:clamp(28px,3vw,38px); margin:12px 0 10px; }
.apl-vrsta-vsebina .lead{ margin-bottom:var(--sp-3); }
.apl-vrsta-vsebina .kljuke{ margin-bottom:var(--sp-4); }
.apl-vrsta-vsebina .kljuke a{ color:var(--blue); font-weight:600; }
.on-navy .apl-vrsta-vsebina .kljuke a{ color:#8fe0f7; }

/* flagship (DeliMe) značka — namerno drugačna od standardnih .badge
   modifikatorjev: dvobarvni cyan→lime gradient rob, da vizualno
   nakaže "posebno mesto", brez novega ločenega komponentnega sistema */
.apl-flagship-znacka{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid transparent;
  background-image:linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)), linear-gradient(90deg, var(--cyan), var(--lime));
  background-origin:border-box; background-clip:padding-box, border-box;
}

@media (max-width:900px){
  .apl-vrsta-drza,
  .apl-vrsta-drza--obrni{ grid-template-columns:1fr; gap:var(--sp-4); }
  .apl-vrsta-drza--obrni .apl-vrsta-media,
  .apl-vrsta-drza--obrni .apl-vrsta-vsebina{ order:initial; }
  .apl-vrsta-media{ order:-1; }
}

/* ── NADALJEVANJE 19 (15. 9. 2026) — DeliMe vrstica iz temne ".on-navy"
   v svetlo ".on-mid" ozadje, isti popravek kot "Programske rešitve" na
   index.html (glej dnevnik "nadaljevanje 18" in css/pages.css razdelek
   "nadaljevanje 18" za analogen recept). DeliMe je bila edina od treh
   apl-vrsta sekcij na temni podlagi (TAStudio je bela, Booking Studio
   že ".on-mid") — kar jo je naredilo vizualno "pretežko" brez vsebinske
   utemeljitve. h2 barva pride BREZPLAČNO iz ".on-mid h2,h3{color:
   var(--ink)}" (depth-system.css). Spodaj popravek SAMO za edini
   element znotraj te vrstice, ki je bil vizualno zasnovan za temno
   podlago ("on-navy" na eyebrow/lead in "circuit-field" je odstranjen/
   popravljen neposredno v HTML-ju — glej opombo tam). Produktna slika
   (".product-moment", temna "--navy-deep" podlaga okvirja) je NAMENOMA
   nedotaknjena — dovoljen "majhen temen panel", ne cela sekcija. */
.apl-delime .apl-flagship-znacka{
  color:var(--navy-deep);
  background:rgba(255,255,255,.6);
  background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)), linear-gradient(90deg, var(--cyan), var(--lime));
}

/* ── NADALJEVANJE 20 (17. 9. 2026, "VEČ KONTRASTA, MANJ MONOTONOSTI") —
   DeliMe vrstica iz ".on-mid" v ".on-strong" (še svetla, a opazno
   globlja stopnja, glej tokens.css/depth-system.css) + "half-dark"
   asimetričen steel→navy-deep panel SAMO za produktno sliko na desni
   (glej depth-system.css razdelek 13, "HALF-DARK/ASIMETRIČNA VARIANTA").
   Namen: hub stran (aplikacije.html) mora dati DeliMe vidno VEČ
   vizualne teže kot TAStudio/Booking Studio spodaj (brif: "en izbran,
   temnejši product showcase moment, rezerviran SAMO za DeliMe") — brez
   vrnitve na staro ravno ".on-navy" celotne vrstice (glej opombo
   "NADALJEVANJE 19" zgoraj, zakaj je bila ta odstranjena) in brez
   kopiranja oblike "#nacini" polnega gradient banda na davcne-
   blagajne.html (brif izrecno zahteva RAZLIČEN ritem po strani).
   Panel sedi ZA ".apl-vrsta-media" (privzet z-index:0, vsebina "wrap"
   ima z-index:1) — slika s svojo že obstoječo belo/navy okvirjeno
   kartico ("product-moment") tako "izstopi" iz temnejšega ozadja. Na
   mobilnem (≤900px, glej apl-vrsta-media{order:-1} pravilo spodaj) gre
   slika na vrh vrstice, zato panel preklopi iz "leve/desne" v "zgornji
   pas", da ostane vizualno za sliko namesto pod besedilom. */
.apl-delime-panel{
  position:absolute; z-index:0; top:0; right:0; bottom:0; width:46%;
  background:linear-gradient(155deg, var(--steel), var(--steel-deep) 68%, var(--navy-deep));
  border-radius:var(--r-xl) 0 0 var(--r-xl);
}
@media (max-width:900px){
  .apl-delime-panel{
    top:0; left:0; right:0; bottom:auto; width:auto; height:48%;
    border-radius:0 0 var(--r-xl) var(--r-xl);
  }
}
@media (max-width:600px){
  .apl-delime-panel{ height:42%; }
}

/* ── 2.3 širinsko razmerje besedilo/slika (brif razdelek 5, ~45-50 % / 50-55 %)
   — DeliMe uporablja privzet (ne-obrnjen) ".apl-vrsta-drza", kjer je vsebina
   PRVI, slika pa DRUGI stolpec; privzeto razmerje 1.05fr/.95fr daje besedilu
   VEČ prostora kot sliki, kar je pri TAStudio/Booking (kjer je slika v prvem
   ali "obrnjenem" stolpcu) obratno in že ustreza brifu. Tu SAMO za DeliMe
   obrnemo širino stolpcev (NE vrstnega reda/order — DeliMe ostaja besedilo-
   levo/slika-desno), da je slika enakovredno ali rahlo širša od besedila,
   enako kot pri ostalih dveh vrsticah. Omejeno na širino nad mobilnim
   prelomom (900px), da se ne prekriva s pravilom zgoraj, ki na mobilnem
   sili en sam stolpec. ── */
@media (min-width:901px){
  #delime .apl-vrsta-drza{ grid-template-columns:.95fr 1.05fr; }
}

/* ── 2.4 bolj kompakten, povezan navpični ritem med tremi aplikacijskimi
   vrsticami (brif razdelek 6, ~80-120px na namizju) — samo za te tri
   sekcije (ne globalno ".section", ki ostaja nedotaknjen za ves ostali
   projekt); privzetih 96px (var(--sp-7)) je sicer že znotraj razpona, a
   ob dveh sosednjih vrsticah (padding-bottom ene + padding-top druge)
   učinek deluje bolj prazno, zato ju rahlo strnemo. Omejeno na širino nad
   mobilnim prelomom, da mobilnega ".section" paddinga (var(--sp-5)) ne
   spremeni. ── */
@media (min-width:761px){
  #delime, #tastudio, #booking{ padding:84px 0; }
}

/* ── 2.5 smerno-ozaveščeno scroll-razkritje vrstic (brif razdelek 7) —
   besedilo: opacity+translateY(20px)→0 (rahlo ojačen obstoječi splošen
   ".reveal" 16px→20px, SAMO tu); slika: opacity+translateX(±26px)→0 namesto
   splošnega translateY+scale iz ".reveal-slika" (components.css) — smer je
   odvisna od dejanskega VIZUALNEGA položaja slike (levo/desno), ne od
   prisotnosti "--obrni": pri DeliMe je slika DRUGI stolpec BREZ --obrni
   (torej desno), pri TAStudio je slika PRVI stolpec BREZ --obrni (torej
   levo), pri Booking je slika PRVI v DOM, a "--obrni" jo preko CSS "order"
   postavi na desno. ":not(.je-vidno)" poskrbi, da po razkritju obvelja
   splošno "transform:none" (components.css) brez prevzemanja specifičnosti. ── */
.apl-vrsta-drza .apl-vrsta-vsebina.reveal:not(.je-vidno){ transform:translateY(20px); }
.apl-vrsta-drza:not(.apl-vrsta-drza--obrni) .apl-vrsta-media:last-child.reveal-slika:not(.je-vidno){ transform:translateX(26px); }
.apl-vrsta-drza:not(.apl-vrsta-drza--obrni) .apl-vrsta-media:first-child.reveal-slika:not(.je-vidno){ transform:translateX(-26px); }
.apl-vrsta-drza--obrni .apl-vrsta-media.reveal-slika:not(.je-vidno){ transform:translateX(26px); }

@media (prefers-reduced-motion:reduce){
  .apl-vrsta-drza .apl-vrsta-vsebina.reveal:not(.je-vidno),
  .apl-vrsta-drza:not(.apl-vrsta-drza--obrni) .apl-vrsta-media:last-child.reveal-slika:not(.je-vidno),
  .apl-vrsta-drza:not(.apl-vrsta-drza--obrni) .apl-vrsta-media:first-child.reveal-slika:not(.je-vidno),
  .apl-vrsta-drza--obrni .apl-vrsta-media.reveal-slika:not(.je-vidno){
    transform:none;
  }
  .apl-vrsta-media.produkt-vizual:hover .product-moment{ transform:none; box-shadow:var(--sh-lg); }
}

/* ═══ 3. POGOSTA VPRAŠANJA — isti accordion vzorec kot .db-faq/.tsk-faq
   (namerna podvojitev, glej opombo o samostojnosti strani). ═══ */
.apl-faq{ max-width:800px; margin:0 auto; }
.apl-faq-item{ border-bottom:1px solid var(--line); }
.apl-faq-item:first-child{ border-top:1px solid var(--line); }
.apl-faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:22px 4px; cursor:pointer; list-style:none;
  font-family:var(--fh); font-weight:700; font-size:17px; color:var(--navy);
  transition:color var(--dur-fast) var(--ease-premium);
}
.apl-faq-item summary::-webkit-details-marker{ display:none; }
.apl-faq-item summary:hover{ color:var(--blue); }
.apl-faq-ikona{ width:20px; height:20px; flex-shrink:0; color:var(--blue); transition:transform var(--dur-fast) var(--ease-premium); }
.apl-faq-item[open] .apl-faq-ikona{ transform:rotate(180deg); }
.apl-faq-item p{ margin:0 0 22px; padding-right:36px; color:var(--muted); font-size:15.5px; line-height:1.6; }
.apl-faq-item p a{ color:var(--blue); font-weight:600; }
@media (max-width:640px){
  .apl-faq-item summary{ font-size:15.5px; padding:18px 2px; }
  .apl-faq-item p{ padding-right:0; font-size:15px; }
}

/* ═══ 4. ZAKLJUČNI CTA — ".cta-band" jezik podvojen namerno (glej isto
   odločitev na vseh ostalih V2 straneh). ─────────────────────────── */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--navy-mid), var(--navy) 65%, var(--navy-deep));
  padding:var(--sp-7) var(--sp-5); text-align:center; color:#fff;
}
.cta-band::before{
  content:''; position:absolute; top:0; left:8%; right:8%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(23,185,236,.55), rgba(171,208,57,.5), transparent);
}
.cta-band h2{ margin-bottom:var(--sp-2); font-size:clamp(30px, 3.2vw, 44px); }
.cta-band .lead{ margin:0 auto var(--sp-4); color:var(--muted-on-navy); }
.cta-btns{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }
.cta-znacke{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-4); font-size:13px; color:var(--muted-on-navy); }

@media (max-width:760px){
  .cta-band{ padding:var(--sp-6) var(--sp-3); }
}