/* MojHelfer web. Boje i fontovi isti kao u aplikaciji (src/constants/theme.ts), pravac "Marker".
   Zlato je samo za Plus, kao u aplikaciji. */

@font-face { font-family: 'Bricolage'; src: url('/fontovi/BricolageGrotesque_800ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fontovi/Figtree_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fontovi/Figtree_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --mastilo: #16213E;
  --noc: #0B1226;
  --marker: #FFE14D;
  --sto: #F4F5F7;
  --papir: #FFFFFF;
  --rok: #E5484D;
  --rijeseno: #1E9E6A;
  --sivo: #5B6275;
  --linija: #E3E5EA;
  --magla: #AEB5C9;
  --zlato-1: #FBE7A1;
  --zlato-2: #F2C94C;
  --zlato-3: #C8962E;
  --sirina: 1160px;
  --radijus: 24px;
  --glatko: cubic-bezier(.2,.7,.2,1);
  --zrno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sto);
  color: var(--mastilo);
  font: 400 18px/1.6 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: 'Bricolage', 'Figtree', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; margin: 0; }
p { margin: 0; }
b, strong { font-weight: 700; }
::selection { background: var(--marker); color: var(--mastilo); }

.okvir { max-width: var(--sirina); margin: 0 auto; padding: 0 20px; }

/* Marker iza tamnog teksta (logo, telefon, svijetli odjeljci) */
.mk { position: relative; white-space: nowrap; z-index: 0; }
.mk::before {
  content: ''; position: absolute; z-index: -1;
  left: 0.04em; right: -0.14em; top: 40%; bottom: 0.12em;
  background: var(--marker); border-radius: 0.3em 0.12em 0.36em 0.1em;
  transform: rotate(-1.2deg); transform-origin: left center;
}


