/* ── Prvi koraci ──────────────────────────────────────────────────────────────
   Svaki korak je poglavlje: broj, naslov, objašnjenje ZAŠTO, i prizor pored
   teksta. Pozadine se smjenjuju (svijetlo → obojena traka → tamno), pa
   stranica ima ritam umjesto jednog bijelog lista sa sivim kutijama. */

.pc-sirina { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.pc-dvije {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

/* ── vrh ── */
.pc-vrh { padding: 7rem 0 2rem; overflow: hidden; }
.pc-vrh-mreza { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem; align-items: center; }
.pc-vrh h1 {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 0 0 1.4rem;
}
.pc-vrh p { font-size: 1.2rem; line-height: 1.6; color: var(--text-secondary); max-width: 33rem; margin: 0; }
.pc-vrh-slika { position: relative; justify-self: center; }
.pc-vrh-slika::before {
  content: "";
  position: absolute;
  inset: 8% -6% 4% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-1) 35%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent) 60%, transparent);
  filter: blur(10px);
}
/* ── Animacija na vrhu: HAOS → RJEŠENJE ──────────────────────────────────────
   Odvrti se JEDNOM (10 s) i ostane na rješenju (fill-mode both):
     0–50 %  haos: papiri lete i tresu se, pitanja iskaču jedno za drugim
             (svako ~1,6 s, pomjereno kašnjenjem --ka), upitnici, sat, šaranje
     38–60 % „Ko mi može pomoći?"
     50–57 % haos se ugasi, papiri polete u urednu gomilu oko (180, 190)
     60 %→   oblačić: Rubik „kuca" (tri tačkice), pa poruka
   Osnovni stilovi su ZAVRŠNO stanje (gomila + odgovor), pa uz
   „smanjeno kretanje" stoji mirna slika rješenja.
   Papir: --x/--y mjesto u haosu, --r nagib u haosu, --rs nagib u gomili,
   --j koliko se trese. */
.an-scena { width: 360px; height: 440px; }
.an-scena > *, .an-haos > * { position: absolute; }
.an-haos { inset: 0; z-index: 3; opacity: 0; visibility: hidden; animation: an-haos 10s ease-in-out both; }

.an-sara { inset: 0; width: 100%; height: 100%; overflow: visible; }
.an-sara path {
  fill: none;
  stroke: color-mix(in srgb, var(--text-secondary) 45%, transparent);
  stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1400; stroke-dashoffset: 0;
  animation: an-sara 10s ease-in-out both;
}

.an-list {
  left: var(--x); top: var(--y);
  width: 96px; height: 122px; margin: -61px 0 0 -48px;
  padding: 0.85rem 0.7rem;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 10px 22px rgba(15, 23, 42, 0.16);
  display: flex; flex-direction: column; gap: 0.45rem;
  z-index: 1;
  transform: translate(calc(180px - var(--x)), calc(190px - var(--y))) rotate(var(--rs));
  animation: an-list 10s ease-in-out both;
}
.an-list span { display: block; height: 5px; width: 80%; border-radius: 3px; background: #e4e7ec; }
.an-list .an-dug { width: 100%; }
.an-list .an-kratak { width: 50%; }

.an-pitanje, .an-upitnik, .an-sat { left: var(--px); top: var(--py); margin: 0; }
.an-pitanje {
  padding: 0.4rem 0.75rem;
  border-radius: 12px 12px 12px 3px;
  background: var(--bg-primary);
  border: 1px solid var(--border-card);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  color: var(--text-primary);
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  opacity: 0;
  animation: an-pitanje 10s ease-in-out var(--ka) both;
}
/* zadnje pitanje stoji van haosa: ostaje dok se papiri ne slože */
.an-zadnje { z-index: 4; border-color: var(--accent-1); color: var(--accent-tekst); animation: an-zadnje 10s ease-in-out both; }

.an-upitnik { font-size: 2.6rem; font-weight: 800; line-height: 1; color: #e0556b; animation: an-upitnik 2.4s ease-in-out var(--ka) 3; }

.an-sat {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--text-primary);
  background: var(--bg-primary);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.15);
}
.an-sat::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--text-primary); }
.an-sat i {
  position: absolute; left: 50%; bottom: 50%;
  width: 3px; height: 16px; margin-left: -1.5px;
  border-radius: 2px; background: #e0556b;
  transform-origin: 50% 100%;
  animation: an-kazaljka 1.1s linear 5;
}

