/* Sanit M&M d.o.o. - stilovi
   Platformu izradio: Ivica Petrović / Web Solutions */

:root{
  --c-primary:#46608C;
  --c-primary-dark:#2E4165;
  --c-accent:#7B95C4;
  --c-cta:#E8A33D;
  --c-bg:#F7F9FC;
  --c-surface:#FFFFFF;
  --c-text:#1E2430;
  --c-text-muted:#5B6478;
  --c-border:#E4E9F2;
  --radius:18px;
  --shadow:0 10px 30px rgba(46,65,101,.12);
  --shadow-hover:0 20px 45px rgba(46,65,101,.22);
  --transition:.35s cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"]{
  --c-bg:#0F1420;
  --c-surface:#1A2233;
  --c-text:#EAF0FA;
  --c-text-muted:#98A3BD;
  --c-border:#2A3549;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --shadow-hover:0 20px 45px rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
svg{max-width:100%;max-height:100%;display:block}
.hero-3d .card3d, .cta-band .cta-icon-row span, .license-card .badge-icon { color:#fff!important; }
.hero-3d .card3d svg, .cta-band .cta-icon-row span svg, .license-card .badge-icon svg { color:#fff!important; stroke:currentColor; }
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  transition:background var(--transition),color var(--transition);
  position:relative;
}
h1,h2,h3,h4{font-family:'Zilla Slab','Georgia',serif;font-weight:700;line-height:1.15}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin-inline:auto}
.section{padding:88px 0}
.section-tag{color:var(--c-accent);text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700}
.section-title{font-size:clamp(28px,4vw,42px);margin-top:10px;margin-bottom:18px}
.section-lead{color:var(--c-text-muted);max-width:640px;font-size:17px}

/* ---------- Header ---------- */
.topbar{background:var(--c-primary-dark);color:#fff;font-size:13px;padding:8px 0}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.topbar a{color:#fff}
.topbar .duty{background:var(--c-cta);color:#28190a;padding:4px 12px;border-radius:20px;font-weight:700}

header.main-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--c-surface) 97%, transparent);
  border-bottom:1px solid var(--c-border);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0;position:relative}
.logo{display:flex;align-items:center;gap:10px;font-family:'Zilla Slab',serif;font-weight:700;font-size:22px;color:var(--c-primary-dark)}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--c-cta)}
nav.main-nav{display:flex;gap:28px;align-items:center}
nav.main-nav a{font-weight:600;font-size:15px;color:var(--c-text);position:relative;padding:6px 0}
nav.main-nav a:hover{color:var(--c-primary)}
.has-sub{position:relative}
.submenu{position:absolute;top:100%;left:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;box-shadow:var(--shadow);min-width:220px;padding:8px;display:none;z-index:10}
.has-sub:hover .submenu{display:block}
.submenu a{display:block;padding:10px 12px;border-radius:8px;font-weight:500}
.submenu a:hover{background:var(--c-bg)}
.nav-actions{display:flex;align-items:center;gap:14px}

