/* Podstranice web-mjesta (usluge, uvjeti, privatnost). Iste boje i pismo kao početna stranica. */
:root { --tekst: #30212C; --tekst-2: #4A3E47; --tiho: #6B5F69; --naglasak: #61255C; --naglasak-tamni: #4A1C46; --rub: #E9E4E8; --pozadina-2: #F7F5F7; --svijetli: #F3E9F1; }
/* Opća pravila samo za podstranice; početna stranica uzima samo podnožje. */
.podstranica, .podstranica * { box-sizing: border-box; }
body.podstranica { margin: 0; background: #FFFFFF; font-family: 'Hanken Grotesk', system-ui, sans-serif; color: var(--tekst); font-size: 17px; line-height: 1.6; }
:where(.podstranica) a { color: var(--naglasak); }
:where(.podstranica) a:hover { color: var(--naglasak-tamni); }
.podstranica :focus-visible { outline: 3px solid var(--naglasak); outline-offset: 2px; }
.okvir { max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.podstranica h1, .podstranica h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }

/* Zaglavlje */
.zaglavlje { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-top: 18px; padding-bottom: 18px; }
.zaglavlje img { display: block; height: 26px; width: auto; }
.zaglavlje nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 16px; font-weight: 500; }
.zaglavlje nav a { color: var(--tekst-2); text-decoration: none; padding: 10px 0; }
.zaglavlje nav a[aria-current='page'] { color: var(--naglasak); box-shadow: inset 0 -2px 0 var(--naglasak); }
.zaglavlje nav a.gumb { color: #FFFFFF; padding: 0 18px; }
@media (max-width: 760px) { .zaglavlje nav a.usluga { display: none; } }

/* Gumbi */
.gumb { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--tekst); color: #FFFFFF; font-weight: 600; text-decoration: none; }
.gumb:hover { color: #FFFFFF; background: #1F151D; }
.gumb.glavni { background: var(--naglasak); min-height: 52px; padding: 0 24px; }
.gumb.glavni:hover { background: var(--naglasak-tamni); }
.gumb.sporedni { background: #FFFFFF; color: var(--tekst); border: 1px solid #D0C8CE; }
.gumb.sporedni:hover { border-color: var(--tekst); color: var(--tekst); }
.gumbi { display: flex; flex-wrap: wrap; gap: 12px; }

/* Uvod */
.uvod { background: linear-gradient(180deg, #FFFFFF 0%, var(--pozadina-2) 100%); border-bottom: 1px solid var(--rub); }
.uvod .okvir { padding-top: 56px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 28px 64px; align-items: flex-end; }
.uvod h1 { flex: 1 1 560px; margin: 0; font-size: clamp(40px, 5.2vw, 70px); line-height: 1.03; }
.uvod .desno { flex: 1 1 400px; display: flex; flex-direction: column; gap: 22px; }
.uvod p { margin: 0; font-size: 19px; color: var(--tekst-2); max-width: 32em; }
.nadnaslov { display: block; width: 100%; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--naglasak); margin-bottom: -12px; }

/* Odjeljci */
.odjeljak .okvir { padding-top: 88px; padding-bottom: 88px; }
.odjeljak.siv { background: var(--pozadina-2); border-top: 1px solid var(--rub); border-bottom: 1px solid var(--rub); }
.odjeljak.tamni { background: var(--tekst); color: #FFFFFF; }
.odjeljak.tamni p, .odjeljak.tamni li { color: #E6DDE3; }
.odjeljak h2 { margin: 0 0 14px; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; }
.odjeljak .glava { max-width: 46em; margin-bottom: 40px; }
.odjeljak .glava p { margin: 0; font-size: 18px; color: var(--tekst-2); }
.odjeljak.tamni .glava p { color: #E6DDE3; }

.kartice { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.kartica { background: #FFFFFF; border: 1px solid #E4DEE2; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.kartica h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.kartica p { margin: 0; color: var(--tekst-2); font-size: 16px; }
.kartica .primjer { margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--svijetli); color: var(--naglasak-tamni); font-size: 14.5px; }
.kartica svg { color: var(--naglasak); }
a.kartica { text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
a.kartica:hover { border-color: var(--naglasak); box-shadow: 0 10px 30px -18px rgba(48, 33, 44, 0.45); }
a.kartica .vise { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--naglasak); }

.koraci { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: korak; }
.koraci li { counter-increment: korak; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4DEE2; }
.koraci li::before { content: counter(korak); width: 32px; height: 32px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--naglasak); color: #FFFFFF; font-weight: 700; font-size: 15px; }
.koraci strong { font-size: 17px; }
.koraci span { color: var(--tekst-2); font-size: 15.5px; }

.dvije { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: start; }
.popis { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

.pitanja { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.pitanja details { background: #FFFFFF; border: 1px solid #E4DEE2; border-radius: 14px; padding: 16px 20px; }
.pitanja summary { cursor: pointer; font-weight: 600; font-size: 17.5px; }
.pitanja details p { margin: 10px 0 0; color: var(--tekst-2); }

.poziv { padding: 56px clamp(24px, 5vw, 72px); border-radius: 28px; background: var(--naglasak); color: #FFFFFF; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.poziv h2 { margin: 0 0 10px; color: #FFFFFF; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; }
.poziv p { margin: 0; color: #F0E2ED; font-size: 18px; }
.poziv .gumb { background: #FFFFFF; color: var(--naglasak-tamni); }
.poziv .gumb:hover { background: #F3E9F1; color: var(--naglasak-tamni); }
.poziv .gumb.sporedni { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }

/* Pravni tekstovi */
.pravno .okvir { max-width: 860px; padding-top: 48px; padding-bottom: 88px; }
.pravno h1 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.05; margin: 0 0 8px; }
.pravno h2 { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: 0; font-size: 20px; margin: 36px 0 8px; }
.pravno p, .pravno li { color: var(--tekst-2); }
.pravno .datum { color: var(--tiho); margin: 0 0 24px; }
.pravno table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.pravno th, .pravno td { text-align: left; vertical-align: top; border-top: 1px solid var(--rub); padding: 10px 12px 10px 0; }
.pravno th { color: var(--tekst); }

/* Podnožje */
.podnozje { border-top: 1px solid var(--rub); font-family: 'Hanken Grotesk', system-ui, sans-serif; line-height: 1.6; }
.podnozje .okvir { padding-top: 36px; padding-bottom: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; font-size: 15px; color: var(--tiho); }
.podnozje strong { display: block; color: var(--tekst); margin-bottom: 6px; }
.podnozje a { color: var(--tiho); text-decoration: none; display: block; padding: 2px 0; }
.podnozje a:hover { color: var(--naglasak); text-decoration: underline; }