/* ── oblačić sa odgovorom: okvir u prelivu sajta, repić prema gomili ── */
.an-odgovor {
  left: 58px; top: 290px; z-index: 4;
  width: 252px;
  padding: 0.85rem 1.05rem 1rem;
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
    linear-gradient(135deg, var(--accent-1), var(--accent-2)) border-box;
  box-shadow:
    0 22px 44px -18px color-mix(in srgb, var(--accent-1) 55%, transparent),
    0 10px 24px rgba(15, 23, 42, 0.12);
  transform-origin: 30% 0;
  animation: an-odgovor 10s cubic-bezier(.2, .9, .3, 1.25) both;
}
/* repić gore lijevo, prema gomili papira */
.an-odgovor::before {
  content: "";
  position: absolute; left: 34px; top: -9px;
  width: 16px; height: 16px;
  background: var(--bg-primary);
  border-left: 2px solid var(--accent-1);
  border-top: 2px solid var(--accent-1);
  border-radius: 4px 0 0 0;
  transform: rotate(45deg);
}
.an-od-zaglavlje {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.55rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-card);
}
.an-od-zaglavlje img { width: 84px; height: auto; display: block; }
.an-logo-tamna { display: none !important; }
[data-theme="dark"] .an-logo-svijetla { display: none !important; }
[data-theme="dark"] .an-logo-tamna { display: block !important; }

