/* =====================================================================
   RUŠI&VOZI - Home (flagship) layout
   Zavisi od style.css tokena. Linkuje se samo sa index.html i bager.html.
   ===================================================================== */

/* ---------- HERO ---------- */
.hx-hero{
  position:relative;
  padding: clamp(46px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
  overflow:hidden;
  isolation:isolate;
}
.hx-hero-bg{
  position:absolute; inset:-10% -10% 0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 460px at 12% 8%, rgba(247,181,0,.16), transparent 60%),
    radial-gradient(720px 520px at 88% 4%, rgba(255,209,92,.10), transparent 58%),
    radial-gradient(700px 640px at 70% 110%, rgba(110,170,255,.08), transparent 60%);
  filter: saturate(1.05);
}
.hx-hero-bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.hx-hero-inner{
  display:grid; grid-template-columns: 1.08fr .92fr; gap: clamp(24px,3vw,44px);
  align-items:center;
}
.hx-hero-copy h1{
  margin:12px 0 0;
  font-family:var(--font2); font-weight:800;
  font-size: var(--fs-display); line-height:1.02; letter-spacing:-.035em;
}
.hx-lead{
  margin:18px 0 0; max-width:56ch;
  color:var(--muted); font-size:var(--fs-lead); line-height:1.6;
}
.hx-lead strong{ color:var(--text); font-weight:700; }
.hx-hero .hero-cta{ margin-top:26px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:var(--muted); font-size:12.5px; font-weight:600;
}
.chip svg{ width:14px; height:14px; color:var(--accent); }

/* Hero visual */
.hx-hero-visual{ position:relative; }
.hx-visual-card{
  position:relative; padding:16px; border-radius:var(--radius3);
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform .6s var(--ease);
}
.hx-visual-card:hover{ transform: perspective(1200px) rotateY(0) rotateX(0); }
.hx-photo{
  height: clamp(240px, 34vw, 380px); border-radius:20px; overflow:hidden; position:relative;
  background:
    radial-gradient(700px 300px at 30% 20%, rgba(247,181,0,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  background-image:url("cover1.jpg"); background-size:cover; background-position:center;
}
.hx-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%),
             radial-gradient(420px 200px at 82% 16%, rgba(247,181,0,.16), transparent 60%);
}
.hx-photo-badge{
  position:absolute; left:14px; top:14px; z-index:2;
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(6,8,10,.6); border:1px solid var(--line2); backdrop-filter:blur(6px);
  font-size:12px; font-weight:700; color:var(--text);
}
.hx-photo-badge .live{ width:8px;height:8px;border-radius:999px;background:var(--success);
  box-shadow:0 0 0 4px rgba(47,208,123,.18); }
.hx-facts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.hx-fact{ padding:13px 14px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.hx-fact .k{ font-size:11.5px; color:var(--muted2); letter-spacing:.03em; text-transform:uppercase; }
.hx-fact .v{ margin-top:5px; font-family:var(--font2); font-weight:800; font-size:16px; }
.hx-fact .v span{ color:var(--accent); }
.hx-float{
  position:absolute; z-index:3; padding:10px 14px; border-radius:14px;
  font-family:var(--font2); font-weight:800; font-size:13px;
  box-shadow:var(--shadow2);
}
.hx-float-1{ right:-10px; top:26px; color:var(--accent-ink);
  background:linear-gradient(180deg,var(--accent2),var(--accent)); border:1px solid rgba(0,0,0,.15); }
.hx-hero-cue{ display:flex; justify-content:center; margin-top:clamp(26px,4vw,48px); }

/* ---------- USLUGE (4 kartice) ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.svc-card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:22px; border-radius:var(--radius2); overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow:var(--shadow2);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-card::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .3s var(--ease);
  background:radial-gradient(420px 220px at 50% -10%, rgba(247,181,0,.14), transparent 60%);
}
.svc-card:hover{ transform:translateY(-5px); border-color:rgba(247,181,0,.30); box-shadow:var(--shadow); }
.svc-card:hover::before{ opacity:1; }
.svc-card > *{ position:relative; z-index:1; }
.svc-ico{
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  background:rgba(247,181,0,.12); border:1px solid rgba(247,181,0,.24);
}
.svc-ico svg{ width:24px; height:24px; color:var(--accent); }
.svc-card h3{ margin:0; font-family:var(--font2); font-size:19px; letter-spacing:-.01em; }
.svc-card p{ margin:0; color:var(--muted); font-size:14px; flex:1; }
.svc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.svc-link{ display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:13.5px; color:var(--text); }
.svc-link svg{ width:16px; height:16px; color:var(--accent); transition:transform .25s var(--ease); }
.svc-card:hover .svc-link svg{ transform:translateX(4px); }
.svc-badge{
  position:absolute; top:14px; right:14px; z-index:2;
  padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.03em;
  color:var(--accent-ink); background:linear-gradient(180deg,var(--accent2),var(--accent));
}
@media (max-width:1080px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- CENA - NA UPIT ---------- */
.quote-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:14px; align-items:stretch; }
.quote-info{ padding:clamp(20px,2.4vw,30px); border-radius:var(--radius2); }
.quote-info h3{ margin:0; font-family:var(--font2); font-size:clamp(20px,2.4vw,27px); letter-spacing:-.02em; }
.quote-info p{ color:var(--muted); margin:12px 0 0; }
.quote-factors{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.quote-factors li{ display:flex; gap:11px; align-items:flex-start; color:var(--muted); font-size:14.5px; }
.quote-factors li svg{ width:18px; height:18px; color:var(--accent); flex:0 0 auto; margin-top:1px; }
.quote-factors li strong{ color:var(--text); font-weight:700; }
.quote-cta{
  padding:clamp(20px,2.4vw,30px); border-radius:var(--radius2);
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  background:
    radial-gradient(600px 260px at 20% 0%, rgba(247,181,0,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(247,181,0,.20);
}
.quote-cta .na-upit{ align-self:flex-start; }
.quote-cta h4{ margin:0; font-family:var(--font2); font-size:22px; letter-spacing:-.02em; }
.quote-cta p{ margin:0; color:var(--muted); font-size:14px; }
.quote-cta .hero-cta{ margin-top:2px; }
@media (max-width:900px){ .quote-wrap{ grid-template-columns:1fr; } }

/* ---------- Responsive hero ---------- */
@media (max-width: 940px){
  .hx-hero-inner{ grid-template-columns:1fr; }
  .hx-visual-card{ transform:none; }
  .hx-visual-card:hover{ transform:none; }
  .hx-float-1{ right:12px; top:calc(16px + clamp(240px,34vw,380px) - 52px); }
}


/* ---------- Background cover stranica ---------- */

#pocetna-cover{
  background-image:url("../media/pocetna/1.png");
}

#odvoz-cover{
  background-image:url("../media/odvoz-suta/1.jpg");
}

#rusenje-cover{
  background-image:url("../media/rusenje/9.jpg");
}

#bager-cover{
  background-image:url("../media/bager/1.jpg");
}

#prevoz-materijala-cover{
  background-image:url("../media/prevoz/5.png");
}

#kontakt-cover{
  background-image:url("../media/pocetna/1.png");
}

#renoviranje-cover{
  background-image:url("../media/renoviranje-kupatila/renoviranje-kupatila.png");
}

#elektrika_cover{
  background-image:url("../media/elektrika/elektrika_cover.png");
}

#gipsarski_radovi_cover{
  background-image:url("../media/gipsarski-radovi/cover_gipsarski_radovi.png");
}