/* Zlatni potez flomasterom iza bijelog teksta (na tamnoj pozadini): jedna ravna nijansa #FFCC33, između markera i zlata, da se bijela slova čitaju */
.mkz { position: relative; display: inline-block; white-space: nowrap; color: #fff; z-index: 0; }
.mkz::before {
  content: ''; position: absolute; z-index: -1; left: 0.03em; right: -0.12em; top: 40%; bottom: 0.15em;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><path fill='%23FFCC33' d='M7 11 C38 7 96 9 150 6 C168 5 184 6 194 5 C198 5 200 9 198 12 C197 18 199 25 197 31 C196 35 193 36 189 35 C150 33 98 36 52 35 C35 35 20 37 9 37 C4 37 2 34 3 30 C4 24 1 18 3 14 C4 12 5 11 7 11 Z'/></svg>") no-repeat center / 100% 100%;
  transform: rotate(-1.2deg); transform-origin: left center;
}
.mkz.crtaj::before { animation: crtaj .8s .45s var(--glatko) both; }
.js .pojavi .mkz.crtaj::before { animation: none; transform: rotate(-1.2deg) scaleX(0); }
.js .pojavi.vidljivo .mkz.crtaj::before { animation: crtaj .8s .4s var(--glatko) both; }
@keyframes crtaj { from { transform: rotate(-1.2deg) scaleX(0); } to { transform: rotate(-1.2deg) scaleX(1); } }
.zaglavlje.tamno .logo .mk::before, .podnozje .logo .mk::before { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><path fill='%23FFCC33' d='M7 11 C38 7 96 9 150 6 C168 5 184 6 194 5 C198 5 200 9 198 12 C197 18 199 25 197 31 C196 35 193 36 189 35 C150 33 98 36 52 35 C35 35 20 37 9 37 C4 37 2 34 3 30 C4 24 1 18 3 14 C4 12 5 11 7 11 Z'/></svg>") no-repeat center / 100% 100%; border-radius: 0; top: 44%; bottom: 0.12em; }

/* Naslov: žuta riječ s potezom flomastera ispod */
.istakni { position: relative; display: inline-block; color: var(--marker); white-space: nowrap; }
.istakni svg { position: absolute; left: -2%; width: 104%; height: 0.32em; bottom: -0.16em; overflow: visible; }
.istakni path { fill: none; stroke: var(--marker); stroke-width: 6px; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: potez 1s .55s var(--glatko) forwards; opacity: .9; }
@keyframes potez { to { stroke-dashoffset: 0; } }

.nadnaslov { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sivo); margin-bottom: 18px; }
.nadnaslov::before { content: ''; width: 22px; height: 2px; background: currentColor; opacity: .5; }
.noc .nadnaslov { color: #C9D3F0; }

/* Zaglavlje (ostaje kako jeste) */
.zaglavlje { position: sticky; top: 0; z-index: 20; background: rgba(244,245,247,.82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.zaglavlje.tamno { background: rgba(14,21,44,.72); color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); }
.zaglavlje .okvir { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.logo svg { width: 26px; height: 28px; }
.meni { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.meni a { text-decoration: none; opacity: .78; transition: opacity .2s; }
.meni a:hover { opacity: 1; }
.meni .dugme { opacity: 1; }

/* Dugmad + odsjaj */
.dugme { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--glatko), box-shadow .25s var(--glatko); }
.dugme:hover { transform: translateY(-1px); }
.dugme.zuto { background: var(--marker); color: var(--mastilo); box-shadow: 0 6px 20px rgba(255,225,77,.28), inset 0 -2px 0 rgba(0,0,0,.08); }
.dugme.zuto:hover { box-shadow: 0 10px 30px rgba(255,225,77,.42), inset 0 -2px 0 rgba(0,0,0,.08); }
.dugme.tamno { background: var(--mastilo); color: #fff; }
.dugme.malo { min-height: 40px; padding: 0 18px; font-size: 14px; }
.sjaj::after {
  content: ''; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-20deg); animation: sjaj 4.2s 1.2s ease-in-out infinite; pointer-events: none;
}
@keyframes sjaj { 0% { left: -60%; } 22%, 100% { left: 130%; } }

.trgovine { display: flex; flex-wrap: wrap; gap: 12px; }
.trgovina { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-width: 200px; padding: 11px 22px 11px 18px; border-radius: 16px; text-decoration: none; background: #fff; color: var(--mastilo); box-shadow: 0 10px 30px rgba(5,10,30,.25); transition: transform .3s var(--glatko), box-shadow .3s var(--glatko); }
.trgovina:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(5,10,30,.32); }
.trgovina svg { width: 26px; height: 26px; flex: none; }
.trgovina small { display: block; font-size: 12px; line-height: 1.2; opacity: .6; }
.trgovina span { display: block; font-weight: 700; font-size: 18px; line-height: 1.2; }
.trgovina.uskoro { cursor: default; }
.trgovina::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(22,33,62,.07), transparent); transform: skewX(-20deg); transition: left .7s var(--glatko); }
.trgovina:hover::after { left: 130%; }

/* Tamna pozadina: duboka noć, meka svjetla, zrno */
.noc { position: relative; overflow: hidden; color: #fff; background: var(--noc); isolation: isolate; }
.noc::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--zrno); opacity: .05; mix-blend-mode: overlay; pointer-events: none; }
.svjetla { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.svjetla i { position: absolute; border-radius: 50%; filter: blur(70px); }
.svjetla .s1 { width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; left: -18%; top: -38%; background: radial-gradient(circle, rgba(74,100,168,.75), rgba(74,100,168,0) 68%); animation: lebdi 22s ease-in-out infinite alternate; }
.svjetla .s2 { width: 48vw; height: 48vw; max-width: 720px; max-height: 720px; right: -10%; top: 4%; background: radial-gradient(circle, rgba(52,72,150,.7), rgba(52,72,150,0) 66%); animation: lebdi 26s ease-in-out infinite alternate-reverse; }
.svjetla .s3 { width: 26vw; height: 26vw; max-width: 380px; max-height: 380px; right: 14%; bottom: -6%; background: radial-gradient(circle, rgba(255,225,77,.16), rgba(255,225,77,0) 70%); animation: lebdi 18s ease-in-out infinite alternate; }
@keyframes lebdi { to { transform: translate3d(4%, 6%, 0) scale(1.08); } }
.noc .rub { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }

/* Uvod (hero) */
.uvod { margin-top: -64px; padding: 136px 0 0; }
.uvod .okvir { display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: end; }
.uvod .tekst { padding-bottom: 104px; }
.uvod h1 { font-size: clamp(42px, 6.2vw, 74px); }
@media (min-width: 901px) { .nw { white-space: nowrap; } }
.uvod .podnaslov { margin: 28px 0 38px; font-size: clamp(18px, 1.9vw, 21px); color: #CDD5EC; max-width: 31em; }
.uvod .podnaslov b { color: #fff; }
.povjerenje { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font-size: 14.5px; color: var(--magla); }
.povjerenje span { display: inline-flex; align-items: center; gap: 8px; }
.povjerenje svg { width: 16px; height: 16px; stroke: var(--marker); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Telefon */
.scena { position: relative; justify-self: center; width: 340px; max-width: 100%; }
.scena::before { content: ''; position: absolute; left: 8%; right: 8%; top: 10%; bottom: 0; background: radial-gradient(closest-side, rgba(120,150,240,.35), transparent); filter: blur(30px); z-index: -1; }
.telefon { width: 100%; aspect-ratio: 330 / 600; background: linear-gradient(160deg, #2A3352, #0E1428 40%); border-radius: 54px 54px 0 0; padding: 11px 11px 0; box-shadow: 0 50px 100px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.25); }
.ekran { position: relative; height: 100%; background: var(--sto); border-radius: 44px 44px 0 0; overflow: hidden; color: var(--mastilo); font-size: 13px; line-height: 1.45; padding: 16px 18px 0; }
.ekran::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.35), rgba(255,255,255,0) 32%); pointer-events: none; }
.ekran .gore { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12px; padding: 0 8px 14px; }
.ekran .ostrvo { width: 92px; height: 26px; border-radius: 20px; background: #0E1428; }
.ekran .od { color: var(--sivo); font-size: 11.5px; }
.ekran h3 { font-size: 20px; margin: 4px 0 2px; }
.ekran .de { color: var(--sivo); font-size: 11.5px; margin-bottom: 14px; }
.ekran .kartica { background: #fff; border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(22,33,62,.04); }
.ekran .dva { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ekran .oznaka { font-size: 10.5px; font-weight: 700; color: var(--sivo); text-transform: uppercase; letter-spacing: .06em; }
.ekran .vrijednost { font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: 17px; margin-top: 4px; }
.ekran .vrijednost .mk::before { top: 50%; }
.ekran .hitno { display: inline-block; color: var(--rok); font-weight: 700; font-size: 11px; margin-bottom: 6px; }
.ekran ol { margin: 6px 0 0; padding-left: 18px; }
.ekran li { margin-bottom: 4px; }

.oblak { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; color: var(--mastilo); background: rgba(255,255,255,.86); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 20px 50px rgba(5,10,30,.35), inset 0 0 0 1px rgba(255,255,255,.6); font-size: 13px; line-height: 1.35; animation: plovi 6s ease-in-out infinite; }
.oblak b { display: block; font-size: 13.5px; }
.oblak .ik { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--mastilo); }
.oblak .ik svg { width: 18px; height: 18px; stroke: var(--marker); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.oblak.o1 { right: -58px; top: 9%; width: 228px; }
.oblak.o2 { left: -52px; top: 66%; animation-delay: -3s; }
.oblak.o2 .ik { background: var(--rijeseno); }
.oblak.o2 .ik svg { stroke: #fff; }
@keyframes plovi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Odjeljci */
.odjeljak { padding: 120px 0; position: relative; }
.odjeljak.bijelo { background: #fff; }
.odjeljak h2 { font-size: clamp(34px, 4.6vw, 56px); max-width: 15em; }
.odjeljak .vodi { margin-top: 20px; font-size: 20px; color: var(--sivo); max-width: 34em; }
.noc .vodi { color: var(--magla); }
.centar { text-align: center; }
.centar h2, .centar .vodi { margin-left: auto; margin-right: auto; }
.centar .nadnaslov { justify-content: center; }

/* Bol: poznato? */
.bol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.bol .kutija p { font-size: 18px; color: var(--mastilo); }
.rjesenje { margin-top: 56px; font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.02em; line-height: 1.2; text-align: center; }

/* Kartice s mekim svjetlom koje prati miš */
.kutija { position: relative; overflow: hidden; background: #fff; border-radius: var(--radijus); padding: 32px 30px; border: 1px solid rgba(22,33,62,.06); transition: transform .45s var(--glatko), box-shadow .45s var(--glatko), border-color .45s; }
.kutija::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--x, 50%) var(--y, -20%), rgba(255,225,77,.14), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.kutija:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(22,33,62,.09); border-color: rgba(22,33,62,.1); }
.kutija:hover::before { opacity: 1; }
.odjeljak.bijelo .kutija { background: var(--sto); }
.kutija .ikona { width: 46px; height: 46px; border-radius: 14px; background: var(--mastilo); display: grid; place-items: center; margin-bottom: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.kutija .ikona svg { width: 22px; height: 22px; stroke: var(--marker); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kutija h3 { font-size: 22px; margin-bottom: 8px; }
.kutija p { color: var(--sivo); font-size: 17px; }
.kutija.siroka { grid-column: span 2; }
.noc .kutija { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); }
.noc .kutija:hover { box-shadow: 0 24px 50px rgba(0,0,0,.3); border-color: rgba(255,255,255,.14); }
.noc .kutija p { color: var(--magla); }
.noc .kutija .ikona { background: var(--marker); }
.noc .kutija .ikona svg { stroke: var(--mastilo); }

.koraci { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; }
.korak .broj { font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .04em; color: var(--sivo); margin-bottom: 26px; display: flex; align-items: center; gap: 12px; }
.korak .broj::after { content: ''; flex: 1; height: 1px; background: var(--linija); }
.korak h3 { font-size: 28px; margin-bottom: 10px; }

.mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; }

.zlatno { display: inline-block; position: relative; overflow: hidden; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font: 700 11px/1.6 'Figtree', sans-serif; letter-spacing: .08em; vertical-align: middle; background: linear-gradient(120deg, var(--zlato-1), var(--zlato-2) 45%, var(--zlato-3) 80%, #F5D77A); color: #3A2A06; }
.zlatno::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); transform: skewX(-20deg); animation: sjaj 3.4s ease-in-out infinite; }

.pisma { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 44px; max-width: 900px; margin-left: auto; margin-right: auto; }
.pisma span { background: #fff; border: 1px solid var(--linija); border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 16px; transition: transform .3s var(--glatko), border-color .3s, box-shadow .3s; }
.pisma span:hover { transform: translateY(-2px); border-color: var(--mastilo); box-shadow: 0 8px 20px rgba(22,33,62,.08); }
.pisma span em { font-style: normal; font-weight: 400; color: var(--sivo); }

/* Cijena */
.besplatno-traka { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; max-width: 940px; margin: 56px auto 34px; padding: 20px 26px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); text-align: left; }
.besplatno-traka b { color: #fff; }
.besplatno-traka span { color: var(--magla); }

.paketi { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; max-width: 940px; margin: 0 auto; text-align: left; }
.paket { position: relative; border-radius: 28px; padding: 36px 34px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: transform .45s var(--glatko); }
.paket:hover { transform: translateY(-4px); }
.paket.najbolje { background: linear-gradient(180deg, rgba(242,201,76,.12), rgba(242,201,76,.03) 60%), rgba(255,255,255,.04); border: 1px solid rgba(242,201,76,.55); box-shadow: 0 30px 80px rgba(242,201,76,.10), inset 0 1px 0 rgba(251,231,161,.25); }
.paket .vrh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.paket .ime { font-weight: 700; font-size: 17px; color: #fff; }
.paket .usteda { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--marker); color: var(--mastilo); }
.paket .cijena { font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: clamp(48px, 6vw, 64px); letter-spacing: -0.03em; line-height: 1; color: #fff; }
.paket .cijena small { font-family: 'Figtree', sans-serif; font-weight: 400; font-size: 18px; letter-spacing: 0; color: var(--magla); margin-left: 4px; }
.paket.najbolje .cijena span { background: linear-gradient(120deg, #FFF3C4, var(--zlato-2) 55%, #E2B13C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paket .ispod { margin-top: 12px; color: var(--magla); font-size: 16px; }
.paket .ispod s { opacity: .7; }
.paket .po-pismu { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 16px; color: #fff; }
.paket .po-pismu span { color: var(--magla); }
.paket .oznaka-vrh { position: absolute; top: -13px; left: 34px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(120deg, var(--zlato-1), var(--zlato-2) 50%, var(--zlato-3)); color: #3A2A06; overflow: hidden; }
.paket .oznaka-vrh::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); transform: skewX(-20deg); animation: sjaj 3.4s ease-in-out infinite; }

.tabela { max-width: 940px; margin: 20px auto 0; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); text-align: left; }
.tabela table { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabela th, .tabela td { padding: 17px 24px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela th { font-size: 14px; font-weight: 700; color: var(--magla); text-align: center; }
.tabela th:first-child { text-align: left; }
.tabela td { color: #DCE3F5; }
.tabela td:not(:first-child) { text-align: center; width: 24%; }
.tabela .k-plus { background: rgba(242,201,76,.07); color: #fff; font-weight: 700; }
.tabela th.k-plus { color: var(--zlato-2); }
.tabela .ne { color: rgba(255,255,255,.3); }
.kv { display: inline-block; width: 14px; height: 8px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); }
.tabela .k-plus .kv { color: var(--zlato-2); }
.tabela td:nth-child(2) .kv { color: var(--magla); }
.vrijedi { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 940px; margin: 30px auto 0; font-size: 18px; color: #fff; }
.vrijedi svg { flex: none; width: 22px; height: 22px; stroke: var(--zlato-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.napomena-cijena { margin-top: 14px; font-size: 14.5px; color: var(--magla); }

/* Pitanja */
.pitanja { max-width: 800px; margin: 48px auto 0; }
.pitanja details { border-top: 1px solid var(--linija); }
.pitanja details:last-child { border-bottom: 1px solid var(--linija); }
.pitanja summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; position: relative; font-weight: 700; font-size: 19px; transition: color .2s; }
.pitanja summary:hover { color: #34407A; }
.pitanja summary::-webkit-details-marker { display: none; }
.pitanja summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--glatko), margin .3s; }
.pitanja details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pitanja details p { padding: 0 0 26px; color: var(--sivo); max-width: 44em; }

.kraj { text-align: center; padding: 140px 0; }
.kraj h2 { margin: 0 auto; font-size: clamp(38px, 5.4vw, 64px); max-width: 13em; }
.kraj .vodi { margin: 22px auto 0; }
.kraj .trgovine { justify-content: center; margin-top: 40px; }
.kraj .vodi a { color: #fff; }

/* Podnožje */
.podnozje { background: #070C1C; color: var(--magla); font-size: 15px; padding: 60px 0 40px; }
.podnozje .okvir { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.podnozje .logo { color: #fff; margin-bottom: 12px; }
.podnozje h4 { color: #fff; font-size: 14px; margin: 0 0 12px; letter-spacing: .04em; }
.podnozje ul { list-style: none; padding: 0; margin: 0; }
.podnozje li { margin-bottom: 8px; }
.podnozje a { text-decoration: none; transition: color .2s; }
.podnozje a:hover { color: #fff; }
.podnozje .dno { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; font-size: 13px; }

/* Pravne stranice */
.dokument { max-width: 760px; margin: 0 auto; padding: 72px 20px 112px; }
.dokument .nazad { font-size: 15px; color: var(--sivo); text-decoration: none; }
.dokument h1 { font-size: clamp(36px, 5vw, 52px); margin: 18px 0 16px; }
.dokument .lead { font-size: 20px; color: var(--sivo); margin-bottom: 12px; }
.dokument .jezik { font-size: 15px; margin-bottom: 40px; color: var(--sivo); }
.dokument section { background: #fff; border-radius: var(--radijus); padding: 28px 30px; margin-bottom: 14px; }
.dokument h2 { font-size: 22px; margin-bottom: 10px; letter-spacing: -0.01em; }
.dokument p { white-space: pre-line; font-size: 17px; }
.dokument ul, .dokument ol { margin: 10px 0 0; padding-left: 22px; font-size: 17px; }
.dokument li { margin-bottom: 8px; }
.dokument .stanje { margin-top: 28px; font-size: 14px; color: var(--sivo); }

/* Pojavljivanje pri skrolanju */
.js .pojavi { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--glatko), transform .9s var(--glatko); transition-delay: var(--d, 0s); }
.js .pojavi.vidljivo { opacity: 1; transform: none; }
.js .ulaz { opacity: 0; transform: translateY(16px); animation: ulaz .9s var(--glatko) forwards; animation-delay: var(--d, 0s); }
@keyframes ulaz { to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .oblak.o1 { right: -20px; }
  .oblak.o2 { left: -24px; }
}
@media (max-width: 900px) {
  .meni a:not(.dugme) { display: none; }
  .uvod { padding-top: 116px; }
  .uvod .okvir { grid-template-columns: 1fr; gap: 0; }
  .uvod .tekst { padding-bottom: 64px; }
  .scena { width: 300px; }
  .oblak.o1 { right: -24px; top: 4%; width: 210px; }
  .oblak.o2 { left: -24px; }
  .bol, .koraci, .mreza, .paketi { grid-template-columns: 1fr; }
  .paketi { gap: 28px; }
  .kutija.siroka { grid-column: auto; }
  .odjeljak { padding: 88px 0; }
  .podnozje .okvir { grid-template-columns: 1fr; }
  .tabela th, .tabela td { padding: 14px 12px; font-size: 15px; }
}
@media (max-width: 480px) {
  body { font-size: 17px; }
  .trgovina { flex: 1 1 100%; }
  .dokument section { padding: 22px 20px; }
  .oblak { font-size: 12px; padding: 10px 12px 10px 10px; }
  .oblak.o1 { right: -8px; width: 196px; }
  .oblak.o2 { left: -8px; }
  .paket { padding: 30px 24px; }
  .tabela th, .tabela td { padding: 13px 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .istakni path { stroke-dashoffset: 0; }
  .mkz.crtaj::before, .js .pojavi .mkz.crtaj::before { transform: rotate(-1.2deg); }
  .js .pojavi, .js .ulaz { opacity: 1; transform: none; transition: none; }
}
.js .pojavi .istakni path { animation: none; }
.js .pojavi.vidljivo .istakni path { animation: potez 1s .45s var(--glatko) forwards; }

/* Šta je u paketu */
.u-paketu { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.u-paketu li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; color: var(--magla); }
.u-paketu li b { color: #fff; }
.u-paketu li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid var(--magla); border-bottom: 2.5px solid var(--magla); transform: rotate(-45deg); }
.paket.najbolje .u-paketu li::before { border-color: var(--zlato-2); }

/* PLUS oznaka usred rečenice: uz riječ, u liniji s tekstom */
.nw-uvijek { white-space: nowrap; }
.zlatno.u-tekstu { margin: 0 2px 0 6px; padding: 1px 7px; font-size: 10.5px; line-height: 1.5; vertical-align: -0.1em; }