/* ===== THEME: black / gray #5b5b5b / orange #f15a24 ===== */
:root{
  --ink:#0a0a0a;             /* crna */
  --gray:#5b5b5b;            /* siva */
  --brand:#f15a24;           /* narandžasta */
  --brand-600:#d94f20;       /* hover */
  --navH:72px;
  --overlay: .18;            /* jačina tamnog vela na slideru */
}
@media (max-width: 991.98px){ :root{ --navH:60px; } }

html, body{ overflow-x:hidden; }

/* ===== HEADER (ostaje fiksan) ===== */
.glass-nav{
  position: fixed; top:0; left:0; right:0; z-index:1200;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(10,14,20,.82);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
body.nav-fixed{ padding-top: var(--navH,72px); }
.navbar .nav-link{ color:#eaf2f7; padding:.6rem 1rem; }
.navbar .nav-link:hover{ color:#ffd7c7; } /* topli hover */
.lang-select{
  min-width:86px; background: rgba(255,255,255,.10);
  color:#eaf2f7; border-color: rgba(255,255,255,.18);
}
.lang-select option{ color:#0f172a; }

/* ===== BUTTONS u brend bojama ===== */
.btn-primary,
.btn-glass-primary{
  background: var(--brand);
  border: none; color:#fff;
}
.btn-primary:hover,
.btn-glass-primary:hover{ background: var(--brand-600); }

.btn-outline-primary{
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-primary:hover{
  color:#fff; background: var(--brand); border-color: var(--brand);
}

/* ===== HERO / SLIDER (full width, 700px visina) ===== */
.edge-bleed{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; }
.hero-slider{ min-height:700px; }                 /* visina slidera */
.promo-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.promo-overlay{
  position:absolute; inset:0; z-index:1;
  background: rgba(0,0,0,var(--overlay));        /* lako pojačaj/smanji */
  pointer-events:none;
}
/* glass panel preko slidera – “vodenasto” */
.promo-panel{
  position:relative; z-index:2; color:#fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 40px);
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.promo-title{
  font-weight: 800; letter-spacing: -.2px; line-height:1.05;
  font-size: clamp(2rem, 6vw, 4.2rem);
  margin: 0 0 .35rem;
}
.promo-sub{
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  color: #f1f5f9; opacity:.95; margin:0 0 1rem;
}

/* ===== “Vodenasti” (glass) boksovi koje već koristiš ===== */
.glass-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.proj-media{ position:relative; height:200px; overflow:hidden; }
.proj-media img{ width:100%; height:100%; object-fit:cover; }
.proj-badge{
  position:absolute; top:12px; left:12px; background: rgba(0,0,0,.65);
  color:#fff; padding:.25rem .5rem; border-radius:12px; font-size:.8rem;
}
.proj-body{ padding:1rem 1rem 1.25rem; color:var(--ink); }
.proj-title{ font-weight:600; color:var(--ink); }
.text-muted{ color: var(--gray) !important; }

.btn-glass-outline{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--ink);
}
.btn-glass-outline:hover{ background: rgba(255,255,255,.75); }

/* HOW “kartice” – takođe watery */
.how-card{
  position: relative;
  padding: 1.1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
}
.how-icon{
  width:40px; height:40px; border-radius:10px;
  background: rgba(241,90,36,.12); /* narandž. akcenat */
  display:grid; place-items:center; margin-bottom:.5rem;
}
.how-title{ font-weight:600; margin-bottom:.25rem; color:var(--ink); }
.how-text{ color:var(--gray); }

/* ===== MOBILE CTA BAR ===== (ostaje) */
.mobile-cta-bar{
  position: fixed; bottom:0; left:0; right:0; z-index:1050;
  display:flex; justify-content:space-around; align-items:center; gap:.5rem;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(10,14,20,.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.15);
}
.btn-cta{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; color:#fff; background: var(--brand);
  border-radius:12px; padding:.5rem 0; font-weight:600; font-size:.85rem;
  transition: all .2s ease;
}
.btn-cta:hover{ filter: brightness(1.05); }
.btn-cta:active{ transform: scale(.97); }
.btn-cta.btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.35); }
.btn-cta.btn-ghost:hover{ background: rgba(255,255,255,.1); }

/* sitno responsivno */
@media (max-width: 575.98px){
  .promo-title{ font-size: clamp(1.8rem, 8vw, 3rem); }
}

/* ===== Benefits (glass) ===== */
.benefit-card{
  position: relative;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.48));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.benefit-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.12);
}

.benefit-icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(241,90,36,.12);           /* #f15a24 @12% */
  border: 1px solid rgba(241,90,36,.22);
  margin-bottom: .65rem;
}
.benefit-icon img{ display:block; filter: none; }

.benefit-title{
  font-weight: 700;
  color: #0f0f0f;                            /* crna */
  letter-spacing: .1px;
}
.benefit-text{
  color: #5b5b5b;                            /* siva */
  line-height: 1.45;
}

/* Sitnije na mobilnom */
@media (max-width: 575.98px){
  .benefit-card{ padding: 1rem; border-radius: 16px; }
  .benefit-icon{ width:44px; height:44px; border-radius: 10px; }
}
/* ===== Featured Offer Cards ===== */
:root{
  --brand-black:#000000;
  --brand-grey:#5b5b5b;
  --brand-orange:#f15a24;
}

.offer-card{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  padding: 20px 20px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.offer-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.12);
}

