:root{ --brand:#0d6efd; --ink:#0f172a; --muted:#64748b; --ok:#16a34a; }
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:#0b1220}
.hero{background:linear-gradient(135deg, rgba(13,110,253,.08), rgba(13,110,253,.02));}
.section-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;font-size:.8rem}
.icon-badge{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#eef2ff;color:#3730a3;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.benefit i{color:var(--ok)}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:576px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}
.gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:.75rem;box-shadow:0 2px 12px rgba(0,0,0,.08)}
footer{background:#0f172a;color:#cbd5e1}
footer a{color:#a3e635;text-decoration:none}
footer a:hover{text-decoration:underline}
.card{border:1px solid rgba(0,0,0,.06);border-radius:1rem}
.cta{background:linear-gradient(90deg,#0ea5e9,#6366f1);color:#fff}

/* Slojevi */
.hero { min-height: 70vh; }
.hero-media { position:absolute; inset:0; z-index:0; display:block; }
.hero-media > img { width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block; }

/* Globalni blagi overlay (ostaje) */
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.08) 40%,
    rgba(0,0,0,.02) 100%
  );
  pointer-events:none;
}

/* NOVO: jači scrim ispod lijevog teksta/CTA */
.hero-scrim-left{
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.66) 35%,
    rgba(0,0,0,.20) 62%,
    rgba(0,0,0,0) 78%
  );
  pointer-events:none;
}
/* Mobile: scrim odozgo prema dolje jer je tekst visoko */
@media (max-width: 991.98px){
  .hero-media > img{ object-position:center top; }
  .hero-scrim-left{
    background: linear-gradient(180deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.55) 38%,
      rgba(0,0,0,.18) 64%,
      rgba(0,0,0,0) 82%
    );
  }
}

/* Kontrast gumba/teksta */
.hero h1, .hero .lead, .hero p.section-eyebrow{ text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.hero .btn-outline-light{ border-color: rgba(255,255,255,.75); color:#fff; }
.hero .btn-outline-light:hover{ background:#fff; color:#000; }