:root{
    --navy:#0a1226;          /* teget */
    --navy-2:#0f1f3f;
    --neon:#00d0ff;          /* neon tamnoplava */
    --ink:#dfe8ff;
    --muted:#9fb3ff;
    --card:#101b36cc;
    --glass:rgba(10,18,38,.65);
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
  
  /* Reset & base */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--ink);
    animation: bgSmooth 20s ease-in-out infinite;
  }
  
  /* glatka izmjena između boja */
  @keyframes bgSmooth {
    0%   { background-color: #050a18; }
    25%  { background-color: #0a1226; }
    50%  { background-color: #101b35; }
    75%  { background-color: #112246; }
    100% { background-color: #050a18; }
  }
  img{max-width:100%; display:block}
  
  /* Layout helpers */
  .container{max-width:1120px; margin:0 auto; padding:60px 20px}
  .section-title{font-size:clamp(24px,4vw,38px); margin:0 0 18px}
  
  /* Header / Nav */
  .site-header{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; gap:12px;
    padding:10px 18px; backdrop-filter: blur(10px);
    background:linear-gradient(180deg, rgba(10,18,38,.8), rgba(10,18,38,.45));
    border-bottom:1px solid rgba(0,208,255,.12);
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.3px}
  .logo{width:70px; height:70px}
  .nav{margin-left:auto; display:flex; align-items:center}
  .nav ul{display:flex; list-style:none; padding:0; margin:0; gap:10px}
  .nav a{color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:12px}
  .nav a:hover,.nav a.active{color:var(--ink); background:rgba(255,255,255,.05)}
  .nav-toggle{display:none; background:none; border:0; padding:8px; margin-left:auto}
  .nav-toggle .bar{display:block; width:26px; height:2px; background:var(--ink); margin:5px 0}
  
  /* Cards & buttons */
  .card{
    background:var(--card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .card img {
    width: 67%;
    height: 67px;
    object-fit: cover;
}
  .card h3{margin:14px 16px 6px}
  .card p{margin:0 16px 18px; color:var(--muted)}
  .btn{display:inline-block; text-decoration:none; padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.12)}
  .btn.primary{background:linear-gradient(90deg,var(--neon),#73d7ff); color:#00111a; font-weight:700}
  .btn.ghost{background:transparent; color:var(--ink)}
  .btn.large{padding:14px 22px; font-size:1.05rem}
  
/* ===== FOOTER (navy + neon) ===== */
.site-footer {
  background-color: #0d1b2a;
  color: #fff;
  font-family: Poppins, Arial, sans-serif;
  padding: 28px 0 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-container {
  display: grid;
  grid-template-columns: 180px 1fr 420px; /* logo | center | map */
  gap: 28px;
  align-items: start;
  max-width: 1450px !important;
  margin: 0 auto;
  padding: 0 20px;
}

/* Logo lijevo */
.footer-logo {
  justify-self: start;
}
.footer-logo img {
  width: 150px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(0,208,255,.4));
}

/* CENTER: Contact + FAQ side-by-side */
.footer-center {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Contact | FAQ */
  gap: 24px;
  align-items: start;
  min-width: 260px;
}

/* Contact (lijevi stupac) */
.footer-contact h3 {
  color: #00d0ff; /* neon title */
  margin: 0 0 10px;
}
.footer-contact p {
  margin: 4px 0;
}
.footer-contact strong {
  color: #00d0ff; /* neon accent */
}

.social-links {
  margin-top: 10px;
}
.social-links a {
  color: #fff;
  margin-right: 10px;
  font-size: 18px;
  text-decoration: none;
  transition: color .25s;
}
.social-links a:hover {
  color: #00d0ff;
}

/* FAQ (desni stupac) */
.footer-faqlist h3 {
  color: #00d0ff; /* neon title */
  margin: 0 0 10px;
}
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  color: #9fb3ff;
  padding: 10px 0;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.faq-question::before {
  content: "＋";
  color: #00d0ff; /* neon plus */
  font-weight: 800;
  line-height: 1;
}
.faq-question.active::before {
  content: "－";
}
.faq-answer {
  display: none;
  padding: 0 0 12px 0;
  color: #c9d6ff;
  font-size: .95rem;
}
.faq-question.active + .faq-answer {
  display: block;
}

/* Map desno */
.footer-map {
  width: 100%;
  max-width: 420px;
  justify-self: end;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.footer-map iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
}

/* Bottom strip */
.footer-bottom {
  text-align: center;
  padding: 10px 20px 0;
  margin-top: 16px;
  color: #9fb3ff;
  font-size: .9rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-bottom a {
  color: #00d0ff;
  text-decoration: none;
}
.footer-bottom a:hover {
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .footer-container {
    grid-template-columns: 150px 1fr 320px;
    gap: 20px;
  }
  .footer-map iframe {
    height: 160px;
  }
}

@media (max-width: 820px) {
  .footer-container {
    grid-template-columns: 1fr; /* stack na mobitelu */
    gap: 16px;
  }
  .footer-center {
    grid-template-columns: 1fr; /* Contact i FAQ ispod jedan drugog na malim ekranima */
    gap: 14px;
  }
  .footer-map {
    max-width: none;
    justify-self: stretch;
  }
}

  
  
  
  /* MEDIA QUERIES (uvijek na dnu) */
  @media (max-width: 900px){
    .nav-toggle{display:block}
    .nav{position:fixed; inset:64px 12px auto 12px; display:none; flex-direction:column; gap:12px; background: rgb(11 19 40 / 94%); padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:16px}
    .nav.open{display:flex}
    .nav ul{flex-direction:column; width:100%}
    .nav ul a{display:block; width:100%}
  }