.offer-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; margin-bottom: 10px;
}

.offer-logo{
  width:64px; height:64px; border-radius:14px;
  background: rgba(0,0,0,.03);
  display:grid; place-items:center;
  overflow:hidden;
}
.offer-logo img{ width:100%; height:100%; object-fit:cover; }

.offer-title{ font-weight:800; color:var(--brand-black); letter-spacing:.2px; }
.offer-sub{ color:var(--brand-grey)!important; }

.offer-apr{ text-align:right; white-space:nowrap; }
.offer-apr .apr-value{
  font-weight:800; font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  color:#138a2e; /* zelena za % kao na screenu */
}
.offer-apr .apr-note{ color:#7a8a96!important; }

.offer-specs{
  margin-top: 12px; margin-bottom: 12px;
}
.offer-specs .spec{
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}
.offer-specs .spec:last-child{ border-bottom: 0; }
.offer-specs .label{ color:#445460; font-weight:600; }
.offer-specs .value{ color:var(--brand-black); font-weight:700; }

.offer-summary{
  color: var(--brand-grey);
  line-height: 1.5;
  min-height: 56px; /* da kartice budu izjednačene */
}

.btn-brand{
  background: var(--brand-orange);
  border: 1px solid rgba(0,0,0,.08);
  color:#fff;
  font-weight: 800;
  border-radius: 14px;
  padding: .85rem 1.1rem;
  box-shadow: 0 6px 18px rgba(241,90,36,.25);
}
.btn-brand:hover{ filter:brightness(0.98); }

.square-btn{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
}

/* manji razmaci na malim ekranima */
@media (max-width:575.98px){
  .offer-card{ padding:16px; border-radius:18px; }
  .offer-logo{ width:56px; height:56px; }
}
.how-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.25s ease-in-out;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.how-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.how-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6f4f1 0%, #d4ebe5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
}



.how-icon img {
  width: 34px;
  height: 34px;
  opacity: 0.9;
}

.how-card h6 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #204c24; /* tvoja zelena */
}

.how-text {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.55;
}
/* full-bleed kontejner, isto kao na ostalim bannerima */
.edge-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}

/* HOW baner */
.how-wrap{position:relative; overflow:hidden}
.how-wrap .section-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(102%) contrast(102%);
}
.how-wrap .section-overlay{
  position:absolute; inset:0; pointer-events:none;
  background: transparent; /* nema sive / tamne pozadine */
}

/* glass kartice da budu čitljive na slici */
.how-card.glass{
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 38px rgba(0,0,0,.12);
  border-radius: 20px;
  padding: 1.25rem;
}
.how-card .how-icon{
  width: 48px; height: 48px; border-radius:12px;
  display:grid; place-items:center; margin-bottom:.6rem;
  background: rgba(241,90,36,.12);             /* brand narandžasta */
  border: 1px solid rgba(241,90,36,.25);
}
.how-card .how-icon img{ width:22px; height:22px }
.how-card h6{ color:#000; font-weight:700 }
.how-card .how-text{ color:#5b5b5b }           /* tvoja siva */

@media (max-width: 991.98px){
  .how-wrap .container{ padding-top:2.5rem; padding-bottom:2.5rem }
}

/* === HERO: fiksna visina 450px i bez sive preko slike === */
.hero-slider{
  height: 600px !important;
  min-height: 600px !important;   /* prebij min-height:700px */
}

/* Ako želiš potpuno bez “vela” (sive) preko hero slike: */
.promo-overlay{ background: transparent !important; }

/* (Opcija) Ako želiš samo blagi veo umesto skroz bez: */
/*
:root{ --overlay: .08; }             // bilo je .18
.promo-overlay{ background: rgba(0,0,0,var(--overlay)) !important; }
*/

/* === HOW full-bleed pozadina (lakši overlay da diše) === */
.how-wrap{ position:relative; overflow:hidden; }
.how-wrap .section-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(102%) contrast(102%);
  z-index:0;
}
.how-wrap .section-overlay{
  position:absolute; inset:0; z-index:1;
  /* vrlo blag veo – možeš pojačati .28 ako treba */
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.14));
  pointer-events:none;
}
.how-wrap .container{ position:relative; z-index:2; }

/* === HOW kartice (glass, čitljivo na slici) === */
.how-card.glass{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.5rem;
  padding: 20px 18px;
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.how-card.glass:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
}

/* Ikona – malo veća, sa narandžastim prstenom (brand #f15a24) */
.how-icon{
  width: 60px; height: 60px; border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(241,90,36,.12);
  border: 1px solid rgba(241,90,36,.28);
  box-shadow: inset 0 0 10px rgba(0,0,0,.04);
}
.how-icon img{ width: 28px; height: 28px; opacity:.95; }

/* Tekst */
.h6, .how-card h6{ font-weight:700; color:#0a0a0a; }
.how-text{ color:#5b5b5b; line-height:1.55; }

/* Responsive finoće */
@media (max-width: 991.98px){
  .how-wrap .container{ padding-top: 2rem; padding-bottom: 2.2rem; }
}
@media (max-width: 575.98px){
  .how-card.glass{ padding: 18px 16px; border-radius: 16px; }
  .how-icon{ width:54px; height:54px; border-radius:14px; }
  .how-icon img{ width:24px; height:24px; }
  .how-wrap h3{ text-align:center; }
}
/* Full width hero sa limitiranom visinom */