:root{
  --brand:#4b6bfb;
  --brand-2:#1e293b;
}
*{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
body{scroll-behavior:smooth}
.navbar .btn{border-radius:12px}
.hero{
  padding-top:6rem;
  padding-bottom:4rem;
  min-height:92vh;
  position:relative;
  background: radial-gradient(60% 60% at 85% 10%, rgba(75,107,251,.15), transparent 60%),
              conic-gradient(from 180deg at 50% 50%, #eef2ff, #ffffff);
}
.hero .bg-shape{
  position:absolute; inset:0;
  background: radial-gradient(40% 30% at 20% 20%, rgba(75,107,251,.12), transparent 60%),
              radial-gradient(35% 25% at 80% 70%, rgba(30,41,59,.08), transparent 60%);
  pointer-events:none;
}
.hero .hero-bg{position:absolute; inset:0; z-index:-1; opacity:.15}
.hero .hero-bg.has-img{opacity:.22}
.hero .hero-bg img{width:100%; height:100%; object-fit:cover; filter:saturate(1.2) contrast(1.05)}
.fw-extrabold{font-weight:800}
.hero-card{border-radius:18px}
.service-card{border-radius:16px; transition:transform .2s ease, box-shadow .2s ease}
.service-card:hover{transform:translateY(-4px); box-shadow:0 1rem 2rem rgba(0,0,0,.08)}
.service-icon{font-size:1.75rem; line-height:1; margin-bottom:.5rem}
.timeline .t-step{display:flex; gap:.75rem; align-items:flex-start; margin-bottom:1rem}
.timeline .t-num{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--brand); color:#fff; font-weight:700}
.section-reveal{opacity:0; transform:translateY(16px); transition:all .5s ease}
.section-reveal.revealed{opacity:1; transform:none}
.btn-primary{--bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:#3a56ca}
.btn-outline-primary{--bs-btn-color:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:rgba(75,107,251,.08)}
footer .btn{border-radius:10px}
.gallery-card{overflow:hidden; border-radius:14px}
.gallery-card img{display:block; width:100%; height:220px; object-fit:cover; transition:transform .5s ease}
.gallery-card:hover img{transform:scale(1.04) rotate(.2deg)}

/* WhatsApp floating button */
.wa-float{
  position:fixed; right:18px; bottom:18px;
  background:#25D366; color:#fff; text-decoration:none;
  padding:.75rem 1rem; border-radius:999px;
  box-shadow:0 8px 20px rgba(37,211,102,.35);
  font-weight:600; z-index:1050;
}
.wa-float:hover{filter:brightness(.95)}


/* === Palette refresh (calming blue-green) === */
:root{
  --brand:#2E7D7A;       /* deep teal */
  --brand-2:#0F3E3C;     /* darker teal for text accents */
  --accent:#4BBEA9;      /* soft aqua accent */
  --bg-grad-1:#F4F9F8;   /* very light mint background */
}
.navbar-brand{display:flex; align-items:center}
.brand-logo{width:28px; height:28px}
body{background:var(--bg-grad-1)}
.btn-primary{
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:#256a67;
  --bs-btn-hover-border-color:#256a67;
}
.btn-outline-primary{
  --bs-btn-color:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:rgba(46,125,122,.1);
  --bs-btn-hover-border-color:var(--brand);
}
.hero{
  background: radial-gradient(60% 60% at 85% 10%, rgba(46,125,122,.12), transparent 60%),
              linear-gradient(180deg, #FFFFFF, #F4F9F8);
}
.service-card:hover{box-shadow:0 1rem 2rem rgba(15,62,60,.10)}
.timeline .t-num{background:var(--brand)}
a{color:var(--brand)}
a:hover{color:#256a67}
/* Ensure good contrast for text on tinted backgrounds */
.text-on-accent{color:#0c2725}

/* Hero overlay tint */
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(46,125,122,.25), rgba(75,190,169,.25));
  z-index:-1;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  body{background:#0f3e3c; color:#f0fdfa}
  .navbar, footer{background:#0c2d2b !important; color:#f0fdfa}
  .card{background:#124c49; color:#f0fdfa}
  .btn-primary{--bs-btn-bg:#4BBEA9; --bs-btn-border-color:#4BBEA9; --bs-btn-hover-bg:#3aa890}
  .btn-outline-primary{--bs-btn-color:#4BBEA9; --bs-btn-border-color:#4BBEA9; --bs-btn-hover-bg:rgba(75,190,169,.15)}
  a{color:#4BBEA9}
  a:hover{color:#81e6d9}
  .hero{background:linear-gradient(180deg,#0f3e3c,#124c49)}
}



/* HERO background image */
.hero{
  background:
    linear-gradient(135deg, rgba(46,125,122,.20), rgba(75,190,169,.20)), /* tvoj overlay */
    url("../img/hero-desktop.webp") center/cover no-repeat;
}

/* Mobile varijanta */
@media (max-width: 768px){
  .hero{
    background:
      linear-gradient(135deg, rgba(46,125,122,.20), rgba(75,190,169,.20)),
      url("../img/hero-mobile.webp") center/cover no-repeat;
  }
}