/* „kuca…" i poruka stoje na istom mjestu (ista ćelija), pa se oblačić ne trza */
.an-od-tijelo { display: grid; }
.an-od-tijelo > * { grid-area: 1 / 1; }
.an-kuca { display: flex; align-items: center; gap: 5px; opacity: 0; animation: an-kuca 10s linear both; }
.an-kuca i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); animation: an-tacka 0.9s ease-in-out 7.2s 3; }
.an-kuca i:nth-child(2) { animation-delay: 7.35s; }
.an-kuca i:nth-child(3) { animation-delay: 7.5s; }
.an-od-tekst { margin: 0; font-size: 1.12rem; line-height: 1.35; color: var(--text-primary); animation: an-od-tekst 10s ease-out both; }
.an-od-tekst b { font-weight: 800; }
.an-od-tekst span {
  font-weight: 800;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

@keyframes an-list {
  0%   { transform: translate(0, 0) rotate(var(--r)); }
  9%   { transform: translate(var(--j), calc(var(--j) * -0.8)) rotate(calc(var(--r) + 7deg)); }
  17%  { transform: translate(calc(var(--j) * -0.7), calc(var(--j) * 0.6)) rotate(calc(var(--r) - 6deg)); }
  24%  { transform: translate(calc(var(--j) * 0.4), calc(var(--j) * -0.3)) rotate(calc(var(--r) + 3deg)); }
  25.5% { transform: translate(calc(var(--j) * -0.4), calc(var(--j) * 0.2)) rotate(calc(var(--r) - 3deg)); }
  27%  { transform: translate(calc(var(--j) * 0.4), calc(var(--j) * -0.2)) rotate(calc(var(--r) + 2deg)); }
  36%  { transform: translate(calc(var(--j) * 0.6), calc(var(--j) * -0.5)) rotate(calc(var(--r) + 5deg)); }
  45%  { transform: translate(calc(var(--j) * -0.8), calc(var(--j) * -0.4)) rotate(calc(var(--r) - 6deg)); }
  50%  { transform: translate(0, 0) rotate(var(--r)); }
  57%, 100% { transform: translate(calc(180px - var(--x)), calc(190px - var(--y))) rotate(var(--rs)); }
}
@keyframes an-haos {
  0%, 48%   { opacity: 1; visibility: visible; }
  55%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes an-pitanje {
  0%        { opacity: 0; transform: scale(0.6) translateY(6px); }
  2%        { opacity: 1; transform: scale(1.06); }
  3%        { transform: none; }
  9%        { transform: translateY(-4px) rotate(-2deg); }
  15%       { opacity: 1; transform: translateY(3px) rotate(2deg); }
  18%, 100% { opacity: 0; transform: scale(0.85); }
}
@keyframes an-zadnje {
  0%, 36%   { opacity: 0; transform: scale(0.6); }
  40%       { opacity: 1; transform: scale(1.08); }
  42%, 58%  { opacity: 1; transform: none; }
  62%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes an-odgovor {
  0%, 59%   { opacity: 0; transform: translateY(16px) scale(0.8); }
  64%, 100% { opacity: 1; transform: none; }
}
@keyframes an-kuca {
  0%, 62%   { opacity: 0; }
  64%, 80%  { opacity: 1; }
  82%, 100% { opacity: 0; }
}
@keyframes an-tacka {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  40%      { transform: translateY(-5px); opacity: 1; }
}
@keyframes an-od-tekst {
  0%, 81%   { opacity: 0; transform: translateY(6px); }
  86%, 100% { opacity: 1; transform: none; }
}
@keyframes an-sara {
  0%        { stroke-dashoffset: 1400; }
  40%, 100% { stroke-dashoffset: 0; }
}
@keyframes an-upitnik {
  0%, 100% { transform: scale(1) rotate(-8deg); opacity: 0.75; }
  50%      { transform: scale(1.25) rotate(10deg); opacity: 1; }
}
@keyframes an-kazaljka { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .an-haos, .an-list, .an-pitanje, .an-zadnje, .an-odgovor, .an-upitnik, .an-sat i, .an-sara path,
  .an-kuca, .an-kuca i, .an-od-tekst { animation: none; }
}

/* ── zajedničko za korake ── */
.pc-korak { padding: 4rem 0; scroll-margin-top: 60px; }

/* Broj stoji pored naslova, ne iznad: stranica je bila 2,5 ekrana do koraka 3. */
.pc-naslov { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 0.9rem; }
.pc-naslov h2 { margin: 0; }
/* Broj koraka = pločica Rubikove kocke: zaobljen kvadrat sa prelivom plava → zelena
   (korak 1 plaviji, korak 3 zeleniji), a iza nje druga pločica kao komad kocke. */
.pc-naslov .pc-broj {
  --od: var(--accent-1);
  --do: color-mix(in srgb, var(--accent-1) 55%, var(--accent-2));
  flex: none;
  margin: 0;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--od), var(--do));
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),          /* odsjaj na gornjoj ivici */
    8px 8px 0 -1px color-mix(in srgb, var(--do) 35%, transparent);   /* pločica iza */
  transform: rotate(-4deg);
}
.pc-korak-2 .pc-naslov .pc-broj { --od: color-mix(in srgb, var(--accent-1) 55%, var(--accent-2)); --do: color-mix(in srgb, var(--accent-1) 25%, var(--accent-2)); transform: rotate(3deg); }
.pc-korak-3 .pc-naslov .pc-broj { --od: color-mix(in srgb, var(--accent-1) 25%, var(--accent-2)); --do: var(--accent-2); }
.pc-korak h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}
.pc-tekst > p { font-size: 1.08rem; line-height: 1.7; color: var(--text-secondary); max-width: 34rem; margin: 0 0 1.5rem; }
.pc-tekst-siroki > p { max-width: 44rem; }

