/* ==============================================
   3MARK STUDIO – main.css  v1.6
   ============================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:        #e03030;
  --red-dark:   #b02020;
  --pink:       #EC008C;
  --blue:       #29ABE2;
  --yellow:     #F7B500;
  --green:      #00C49A;
  --bg:         #0a0a0a;
  --bg2:        #111111;
  --bg3:        #181818;
  --border:     rgba(255,255,255,.08);
  --text:       rgba(255,255,255,.85);
  --text-muted: rgba(255,255,255,.50);
  --radius:     12px;
  --shadow:     0 8px 32px rgba(0,0,0,.5);
  --transition: 0.3s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- HEADER ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.6); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 72px;
}

.hdr-logo { display: flex; align-items: center; flex-shrink: 0; }
.hdr-logo img { height: 52px; width: auto; }
.hdr-logo .custom-logo { height: 52px; width: auto; }

/* Slogan poleg loga */
.hdr-slogan {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1.4;
  display: none;
}
@media (min-width: 1100px) { .hdr-slogan { display: block; } }
.hdr-slogan strong { color: var(--yellow); display: block; }

.hdr-nav { display: flex; list-style: none; gap: 2rem; margin-left: auto; }
.hdr-nav li a {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--transition);
  position: relative;
}
.hdr-nav li a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--red);
  transition: width var(--transition);
}
.hdr-nav li a:hover { color: #fff; }
.hdr-nav li a:hover::after { width: 100%; }
.hdr-nav li .kontakt-link { color: var(--red); }

.btn-povprasevanje {
  margin-left: 1rem;
  padding: .55rem 1.4rem;
  background: var(--red);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.btn-povprasevanje:hover { background: var(--red-dark); transform: translateY(-1px); }

/* Phone in header */
.hdr-phone {
  font-size: .82rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: .03em;
  display: none;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
@media (min-width: 1200px) { .hdr-phone { display: flex; } }

/* Mobile toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}
.mobile-menu-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--transition);
}

.mobile-menu {
  display: none;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--border);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; }
.mobile-menu ul li a {
  display: block;
  padding: .75rem 24px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition), padding var(--transition);
}
.mobile-menu ul li a:hover { color: #fff; padding-left: 32px; }

/* Mobile phone in menu */
.mobile-contact-bar {
  display: flex;
  gap: 1rem;
  padding: .75rem 24px;
  border-top: 1px solid var(--border);
  margin-top: .5rem;
}
.mobile-contact-bar a {
  font-size: .82rem;
  font-weight: 700;
  color: var(--yellow);
}

/* ---- HERO ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: radial-gradient(ellipse at 20% 50%, rgba(224,48,48,.12) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(224,48,48,.06) 0%, transparent 50%),
              var(--bg);
  overflow: hidden;
  padding-top: 72px;
}

/* decorative shapes */
.bg-circle, .bg-circle-right {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(224,48,48,.15);
  pointer-events: none;
}
.bg-circle { width: 600px; height: 600px; top: -150px; left: -150px; }
.bg-circle-right { width: 400px; height: 400px; bottom: -100px; right: -100px; opacity: .6; }
.bg-triangle-left, .bg-triangle-right {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
  opacity: .08;
}
.bg-triangle-left {
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 200px solid var(--red);
  top: 30%; left: 5%;
}
.bg-triangle-right {
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-top: 140px solid var(--red);
  bottom: 20%; right: 8%;
}

/* Colored shapes like poster logo */
.hero-shapes {
  position: absolute;
  top: 80px; right: 12%;
  display: flex; gap: 12px;
  opacity: .12;
  pointer-events: none;
}
.hs-circle { width: 60px; height: 60px; border-radius: 50%; background: var(--blue); }
.hs-square { width: 58px; height: 58px; background: var(--pink); }
.hs-triangle {
  width: 0; height: 0;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  border-bottom: 58px solid var(--yellow);
  align-self: flex-end;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 1rem;
  background: rgba(224,48,48,.15);
  border: 1px solid rgba(224,48,48,.3);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--red);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.hero-title {
  font-size: clamp(2.8rem, 6.5vw, 6rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.hero-title .line-white { display: block; color: #fff; }
.hero-title .line-red   { display: block; color: var(--red); text-shadow: 0 0 40px rgba(224,48,48,.4); }
.hero-title .line-pink  { display: block; color: var(--pink); text-shadow: 0 0 40px rgba(236,0,140,.4); }
.hero-title .line-yellow{ display: block; color: var(--yellow); }

.hero-tagline {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.hero-tagline span { color: #fff; }

.hero-desc {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 2rem;
}

/* USP badges */
.hero-usps {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.hero-usp {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.hero-usp span { color: var(--green); }

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-storitve, .btn-kontakt {
  padding: .9rem 2rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: all var(--transition);
}
.btn-storitve {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 20px rgba(224,48,48,.4);
}
.btn-storitve:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(224,48,48,.5); }
.btn-kontakt {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.btn-kontakt:hover { border-color: rgba(255,255,255,.6); transform: translateY(-2px); }

.hero-right { display: flex; justify-content: center; align-items: center; }
.hero-logo-wrap {
  position: relative;
  width: 458px; height: 378px;
  border-radius: 22px;
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(180,80,255,.35);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  overflow: visible;
}
.hero-logo-wrap .logo-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
}
.hero-logo-wrap .lb1 { width:240px;height:240px;background:#29ABE2;top:-80px;left:-80px;animation:lb1 4s ease-in-out infinite; }
.hero-logo-wrap .lb2 { width:220px;height:220px;background:#EC008C;top:-70px;right:-70px;animation:lb2 5s ease-in-out infinite 0.8s; }
.hero-logo-wrap .lb3 { width:240px;height:240px;background:#F7B500;bottom:-80px;left:50%;transform:translateX(-50%);animation:lb3 4.5s ease-in-out infinite 1.2s; }
.hero-logo-wrap .lb4 { width:180px;height:180px;background:#7B2FF7;bottom:-50px;left:-50px;animation:lb1 6s ease-in-out infinite 0.4s; }
.hero-logo-wrap .lb5 { width:170px;height:170px;background:#00C49A;bottom:-50px;right:-50px;animation:lb2 5.5s ease-in-out infinite 1s; }
@keyframes lb1 { 0%,100%{transform:scale(1);opacity:0.7} 50%{transform:scale(1.3);opacity:1} }
@keyframes lb2 { 0%,100%{transform:scale(1.1);opacity:0.65} 50%{transform:scale(0.8);opacity:0.95} }
@keyframes lb3 { 0%,100%{transform:translateX(-50%) scale(1);opacity:0.7} 50%{transform:translateX(-50%) scale(1.25);opacity:1} }
.hero-logo-img { position: relative; z-index: 1; width: 100%; max-width: 418px; height: auto; object-fit: contain; }
.hero-logo-wrap .custom-logo { position: relative; z-index: 1; width: 100%; max-width: 418px; height: auto; object-fit: contain; }

.scroll-ind {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  font-size: .65rem; letter-spacing: .15em; color: var(--text-muted);
  text-transform: uppercase; animation: bounce 2s infinite;
}
.scroll-arr { font-size: 1.2rem; }

@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ---- SECTION COMMONS ---- */
.section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .75rem;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.section-title span { color: var(--red); }
.section-sub { color: var(--text-muted); font-size: .95rem; max-width: 560px; }

/* ---- STORITVE ---- */
.storitve-section { padding: 6rem 0; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

/* Service icon colors */
.svc-icon-dot {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.svc-icon-dot.blue   { background: rgba(41,171,226,.15); border: 1px solid rgba(41,171,226,.3); }
.svc-icon-dot.pink   { background: rgba(236,0,140,.15);  border: 1px solid rgba(236,0,140,.3); }
.svc-icon-dot.yellow { background: rgba(247,181,0,.15);  border: 1px solid rgba(247,181,0,.3); }
.svc-icon-dot.red    { background: rgba(224,48,48,.15);  border: 1px solid rgba(224,48,48,.3); }
.svc-icon-dot.green  { background: rgba(0,196,154,.15);  border: 1px solid rgba(0,196,154,.3); }
.svc-icon-dot.purple { background: rgba(123,47,247,.15); border: 1px solid rgba(123,47,247,.3); }

.svc-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue));
  opacity: 0;
  transition: opacity var(--transition);
}
.svc-card:hover {
  border-color: rgba(224,48,48,.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(224,48,48,.12);
}
.svc-card:hover::before { opacity: 1; }
.svc-card.featured-card {
  border-color: rgba(224,48,48,.5);
  background: linear-gradient(135deg, rgba(224,48,48,.08), var(--bg2));
}

.svc-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: flex; align-items: center;
}
.svc-icon.svc-img img {
  width: 60px; height: 60px;
  object-fit: contain;
  border-radius: 8px;
}
.svc-card h3 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.svc-card p { font-size: .85rem; color: var(--text-muted); line-height: 1.6; }

.cenik-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .5rem; }
.cenik-price { font-size: 2rem; font-weight: 900; color: var(--red); margin-bottom: .75rem; }

/* ---- STATS ---- */
.stats-section {
  padding: 4rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(224,48,48,.05) 0%, transparent 70%);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}
.stat-box {
  text-align: center;
  padding: 2rem 1rem;
}
.stat-num {
  display: block;
  font-size: 3rem;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: .5rem;
}
.stat-lbl {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- USP BAND ---- */
.usp-band {
  background: linear-gradient(135deg, rgba(224,48,48,.1), rgba(41,171,226,.1));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}
.usp-band-inner {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.usp-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.usp-item .usp-check { color: var(--green); font-size: 1rem; }
.usp-item.blue   { color: var(--blue); }
.usp-item.pink   { color: var(--pink); }
.usp-item.yellow { color: var(--yellow); }

/* ---- GALERIJA ---- */
.galerija-section { padding: 6rem 0; }

.gal-filters { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2rem; }
.gf-btn {
  padding: .5rem 1.25rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.gf-btn:hover, .gf-btn.active {
  color: #fff;
  border-color: var(--red);
  background: rgba(224,48,48,.15);
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 1rem;
}
.g-item {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform var(--transition);
}
.g-item:hover { transform: scale(1.02); }
.g-item.tall { grid-row: span 2; }
.g-item.wide { grid-column: span 2; }

.g-img { width: 100%; height: 100%; }
.g-img img { width: 100%; height: 100%; object-fit: cover; }
.g-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; font-size: 2.5rem;
}
.g-ph span { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }

.g-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.g-item:hover .g-ov { opacity: 1; }
.g-ov-t { font-size: .9rem; font-weight: 700; margin-bottom: .25rem; }
.g-ov-c { font-size: .72rem; color: var(--red); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

.g-item.hidden { display: none; }

/* ---- LIGHTBOX ---- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }

.lb-close, .lb-prev, .lb-next {
  position: absolute;
  color: #fff;
  font-size: 2rem;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  transition: background var(--transition);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(224,48,48,.5); }
.lb-close { top: 1.5rem; right: 1.5rem; font-size: 1.2rem; }
.lb-prev  { left: 1.5rem;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 1.5rem; top: 50%; transform: translateY(-50%); }

.lb-content {
  max-width: 860px;
  width: 90%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--border);
}
.lb-img { min-height: 420px; background: var(--bg3); display: flex; align-items: center; justify-content: center; }
.lb-img img { max-height: 520px; width: 100%; object-fit: cover; }
.lb-info { padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.lb-t { font-weight: 700; }
.lb-c { font-size: .78rem; color: var(--red); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* ---- CENIK ---- */
.cenik-section { padding: 6rem 0; background: var(--bg2); }
.cenik-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

/* ---- KONTAKT ---- */
.kontakt-section { padding: 6rem 0; }
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}

.k-info { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.k-item { display: flex; gap: 1rem; align-items: flex-start; }
.k-icon { font-size: 1.4rem; margin-top: .1rem; flex-shrink: 0; }
.k-item div { display: flex; flex-direction: column; gap: .2rem; }
.k-item strong { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.k-item span { font-size: .88rem; color: var(--text-muted); }
.k-item a { color: var(--text-muted); transition: color var(--transition); }
.k-item a:hover { color: var(--yellow); }

/* Team phones */
.k-team-phones { display: flex; flex-direction: column; gap: .3rem; }
.k-team-phone { display: flex; align-items: center; gap: .5rem; }
.k-team-name { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; min-width: 40px; }
.k-team-num { font-size: .9rem; color: #fff; font-weight: 600; }

/* Contact Form */
.kform { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg { display: flex; flex-direction: column; gap: .4rem; }
.fg label { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.fg input, .fg select, .fg textarea {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .85rem 1rem;
  color: #fff;
  font-size: .9rem;
  font-family: inherit;
  transition: border-color var(--transition);
  outline: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: rgba(224,48,48,.5); }
.fg select { appearance: none; }
.fg textarea { resize: vertical; min-height: 120px; }

.fsub {
  padding: 1rem 2rem;
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 4px 20px rgba(224,48,48,.3);
  border: none;
  cursor: pointer;
}
.fsub:hover { background: var(--red-dark); transform: translateY(-2px); }
.fsub:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---- VIDEI ---- */
.videi-section { padding: 5rem 0; }
.videi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.video-card { background: rgba(255,255,255,0.04); border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-title { padding: 1rem 1.2rem; color: #fff; font-size: .95rem; font-weight: 600; }

/* ---- MAPS ---- */
.maps-section { padding: 3rem 0 5rem; }
.maps-wrap { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }

/* ---- WHATSAPP BTN ---- */
.whatsapp-btn {
    position: fixed; bottom: 88px; right: 28px; z-index: 9999;
    background: #25D366; border-radius: 50%;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,.5);
    transition: transform .2s, box-shadow .2s;
}
.whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.7); }

/* ---- KALKULATOR ---- */
.kalk-field { margin-bottom:1.4rem; }
.kalk-field-lbl { display:block;color:#888;font-size:.78rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem; }
.kalk-opts { display:flex;flex-wrap:wrap;gap:.35rem; }
.kalk-opt { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#888;border-radius:8px;padding:.45rem .9rem;cursor:pointer;font-size:.83rem;font-family:inherit;font-weight:500;transition:all .15s; }
.kalk-opt.on { background:rgba(236,0,140,0.15);border-color:#EC008C;color:#fff; }
.kalk-opt-p { color:#F7B500;font-size:.72rem;margin-left:3px; }
.kalk-rv { color:#fff;font-weight:700;font-size:1.1rem;margin-bottom:.3rem; }
.kalk-range { width:100%;accent-color:#EC008C;margin-bottom:.2rem; }
.kalk-rl { display:flex;justify-content:space-between;color:#555;font-size:.72rem; }
.kalk-toggle { display:inline-flex;align-items:center;gap:.7rem;cursor:pointer; }
.kalk-ttrack { width:44px;height:24px;border-radius:12px;background:rgba(255,255,255,0.1);position:relative;transition:background .2s; }
.kalk-ttrack.on { background:linear-gradient(90deg,#29ABE2,#EC008C); }
.kalk-tknob { position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s; }
.kalk-ttrack.on .kalk-tknob { left:23px; }
.kalk-tlbl { color:#888;font-size:.88rem;font-weight:500; }
.kalk-tlbl.on { color:#fff; }

/* ---- FOOTER ---- */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 1.5rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.footer-brand p {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: .75rem;
  max-width: 260px;
}
.footer-brand .footer-logo {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.footer-brand .footer-logo strong { color: var(--red); }
.footer-slogan {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: .5rem;
}
.footer-contact h4 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .75rem;
}
.footer-contact-item .fci-icon { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.footer-contact-item span, .footer-contact-item a {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  transition: color var(--transition);
}
.footer-contact-item a:hover { color: var(--yellow); }
.footer-links-col h4 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.footer-links-col ul { list-style: none; }
.footer-links-col ul li { margin-bottom: .5rem; }
.footer-links-col ul li a {
  font-size: .82rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.footer-links-col ul li a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-copy { font-size: .78rem; color: var(--text-muted); }
.footer-copy strong { color: var(--red); }
.footer-tagline {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
  font-style: italic;
}

/* ---- REVEAL ANIMATION ---- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
.reveal.d4 { transition-delay: .4s; }
.reveal.d5 { transition-delay: .5s; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .kontakt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cenik-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hdr-nav, .btn-povprasevanje, .hdr-phone { display: none; }
  .mobile-menu-toggle { display: flex; }

  .hero-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .hero-right { display: none; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-btns { justify-content: center; }
  .hero-usps { justify-content: center; }

  .svc-grid { grid-template-columns: 1fr 1fr; }
  .gal-grid { grid-template-columns: 1fr 1fr; }
  .g-item.wide { grid-column: span 1; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .usp-band-inner { gap: 1.5rem; }
}

@media (max-width: 480px) {
  .svc-grid { grid-template-columns: 1fr; }
  .gal-grid { grid-template-columns: 1fr; }
  .g-item.tall { grid-row: span 1; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:640px){
  #kalkFields{border-right:none!important;border-bottom:1px solid rgba(255,255,255,0.06);}
  div[style*="grid-template-columns:1fr 230px"]{grid-template-columns:1fr!important;}
}

/* ============================================================
   MENIJI PO STRANEH / SEKCIJAH
   ============================================================ */

.ms-section-nav {
  margin: 1.5rem 0;
}

.ms-section-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ms-section-nav__list li a {
  display: inline-block;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  color: rgba(255,255,255,0.7);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .45rem 1.1rem;
  transition: all .2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.ms-section-nav__list li a:hover,
.ms-section-nav__list li.current-menu-item a,
.ms-section-nav__list li.current_page_item a {
  background: linear-gradient(135deg, #EC008C, #29ABE2);
  border-color: transparent;
  color: #fff;
}

/* Variante po sekcijah */
.ms-section-nav--storitve .ms-section-nav__list li a:hover {
  background: linear-gradient(135deg, #29ABE2, #EC008C);
}

.ms-section-nav--galerija .ms-section-nav__list li a:hover {
  background: linear-gradient(135deg, #F7B500, #EC008C);
}

.ms-section-nav--cenik .ms-section-nav__list li a:hover {
  background: linear-gradient(135deg, #00C49A, #29ABE2);
}

.ms-section-nav--kontakt .ms-section-nav__list li a:hover {
  background: linear-gradient(135deg, #EC008C, #e03030);
}

/* ============================================================
   GRAFIČNE IZBOLJŠAVE v3.3
   1. Hero – animated mesh gradient ozadje
   2. Storitve – featured kartica + boljši hover
   3. Cenik – "Priporočeno" badge + hierarhija
   4. Tipografija mobilna
   5. Galerija filter – fade animacija
   6. Footer – logo + social ikone
   7. Kalkulator – kontekst besedilo
   8. Micro-animacije gumbov
   9. USP banda – konkretne prednosti
   ============================================================ */

/* ── 1. HERO: animated mesh gradient ──────────────────────── */
.hero {
  background:
    radial-gradient(ellipse at 15% 50%, rgba(236,0,140,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(41,171,226,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(247,181,0,.08) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 60%, rgba(0,196,154,.07) 0%, transparent 40%),
    var(--bg);
  animation: heroMesh 12s ease-in-out infinite alternate;
}
@keyframes heroMesh {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Izrazitejši scan-line efekt čez hero */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,.012) 3px,
    rgba(255,255,255,.012) 4px
  );
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* Hero naslov – večji glow efekt */
.hero-title .line-pink {
  text-shadow: 0 0 60px rgba(236,0,140,.5), 0 0 120px rgba(236,0,140,.2);
}
.hero-title .line-yellow {
  text-shadow: 0 0 40px rgba(247,181,0,.4);
}

/* USP badges – konkretne vrednosti */
.hero-usp {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .2s, transform .2s;
}
.hero-usp:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}

/* ── 2. STORITVE: featured + hover micro-anim ──────────────── */
/* Vsaka kartica dobi svojo barvo roba glede na vrstni red */
.svc-grid .svc-card:nth-child(1)::before { background: linear-gradient(90deg,#29ABE2,#0078A8); }
.svc-grid .svc-card:nth-child(2)::before { background: linear-gradient(90deg,#EC008C,#A50063); }
.svc-grid .svc-card:nth-child(3)::before { background: linear-gradient(90deg,#F7B500,#C48F00); }
.svc-grid .svc-card:nth-child(4)::before { background: linear-gradient(90deg,#e03030,#A50000); }
.svc-grid .svc-card:nth-child(5)::before { background: linear-gradient(90deg,#00C49A,#007A60); }
.svc-grid .svc-card:nth-child(6)::before { background: linear-gradient(90deg,#8B5CF6,#5B21B6); }

/* Prva kartica = featured */
.svc-grid .svc-card:nth-child(1) {
  border-color: rgba(41,171,226,.35);
  background: linear-gradient(135deg,rgba(41,171,226,.07),var(--bg2));
  grid-column: span 2;
}
@media (max-width: 768px) {
  .svc-grid .svc-card:nth-child(1) { grid-column: span 1; }
}
.svc-grid .svc-card:nth-child(1)::after {
  content: '⭐ Najbolj priljubljena';
  position: absolute;
  top: 1rem; right: 1rem;
  background: linear-gradient(135deg,#29ABE2,#EC008C);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 20px;
}

/* Hover: scale + glow */
.svc-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.svc-card:active {
  transform: translateY(-2px) scale(0.99);
  transition: transform .08s;
}

/* Dodaj CTA hint ob hoverju */
.svc-card .svc-cta-hint {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1rem;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: color .2s, gap .2s;
}
.svc-card:hover .svc-cta-hint {
  color: rgba(255,255,255,.7);
  gap: .55rem;
}

/* ── 3. CENIK: hierarhija + "Priporočeno" badge ────────────── */
.cenik-grid .svc-card {
  position: relative;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cenik-grid .svc-card:nth-child(1) { border-color: rgba(41,171,226,.25); }
.cenik-grid .svc-card:nth-child(2) {
  border-color: rgba(236,0,140,.5);
  background: linear-gradient(160deg, rgba(236,0,140,.1), rgba(41,171,226,.06), var(--bg2));
  transform: scale(1.04);
  box-shadow: 0 20px 60px rgba(236,0,140,.2), 0 0 0 1px rgba(236,0,140,.3);
  z-index: 1;
}
.cenik-grid .svc-card:nth-child(2)::before {
  content: '★ PRIPOROČENO';
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg,#EC008C,#29ABE2);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding: .3rem 1.1rem;
  border-radius: 20px;
  white-space: nowrap;
}
.cenik-grid .svc-card:nth-child(3) { border-color: rgba(247,181,0,.25); }

.cenik-grid .svc-card:hover { transform: scale(1.03); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.cenik-grid .svc-card:nth-child(2):hover { transform: scale(1.06); }

.cenik-price {
  font-size: 2.4rem;
  background: linear-gradient(135deg,#fff,rgba(255,255,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cenik-grid .svc-card:nth-child(2) .cenik-price {
  font-size: 2.8rem;
  background: linear-gradient(135deg,#EC008C,#29ABE2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 4. TIPOGRAFIJA MOBILNA ────────────────────────────────── */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(3rem, 14vw, 4.5rem);
    letter-spacing: -.03em;
  }
  .hero-desc { font-size: .9rem; }
  .hero-usps { gap: .5rem; }
  .hero-usp  { font-size: .7rem; padding: .3rem .7rem; }
  .section-title { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .stat-num { font-size: 2.4rem; }
}

/* ── 5. GALERIJA: smooth filter animacija ──────────────────── */
.g-item {
  transition: transform .3s ease, opacity .35s ease, filter .35s ease;
}
.g-item.filtering-out {
  opacity: 0;
  transform: scale(0.95);
  filter: blur(4px);
  pointer-events: none;
}
.g-item.filtering-in {
  animation: galIn .35s ease forwards;
}
@keyframes galIn {
  from { opacity: 0; transform: scale(0.94) translateY(8px); filter: blur(3px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   filter: blur(0); }
}

/* Filter gumbi – lepši active state */
.gf-btn {
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.gf-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(224,48,48,.15),rgba(41,171,226,.15));
  opacity: 0;
  transition: opacity .2s;
}
.gf-btn:hover::after, .gf-btn.active::after { opacity: 1; }
.gf-btn.active {
  color: #fff;
  border-color: var(--red);
  font-weight: 700;
}
.gf-btn:active { transform: scale(0.97); }

/* ── 6. FOOTER ─────────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(180deg, var(--bg2) 0%, #0a0a0a 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 4rem 0 0;
}
.footer-logo {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
  background: linear-gradient(135deg,#fff,rgba(255,255,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-logo strong {
  background: linear-gradient(135deg,#EC008C,#29ABE2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-slogan {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 1rem;
}
.footer-brand p { font-size: .85rem; color: rgba(255,255,255,.4); line-height: 1.7; max-width: 260px; }

/* Social ikone */
.footer-social {
  display: flex;
  gap: .6rem;
  margin-top: 1.2rem;
}
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.footer-social a:hover {
  background: rgba(236,0,140,.15);
  border-color: rgba(236,0,140,.4);
  transform: translateY(-2px);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
}
.footer-links-col h4,
.footer-contact h4 {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 1rem;
  font-weight: 700;
}
.footer-links-col ul { list-style: none; padding: 0; }
.footer-links-col ul li { margin-bottom: .55rem; }
.footer-links-col ul li a {
  font-size: .85rem;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .2s, padding-left .2s;
  display: inline-block;
}
.footer-links-col ul li a:hover { color: #fff; padding-left: 4px; }

.footer-contact-item {
  display: flex; gap: .75rem; align-items: flex-start;
  margin-bottom: .85rem; font-size: .85rem;
}
.fci-icon { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.footer-contact-item a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.footer-contact-item a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-copy { font-size: .78rem; color: rgba(255,255,255,.3); }
.footer-copy strong { color: rgba(255,255,255,.6); }
.footer-tagline { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.2); }

@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── 7. KALKULATOR: kontekst label ─────────────────────────── */
#kalkSummary {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  text-align: center;
  margin-top: .5rem;
  min-height: 1.2em;
  font-style: italic;
  transition: opacity .3s;
}

/* ── 8. MICRO-ANIMACIJE GUMBOV ─────────────────────────────── */
.btn-storitve, .btn-kontakt,
.btn-primary, .btn-secondary,
.err-btn, .svc-sidebar__btn,
.fsub, #submitBtn {
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease !important;
}
.btn-storitve:active, .btn-kontakt:active,
.fsub:active, #submitBtn:active,
.err-btn--primary:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: none !important;
}

/* Smooth scroll indicator pulse */
.scroll-ind {
  animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .6; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ── 9. USP BANDA ──────────────────────────────────────────── */
.usp-band {
  background: linear-gradient(135deg,rgba(236,0,140,.08),rgba(41,171,226,.08));
  padding: 1.5rem 0;
}
.usp-band-inner { gap: 2rem; }
.usp-item {
  gap: .6rem;
  font-size: .8rem;
  padding: .5rem 1.2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50px;
  transition: background .2s, transform .2s;
}
.usp-item:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.usp-check { font-size: 1.1rem; }

/* ============================================================
   HERO PLAKAT / SLIKA – desna stran
   ============================================================ */
.hero-poster-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  animation: posterFloat 6s ease-in-out infinite;
}

@keyframes posterFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-12px) rotate(0.5deg); }
}

/* Glow ozadje za plakat */
.hero-poster-glow {
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(236,0,140,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(41,171,226,.3) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 80%, rgba(247,181,0,.2) 0%, transparent 45%);
  filter: blur(40px);
  z-index: 0;
  animation: glowPulse 4s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0%   { opacity: .7; transform: scale(0.95); }
  100% { opacity: 1;  transform: scale(1.05); }
}

/* Plakat slika */
.hero-poster-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 60px rgba(236,0,140,.15);
  transition: transform .4s ease, box-shadow .4s ease;
}

.hero-poster-wrap:hover .hero-poster-img {
  transform: scale(1.02) rotate(0deg);
  box-shadow:
    0 40px 100px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.1),
    0 0 80px rgba(236,0,140,.25);
}

/* Mobilno – plakat ne sme biti prevelik */
@media (max-width: 768px) {
  .hero-poster-wrap {
    max-width: 320px;
    animation: posterFloatMobile 5s ease-in-out infinite;
  }
  @keyframes posterFloatMobile {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
  }
}

@media (max-width: 480px) {
  .hero-poster-wrap { max-width: 260px; }
}

/* ── HERO LAYOUT FIX – plakat vedno levo ──────────────────── */
/* Ko je plakat nastavljen, besedilo levo, slika desno */
.hero-inner {
  grid-template-columns: 1fr 1fr;
}
.hero-left  { order: 1; }
.hero-right { order: 2; }

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-left  { order: 1; }
  .hero-right { order: 2; }
  .hero-poster-wrap { max-width: 340px; margin: 0 auto; }
}

/* ── CENIK CTA GUMB ──────────────────────────────────────── */
.cenik-cta-btn {
    display: block;
    margin-top: 1.5rem;
    text-align: center;
    padding: .7rem 1.5rem;
    border-radius: 50px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.8);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    transition: all .2s;
}
.cenik-cta-btn:hover {
    background: linear-gradient(135deg,#EC008C,#29ABE2);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}
.cenik-grid .svc-card:nth-child(2) .cenik-cta-btn {
    background: linear-gradient(135deg,#EC008C,#29ABE2);
    border-color: transparent;
    color: #fff;
}
.cenik-grid .svc-card:nth-child(2) .cenik-cta-btn:hover {
    opacity: .9;
    transform: translateY(-2px);
}

/* ── MOBILE MENU WhatsApp ────────────────────────────────── */
.mobile-contact-bar a:last-child {
    color: #25D366;
}

/* ============================================================
   GRAFIČNA DODELAVA – vse 9 izboljšav
   ============================================================ */

/* ── 1. HERO – animirani produkti okoli logotipa ───────────── */
.hero-logo-wrap {
    position: relative;
}

/* Lebdeči produkti */
.hero-product {
    position: absolute;
    z-index: 2;
    border-radius: 16px;
    background: rgba(20,20,20,.85);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    pointer-events: none;
}
.hero-product span.hp-icon { font-size: 1.3rem; }
.hero-product span.hp-lbl  { font-size: .7rem; color: rgba(255,255,255,.5); display: block; font-weight: 400; }

.hp-majica  { top: 8%;  left: -20%; animation: hpFloat1 5s ease-in-out infinite; }
.hp-stamp   { top: 30%; right: -22%; animation: hpFloat2 6s ease-in-out infinite .8s; }
.hp-gravir  { bottom: 20%; left: -18%; animation: hpFloat3 5.5s ease-in-out infinite 1.2s; }
.hp-dtf     { bottom: 5%; right: -16%; animation: hpFloat1 6.5s ease-in-out infinite .4s; }

@keyframes hpFloat1 { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-12px) rotate(1deg);} }
@keyframes hpFloat2 { 0%,100%{transform:translateY(0) rotate(2deg);} 50%{transform:translateY(-10px) rotate(-1deg);} }
@keyframes hpFloat3 { 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-14px) rotate(2deg);} }

@media (max-width: 900px) {
    .hero-product { display: none; }
}

/* ── 2. STORITVE KARTICE – gradient ozadje po barvah ────────── */
.svc-grid .svc-card:nth-child(1) { background: linear-gradient(160deg, rgba(41,171,226,.08), var(--bg2)); }
.svc-grid .svc-card:nth-child(2) { background: linear-gradient(160deg, rgba(236,0,140,.08), var(--bg2)); }
.svc-grid .svc-card:nth-child(3) { background: linear-gradient(160deg, rgba(247,181,0,.08), var(--bg2)); }
.svc-grid .svc-card:nth-child(4) { background: linear-gradient(160deg, rgba(224,48,48,.08), var(--bg2)); }
.svc-grid .svc-card:nth-child(5) { background: linear-gradient(160deg, rgba(0,196,154,.08), var(--bg2)); }
.svc-grid .svc-card:nth-child(6) { background: linear-gradient(160deg, rgba(139,92,246,.08), var(--bg2)); }

/* Vzorec pik v ozadju kartic */
.svc-card {
    background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Večji emoji icon */
.svc-icon-dot {
    font-size: 1.8rem !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}

/* ── 3. VALOVITI LOČNIKI MED SEKCIJAMI ─────────────────────── */
.wave-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin: 0;
    padding: 0;
}
.wave-divider svg {
    display: block;
    width: 100%;
}
.wave-divider.wave-flip {
    transform: scaleY(-1);
}

/* ── 4. STATISTIKE – krožni progress + boljši okvir ────────── */
.stats-grid {
    background: linear-gradient(135deg, rgba(236,0,140,.05), rgba(41,171,226,.05));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 24px;
    padding: 3rem 2rem;
}
.stat-box {
    position: relative;
    padding: 2rem 1rem;
}
.stat-box::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: rgba(255,255,255,.08);
}
.stat-box:last-child::after { display: none; }

.stat-num {
    font-size: 3.5rem !important;
    background: linear-gradient(135deg, #EC008C, #29ABE2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-box:nth-child(2) .stat-num {
    background: linear-gradient(135deg, #F7B500, #EC008C);
    -webkit-background-clip: text;
    background-clip: text;
}
.stat-box:nth-child(3) .stat-num {
    background: linear-gradient(135deg, #29ABE2, #00C49A);
    -webkit-background-clip: text;
    background-clip: text;
}
.stat-box:nth-child(4) .stat-num {
    background: linear-gradient(135deg, #00C49A, #F7B500);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-lbl {
    color: rgba(255,255,255,.6) !important;
    font-size: .75rem !important;
    letter-spacing: .12em !important;
}

/* Pulsirajoča pika za "aktivne stranke" ali podobno */
.stat-box:first-child .stat-lbl::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00C49A;
    margin-right: .4rem;
    animation: statPulse 2s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes statPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(1.5);} }

/* ── 5. KONTAKTNI OBRAZEC – glassmorphism ───────────────────── */
.kontakt-section .kform-wrap {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
}

.fg input, .fg select, .fg textarea {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px);
    transition: border-color .2s, background .2s, box-shadow .2s !important;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
    border-color: rgba(236,0,140,.6) !important;
    background: rgba(255,255,255,.09) !important;
    box-shadow: 0 0 0 3px rgba(236,0,140,.1) !important;
}

.fsub {
    background: linear-gradient(135deg, #EC008C, #29ABE2) !important;
    border-radius: 50px !important;
    letter-spacing: .05em !important;
    box-shadow: 0 4px 20px rgba(236,0,140,.35) !important;
}
.fsub:hover {
    background: linear-gradient(135deg, #d4007f, #1e8fc4) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(236,0,140,.45) !important;
}

/* ── 6. TIPOGRAFIJA – boljša hierarhija ─────────────────────── */
.section-title {
    letter-spacing: -.02em;
    line-height: 1.1 !important;
}
.section-title span {
    background: linear-gradient(135deg, #EC008C, #F7B500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section-label {
    font-size: .65rem !important;
    letter-spacing: .2em !important;
    background: linear-gradient(135deg, #EC008C, #29ABE2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
}
.section-sub {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    color: rgba(255,255,255,.55) !important;
}

/* ── 7. GALERIJA – masonry + featured prva slika ────────────── */
.gal-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 220px;
    gap: 1rem !important;
}
.g-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
.g-item:nth-child(4) {
    grid-column: span 2;
}
.g-img {
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}
.g-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease !important;
}
.g-item:hover .g-img img {
    transform: scale(1.06) !important;
}

/* Overlay na galeriji */
.g-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.g-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%);
    opacity: 0;
    transition: opacity .3s;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    border-radius: 12px;
}
.g-item:hover .g-overlay { opacity: 1; }
.g-overlay-text {
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .4rem;
}

@media (max-width: 768px) {
    .gal-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 160px; }
    .g-item:first-child { grid-column: span 2; grid-row: span 1; }
    .g-item:nth-child(4) { grid-column: span 1; }
}
@media (max-width: 480px) {
    .gal-grid { grid-template-columns: 1fr !important; grid-auto-rows: 200px; }
    .g-item:first-child, .g-item:nth-child(4) { grid-column: span 1; }
}

/* ── 8. FOOTER – vizualna ločnica + ozadni vzorec ───────────── */
.site-footer {
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #EC008C, #29ABE2, transparent);
}
.site-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(236,0,140,.04) 1px, transparent 1px),
        radial-gradient(rgba(41,171,226,.03) 1px, transparent 1px);
    background-size: 30px 30px, 60px 60px;
    background-position: 0 0, 15px 15px;
    pointer-events: none;
    z-index: 0;
}
.footer-top, .footer-bottom { position: relative; z-index: 1; }

/* ── 9. STAGGERED REVEAL ANIMACIJE ─────────────────────────── */

/* Kartice dobijo individualne zamike */
.svc-grid .svc-card:nth-child(1) { transition-delay: .05s !important; }
.svc-grid .svc-card:nth-child(2) { transition-delay: .12s !important; }
.svc-grid .svc-card:nth-child(3) { transition-delay: .19s !important; }
.svc-grid .svc-card:nth-child(4) { transition-delay: .26s !important; }
.svc-grid .svc-card:nth-child(5) { transition-delay: .33s !important; }
.svc-grid .svc-card:nth-child(6) { transition-delay: .40s !important; }

.stats-grid .stat-box:nth-child(1) { transition-delay: .05s; }
.stats-grid .stat-box:nth-child(2) { transition-delay: .15s; }
.stats-grid .stat-box:nth-child(3) { transition-delay: .25s; }
.stats-grid .stat-box:nth-child(4) { transition-delay: .35s; }

.gal-grid .g-item:nth-child(1) { transition-delay: .05s; }
.gal-grid .g-item:nth-child(2) { transition-delay: .1s; }
.gal-grid .g-item:nth-child(3) { transition-delay: .15s; }
.gal-grid .g-item:nth-child(4) { transition-delay: .2s; }
.gal-grid .g-item:nth-child(5) { transition-delay: .25s; }
.gal-grid .g-item:nth-child(6) { transition-delay: .3s; }

/* Izboljšane reveal animacije – različni tipi */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Kartice se povečajo iz malega */
.svc-card.reveal, .stat-box.reveal {
    transform: translateY(20px) scale(.97);
}
.svc-card.reveal.visible, .stat-box.reveal.visible {
    transform: translateY(0) scale(1);
}


/* ── HERO PRODUKT KARTICE – POPRAVEK POZICIJ ──────────────── */
.hero-product {
    font-size: .8rem !important;
    padding: .7rem 1rem !important;
    border-radius: 14px !important;
    min-width: 140px;
}
.hero-product span.hp-icon { font-size: 1.5rem !important; }

/* Premakni kartice da ne pokrivajo besedila */
.hp-majica  { top: 5%;   left: -5%;  animation: hpFloat1 5s ease-in-out infinite; }
.hp-stamp   { top: 25%;  right: -8%; animation: hpFloat2 6s ease-in-out infinite .8s; }
.hp-gravir  { bottom: 25%; left: -5%; animation: hpFloat3 5.5s ease-in-out infinite 1.2s; }
.hp-dtf     { bottom: 5%;  right: -5%; animation: hpFloat1 6.5s ease-in-out infinite .4s; }

/* Na manjših ekranih skrij kartice */
@media (max-width: 1100px) {
    .hero-product { display: none !important; }
}