/* ---------- Theme toggle - klizni prekidač sunce/mesec (umesto generičkog emoji dugmeta) ---------- */
.theme-toggle{
  position:relative;width:56px;height:30px;border-radius:20px;
  border:1px solid var(--c-border);background:linear-gradient(90deg,#cfe0ff,#eef3ff);
  cursor:pointer;padding:0;flex-shrink:0;transition:background .4s ease;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
}
[data-theme="dark"] .theme-toggle{background:linear-gradient(90deg,#1b2338,#2a3550)}
.theme-toggle .track-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 7px;opacity:.55;color:#5B6478}
.theme-toggle .track-icons span{width:12px;height:12px;display:inline-flex}
.theme-toggle .knob{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .35s ease;
}
.knob-icon{width:14px;height:14px;display:none;color:var(--c-cta)}
.knob-icon-sun{display:flex}
[data-theme="dark"] .theme-toggle .knob{transform:translateX(26px);background:#2E4165}
[data-theme="dark"] .knob-icon-sun{display:none}
[data-theme="dark"] .knob-icon-moon{display:flex;color:#cfe0ff}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--c-primary);color:#fff;
  padding:13px 26px;border-radius:50px;font-weight:700;font-size:14px;
  border:none;cursor:pointer;transition:var(--transition);
  box-shadow:0 8px 20px rgba(70,96,140,.35);
}
.btn:hover{background:var(--c-primary-dark);transform:translateY(-3px)}
.btn-cta{background:var(--c-cta);color:#28190a;box-shadow:0 8px 20px rgba(232,163,61,.4)}
.btn-cta:hover{background:#d4901f}

/* ---------- Mobilni hamburger dugme - animira se u X ---------- */
.burger{display:none;position:relative;width:38px;height:38px;background:none;border:none;cursor:pointer;flex-shrink:0}
.burger span{position:absolute;left:7px;width:24px;height:2.5px;background:var(--c-primary-dark);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:26px}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Mobilni off-canvas meni ---------- */
@media(max-width:960px){
  nav.main-nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(320px,85vw);
    background:var(--c-surface);box-shadow:-10px 0 40px rgba(0,0,0,.18);
    padding:90px 24px 24px;transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);
    z-index:200;overflow-y:auto;
  }
  nav.main-nav.open{transform:translateX(0)}
  .nav-close{
    position:absolute;top:18px;right:18px;width:38px;height:38px;
    border-radius:50%;border:1px solid var(--c-border);background:var(--c-bg);
    font-size:18px;color:var(--c-text);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  nav.main-nav a{padding:14px 4px;border-bottom:1px solid var(--c-border);font-size:16px}
  .has-sub{display:flex;flex-direction:column}
  .has-sub > a{display:flex;justify-content:space-between;align-items:center}
  .submenu{position:static;display:none;box-shadow:none;border:none;background:var(--c-bg);margin:4px 0 8px;padding:4px 0 4px 14px;min-width:0}
  .has-sub.open .submenu{display:block}
  .has-sub:hover .submenu{display:none} /* onemogući hover-otvaranje na dodirnim uređajima */
  .has-sub.open:hover .submenu{display:block}
  .submenu a{border-bottom:none;padding:10px 8px}
  .has-sub.open .sub-arrow{transform:rotate(180deg);display:inline-block;transition:transform .3s ease}
  .sub-arrow{display:inline-block;transition:transform .3s ease}
  .nav-overlay{display:none;position:fixed;inset:0;background:rgba(15,20,35,.45);z-index:150;opacity:0;transition:opacity .3s ease}
  .nav-overlay.open{display:block;opacity:1}
}
@media(min-width:961px){.nav-close{display:none}}
@media(min-width:961px){.nav-overlay{display:none!important}}

/* ---------- Hero (3D tilt) ---------- */
.hero{position:relative;padding:100px 0 60px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero-tag{color:var(--c-accent);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.hero h1{font-size:clamp(34px,5vw,58px);margin:14px 0 20px}
.hero h1 span{color:var(--c-primary)}
.hero p{color:var(--c-text-muted);font-size:18px;max-width:520px;margin-bottom:30px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:44px}
.hero-stats div b{font-size:26px;color:var(--c-primary-dark);display:block;font-family:'Zilla Slab',serif}
.hero-stats div span{color:var(--c-text-muted);font-size:13px}

.hero-3d{
  position:relative;height:440px;
  perspective:1400px;
  display:flex;align-items:center;justify-content:center;
}
.hero-3d .ring{position:absolute;border-radius:50%;border:2px solid var(--c-accent);opacity:.35}
.hero-3d .ring1{width:340px;height:340px;animation:spin 40s linear infinite}
.hero-3d .ring2{width:250px;height:250px;opacity:.55;animation:spin 28s linear infinite reverse}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero-3d .card3d{
  position:relative;width:76%;aspect-ratio:1/1;max-width:300px;
  background:linear-gradient(150deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);
  border-radius:32px;color:#fff;overflow:hidden;
  transform:rotateY(-14deg) rotateX(6deg);
  transform-style:preserve-3d;
  box-shadow:var(--shadow-hover);
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s ease;
  z-index:3;
}
.hero-3d:hover .card3d{transform:rotateY(-4deg) rotateX(2deg) scale(1.03)}
.hero-3d .card3d svg{width:55%!important;height:55%!important;opacity:.95}
.hero-3d .badge{
  position:absolute;z-index:4;
  padding:11px 16px;border-radius:18px;
  background:var(--c-surface);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:13px;color:var(--c-text);white-space:nowrap;
  animation:float 5s ease-in-out infinite;
  border:1px solid var(--c-border);
}
.hero-3d .badge .ic{font-size:20px;line-height:1}
.hero-3d .b1{top:4%;right:-2%;animation-delay:0s}
.hero-3d .b2{bottom:14%;left:-6%;animation-delay:1.6s}
.hero-3d .b3{bottom:-2%;right:10%;animation-delay:3.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:960px){
  .hero-3d{height:320px}
  .hero-3d .card3d{max-width:200px}
  .hero-3d .ring1{width:240px;height:240px}
  .hero-3d .ring2{width:175px;height:175px}
  .hero-3d .badge{padding:8px 12px;font-size:11px}
}

/* ---------- Kartice usluga ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:30px;
  transition:transform var(--transition),box-shadow var(--transition);
  transform-style:preserve-3d;
}
.card:hover{transform:translateY(-8px) rotateX(3deg);box-shadow:var(--shadow-hover)}
.card .icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--c-primary)}
.card .icon svg{width:100%;height:100%}
.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--c-text-muted);font-size:15px;margin-bottom:14px}
.card .more{font-weight:700;color:var(--c-primary);font-size:14px}

/* ---------- Koraci ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.step{position:relative;padding:30px 24px;background:var(--c-surface);border-radius:var(--radius);border:1px solid var(--c-border)}
.step .num{font-family:'Zilla Slab',serif;font-size:42px;color:var(--c-accent);opacity:.5;margin-bottom:10px}

/* ---------- Marquee reference (infinite scroll, pauzira, kreće na hover/drag) ---------- */
.marquee-wrap{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:50px;width:max-content;cursor:grab;user-select:none;animation:marqueeScroll linear infinite;animation-duration:var(--marquee-speed,30s)}
.marquee-track.dragging{animation-play-state:paused;cursor:grabbing}
.marquee-track a, .marquee-track .partner-logo{
  height:56px;width:120px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.marquee-track img{
  max-height:56px;max-width:120px;width:auto;height:auto;object-fit:contain;
  opacity:.65;filter:grayscale(1);transition:opacity .3s,filter .3s;
}
.marquee-track a:hover img, .marquee-track .partner-logo:hover img{opacity:1;filter:grayscale(0)}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[data-anim="off"] .marquee-track{animation:none}

/* ---------- Blog kartice ---------- */
.blog-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;transition:var(--transition)}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.blog-card .thumb{height:190px;background:linear-gradient(145deg,var(--c-accent),var(--c-primary))}
.blog-card .thumb img{height:100%;width:100%;object-fit:cover}
.blog-card .body{padding:22px}
.blog-card .cat{color:var(--c-cta);font-size:12px;font-weight:700;text-transform:uppercase}
.blog-card h3{font-size:18px;margin:10px 0}
.blog-card p{color:var(--c-text-muted);font-size:14px}

/* ---------- Forma ---------- */
.form-box{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow)}
.form-row{margin-bottom:18px}
.form-row label{display:block;font-weight:600;font-size:14px;margin-bottom:8px}
.form-row input, .form-row select, .form-row textarea{
  width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--c-border);
  background:var(--c-bg);color:var(--c-text);font-family:inherit;font-size:15px;
}
.form-row textarea{min-height:120px;resize:vertical}
.honeypot{position:absolute;left:-9999px;opacity:0}

/* ---------- Footer ---------- */
footer{background:var(--c-primary-dark);color:#dbe3f2;padding:70px 0 30px;margin-top:60px}
footer h4{color:#fff;font-size:16px;margin-bottom:16px}
footer a{color:#c3d0ea}
footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:34px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;color:#9fb0d1}
.footer-credit{color:#9fb0d1}
.footer-custom-content img{max-width:100%;border-radius:10px;margin-bottom:8px}
.footer-custom-content a{color:#dbe3f2;text-decoration:underline}
@media(min-width:640px){
  .footer-credit{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
}

/* ---------- Plutajuće dugme za poziv ---------- */
.call-button{
  position:fixed;bottom:26px;right:26px;z-index:200;
  display:flex;align-items:center;gap:10px;
  background:var(--c-cta);color:#28190a;
  padding:14px 20px 14px 16px;border-radius:50px;
  box-shadow:0 10px 26px rgba(232,163,61,.5);
  transition:var(--transition);
  font-weight:800;font-size:14px;white-space:nowrap;
}
.call-button .ring-icon{
  width:34px;height:34px;border-radius:50%;background:#28190a;color:var(--c-cta);
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;padding:8px;
  animation:ring 2.2s ease-in-out infinite;
}
@keyframes ring{0%,100%{transform:rotate(0)}5%{transform:rotate(-15deg)}10%{transform:rotate(15deg)}15%{transform:rotate(-10deg)}20%{transform:rotate(10deg)}25%{transform:rotate(0)}}
.call-button:hover{transform:scale(1.06);background:#d4901f}
@media(max-width:560px){.call-button span.txt{display:none}.call-button{padding:14px;border-radius:50%}}

/* ---------- Kontrola animacija (iz Admin > Podešavanja) ---------- */
html[data-anim="off"] *,
html[data-anim="off"] *::before,
html[data-anim="off"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-float="off"] .hero-3d .badge,
html[data-float="off"] .hero-3d .ring { animation: none !important; }
html[data-tilt="off"] .card:hover,
html[data-tilt="off"] .hero-3d .card3d { transform: none !important; }

html[data-anim-speed="slow"] { --transition: .6s cubic-bezier(.22,1,.36,1); }
html[data-anim-speed="fast"] { --transition: .18s cubic-bezier(.22,1,.36,1); }
html[data-anim-speed="slow"] .hero-3d .badge { animation-duration: 8s !important; }
html[data-anim-speed="fast"] .hero-3d .badge { animation-duration: 3s !important; }
html[data-anim-speed="slow"] .hero-3d .ring1 { animation-duration: 60s !important; }
html[data-anim-speed="fast"] .hero-3d .ring1 { animation-duration: 20s !important; }
html[data-anim-speed="slow"] .hero-3d .ring2 { animation-duration: 42s !important; }
html[data-anim-speed="fast"] .hero-3d .ring2 { animation-duration: 14s !important; }

/* Poštuje sistemsko podešavanje "smanjeno kretanje" - blaže, samo za dekorativne (ne-interaktivne) animacije */
@media (prefers-reduced-motion: reduce) {
  .hero-3d .badge, .hero-3d .ring, .hero-3d .ring1, .hero-3d .ring2 {
    animation: none !important;
  }
}
/* ---------- "O nama" sekcija na početnoj - vizuelizacija slična hero animaciji ---------- */
.about-grid{display:grid;grid-template-columns:1fr .8fr;gap:50px;align-items:center}
.about-3d{
  position:relative;height:340px;perspective:1300px;
  display:flex;align-items:center;justify-content:center;
}
.about-3d .ring{position:absolute;border-radius:50%;border:2px dashed var(--c-accent);opacity:.4}
.about-3d .ring1{width:270px;height:270px;animation:spin 34s linear infinite}
.about-3d .ring2{width:195px;height:195px;opacity:.6;animation:spin 22s linear infinite reverse}
.about-3d .core{
  position:relative;width:150px;height:150px;border-radius:50%;
  background:linear-gradient(150deg,var(--c-primary),var(--c-primary-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;
  box-shadow:var(--shadow-hover);z-index:3;text-align:center;line-height:1.2;font-size:15px;
  transform:rotateY(-10deg) rotateX(4deg);transition:transform .4s ease;
}
.about-3d:hover .core{transform:rotateY(-2deg) rotateX(1deg) scale(1.04)}
.about-3d .stat-chip{
  position:absolute;z-index:4;padding:10px 15px;border-radius:16px;
  background:var(--c-surface);box-shadow:var(--shadow);border:1px solid var(--c-border);
  font-weight:700;font-size:13px;color:var(--c-text);white-space:nowrap;
  animation:float 5.2s ease-in-out infinite;
}
.about-3d .s1{top:2%;left:-4%;animation-delay:0s}
.about-3d .s2{top:8%;right:-6%;animation-delay:1.3s}
.about-3d .s3{bottom:4%;left:2%;animation-delay:2.6s}
@media(max-width:960px){
  .about-grid{grid-template-columns:1fr}
  .about-3d{height:260px;order:-1}
  .about-3d .core{width:120px;height:120px;font-size:13px}
  .about-3d .ring1{width:210px;height:210px}
  .about-3d .ring2{width:150px;height:150px}
}

/* ---------- CTA sekcija (poziv na akciju) - animirana, upečatljiva ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:28px;
  background:linear-gradient(135deg,var(--c-primary-dark) 0%,var(--c-primary) 55%,var(--c-accent) 120%);
  background-size:200% 200%;
  animation:ctaGradient 10s ease infinite;
  padding:64px 40px;text-align:center;color:#fff;
  box-shadow:var(--shadow-hover);
  border:2px solid rgba(255,255,255,.35);
}
.cta-band .corner{
  position:absolute;width:34px;height:34px;border:3px solid rgba(255,255,255,.6);
  z-index:2;animation:cornerPulse 2.6s ease-in-out infinite;
}
.cta-band .corner-tl{top:16px;left:16px;border-right:none;border-bottom:none;border-top-left-radius:10px}
.cta-band .corner-tr{top:16px;right:16px;border-left:none;border-bottom:none;border-top-right-radius:10px;animation-delay:.3s}
.cta-band .corner-bl{bottom:16px;left:16px;border-right:none;border-top:none;border-bottom-left-radius:10px;animation-delay:.6s}
.cta-band .corner-br{bottom:16px;right:16px;border-left:none;border-top:none;border-bottom-right-radius:10px;animation-delay:.9s}
@keyframes cornerPulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes ctaGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.cta-band::before, .cta-band::after{
  content:'';position:absolute;border-radius:50%;
  background:rgba(255,255,255,.08);
  animation:ctaFloat 7s ease-in-out infinite;
}
.cta-band::before{width:260px;height:260px;top:-90px;left:-60px}
.cta-band::after{width:180px;height:180px;bottom:-70px;right:-30px;animation-delay:2s}
@keyframes ctaFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.06)}}
.cta-band .cta-icon-row{position:relative;z-index:2;display:flex;justify-content:center;gap:20px;margin-bottom:26px}
.cta-band .cta-icon-row span{
  width:68px;height:68px;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.22);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:34px;
  backdrop-filter:blur(4px);animation:ctaBob 3.4s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 10px 26px rgba(0,0,0,.25);
}
.cta-band .cta-icon-row span svg{width:60%!important;height:60%!important}
.cta-band .cta-icon-row span:nth-child(2){animation-delay:.4s}
.cta-band .cta-icon-row span:nth-child(3){animation-delay:.8s}
@keyframes ctaBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.08)}}
@media(max-width:600px){.cta-band .cta-icon-row span{width:50px;height:50px;font-size:24px;border-radius:16px}}
.cta-band h2{position:relative;z-index:2;font-size:clamp(24px,3.4vw,36px);margin-bottom:14px;color:#fff}
.cta-band p{position:relative;z-index:2;color:rgba(255,255,255,.88);font-size:16px;max-width:560px;margin:0 auto 30px}
.cta-band .cta-actions{position:relative;z-index:2;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta-pulse-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  background:#fff;color:var(--c-primary-dark);padding:16px 32px;border-radius:50px;
  font-weight:800;font-size:15px;box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition:transform .3s ease;
}
.cta-pulse-btn::after{
  content:'';position:absolute;inset:0;border-radius:50px;border:2px solid #fff;
  animation:ctaPulse 2.2s ease-out infinite;
}
@keyframes ctaPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.cta-pulse-btn:hover{transform:translateY(-3px) scale(1.03)}
.cta-outline-btn{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);
  color:#fff;padding:16px 28px;border-radius:50px;font-weight:700;font-size:15px;
  border:2px solid rgba(255,255,255,.5);transition:var(--transition);
}
.cta-outline-btn:hover{background:rgba(255,255,255,.22);border-color:#fff}
@media(max-width:600px){.cta-band{padding:44px 22px}}
html[data-anim="off"] .cta-band{animation:none}
html[data-anim="off"] .cta-band::before, html[data-anim="off"] .cta-band::after{animation:none}
html[data-anim="off"] .cta-band .cta-icon-row span{animation:none}
html[data-anim="off"] .cta-band .corner{animation:none}
html[data-anim="off"] .cta-pulse-btn::after{animation:none;display:none}
html[data-anim="off"] .about-3d .ring, html[data-anim="off"] .about-3d .stat-chip{animation:none}
/* Ulazne animacije - ČIST CSS, BEZ IKAKVE ZAVISNOSTI OD JAVASCRIPT-A.
   Prethodna verzija je čekala JavaScript (IntersectionObserver) da doda klasu
   koja otkriva sadržaj - ako JS iz bilo kog razloga ne bi uspeo da se izvrši na
   serveru (CSP, keš, blokada), tekst bi ostao trajno nevidljiv. Sada je početno
   stanje UVEK vidljivo (opacity:1); animacija je čista CSS @keyframes koja se
   pokreće automatski pri renderovanju stranice, bez ijedne linije JS koda -
   fizički nemoguće da tekst nestane bez obzira šta se dešava sa JavaScript-om. */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

.reveal, .reveal-scale, .reveal-left, .reveal-right, .reveal-stagger > *{opacity:1} /* uvek vidljivo, ovo je jedino pravilo koje važi kad su animacije isključene ili JS ne radi */

html[data-anim="on"] .reveal{animation:fadeUp .7s ease both}
html[data-anim="on"] .reveal-scale{animation:fadeScale .6s ease both}
html[data-anim="on"] .reveal-left{animation:fadeLeft .7s ease both}
html[data-anim="on"] .reveal-right{animation:fadeRight .7s ease both}
html[data-anim="on"] .reveal-stagger > *{animation:fadeUp .6s ease both}
html[data-anim="on"] .reveal-stagger > *:nth-child(1){animation-delay:.05s}
html[data-anim="on"] .reveal-stagger > *:nth-child(2){animation-delay:.15s}
html[data-anim="on"] .reveal-stagger > *:nth-child(3){animation-delay:.25s}
html[data-anim="on"] .reveal-stagger > *:nth-child(4){animation-delay:.35s}
html[data-anim="on"] .reveal-stagger > *:nth-child(5){animation-delay:.45s}
html[data-anim="on"] .reveal-stagger > *:nth-child(6){animation-delay:.55s}

/* Slikovite sekcije sa pozadinskom fotografijom */
.photo-banner{position:relative;border-radius:var(--radius);overflow:hidden;min-height:280px;display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.photo-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.photo-banner:hover img{transform:scale(1.06)}
.photo-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,50,0) 20%,rgba(15,20,35,.85) 100%)}
.photo-banner .caption{position:relative;z-index:2;padding:28px;color:#fff}
.photo-banner .caption h3{font-size:22px;margin-bottom:6px}
.photo-banner .caption p{color:#dbe3f2;font-size:14px}

.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.photo-grid .ph{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);transition:transform .4s ease}
.photo-grid .ph:hover{transform:translateY(-6px) scale(1.02)}
.photo-grid .ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:768px){.photo-grid{grid-template-columns:1fr}}

/* Licence / sertifikati - 3D flip kartice */
.license-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1200px}
.license-card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:28px;text-align:center;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease;
  transform-style:preserve-3d;
}
.license-card:hover{transform:rotateY(8deg) rotateX(4deg) translateY(-6px);box-shadow:var(--shadow-hover)}
.license-card .badge-icon{
  width:72px;height:72px;margin:0 auto 18px;border-radius:50%;overflow:hidden;padding:22px;
  background:linear-gradient(150deg,var(--c-accent),var(--c-primary));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;
  box-shadow:0 10px 24px rgba(70,96,140,.35);
}
.license-card h3{font-size:18px;margin-bottom:8px}
.license-card p{color:var(--c-text-muted);font-size:14px}
@media(max-width:900px){.license-grid{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start}
.map-cta-card{
  display:flex;align-items:center;gap:14px;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);transition:var(--transition);
}
.map-cta-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--c-primary)}
.map-cta-icon{width:32px;height:32px;flex-shrink:0;color:var(--c-primary);display:flex;align-items:center;justify-content:center}
.i-inline{display:inline-flex;width:16px;height:16px;vertical-align:-3px;margin-right:4px;color:var(--c-primary)}
.i-btn{display:inline-flex;width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.map-cta-card b{display:block;color:var(--c-text);font-size:15px}
.map-cta-card small{display:block;color:var(--c-text-muted);font-size:13px;margin-top:2px}
.map-cta-arrow{margin-left:auto;font-size:20px;color:var(--c-primary);flex-shrink:0}
@media(max-width:768px){
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .burger{display:block}
}
@media(max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}