/* ── 1: papiri ── */
.pc-papiri { margin: 0; display: grid; gap: 1.1rem; }
.pc-papiri div { padding-left: 1rem; border-left: 3px solid var(--accent-1); }
.pc-papiri dt { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.pc-papiri dd { margin: 0.2rem 0 0; color: var(--text-secondary); line-height: 1.55; }

/* Stavka sa objašnjenjem: izgleda klikabilno (tačkasto podvučeno + „i"). */
.pc-objasni {
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: underline dotted var(--accent-tekst);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.pc-objasni:hover { color: var(--accent-tekst); }
/* U uvodu je riječ dio rečenice: ista veličina kao tekst oko nje. */
.pc-vrh .pc-objasni { font-size: inherit; vertical-align: baseline; }
.pc-objasni:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; border-radius: 4px; }
.pc-i {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, serif;
  color: #fff;
  background: var(--accent-tekst);
  text-decoration: none;
}

/* Prozorčić sa objašnjenjem */
.pc-opis {
  width: min(92vw, 34rem);
  margin: auto;   /* global.css briše margine svima, a dijalog se njima centrira */
  padding: 2rem 2rem 1.6rem;
  border: 0;
  border-top: 4px solid var(--accent-1);
  border-radius: 18px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45);
  line-height: 1.65;
}
.pc-opis::backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(3px); }
.pc-opis h3 { margin: 0 2rem 0.75rem 0; font-size: 1.35rem; font-weight: 800; color: var(--text-primary); }
.pc-opis p { margin: 0 0 0.8rem; }
.pc-opis p:last-child { margin-bottom: 0; }
.pc-opis-zatvori {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.pc-opis-zatvori:hover { background: var(--border-card); }

/* sto sa papirima: sve je nacrtano CSS-om, ništa nije čitljiv dokument */
.pc-sto { position: relative; height: 340px; }
.pc-list {
  position: absolute;
  width: 215px;
  height: 280px;
  padding: 2rem 1.6rem;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 18px 36px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pc-list-1 { left: 16%; top: 10px; transform: rotate(-9deg); }
.pc-list-2 { left: 30%; top: 40px; transform: rotate(4deg); }
.pc-list b { font-size: 0.85rem; color: #1f2937; margin-bottom: 0.4rem; }
.pc-red { display: block; height: 7px; width: 80%; border-radius: 4px; background: #e4e7ec; }
.pc-dug { width: 100%; }
.pc-kratak { width: 55%; }
.pc-potpis { margin-top: auto; width: 45%; height: 18px; border-bottom: 2px solid #9aa3af; border-radius: 0 0 40% 0; }
.pc-pecat {
  position: absolute;
  left: 50%;
  top: 200px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 4px double #2a59b8;
  display: grid;
  place-items: center;
  transform: rotate(-14deg);
  opacity: 0.85;
  mix-blend-mode: multiply;
}
.pc-pecat span { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.15em; color: #2a59b8; }
.pc-karta {
  position: absolute;
  left: 4%;
  top: 215px;
  width: 170px;
  height: 108px;
  border-radius: 12px;
  background: linear-gradient(135deg, #dbeafe, #e0f2e9);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
  transform: rotate(6deg);
  padding: 1rem;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  align-content: center;
}
.pc-karta i { grid-row: span 2; width: 44px; height: 54px; border-radius: 6px; background: #b8c4d6; }
.pc-karta span { height: 7px; border-radius: 4px; background: #b8c4d6; }
.pc-sertifikat {
  position: absolute;
  right: 2%;
  top: 55px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
  transform: rotate(5deg);
}
.pc-sertifikat svg { width: 1rem; height: 1rem; fill: var(--accent-2); }

/* ── 2: obojena traka preko cijele širine ── */
.pc-korak-2 {
  background:
    radial-gradient(60rem 30rem at 85% 0%, color-mix(in srgb, var(--accent-1) 12%, transparent), transparent 70%),
    radial-gradient(50rem 30rem at 0% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%),
    var(--bg-secondary);
}
.pc-djelatnosti { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 2rem; }
.pc-djelatnosti .vodic-djelatnost {
  font: inherit;
  font-weight: 600;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
}
.pc-djelatnosti small { font-weight: 400; color: var(--text-secondary); margin-left: 0.3rem; }
/* Boje djelatnosti: naizmjenično plava i zelena sajta (Mario). --tacka boji
   kvadratić, pozadinu i okvir. */
.pc-djelatnosti [data-djelatnost="fiscall"],
.pc-djelatnosti [data-djelatnost="tordis"] { --tacka: var(--accent-1); }
.pc-djelatnosti [data-djelatnost="atos"],
.pc-djelatnosti [data-djelatnost="aramis"] { --tacka: var(--accent-2); }
.pc-djelatnosti .vodic-djelatnost::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border-radius: 3px;            /* kvadratić, kao polje na kocki */
  background: var(--tacka);
  vertical-align: 0.05em;
}
.pc-djelatnosti .vodic-djelatnost {
  background: color-mix(in srgb, var(--tacka) 12%, var(--bg-primary));
  border-color: color-mix(in srgb, var(--tacka) 40%, transparent);
}
.pc-djelatnosti .vodic-djelatnost:hover { border-color: var(--tacka); }
/* Izabrano: jača nijansa + okvir u boji, slova ostaju tamna (puna boja je bila prejaka). */
.pc-djelatnosti [aria-selected="true"] {
  background: color-mix(in srgb, var(--tacka) 26%, var(--bg-primary));
  border: 2px solid var(--tacka);
  padding: calc(0.65rem - 1px) calc(1.15rem - 1px);
  color: var(--text-primary);
}
.pc-djelatnosti [aria-selected="true"] small { color: var(--text-secondary); }
.pc-djelatnosti .vodic-djelatnost:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }

.pc-uredjaji { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pc-uredjaj {
  padding: 1.75rem;
  border-radius: 24px;
  background: var(--bg-primary);
  box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.35);
}
.pc-glavni { outline: 2px solid var(--accent-1); outline-offset: -2px; }
/* Kartice su položene (slika lijevo, tekst desno) — upola niže nego slika iznad teksta. */
.pc-uredjaj { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.pc-uredjaj img { display: block; width: 100%; height: auto; }
.pc-uredjaj h3 { font-size: 1.45rem; font-weight: 800; color: var(--text-primary); margin: 0.15rem 0 0; }
.pc-oznaka { margin: 0; font-weight: 700; font-size: 0.9rem; color: var(--accent-tekst); }
.pc-oznaka-tiha { color: var(--text-secondary); }
.pc-model { margin: 0.1rem 0 0.9rem; color: var(--text-secondary); }
.pc-uredjaj ul { margin: 0; padding-left: 1.1rem; color: var(--text-secondary); line-height: 1.75; }
.pc-uredjaj h3 + ul { margin-top: 0.75rem; }   /* kartica bez reda ispod naslova */
.pc-napomena { margin: 1.25rem 0 0; color: var(--text-secondary); }
.pc-napomena .pc-link { margin-left: 0.4rem; }
.pc-uskoro { color: var(--text-secondary); line-height: 1.6; padding: 1.5rem; border-radius: 18px; background: var(--bg-primary); margin: 0; }
.pc-uskoro a { color: var(--accent-tekst); font-weight: 600; }
.vodic-panel[hidden] { display: none; }

/* Maloprodaja i veleprodaja: bez modela — tekst lijevo, vrste opreme desno. */
.pc-slaze {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 2.5rem;
  padding: 2rem 2.25rem;
  border-radius: 24px;
  background: var(--bg-primary);
  box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.35);
}
.pc-slaze h3 { margin: 0 0 0.75rem; font-size: 1.45rem; font-weight: 800; color: var(--text-primary); }
.pc-slaze-tekst p { margin: 0 0 0.9rem; color: var(--text-secondary); line-height: 1.65; }
.pc-link { font-weight: 700; color: var(--accent-tekst); text-decoration: none; border-bottom: 2px solid currentColor; }
.pc-slaze-naslov { margin: 0.3rem 0 0.9rem; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.pc-dijelovi { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pc-dijelovi li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.97rem;
}
.pc-dijelovi svg { width: 1.4rem; height: 1.4rem; flex: none; fill: var(--accent-tekst); }

/* ── 3: tamna završna traka (ista u obje teme) ── */
.pc-korak-3 { background: #141922; }
.pc-korak-3 h2 { color: #f4f6fa; }
.pc-korak-3 .pc-tekst > p:not(.pc-broj) { color: #aab3c2; }

.pc-traka-mjesto { width: min(100%, 330px); justify-self: center; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45)); }
.pc-glava { height: 64px; border-radius: 22px 22px 12px 12px; background: linear-gradient(#444a55, #2a2e36); position: relative; z-index: 1; }
.pc-glava span { position: absolute; left: 9%; right: 9%; bottom: 12px; height: 7px; border-radius: 4px; background: #0d0f12; }
.pc-glava::after { content: ""; position: absolute; right: 9%; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #7dc242; box-shadow: 0 0 8px #7dc242; }
.pc-traka-okvir { margin: -18px 9% 0; overflow: hidden; padding-bottom: 12px; }
.pc-traka {
  background: #fdfdfb;
  color: #23262c;
  padding: 2.6rem 1.3rem 1.5rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.92rem;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
}
.pc-traka hr { border: 0; border-top: 2px dashed #b9bcc2; margin: 0.9rem 0; }
.pc-traka-naslov { margin: 0; text-align: center; font-weight: 700; }
.pc-stavka { margin: 0.35rem 0; display: flex; justify-content: space-between; }
.pc-traka-dno { margin: 0; text-align: center; color: #5d626b; font-size: 0.85rem; }

/* Korak 3: upit i poziv jedno do drugog (sa telefona je poziv često lakši od forme). */
.pc-akcije { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.pc-pozovi {
  display: inline-flex; align-items: center;
  padding: 12px 26px;
  border-radius: 30px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #f4f6fa;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.pc-pozovi:hover { border-color: #94c94a; background: rgba(148, 201, 74, 0.12); }

/* ── dugme za upit ── */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 14px 36px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.cta-button:hover {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 191, 255, 0.3);
}

/* ── telefon ── */
@media (max-width: 860px) {
  .pc-vrh { padding-top: 6.5rem; }
  .pc-vrh-mreza, .pc-dvije, .pc-uredjaji, .pc-slaze { grid-template-columns: 1fr; }
  .pc-slaze { padding: 1.5rem 1.25rem; gap: 1.5rem; }
  .pc-dvije { gap: 2.5rem; }
  /* Na telefonu nema animacije (gurala bi korake ekran niže), ali ostaje
     mirni oblačić sa odgovorom ispod uvoda — da i mobilni posjetilac vidi
     „Prođimo to zajedno, korak po korak." */
  .pc-vrh-slika.an-scena { width: auto; height: auto; justify-self: start; }
  .pc-vrh-slika::before,
  .an-scena > :not(.an-odgovor) { display: none; }
  .an-scena .an-odgovor { position: relative; left: auto; top: auto; width: auto; max-width: 320px; margin-top: 0.25rem; animation: none; }
  .an-scena .an-kuca { display: none; }
  .an-scena .an-od-tekst { animation: none; }
  .pc-korak { padding: 4rem 0; }
  .pc-naslov .pc-broj { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; border-radius: 12px; }
  .pc-uredjaj { grid-template-columns: 110px minmax(0, 1fr); padding: 1.25rem; gap: 1rem; }
  .pc-sto { height: 330px; max-width: 380px; width: 100%; justify-self: center; transform: scale(0.8); margin: -33px 0; }
  .pc-list { width: 190px; height: 250px; }
  .pc-pecat { top: 185px; }
  .pc-karta { top: 200px; }
}