:root{
--brand:#123B68; /* Dunkelblau aus Logo */
--accent:#D22630; /* Rot aus Logo */
--ink:#0a1726;
--muted:#5a6b7b;
--bg:#ffffff;
--card:#f7fbff;
--radius:14px;
--shadow:0 6px 20px rgba(18,59,104,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body {
margin: 0;
font-family: Arial, sans-serif;
color: #0d3766; /* tekst u tvojoj plavoj boji */
background: url("assets/background.png") no-repeat center center fixed;
background-size: cover;
position: relative;
}

/* Poluprovidni beli sloj preko slike da izgleda kao magla */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5); /* 0.7 = koliko je maglovito */
backdrop-filter: blur(4px); /* dodatno zamućenje */
z-index: -1; /* da ostane iza teksta */
}

.container{width:100%; max-width:1120px; margin:0 auto; padding:0 18px}

header{position:sticky; top:0; background:#fff; z-index:50; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.nav a{color:var(--ink); text-decoration:none; font-weight:600}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:40px}
.brand span{font-weight:700; letter-spacing:.2px}

.menu{display:flex; gap:18px; align-items:center}
.menu a{opacity:.9}
.menu a:hover{opacity:1}

.btn{
display:inline-block; padding:12px 18px; border-radius:12px; border:2px solid var(--brand);
color:#fff; background:var(--brand); text-decoration:none; font-weight:700; transition:.2s;
}
.btn.outline{background:transparent; color:var(--brand)}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn:focus{outline:3px solid var(--accent); outline-offset:2px}
a:focus{outline:3px solid var(--accent); outline-offset:2px}

.hero{
background:linear-gradient(180deg, #f3f8ff 0%, #ffffff 100%);
padding:56px 0 28px;
}
.hero .grid{display:grid; gap:24px}
.hero h1{font-size:clamp(28px, 4vw, 44px); line-height:1.15; margin:8px 0 12px}
.hero p{font-size:clamp(16px, 2.5vw, 20px); color:var(--muted); margin:0 0 20px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 18px}
.badge{background:#e9f0f8; color:var(--brand); padding:8px 12px; border-radius:999px; font-weight:700; font-size:14px}

.hero .cta{display:flex; gap:12px; flex-wrap:wrap}

.cards{display:grid; gap:16px; grid-template-columns:1fr}
.card{
background:var(--card); border:1px solid #e6eef8; border-radius:var(--radius); padding:18px;
box-shadow:var(--shadow);
}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted)}

.section{padding:40px 0}
.section h2{font-size:clamp(22px, 3.5vw, 32px); margin:0 0 12px}

.grid-2{display:grid; gap:18px; grid-template-columns:1fr}
.grid-3{display:grid; gap:16px; grid-template-columns:1fr}

.step{
background:#fff; border:1px solid #e6eef8; border-radius:var(--radius); padding:16px;
display:flex; align-items:flex-start; gap:10px;
}
.step h4{margin:0 0 6px}

/* --- NEU: Automatische Zählung --- */
.grid-2, .grid-3 {
counter-reset: step;
}
.step::before{
counter-increment: step;
content: counter(step);
width:32px; height:32px;
display:inline-grid; place-items:center;
background:var(--brand); color:#fff;
border-radius:50%; font-weight:800;
flex-shrink:0;
}

.country{display:flex; gap:12px; align-items:center; padding:14px; background:#fff; border:1px solid #e6eef8; border-radius:12px}
.country img{width:28px; height:20px; border-radius:2px; border:1px solid #ddd}

.faq details{background:#fff; border:1px solid #e6eef8; border-radius:12px; padding:12px}
.faq summary{cursor:pointer; font-weight:700}
.faq details+details{margin-top:10px}

form{
background:#fff; border:1px solid #e6eef8; border-radius:16px; padding:16px;
}
label{display:block; font-weight:600; margin:12px 0 6px}
input, select, textarea{width:100%; padding:12px; border:1px solid #cfe0f4; border-radius:10px; font:inherit}
textarea{min-height:120px; resize:vertical}
.form-row{display:grid; gap:12px; grid-template-columns:1fr}
small.help{color:var(--muted)}

.footer{background:#071b36; color:#e9eef6; padding:28px 0; font-size:14px}
.footer a{color:#cfe0ff; text-decoration:none}
.footer .cols{display:grid; gap:16px; grid-template-columns:1fr}

@media(min-width:720px){
.hero .grid{grid-template-columns:1.2fr 1fr}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3, 1fr)}
.form-row{grid-template-columns:1fr 1fr}
.footer .cols{grid-template-columns:2fr 1fr 1fr}
}

.red {
  color: #c52f34;
}
/* Navigacioni linkovi kao dugmad */
.menu a {
border: 1px solid #123B68; /* crvena ivica */
padding: 6px 12px;
margin: 0 4px;
border-radius: 4px;
color: #123B68; /* crveno slovo */
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}

.menu a:hover {
background: #e0001a; /* kad pređeš mišem – crvena pozadina */
color: #fff; /* beli tekst */
}