/* Blog — dijeli estetiku glavne stranice */
:root{
  --bg:#0a0c10;--bg2:#0e1117;--panel:#141a23;--line:#232b37;
  --ink:#eef3f8;--muted:#9fadbc;--amber:#f7a81b;--amber2:#ffc247;
  --disp:'Archivo',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.75}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber2)}
img{max-width:100%;display:block;border-radius:14px}
h1,h2,h3{font-family:var(--disp);line-height:1.12;letter-spacing:-.02em}
.wrap{max-width:780px;margin:0 auto;padding:0 22px}
header.blog{position:sticky;top:0;background:rgba(9,11,15,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:50}
header.blog .bar{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 22px}
header.blog img{height:38px;border-radius:0}
header.blog a.back{color:#dfe7ef;font-weight:600;font-size:15px}
header.blog a.back:hover{color:var(--amber)}
.hero-b{padding:70px 0 34px}
.hero-b .kicker{color:var(--amber);font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-family:var(--disp)}
.hero-b h1{font-size:clamp(32px,5vw,52px);font-weight:900;margin:14px 0 16px}
.hero-b .meta{color:var(--muted);font-size:15px}
article{padding:14px 0 60px}
article p{color:#cdd7e1;font-size:17.5px;margin:0 0 20px}
article h2{font-size:clamp(23px,3vw,30px);margin:44px 0 14px;color:#fff}
article h3{font-size:20px;margin:30px 0 10px;color:#fff}
article ul,article ol{margin:0 0 20px 22px;color:#cdd7e1;font-size:17.5px}
article li{margin-bottom:8px}
article b,article strong{color:#fff}
article img{margin:26px 0}
article .fig{color:var(--muted);font-size:14px;margin-top:-16px;margin-bottom:26px}
.box{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:12px;padding:20px 22px;margin:26px 0}
.box p{margin:0;font-size:16.5px}
.cta-a{background:linear-gradient(120deg,#151a23,#0b0d12);border:1px solid var(--line);border-radius:18px;padding:34px 30px;text-align:center;margin:48px 0 0}
.cta-a h2{margin:0 0 10px;font-size:26px}
.cta-a p{color:var(--muted);margin-bottom:20px}
.btn{display:inline-block;background:var(--amber);color:#1a1204;font-weight:700;padding:14px 28px;border-radius:12px;font-size:16px}
.btn:hover{background:var(--amber2);color:#1a1204}
footer.blog{border-top:1px solid var(--line);padding:26px 0 40px;color:#7f8b97;font-size:14px}
footer.blog .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* index bloga */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:10px 0 70px;max-width:1100px;margin:0 auto;padding-left:22px;padding-right:22px}
.post{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:290px;display:flex;align-items:flex-end;background:var(--panel);transition:.3s}
.post:hover{border-color:rgba(247,168,27,.55);box-shadow:0 0 0 1px rgba(247,168,27,.3),0 14px 44px rgba(247,168,27,.12)}
.post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;filter:brightness(.8)}
.post .ov{position:relative;z-index:2;padding:24px;width:100%;background:linear-gradient(0deg,rgba(6,8,11,.95) 25%,transparent)}
.post .tag{color:var(--amber);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.post h2{font-size:22px;margin:6px 0 8px;color:#fff}
.post p{color:#c6d1dc;font-size:15px;margin:0}
@media(max-width:760px){.posts{grid-template-columns:1fr}}