*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;color:#153052;background:#fff;line-height:1.65}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* GLOBALNO: manji razmak izmedju ikonice i teksta */
i[class*="fa-"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin-right:6px!important;
  vertical-align:middle!important;
}

.btn i[class*="fa-"],
.header-cta i[class*="fa-"],
.floating-call i[class*="fa-"]{
  margin-right:6px!important;
  min-width:16px!important;
}

.btn span,
.header-cta span,
.floating-call span{
  display:inline-block!important;
}

/* HEADER + NORMALAN LOGO */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 7%!important;
  min-height:78px!important;
  max-height:86px!important;
  box-shadow:0 8px 30px rgba(6,26,58,.08);
}

.logo-wrap{
  width:170px!important;
  height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  flex:0 0 170px!important;
}

.site-header .logo-wrap img.logo,
.site-header img.logo,
img.logo,
.site-logo{
  height:42px!important;
  width:auto!important;
  max-width:155px!important;
  min-width:0!important;
  object-fit:contain!important;
  display:block!important;
}

.nav{
  display:flex;
  gap:38px;
  font-weight:700;
  color:#415571;
}

.nav a{padding:12px 0}
.nav a:hover{color:#128bdc}

.header-cta,
.btn{
  display:inline-flex!important;
  gap:6px!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:18px;
  padding:15px 26px;
  font-weight:800;
  transition:.25s;
  white-space:nowrap;
}

.header-cta,
.btn-primary{
  background:#145ee8;
  color:#fff;
  box-shadow:0 10px 25px rgba(20,94,232,.25);
}

.header-cta:hover,
.btn-primary:hover{background:#0b47b8}

.btn-light{
  background:#fff;
  color:#153b75;
}

.btn-outline{
  border:2px solid rgba(255,255,255,.38);
  color:#fff;
  background:rgba(255,255,255,.06);
}

/* HERO BEZ POLUKRUGA/RUPE */
.hero{
  min-height:720px;
  padding:105px 7% 0;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:78px;
  align-items:center;
  background:#164f9d;
  color:#fff;
  position:relative;
  overflow:visible;
}

.hero:before,
.hero:after{
  display:none!important;
  content:none!important;
}

.badge,
.section-label{
  display:inline-flex;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:10px 22px;
  font-weight:800;
  margin-bottom:32px;
}

.hero h1{
  font-size:64px;
  line-height:1.05;
  letter-spacing:-2px;
  margin-bottom:30px;
}

.hero h1 span{color:#74d7ff}

.hero p{
  font-size:21px;
  max-width:760px;
  color:#dceaff;
}

.hero-buttons,
.contact-buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:42px;
}

.trust{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  margin-top:48px;
  color:#eef7ff;
  font-weight:700;
}

.trust span{
  display:flex;
  align-items:center;
  gap:6px;
}

.trust i{
  color:#74d7ff;
  font-size:18px;
  min-width:18px;
  text-align:center;
  margin-right:6px!important;
}

.hero-image{
  position:relative;
  border:5px solid rgba(255,255,255,.24);
  border-radius:32px;
  overflow:hidden;
  min-height:450px;
  background:rgba(255,255,255,.06);
  margin-bottom:80px;
}

.hero-image img{
  width:100%;
  height:100%;
  min-height:450px;
  object-fit:cover;
}

.hero-card{
  position:absolute;
  right:28px;
  bottom:28px;
  background:#ff7a18;
  color:#fff;
  border-radius:18px;
  padding:28px;
  font-size:30px;
  font-weight:900;
  transform:rotate(8deg);
  text-align:center;
  box-shadow:0 12px 25px rgba(0,0,0,.18);
}

.hero-card small{font-size:14px}

/* BENEFITI DIREKTNO ISPOD HERO, BEZ BELE RUPE */
.quick-benefits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  padding:50px 7%;
  background:linear-gradient(90deg,#166eea,#13a8d8);
  color:#fff;
  margin-top:0!important;
}

.quick-benefits article{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.25);
  border-radius:24px;
  padding:32px;
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.quick-benefits i{
  font-size:32px;
  color:#dff7ff;
  min-width:34px;
  margin-right:8px!important;
  margin-top:4px;
}

.quick-benefits strong{
  display:block;
  font-size:21px;
  margin-bottom:6px;
}

.quick-benefits p{color:#fff}

/* SECTIONS */
.section{padding:98px 7%}

.section h2{
  font-size:44px;
  line-height:1.15;
  color:#102d55;
  margin-bottom:28px;
}

.section p,
.section-intro{
  font-size:18px;
  color:#52647b;
}

.section-label{
  background:#e7f5ff;
  color:#145ee8;
  border-color:#cfeeff;
}

.about,
.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.about img{
  border-radius:30px;
  box-shadow:0 24px 60px rgba(6,26,58,.16);
  height:460px;
  width:100%;
  object-fit:cover;
}

.about-btn{margin-top:42px!important}

.services-grid,
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:44px;
}

.services-grid article,
.why-grid p,
.contact-card{
  background:#fff;
  border:1px solid #dce8f4;
  border-radius:24px;
  padding:32px;
  box-shadow:0 16px 45px rgba(17,48,86,.08);
}

.services-grid i,
.why-grid i{
  font-size:30px;
  color:#145ee8;
  margin-right:10px!important;
  margin-bottom:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
}

.services-grid h3{
  font-size:22px;
  color:#123c75;
  margin-bottom:12px;
}

.why,
.gallery-section{background:#f3f9ff}

.why-grid p{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.why-grid p i{
  margin-top:5px;
  min-width:30px;
  flex:0 0 30px;
}

/* PRICING */
.pricing{
  background:linear-gradient(135deg,#102d55,#145ee8);
  color:#fff;
  text-align:center;
}

.pricing h2,
.pricing p{color:#fff}

.pricing p{
  max-width:920px;
  margin:0 auto 36px;
}

.coverage{text-align:center}
.coverage p{max-width:950px;margin:auto}

/* GALERIJA */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:40px;
}

.gallery img{
  height:220px;
  width:100%;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 14px 30px rgba(7,36,73,.12);
  transition:.25s;
}

.gallery img:hover{transform:translateY(-6px) scale(1.02)}

/* KONTAKT - ikonice vidljive i normalan razmak */
.contact{
  background:linear-gradient(135deg,#0f315d,#176fe0);
  color:#fff;
}

.contact h2,
.contact p{color:#fff}

.contact-label{
  background:#eef8ff;
  color:#145ee8;
}

.contact-card{
  padding:44px;
  background:#fff;
}

.contact-card p{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;
  color:#153052!important;
  margin-bottom:22px!important;
  text-align:left!important;
}

.contact-card p:last-child{margin-bottom:0!important}

.contact-card i{
  width:44px!important;
  height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  background:#e7f5ff!important;
  color:#145ee8!important;
  font-size:18px!important;
  flex:0 0 44px!important;
  margin-right:6px!important;
}

.contact-card span{
  display:block!important;
  line-height:1.55!important;
}

.contact-card a{
  text-decoration:underline;
  color:#145ee8;
}

/* FOOTER */
.footer{
  background:#081c38;
  color:#cdd9e8;
  text-align:center;
  padding:50px 7%;
}

.footer p{margin-bottom:10px}
.footer a{color:#74d7ff}

.footer i{
  color:#74d7ff!important;
  margin-right:7px!important;
  font-size:18px!important;
}

.footer span{display:inline-block}

.floating-call{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:30;
  background:#ff7a18;
  color:#fff;
  border-radius:999px;
  padding:17px 26px;
  font-weight:900;
  box-shadow:0 12px 35px rgba(0,0,0,.25);
  display:inline-flex!important;
  gap:6px!important;
  align-items:center!important;
}

@media(max-width:980px){
  .nav{display:none}
  .site-header{min-height:76px!important;max-height:84px!important}
  .logo-wrap{width:160px!important;height:50px!important;flex-basis:160px!important}
  .site-header .logo-wrap img.logo,
  .site-header img.logo,
  img.logo,
  .site-logo{
    height:38px!important;
    max-width:145px!important;
    min-width:0!important;
  }
  .hero,
  .about,
  .contact{grid-template-columns:1fr}
  .hero{padding-top:80px}
  .hero h1{font-size:46px}
  .quick-benefits,
  .services-grid,
  .why-grid,
  .gallery{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .site-header{
    padding:10px 5%!important;
    min-height:70px!important;
    max-height:78px!important;
  }
  .logo-wrap{
    width:130px!important;
    height:42px!important;
    flex-basis:130px!important;
  }
  .site-header .logo-wrap img.logo,
  .site-header img.logo,
  img.logo,
  .site-logo{
    height:32px!important;
    max-width:120px!important;
    min-width:0!important;
  }
  .header-cta{
    padding:11px 14px;
    font-size:14px;
  }
  .hero{
    padding:60px 5% 0;
    gap:36px;
  }
  .hero h1{font-size:38px}
  .hero p{font-size:18px}
  .trust,
  .quick-benefits,
  .services-grid,
  .why-grid,
  .gallery{grid-template-columns:1fr}
  .section{padding:70px 5%}
  .section h2{font-size:32px}
  .hero-buttons,
  .contact-buttons{flex-direction:column}
  .btn{width:100%}
  .gallery img{height:240px}
  .contact-card{padding:28px}
  .contact-card p{gap:10px!important}
  .floating-call{
    left:18px;
    right:18px;
    text-align:center;
    justify-content:center;
  }
}