/* stil.css: Travianov lobby kao jezik elemenata, izmjereno na travian.com 11.10.2026. (computed styles):
   - pergament panel: #FEF0CE, rubni gradijenti, border 1px #333, radius 9, inset sjena; metalni okvir 7 px (::before na -8 px:
     #6C7175 1px, #4F5257 3px, #4D4648 3px) i kutni ukrasi na -14 px (vlastiti SVG crtež, img/kut-*.svg)
   - uokvireni gumb (buttonFramed): zlatni gradijent + 1px #34220D, unutra zeleni bevel #5D8137->#466428 sa sjenama
   - PLAY NOW: radius 15, svijetlozeleni rub #98F98A, unutra #60C751 -> rgba(11,42,9,.9), kosi odsjaj, Red Rose verzal u kremi
   - tamna kartica (newsPreview): gradijent rgba(49,44,44,.85)->rgba(26,30,31,.85), border 2px #CBA467, naslov Noto Sans 16/700 zlato
   - sekundarni gumb (gold decorative): rgba(30,32,34,.45), 1px #CBA467, dvostruki okvir 1px #7C694B na -5 px, tekst krem #E6DBC9
   - pill (gold buttonSecondary): 1px #CBA467, radius 19, zlatni tekst 13px; gornja traka 80 px gradijent #4D4D4D->#292929 (.9)
   - fontovi: Red Rose 700 (veliki naslovi), Noto Serif 700 small-caps ls 1.8px (naslovi panela), Noto Sans 13px (tijelo)
   Raspored, sadržaj i potpis (birač brzine koji prepiše sve cijene) su naši. Fontovi lokalno, OFL (fonts/*-OFL.txt). */

