/* Novi sloj dizajna; style.css zadržava podršku za postojeće sadržajne stranice. */
:root{--cx-navy:#082e4a;--cx-blue:#007ba8;--cx-bright:#009fd8;--cx-paper:#f1f5f6;--cx-line:#dbe5e9;--cx-text:#304b5c}
html{scroll-behavior:smooth;scroll-padding-top:160px}.cx-site{background:#fff;color:var(--cx-text);font-family:Poppins,Arial,sans-serif;line-height:1.7}.cx-site h1,.cx-site h2,.cx-site h3{color:var(--cx-navy);line-height:1.2;letter-spacing:-.035em}.cx-site h1{font-size:clamp(2rem,3.8vw,3.8rem);font-weight:600}.cx-site h2{font-size:clamp(1.7rem,2.7vw,2.6rem)}.cx-site h3{font-size:1.22rem;letter-spacing:-.02em}.cx-site a{text-decoration:none}.cx-site a:hover{text-decoration:none}.cx-wrap{width:min(1280px,calc(100% - 80px));margin-inline:auto}.cx-section{padding:88px 0}.cx-soft{background:var(--cx-paper)}.cx-section-head{max-width:800px;margin-bottom:38px}.cx-eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--cx-blue);margin-bottom:17px}.cx-lead{font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.85;max-width:840px}.cx-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}.cx-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:15px 22px;border:1px solid var(--cx-blue);border-radius:3px;background:var(--cx-blue);color:white!important;font-weight:500;font-size:.86rem;line-height:1.5;transition:background .2s,transform .2s}.cx-button:hover{background:var(--cx-navy);border-color:var(--cx-navy);transform:translateY(-1px)}.cx-button-outline{background:transparent;color:var(--cx-navy)!important;border-color:#a6bac5}.cx-button-outline:hover{background:#e4eef2;color:var(--cx-navy)!important}.cx-textlink{display:inline-flex;align-items:center;gap:16px;font-size:.86rem;font-weight:600;color:var(--cx-blue);margin-top:auto}.cx-site :is(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #007ba8;outline-offset:4px}.cx-skip{position:fixed;top:-100px;left:20px;z-index:2000;background:white;padding:14px}.cx-skip:focus{top:10px}
.cx-header{position:sticky;top:0;z-index:1030;flex-shrink:0;background:white;box-shadow:0 2px 20px #082e4a0a}.cx-utility{background:#eef3f5;font-size:.72rem}.cx-utility>.cx-wrap{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:20px}.cx-utility nav{display:flex;gap:28px}.cx-header a{color:var(--cx-navy)}.cx-header a:hover,.cx-header a[aria-current]{color:var(--cx-blue)}.cx-header a[aria-current]{text-decoration:underline;text-underline-offset:7px}.cx-navrow{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:90px}.cx-logo img{object-fit:contain;max-width:160px}.cx-nav{display:flex;align-items:center;gap:26px;font-size:.86rem;font-weight:500}.cx-dropdown>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;padding:30px 0}.cx-dropdown>summary::-webkit-details-marker{display:none}.cx-dropdown>summary:after{content:'';height:6px;width:6px;border-bottom:1.5px solid;border-right:1.5px solid;transform:rotate(45deg)}.cx-dropdown[open]>summary{color:var(--cx-blue)}.cx-dropdown[open]>summary:after{transform:rotate(225deg)}.cx-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--cx-line);box-shadow:0 25px 30px #082e4a20;max-height:calc(100dvh - 135px);overflow:auto}.cx-mega-layout{display:grid;grid-template-columns:1fr 2.3fr;gap:55px;padding-block:38px}.cx-mega h2{font-size:2rem}.cx-mega p{font-size:.82rem;max-width:280px}.cx-mega ul{display:grid;grid-template-columns:1fr 1fr;list-style:none;margin:0;padding:0;gap:5px 34px}.cx-mega li a{display:block;padding:12px 0;border-bottom:1px solid #edf2f4}.cx-mobile-links,.cx-toggle{display:none}.cx-nav-cta{white-space:nowrap;padding:13px 18px;font-size:.8rem;background:var(--cx-blue);color:white!important}
.cx-home-hero{background:#edf3f5;overflow:hidden}.cx-home-hero .cx-wrap{display:grid;grid-template-columns:1.13fr 1fr;gap:50px;align-items:center;padding-block:68px}.cx-home-hero h1{font-size:clamp(2rem,3.15vw,3.1rem)}.cx-hero-photo{position:relative;margin:0;height:560px}.cx-hero-photo img{width:100%;height:100%;object-fit:cover;border-radius:3px}.cx-hero-photo figcaption{position:absolute;bottom:0;left:0;right:0;padding:25px;color:white;background:linear-gradient(transparent,#062435dd);font-size:.75rem}.cx-stats{background:var(--cx-navy);color:white;padding:38px 0 23px}.cx-stat-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr)}.cx-stat-grid>div{padding:0 25px;border-left:1px solid #ffffff30;display:flex;flex-direction:column}.cx-stat-grid>div:first-child{border:0;padding-left:0}.cx-stat-grid strong{font-size:clamp(1.8rem,3vw,3rem);font-weight:500;line-height:1.3;letter-spacing:-.045em}.cx-stat-grid span{font-size:.74rem;color:#c8dce7}.cx-stat-note{text-align:center;font-size:.7rem;letter-spacing:.06em;color:#b9d2df;margin:28px 0 0}.cx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.cx-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cx-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-card{padding:30px;border:1px solid var(--cx-line);background:white;display:flex;flex-direction:column;gap:15px;border-radius:4px}.cx-card h3,.cx-card p{margin:0}.cx-card p{font-size:.9rem}.cx-number{font-size:.68rem;color:var(--cx-blue);letter-spacing:.1em}.cx-flow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:0;margin:35px 0;list-style:none;gap:12px}.cx-flow li{position:relative;border-top:2px solid #bfd6df;padding-top:17px}.cx-flow li:not(:last-child):after{content:'→';position:absolute;right:-5px;top:-17px;background:var(--cx-paper);color:var(--cx-blue);padding:0 3px}.cx-flow a{color:var(--cx-navy);font-size:.85rem;font-weight:500;display:block}.cx-flow small{display:block;color:var(--cx-blue);margin-bottom:12px;font-size:.65rem}.cx-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}.cx-photo{width:100%;max-height:510px;object-fit:cover;border-radius:4px}.cx-caption{font-size:.72rem;margin-top:12px;color:#587382}.cx-brand{background:var(--cx-navy);color:#c9dce7;padding:42px}.cx-brand h3{font-size:2.4rem;color:white}.cx-brand .cx-textlink{color:#77d2f6}.cx-brand-alt{background:#e8f3f7;color:var(--cx-text)}.cx-brand-alt h3{color:var(--cx-navy)}.cx-brand-alt .cx-textlink{color:var(--cx-blue)}.cx-mini-products{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.cx-mini-products .cx-card{background:#f1f5f6}.cx-final{padding:65px 0;background:var(--cx-navy);color:#c9dce7}.cx-final h2{color:white}.cx-final .cx-eyebrow{color:#70d4f5}.cx-final .cx-button{justify-self:end;max-width:340px;background:#008fc3}.cx-final .cx-button:hover{background:#007ba8}.cx-page-hero{background:#edf3f5;padding:68px 0}.cx-page-hero h1{max-width:1000px}.cx-page-hero p:last-child{margin-bottom:0}.cx-section article[id]{scroll-margin-top:160px}.cx-service-row{display:grid;grid-template-columns:70px 1fr 1fr;gap:30px;border-top:1px solid var(--cx-line);padding:35px 0}.cx-service-row h2{font-size:1.7rem}.cx-service-row p{font-size:.95rem}.cx-list{padding-left:20px}.cx-list li{margin-block:12px}.cx-tag{display:inline-block;padding:5px 10px;background:#eaf1f4;color:#466473;border-radius:3px;font-size:.7rem}.cx-stores{display:flex;gap:15px;flex-wrap:wrap;margin-top:28px}.cx-store-disabled{padding:15px 23px;background:#e8eef1;border:1px solid #d4e0e6;color:#516c7b;border-radius:5px}.cx-footer{background:#06243a;color:#b8cdd9;padding:60px 0 0;font-size:.82rem}.cx-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:42px}.cx-footer h2{color:white;font-size:.9rem;letter-spacing:0;margin-bottom:20px}.cx-footer a{display:block;color:#d2e2eb;margin-bottom:10px}.cx-footer a:hover{color:white}.cx-footer img{object-fit:contain;margin-bottom:24px}.cx-footer p{margin-top:15px}.cx-footer-bottom{border-top:1px solid #ffffff1f;margin-top:45px;padding:22px 0;display:flex;justify-content:space-between;font-size:.7rem}.cx-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:32px;background:#fff;border:1px solid var(--cx-line);border-radius:5px}.cx-form label{display:block;font-size:.8rem;font-weight:500;margin-bottom:7px}.cx-form input,.cx-form select,.cx-form textarea{width:100%;border:1px solid #b4c7d1;border-radius:3px;padding:12px;background:#fff;color:var(--cx-navy);font:inherit;font-size:.9rem}.cx-form textarea{min-height:130px;resize:vertical}.cx-full{grid-column:1/-1}.cx-form .cx-honey{position:absolute;left:-9999px}.cx-form [type=checkbox]{width:auto;margin-right:10px}.cx-notice{padding:20px;background:#eaf3f7;border-left:3px solid var(--cx-blue);font-size:.9rem}.cx-error{background:#fff1ef;border-color:#bc3d2a}.cx-success{background:#edf8f1;border-color:#287b50}.cx-form button:disabled{opacity:.5;cursor:not-allowed}.cx-post-cover{background:#e8f1f5;padding:35px;font-size:2rem;color:var(--cx-navy)}.cx-post-body img{max-width:100%;height:auto}.cx-pager{display:flex;gap:15px;align-items:center;justify-content:center;margin-top:35px}.cx-legal-note{font-size:.77rem;color:#527081}
@media(max-width:1099px){html{scroll-padding-top:100px}.cx-wrap{width:calc(100% - 40px)}.cx-utility{display:none}.cx-navrow{min-height:78px;flex-wrap:wrap;gap:0}.cx-logo img{height:47px;width:140px}.cx-toggle{display:block;border:1px solid var(--cx-line);padding:9px 14px;background:white;border-radius:3px}.cx-nav{width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:25px;max-height:calc(100dvh - 78px);overflow:auto}.cx-enhanced .cx-nav{display:none}.cx-open .cx-nav{display:flex}.cx-nav>a:not(.cx-nav-cta),.cx-dropdown>summary{padding:15px 0;border-bottom:1px solid var(--cx-line)}.cx-dropdown>summary{justify-content:space-between}.cx-mega{position:static;box-shadow:none;max-height:none;overflow:visible;border:0;background:#f1f5f6}.cx-mega-layout{display:block;padding-block:16px}.cx-mega-layout>div{display:none}.cx-mega ul{display:block}.cx-mega li a{padding:11px 0}.cx-mobile-links{display:flex;flex-wrap:wrap;gap:17px;padding:23px 0}.cx-home-hero .cx-wrap{gap:30px}.cx-hero-photo{height:480px}.cx-grid-4{grid-template-columns:1fr 1fr}.cx-flow{grid-template-columns:repeat(4,1fr)}.cx-footer-grid{grid-template-columns:1fr 1fr}.cx-split{gap:35px}}
@media(max-width:700px){.cx-section{padding:55px 0}.cx-page-hero{padding:45px 0}.cx-home-hero .cx-wrap,.cx-split{grid-template-columns:1fr}.cx-home-hero .cx-wrap{padding-block:40px}.cx-hero-photo{height:320px}.cx-stat-grid{grid-template-columns:1fr 1fr;gap:26px 0}.cx-stat-grid>div{padding:0 15px}.cx-stat-grid>div:nth-child(3){border:0;padding-left:0}.cx-stat-grid strong{font-size:1.9rem}.cx-stat-grid span{font-size:.68rem}.cx-grid,.cx-grid-4,.cx-grid-2,.cx-mini-products{grid-template-columns:1fr}.cx-card{padding:26px}.cx-flow{grid-template-columns:repeat(2,1fr);gap:23px 18px}.cx-brand{padding:30px}.cx-final .cx-button{justify-self:start}.cx-service-row{grid-template-columns:35px 1fr;gap:15px}.cx-service-row>div:last-child{grid-column:2}.cx-footer-grid{gap:32px;grid-template-columns:1fr 1fr}.cx-footer-grid>div:first-child,.cx-footer-grid>div:last-child{grid-column:1/-1}.cx-footer-bottom{display:block}.cx-footer-bottom span{display:block;margin-top:10px}.cx-form{grid-template-columns:1fr;padding:23px}.cx-actions{align-items:stretch;flex-direction:column}.cx-actions a{text-align:center}.cx-flow li:nth-child(even):after{display:none}}
.cx-site .hero-section-dark{background:var(--cx-navy)}.cx-site .hero-section-dark :is(h1,h2,p){color:white}.cx-site .hero-section-light{background:#edf3f5}.cx-site .hero-section-light h1{color:var(--cx-navy)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cx-site *{transition:none!important}}

.cx-home-hero.cx-hero-slideshow {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 62vh;          /* bilo 70vh — sada manje kropa */
  display: flex;
  align-items: center;
  padding: 5rem 0;
}

.cx-home-hero.cx-hero-slideshow .cx-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cx-home-hero.cx-hero-slideshow .cx-hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;   /* može biti override-ovano inline stilom */
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  will-change: opacity;
}

.cx-home-hero.cx-hero-slideshow .cx-hero-bg-slide.is-active {
  opacity: 1;
}

/* Blaži overlay — slika se sada vidi, tekst ostaje čitljiv */
.cx-home-hero.cx-hero-slideshow .cx-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      100deg,
      rgba(8, 31, 51, 0.85) 0%,
      rgba(8, 31, 51, 0.6)  45%,
      rgba(8, 31, 51, 0.25) 100%
    ),
    linear-gradient(180deg, rgba(8, 31, 51, 0.35) 0%, transparent 40%);
}

.cx-home-hero.cx-hero-slideshow .cx-wrap {
  position: relative;
  z-index: 2;
}

.cx-home-hero.cx-hero-slideshow .cx-hero-inner {
  max-width: 680px;
}

.cx-home-hero.cx-hero-slideshow h1 {
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.22;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.cx-home-hero.cx-hero-slideshow .cx-eyebrow,
.cx-home-hero.cx-hero-slideshow .cx-lead {
  color: #fff;
}

.cx-home-hero.cx-hero-slideshow .cx-lead {
  font-size: 1.02rem;
  max-width: 58ch;
  opacity: 0.94;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.cx-home-hero.cx-hero-slideshow .cx-textlink {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 768px) {
  .cx-home-hero.cx-hero-slideshow {
    min-height: 56vh;
    padding: 3.5rem 0;
  }
  .cx-home-hero.cx-hero-slideshow .cx-hero-shade {
    background: rgba(8, 31, 51, 0.72);
  }
  .cx-home-hero.cx-hero-slideshow h1 {
    font-size: 1.55rem;
  }
}

/* ============================================
   CloudIT Journey — od papira do mobilnog pristupa
   ============================================ */
.cx-journey {
  position: relative;
  margin: 2rem 0 1rem;
  --cx-paper: #a86f24;
  --cx-amber: #d69a4a;
  --cx-mid:   #4a7ba8;
  --cx-deep:  #0a3a5c;
  --cx-cyan:  #22a5c8;
}

/* Horizontalna linija — nosilac vizualne priče */
.cx-journey-line {
  position: absolute;
  top: 66px;                 /* poravnato sa centrom čvorova */
  left: 6%;
  right: 6%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
      var(--cx-paper) 0%,
      var(--cx-amber) 14%,
      var(--cx-mid)   42%,
      var(--cx-deep)  72%,
      var(--cx-cyan)  100%);
  overflow: hidden;
  z-index: 0;
  opacity: 0.92;
}

/* Pulse koji putuje s lijeva na desno = dokument putuje kroz sistem */
.cx-journey-line > span {
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  animation: cxJourneyFlow 4s linear infinite;
}

@keyframes cxJourneyFlow {
  0%   { left: -35%; }
  100% { left: 100%; }
}

.cx-journey-steps {
  list-style: none;
  margin: 0;
  padding: 1.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.cx-jstep { text-align: center; }

.cx-jstep a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  padding: 0.5rem;
  border-radius: 14px;
  transition: transform 0.3s ease;
}
.cx-jstep a:hover { transform: translateY(-6px); }

.cx-jstep-node {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.55rem;
  background: linear-gradient(135deg, var(--cx-deep), var(--cx-mid));
  box-shadow: 0 0 0 6px #fff, 0 12px 24px rgba(8,31,51,0.18);
  z-index: 2;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.cx-jstep a:hover .cx-jstep-node {
  box-shadow: 0 0 0 6px #fff, 0 16px 32px rgba(8,31,51,0.30);
  transform: scale(1.05);
}

/* Broj kao mali badge u uglu čvora */
.cx-jstep-num {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #fff;
  color: var(--cx-deep);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(8,31,51,0.22);
  line-height: 1;
}

/* Boja po fazi — od papira do digitalnog */
.cx-jstep-paper  .cx-jstep-node { background: linear-gradient(135deg, #6e4a17, var(--cx-paper)); }
.cx-jstep-scan   .cx-jstep-node { background: linear-gradient(135deg, var(--cx-paper), var(--cx-amber)); }
.cx-jstep-system .cx-jstep-node { background: linear-gradient(135deg, var(--cx-mid), var(--cx-deep)); }
.cx-jstep-mobile .cx-jstep-node { background: linear-gradient(135deg, var(--cx-deep), var(--cx-cyan)); }

.cx-jstep-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cx-deep);
  line-height: 1.2;
}

.cx-jstep-desc {
  font-size: 0.78rem;
  color: #6b7785;
  line-height: 1.35;
  max-width: 16ch;
}

/* Tablet */
@media (max-width: 1024px) {
  .cx-journey-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 0.75rem;
  }
  .cx-journey-line { display: none; }
  .cx-jstep a {
    background: #fff;
    border: 1px solid #e3ebf3;
    padding: 1rem 0.75rem;
    box-shadow: 0 6px 16px rgba(8,31,51,0.06);
  }
  .cx-jstep-desc { max-width: none; }
}

/* Mobile */
@media (max-width: 640px) {
  .cx-journey-steps { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.5rem; }
  .cx-jstep-node { width: 60px; height: 60px; font-size: 1.25rem; }
  .cx-jstep-title { font-size: 0.85rem; }
  .cx-jstep-desc  { font-size: 0.72rem; }
}
/* Hero: tekst lijevo (default) */
.cx-home-hero.cx-hero-slideshow .cx-hero-inner {
  max-width: 680px;
  margin-right: auto;
  margin-left: 0;
  transition: margin 0.6s ease, transform 0.6s ease;
}

/* Hero: tekst desno — aktivira se kad je serversala aktivna */
.cx-home-hero.cx-hero-slideshow.cx-hero-align-right .cx-hero-inner {
  margin-left: auto;
  margin-right: 0;
}

/* Kad je tekst desno, gradijent se obrće — tamniji dio ide na desnu stranu */
.cx-home-hero.cx-hero-slideshow.cx-hero-align-right .cx-hero-shade {
  background:
    linear-gradient(
      260deg,                    /* obrnuto od 100deg */
      rgba(8, 31, 51, 0.85) 0%,
      rgba(8, 31, 51, 0.6)  45%,
      rgba(8, 31, 51, 0.25) 100%
    ),
    linear-gradient(180deg, rgba(8, 31, 51, 0.35) 0%, transparent 40%);
}

/* Mobilni: uvijek lijevo, bez obzira na sliku (čitljivost) */
@media (max-width: 768px) {
  .cx-home-hero.cx-hero-slideshow.cx-hero-align-right .cx-hero-inner {
    margin-left: 0;
    margin-right: auto;
  }
  .cx-home-hero.cx-hero-slideshow.cx-hero-align-right .cx-hero-shade {
    background: rgba(8, 31, 51, 0.72);
  }
}