/* Vodiči — zajednički stil za SEO stranice.
   Vizualno ista obitelj kao landing (index.html): IBM Plex, indigo na graf-papiru.
   Namjerno zaseban .css (ne inline): vodiča ima više i dodaje se novi kopiranjem
   jedne datoteke. Aplikacija (troskovnik*.html) ostaje single-file — ovo je marketing. */

:root{
  --bg:#E8F0FB;
  --indigo:#1E40AF;
  --indigo-2:#2D52C8;
  --indigo-soft:rgba(30,64,175,.12);
  --indigo-line:rgba(30,64,175,.14);
  --indigo-line-strong:rgba(30,64,175,.30);
  --ink:#16245A;
  --ink-dim:#3A4F8C;
  --ink-faint:#7488B8;
  --paper:#F2F6FD;
  --amber:#B45309;
  --grid:34px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.62;
  min-height:100vh;position:relative;overflow-x:hidden;
}
.sheet{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--indigo-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--indigo-line) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  background-position:-1px -1px;
  mask-image:radial-gradient(135% 60% at 50% 0%,#000 55%,transparent 100%);
  -webkit-mask-image:radial-gradient(135% 60% at 50% 0%,#000 55%,transparent 100%);
}
.wrap{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:0 22px}

/* NAV */
nav{
  position:sticky;top:0;z-index:20;
  background:rgba(232,240,251,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--indigo-line-strong);
}
.nav-in{
  max-width:760px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--indigo)}
.wordmark{font-weight:700;letter-spacing:-.015em;font-size:17px;color:var(--ink)}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:14px;
  padding:9px 16px;border-radius:9px;border:1px solid var(--indigo);
  background:var(--indigo);color:#fff;transition:opacity .15s,transform .15s;
}
.btn:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--indigo)}
.btn-ghost:hover{background:var(--indigo-soft);opacity:1}

/* SADRŽAJ */
main{padding:34px 0 20px}
.crumbs{font-size:13px;color:var(--ink-faint);margin-bottom:18px}
.crumbs a{color:var(--ink-dim);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.eyebrow{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--indigo);
  border:1px solid var(--indigo-line-strong);border-radius:5px;
  padding:4px 9px;margin-bottom:14px;
}
h1{font-size:clamp(27px,4.6vw,40px);line-height:1.16;letter-spacing:-.022em;margin-bottom:16px}
.lede{font-size:18px;color:var(--ink-dim);margin-bottom:28px}
h2{
  font-size:23px;letter-spacing:-.015em;margin:38px 0 12px;padding-top:14px;
  border-top:1px solid var(--indigo-line);
}
h3{font-size:17px;margin:24px 0 8px;color:var(--ink)}
p{margin-bottom:14px}
ul,ol{margin:0 0 16px 22px}
li{margin-bottom:7px}
a{color:var(--indigo-2)}
strong{font-weight:600}
code{
  font-family:'IBM Plex Mono',monospace;font-size:.88em;
  background:var(--paper);border:1px solid var(--indigo-line);
  border-radius:4px;padding:1px 5px;
}

/* Okvir s primjerom / naglaskom */
.box{
  background:var(--paper);border:1px solid var(--indigo-line-strong);
  border-radius:11px;padding:18px 20px;margin:20px 0;
}
.box h3{margin-top:0}
.box p:last-child,.box ul:last-child,.box ol:last-child{margin-bottom:0}
.box.tip{border-left:3px solid var(--amber)}

/* Tablica */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin:18px 0;
  display:block;overflow-x:auto;white-space:nowrap}
.tbl th,.tbl td{border:1px solid var(--indigo-line-strong);padding:9px 11px;text-align:left;vertical-align:top}
.tbl th{background:var(--paper);font-weight:600}
@media(min-width:640px){.tbl{display:table;white-space:normal}}

/* CTA */
.cta{
  background:var(--indigo);color:#fff;border-radius:13px;
  padding:26px 24px;margin:38px 0 8px;text-align:center;
}
.cta h2{color:#fff;border:0;margin:0 0 8px;padding:0;font-size:22px}
.cta p{color:rgba(255,255,255,.85);margin-bottom:18px;font-size:15px}
.cta .btn{background:#fff;color:var(--indigo);border-color:#fff;padding:11px 22px;font-size:15px}

/* Popis vodiča (hub) */
.cards{display:grid;gap:14px;margin:26px 0}
.card{
  display:block;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--indigo-line-strong);
  border-radius:11px;padding:18px 20px;transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--indigo);transform:translateY(-1px)}
.card b{display:block;font-size:17px;margin-bottom:5px;color:var(--ink)}
.card span{font-size:14.5px;color:var(--ink-dim)}

/* Dalje čitaj */
.more{margin:34px 0 0;padding-top:16px;border-top:1px solid var(--indigo-line)}
.more h2{border:0;padding:0;margin:0 0 10px;font-size:17px}
.more ul{margin-left:20px}

footer{
  position:relative;z-index:2;margin-top:44px;padding:20px 22px 34px;
  border-top:1px solid var(--indigo-line-strong);
  font-size:13px;color:var(--ink-faint);text-align:center;
}
footer a{color:var(--ink-dim);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .dot{margin:0 7px;opacity:.5}

@media(max-width:560px){
  main{padding-top:24px}
  .lede{font-size:16.5px}
  h2{font-size:20px}
}