@font-face { font-family: "Red Rose"; src: url("../fonts/red-rose-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Red Rose"; src: url("../fonts/red-rose-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("../fonts/noto-serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("../fonts/noto-serif-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --podloga: #2C292C;
  --podloga-2: #1F1D20;
  --podloga-3: #17151A;
  --tekst: #E6DBC9;
  --tekst-2: #B3A894;
  --zlato: #CBA467;
  --zlato-svijetlo: #F3E2AE;
  --zlato-okvir: #7C694B;
  --zeleno: #5A9A0A;
  --pergament: #FEF0CE;
  --smedje: #5E463A;
  --smedje-2: #8A6F5E;
  --crta-pergament: rgba(94, 70, 58, 0.25);
  --display: "Red Rose", "Trebuchet MS", sans-serif;
  --serif: "Noto Serif", Georgia, serif;
  --sans: "Noto Sans", Arial, sans-serif;
  --okvir-zlato: linear-gradient(#CBA467 5%, #F3E2AE 13%, #EFBF7B 32%, #AA8050 48%, #835E35 72%, #AD8A54 93%, #D7B672);
  --brzo: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--podloga); color: var(--tekst); font: 400 14px/1.6 var(--sans); overflow-x: clip; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input { font: inherit; }
section[id] { scroll-margin-top: 90px; }
.omot { width: min(100% - 2 * clamp(16px, 4vw, 40px), 1200px); margin-inline: auto; }
.omot-uzak { max-width: 860px; }
.vizualno-skriveno { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- gumbi ---------- */
/* sekundarni s dvostrukim okvirom (gold decorative buttonSecondary) */
.gumb-okvir {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 1px 18px; margin: 5px;
  border: 1px solid var(--zlato); background: rgba(30, 32, 34, 0.45); color: var(--tekst);
  font: 400 14px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--brzo);
}
.gumb-okvir::before { content: ""; position: absolute; inset: -5px; border: 1px solid var(--zlato-okvir); pointer-events: none; }
.gumb-okvir:hover { background: rgba(203, 164, 103, 0.18); }
/* kontakt gumbi: isti dvostruki okvir, s logotipom (Telegram, Discord, X) */
.gumb-kontakt { min-height: 38px; padding: 1px 18px 1px 14px; gap: 9px; font-weight: 700; color: var(--zlato); }
.gumb-kontakt svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.gumb-kontakt[aria-disabled="true"] { cursor: default; }
.kontakti { display: flex; flex-wrap: wrap; gap: 14px 22px; }

/* uokvireni (buttonFramed): zlatni metalni okvir, unutra bevel; zelena = aktivno, smeđa = neutralno */
.gumb-uokviren, .cip {
  position: relative; display: inline-grid; place-items: center; min-height: 37px; padding: 5px;
  border: 1px solid #34220D; background: var(--okvir-zlato); color: #fff;
  font: 700 13px/1 var(--sans); text-decoration: none; cursor: pointer; user-select: none; white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.gumb-uokviren::before, .cip::before {
  content: ""; position: absolute; inset: 2px; border: 1px solid #34353C;
  background: linear-gradient(#5D8137, #466428);
  box-shadow: inset 0 -4px 0 -2px #344A1D, inset 0 4px 0 -2px #B9D890, inset 0 0 0 2px #679F1B;
}
.gumb-uokviren > span, .cip > b { position: relative; padding: 0 12px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.gumb-uokviren:hover::before { filter: brightness(1.08); }
.cip { min-width: 56px; min-height: 40px; }
@media (max-width: 599px) { .cip { min-width: 46px; } .cip > b { padding: 0 8px; } .karta { padding-inline: 18px; } }
.cip::before { background: linear-gradient(#C9AC78, #9A7B4E); border-color: #5E463A; box-shadow: inset 0 -4px 0 -2px #6B532F, inset 0 4px 0 -2px #F3E2AE, inset 0 0 0 2px #B9975E; }
.cip > b { color: #2A1E10; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); font: 700 15px/1 var(--serif); }
.brzine input:checked + .cip::before { background: linear-gradient(#5D8137, #466428); border-color: #34353C; box-shadow: inset 0 -4px 0 -2px #344A1D, inset 0 4px 0 -2px #B9D890, inset 0 0 0 2px #679F1B; }
.brzine input:checked + .cip > b { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.brzine input:focus-visible + .cip { outline: 2px solid var(--smedje); outline-offset: 2px; }

.gumb-uokviren[aria-disabled="true"] { cursor: not-allowed; }

.veza-zelena { display: inline-block; padding: 6px 0; color: var(--zeleno); font-weight: 700; text-decoration: none; }
.veza-zelena:hover { text-decoration: underline; }

/* ---------- paneli ---------- */
.pergament {
  position: relative; color: var(--smedje); border: 1px solid #333; border-radius: 9px; padding: 22px 24px; margin: 14px;
  /* jedan gradijent bez tvrdih prijelaza: tamniji rub gore i dolje, mekano u svijetlu sredinu, skalira se s visinom */
  background: linear-gradient(180deg, #C8A36C 0, #E6CD9A 18px, #F7E8C4 20%, var(--pergament) 40%, var(--pergament) 60%, #F7E8C4 80%, #E6CD9A calc(100% - 18px), #C8A46C 100%);
  /* metalni okvir 7 px kao box-shadow (iznutra prema van: #4D4648 3px, #4F5257 3px, #6C7175 1px), uvijek vidljiv */
  box-shadow: inset 4px 4px 9px rgba(30, 22, 17, 0.5), 0 0 0 3px #4D4648, 0 0 0 6px #4F5257, 0 0 0 7px #6C7175, 0 14px 30px rgba(0, 0, 0, 0.5);
  font-size: 13px; line-height: 1.5;
}
.pergament::after {
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  background: url("../img/kut-tl.svg") 0 0 / 36px 36px no-repeat, url("../img/kut-tr.svg") 100% 0 / 36px 36px no-repeat,
    url("../img/kut-bl.svg") 0 100% / 36px 36px no-repeat, url("../img/kut-br.svg") 100% 100% / 36px 36px no-repeat;
}
.pergament-naslov { font: 700 18px/1.3 var(--serif); font-variant: small-caps; letter-spacing: 1.8px; color: var(--smedje); }

.okvir-tamni {
  position: relative; padding: 16px 18px; border: 2px solid var(--zlato);
  background: linear-gradient(rgba(49, 44, 44, 0.85), rgba(26, 30, 31, 0.85));
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); font-size: 13px; line-height: 1.55;
}
.okvir-naslov { position: relative; padding: 0 0 8px; margin-bottom: 10px; border-bottom: 1px solid var(--zlato); font: 700 16px/1.3 var(--sans); color: var(--zlato); }
.okvir-naslov::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; background: var(--zlato); transform: translateX(-50%) rotate(45deg); }

/* ---------- gornja traka ---------- */
.vrh { position: sticky; top: 0; z-index: 20; background: linear-gradient(rgba(77, 77, 77, 0.9), rgba(41, 41, 41, 0.9)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); }
.vrh-red { display: flex; align-items: center; gap: 24px; min-height: 64px; }
@media (min-width: 900px) { .vrh-red { min-height: 80px; } }
.marka { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; }
.marka-logo { height: 40px; width: auto; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.marka-tekst { display: inline-flex; flex-direction: column; align-items: flex-start; }
.marka-1 { font: 700 26px/1 var(--display); text-transform: uppercase; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.marka-2 { font: 700 10px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.42em; color: var(--zlato); margin-top: 4px; }
.vrh-nav { display: none; gap: 26px; margin-left: auto; }
.vrh-nav a { color: var(--zlato); font: 700 13px/1 var(--sans); text-decoration: none; padding: 10px 0; transition: color var(--brzo); }
.vrh-nav a:hover { color: var(--zlato-svijetlo); }
.vrh-kontakti { display: flex; gap: 14px; margin-left: auto; margin-right: 5px; }
@media (min-width: 900px) { .vrh-nav { display: flex; } .vrh-kontakti { margin-left: 0; } }
/* ispod 600 px u zaglavlju samo logotipi (tekst ostaje čitačima) */
@media (max-width: 599px) {
  .vrh .gumb-kontakt { padding: 1px 10px; min-width: 40px; }
  .vrh .gumb-kontakt span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- heroj ---------- */
.heroj { position: relative; overflow: clip; padding: 56px 0 56px; isolation: isolate; }
@media (min-width: 900px) { .heroj { padding: 96px 0 64px; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; gap: 64px; } }
.heroj-slika { position: absolute; inset: 0; z-index: -1; background: var(--podloga-3); }
.heroj-slika::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 18% 95%, rgba(176, 44, 18, 0.62), rgba(176, 44, 18, 0) 70%),
    radial-gradient(ellipse 50% 45% at 85% 15%, rgba(78, 104, 128, 0.55), rgba(78, 104, 128, 0) 70%),
    radial-gradient(ellipse 70% 40% at 60% 100%, rgba(255, 122, 26, 0.18), rgba(255, 122, 26, 0) 70%),
    linear-gradient(#1b191d 0%, #26232a 55%, #1a1719 100%);
}
.heroj-slika::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%); }
.heroj-slika::before, .heroj-slika::after { z-index: 1; }
/* vlasnikova ilustracija (CONFIG.heroImage): ispod gradijenata, zumira se na skrol (transform iz app.js) */
.heroj-slika img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform-origin: 50% 45%; will-change: transform; }
.heroj-slika img + .skyline { display: none; }
.heroj-slika.ima-sliku::before {
  background:
    linear-gradient(90deg, rgba(23, 21, 26, 0.88) 0%, rgba(23, 21, 26, 0.55) 40%, rgba(23, 21, 26, 0.1) 75%),
    linear-gradient(rgba(23, 21, 26, 0.35) 0%, rgba(23, 21, 26, 0) 35%, rgba(23, 21, 26, 0.85) 100%);
}
.heroj-slika.ima-sliku::after { background: none; }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; min-height: 220px; }
.baklje circle { animation: treperi 3.2s ease-in-out infinite; transform-origin: center; }
.baklje circle:nth-child(2) { animation-delay: -1.1s; }
.baklje circle:nth-child(3) { animation-delay: -2.3s; }
.baklje circle:nth-child(4) { animation-delay: -0.6s; }
@keyframes treperi { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

.heroj-red { position: relative; display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .heroj-red { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.heroj h1 { font: 700 clamp(60px, 7.6vw, 104px)/0.92 var(--display); text-transform: uppercase; letter-spacing: 0.01em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(0, 0, 0, 0.8); }
@media (max-width: 599px) { .heroj h1 { font-size: clamp(46px, 15vw, 64px); } }
.heroj-uvod { margin-top: 22px; max-width: 520px; font-size: 16px; line-height: 1.55; color: var(--tekst); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }

/* pergament s biračem brzine (potpis) */
.karta { padding: 22px 24px 20px; }
.karta .pergament-naslov { text-align: center; margin-bottom: 16px; }
.brzine { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border: 0; padding: 0; margin: 0; }
.brzine label { position: relative; }
.brzine input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.karta-stavke { margin-top: 16px; border-top: 1px solid var(--crta-pergament); }
.karta-stavke > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--crta-pergament); }
.karta-stavke dt { font-size: 13px; color: var(--smedje); }
.karta .cijena { font-size: 16px; }
.karta-radnja { margin-top: 16px; text-align: center; }

/* cijena po brzini: sve brzine su u HTML-u, html[data-brzina] ostavlja vidljivu jednu; bez JS-a sve jedna ispod druge */
.cijena { font: 700 22px/1.15 var(--serif); color: var(--smedje); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jedinica { display: block; font: 400 13px/1.4 var(--sans); color: var(--smedje-2); margin-top: 2px; }
html[data-brzina] [data-cijena] > [data-brzina] { display: none; }
html[data-brzina="x1"] [data-cijena] > [data-brzina="x1"],
html[data-brzina="x2"] [data-cijena] > [data-brzina="x2"],
html[data-brzina="x3"] [data-cijena] > [data-brzina="x3"],
html[data-brzina="x5"] [data-cijena] > [data-brzina="x5"],
html[data-brzina="x10"] [data-cijena] > [data-brzina="x10"] { display: inline; }
html:not([data-brzina]) .cijena[data-cijena] { font-size: 14px; font-weight: 400; white-space: normal; }
html:not([data-brzina]) [data-cijena] > [data-brzina] { display: block; }
html:not([data-brzina]) [data-cijena] > [data-brzina]::before { content: attr(data-brzina) " "; color: var(--smedje-2); }

/* traka ispod heroja: kartica | gumb | kartica (kao u lobbyju) */
.traka { position: relative; display: grid; gap: 22px; margin-top: 44px; }
@media (min-width: 900px) { .traka { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 36px; margin-top: 0; } }
.traka-kartica p, .traka-kartica li { color: var(--tekst); }
.traka-kartica .gumb-okvir { margin-top: 14px; }
.traka-popis { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.traka-popis li { display: flex; flex-direction: column; gap: 2px; }
.traka-popis b { color: var(--zlato); font-weight: 700; }
@media (min-width: 1100px) { .traka-popis li { flex-direction: row; justify-content: space-between; gap: 12px; } .traka-popis b { text-align: right; } }

/* ---------- sekcije ---------- */
.sekcija { padding: 72px 0; }
.sekcija-tamna { background: var(--podloga-2); box-shadow: inset 0 1px 0 rgba(203, 164, 103, 0.18), inset 0 -1px 0 rgba(203, 164, 103, 0.18); }
/* sekcija s ilustracijom u pozadini (CONFIG.sectionImage): slika preko cijele širine, tamni prekrivač za čitljivost */
.sekcija-tamna.ima-sliku { position: relative; isolation: isolate; }
.sekcija-tamna.ima-sliku::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sekcija-slika) center 40% / cover no-repeat;
}
.sekcija-tamna.ima-sliku::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(23, 21, 26, 0.9), rgba(23, 21, 26, 0.62) 30%, rgba(23, 21, 26, 0.62) 70%, rgba(23, 21, 26, 0.9));
}
.oznaka { display: flex; align-items: center; gap: 14px; font: 700 13px/1 var(--serif); font-variant: small-caps; letter-spacing: 0.2em; color: var(--zlato); margin-bottom: 14px; }
.oznaka span { font: 700 14px/1 var(--serif); padding: 4px 9px; border: 1px solid rgba(203, 164, 103, 0.7); letter-spacing: 0.1em; }
.oznaka::after { content: ""; flex: 1; height: 1px; max-width: 220px; background: linear-gradient(90deg, var(--zlato), rgba(203, 164, 103, 0)); }
.naslov-sekcije { font: 700 clamp(36px, 5vw, 56px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.uvod-sekcije { margin-top: 14px; max-width: 640px; font-size: 15px; color: var(--tekst-2); }
.brzina-chip {
  display: inline-block; vertical-align: 0.06em; padding: 0 0.3em; border: 2px solid var(--zlato); border-radius: 4px;
  color: var(--zlato-svijetlo); font: 700 0.8em/1.2 var(--serif); text-transform: none; letter-spacing: 0; transform: rotate(-3deg);
}
@keyframes pecat-udar { from { transform: rotate(-3deg) scale(1.2); opacity: 0.4; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
.pecat-udar { animation: pecat-udar 320ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* kartice usluga: svaka kartica je pet redova (naslov, opis, cijena, ponuda, gumb); od 760 px subgrid drži
   iste redove u istoj visini kod obje kartice u redu, pa su cijene, ponude i gumbi poravnati */
.kartice { display: grid; gap: 14px; margin-top: 36px; }
.usluga { display: grid; grid-template-rows: auto 1fr auto auto auto; row-gap: 12px; align-items: start; padding: 20px 24px 22px; }
@media (min-width: 760px) {
  .kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .usluga { grid-row: span 5; grid-template-rows: subgrid; }
}
.usluga .pergament-naslov { position: relative; padding-bottom: 8px; border-bottom: 1px solid rgba(94, 70, 58, 0.45); }
.usluga .pergament-naslov::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; background: var(--smedje); transform: translateX(-50%) rotate(45deg); }
.usluga-opis { color: var(--smedje); }
/* opis sa slikom u okviru (cropper): slika 1:1 desno, zlatni okvir s tamnim rubom */
.usluga-opis-red { display: flex; gap: 16px; align-items: flex-start; }
.usluga-opis-red .usluga-opis { flex: 1; min-width: 0; }
.usluga-slika { flex: none; order: -1; width: 128px; margin: 0; padding: 3px; border: 1px solid #34220D; background: var(--okvir-zlato); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.usluga-slika img { width: 100%; height: auto; border: 1px solid #34220D; }
@media (max-width: 599px) { .usluga-slika { width: 104px; } }
.usluga-cijena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 10px; border-top: 1px solid var(--crta-pergament); }
.usluga-cijena .cijena { font-size: 30px; }
.usluga-cijena .jedinica { display: inline; margin: 0; }
/* ponuda (varijanta C, vlasnikov izbor): zeleni tekst sa zlatnim dijamantom, bez kutije, kao linkovi u lobbyju */
.ponuda { display: inline-flex; align-items: center; gap: 8px; justify-self: start; color: #4A8206; font: 700 13px/1.3 var(--sans); }
.ponuda::before { content: ""; width: 7px; height: 7px; background: var(--zlato); transform: rotate(45deg); flex: none; }
.detalji { align-self: start; }
.detalji > summary { list-style: none; width: max-content; max-width: 100%; }
.detalji > summary::-webkit-details-marker { display: none; }
.detalji[open] > summary { margin-bottom: 12px; }
.tablica { overflow-x: auto; border: 1px solid var(--crta-pergament); background: rgba(255, 255, 255, 0.35); }
table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--smedje); }
th, td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--crta-pergament); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font: 700 12px/1.3 var(--serif); font-variant: small-caps; letter-spacing: 0.08em; color: var(--smedje-2); }
tbody th { font: 700 13px/1.4 var(--serif); white-space: nowrap; }
.broj { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-brzina="x1"] tr[data-brzina="x1"] > *,
html[data-brzina="x2"] tr[data-brzina="x2"] > *,
html[data-brzina="x3"] tr[data-brzina="x3"] > *,
html[data-brzina="x5"] tr[data-brzina="x5"] > *,
html[data-brzina="x10"] tr[data-brzina="x10"] > * { background: rgba(90, 154, 10, 0.16); }
.napomena { margin-top: 28px; max-width: 720px; font-size: 13px; color: var(--tekst-2); }

/* koraci */
.koraci { display: grid; gap: 18px; margin-top: 36px; }
@media (min-width: 760px) { .koraci { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.korak { padding: 20px 22px 22px; }
.korak p:last-child { color: var(--tekst); }
.korak-broj { font: 700 40px/1 var(--serif); color: var(--zlato); margin-bottom: 10px; text-shadow: 0 0 18px rgba(203, 164, 103, 0.35); }

/* pitanja */
.pitanja { padding: 8px 26px; margin-top: 32px; }
.pitanje { border-bottom: 1px solid var(--crta-pergament); }
.pitanje:last-child { border-bottom: 0; }
.pitanje > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; font: 700 16px/1.3 var(--serif); color: var(--smedje); }
.pitanje > summary::-webkit-details-marker { display: none; }
.pitanje > summary::after { content: "+"; font: 700 20px/1 var(--serif); color: var(--zeleno); }
.pitanje[open] > summary::after { content: "\2013"; }
.pitanje > p { padding: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--smedje); max-width: 680px; }

/* o nama */
.o-nama { display: grid; gap: 28px; margin-top: 24px; padding: 30px 32px; }
@media (min-width: 900px) { .o-nama { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: start; } }
.o-tekst p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--tekst); max-width: 520px; }
.brojke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
@media (min-width: 560px) { .brojke { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.brojke dt { font-size: 13px; color: var(--tekst-2); }
.brojke dd { margin-top: 4px; font: 700 30px/1.1 var(--serif); color: var(--zlato); font-variant-numeric: tabular-nums; }

/* podnožje */
.dno { padding: 40px 0 48px; border-top: 1px solid rgba(203, 164, 103, 0.3); background: var(--podloga-3); }
.dno-red { display: grid; gap: 18px; }
@media (min-width: 900px) { .dno-red { grid-template-columns: auto minmax(0, 1fr); column-gap: 48px; align-items: start; } .dno-tekst { grid-column: 1 / -1; } }
.dno-kontakti { align-items: center; }
.dno-tekst { font-size: 13px; line-height: 1.6; color: var(--tekst-2); max-width: 860px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}