:root{
  --erp-primary: #2563eb;
  --erp-primary-soft: #e5edff;
  --erp-dark: #0f172a;
  --erp-accent: #22c55e;

  /* TYPO */
  --font-sans: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-brand: "Poppins", system-ui,-apple-system,"Segoe UI",sans-serif;

  --text: #0f172a;
  --muted: #4b5563;
  --brand-ink: #222288;

  --lh-body: 1.55;
  --lh-head: 1.15;
}

html, body{ overflow-x:hidden; }
section, header{ overflow-x:hidden; }


body{
  font-family: var(--font-sans);
  line-height: var(--lh-body);
  color: var(--text);
  background: radial-gradient(circle at top,#e5edff 0,#f9fafb 45%,#eef2ff 100%);
  scroll-behavior:smooth;
}

/* Brand (erpify riječ, logotip u tekstu) */
.brand{
  font-family: var(--font-brand);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--brand-ink);
}

/* Naslovi */
h1,h2,h3,.display-5,.h1,.h2,.h3{
  line-height: var(--lh-head);
}

/* sekundarni tekst */
.text-secondary{ color: var(--muted) !important; }

		

    /* NAVBAR – svijetla kao 1URED/HGK */
    .navbar{
      background: rgba(248,250,252,0.96);
      backdrop-filter: blur(14px);
      box-shadow:0 1px 0 rgba(148,163,184,0.35);
    }
    .navbar .nav-link{
      font-size:.9rem;
      color:#4b5563;
    }
    .navbar .nav-link:hover,
    .navbar .nav-link:focus{
      color:#111827;
    }

    .logo-dot{
      width:10px;height:10px;border-radius:50%;
      background:linear-gradient(135deg,var(--erp-primary),var(--erp-accent));
      box-shadow:0 0 10px rgba(37,99,235,0.7);
    }

    header.hero{
      display:flex;
      align-items:center;
      position:relative;
      *padding-top:5rem;
      padding-bottom:4rem;
      overflow:hidden;
    }

    /* nježna plava mrlja kao pozadina */
    .hero-bg-orbit{
      position:absolute;
      width:520px;height:520px;
      right:-120px;top:-80px;
      border-radius:50%;
      background:
        radial-gradient(circle at 30% 30%,rgba(37,99,235,0.32),transparent 65%),
        radial-gradient(circle at 70% 70%,rgba(56,189,248,0.22),transparent 60%);
      opacity:.85;
      filter:blur(4px);
      z-index:-1;
      animation:slowShift 26s ease-in-out infinite alternate;
    }

    @keyframes slowShift{
      0%{ transform:translate3d(0,0,0) scale(1); }
      100%{ transform:translate3d(-18px,16px,0) scale(1.05); }
    }

    .hero-grid{
      display:none; /* na light temi nam nije potreban */
    }

    .badge-pill{
      border-radius:999px;
      padding:.35rem .9rem;
      background:#eef2ff;
      border:1px solid rgba(129,140,248,0.7);
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-size:.8rem;
      color:#1f2937;
    }

    .btn-ghost{
      border-radius:999px;
      border:1px solid rgba(148,163,184,.7);
      background:#ffffff;
      color:#111827;
    }
    .btn-ghost:hover{
      background:var(--erp-primary-soft);
      border-color:#2563eb;
      color:#111827;
    }

    /* KARTICE – svijetle, “HGK stil” */
    .erp-card{
      border-radius:1.4rem;
      border:1px solid rgba(148,163,184,.4);
      background:#ffffff;
      box-shadow:0 18px 50px rgba(148,163,184,.28);
      transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .erp-card:hover{
      transform:translateY(-5px);
      box-shadow:0 26px 70px rgba(148,163,184,.32);
      border-color:#2563eb;
    }

    /* da “text-white” unutar kartica ne bude bijeli na bijelo :) */
    .erp-card .text-white{
      color:#111827 !important;
    }

    .chip{
      font-size:.72rem;
      border-radius:999px;
      padding:.25rem .6rem;
      border:1px solid rgba(148,163,184,.5);
      background:#f9fafb;
      color:#111827;
    }

    .section-label{
      text-transform:uppercase;
      letter-spacing:.16em;
      font-size:.75rem;
      color:#6b7280;
    }

    /* on-scroll animacije */
    [data-animate]{
      opacity:0;
      transform:translateY(24px);
      transition:opacity .7s ease, transform .7s ease;
    }
    [data-animate].show{
      opacity:1;
      transform:translateY(0);
    }
    [data-animate="right"]{
      transform:translateX(26px);
    }
    [data-animate="right"].show{
      transform:translateX(0);
    }
    [data-animate="left"]{
      transform:translateX(-26px);
    }
    [data-animate="left"].show{
      transform:translateX(0);
    }

    .timeline-line{
      position:absolute;
      left:0.95rem;
      top:.3rem;
      bottom:.3rem;
      border-left:1px dashed rgba(148,163,184,0.7);
    }
    .timeline-dot{
      width:.85rem;height:.85rem;border-radius:50%;
      background:linear-gradient(135deg,#2563eb,#22c55e);
      box-shadow:0 0 10px rgba(37,99,235,0.7);
    }

    .stat-number{
      font-size:2.4rem;
      font-weight:700;
      letter-spacing:.03em;
    }

    footer{
      border-top:1px solid rgba(148,163,184,.6);
      background:#0f172a;
      color:#9ca3af;
    }



			/* testimonials / use cases slider */
			.usecase-card{
			  border-radius:1.1rem;
			  border:1px solid rgba(148,163,184,0.4);
			  background:#f9fafb;
			  padding:1.2rem;
			}
			.usecase-pill{
			  font-size:.75rem;
			  border-radius:999px;
			  padding:.25rem .6rem;
			  background:#e5e7eb;
			}

			/* animacije na scroll */
			[data-anim]{
			  opacity:0;
			  transform:translateY(24px);
			  transition:opacity .7s ease, transform .7s ease;
			}
			[data-anim].visible{
			  opacity:1;
			  transform:translateY(0);
			}

			[data-anim="fade-left"]{
			  transform:translateX(-26px);
			}
			[data-anim="fade-right"]{
			  transform:translateX(26px);
			}
			[data-anim="fade-left"].visible,
			[data-anim="fade-right"].visible{
			  transform:translateX(0);
			}


		/* ====== ERPIFY WHEEL ====== */

		.erpify-wheel{
		  position:relative;
		  width:min(500px, 90vw);
		  aspect-ratio:1;
		  border-radius:50%;
		  margin-top:0.5rem;
		  margin-bottom:0.5rem;
		}

		/* Centralni krug */
		.wheel-center{
		  position:absolute;
		  top:50%;left:50%;
		  transform:translate(-50%,-50%);
		  width:24%;
		  aspect-ratio:1;
		  border-radius:50%;
		  background:#ffffff;
		  box-shadow:0 0 0 12px #eef2ff, 0 18px 40px rgba(148,163,184,.35);
		  display:flex;
		  align-items:center;
		  justify-content:center;
		  z-index:2;
		}

		.wheel-center-inner{
		  text-align:center;
		}

		/* PRSTEN KOJI SE ROTIRA */
		.wheel-orbit{
		  position:absolute;
		  inset:0;
		  transform-origin:50% 50%;
		  animation:wheel-rotate 60s linear infinite;
		  z-index:1;
		}

		/* Slot – drži poziciju kartice oko kruga */
		.wheel-slot{
		  position:absolute;
		  display:flex;
		  align-items:center;
		  justify-content:center;
		}

		/* kartica unutar slota – vizual + kontra-rotacija da ostane uspravna */
		.wheel-item{
		  width:120px;
		  height:120px;
		  padding:.65rem .7rem;
		  border-radius:50%;
		  background:#ffffff;
		  box-shadow:0 10px 30px rgba(148,163,184,.3);
		  border:1px solid rgba(15,23,42,0.06);
		  text-align:center;
		  color:#0f172a;
		  display:flex;
		  flex-direction:column;
		  align-items:center;
		  justify-content:center;
		  cursor:pointer;
		  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
		  transform-origin:center;
		  animation:wheel-rotate-counter 60s linear infinite;
		}

		.wheel-item i{
		  display:block;
		}


		.tiny-text{
		  font-size:.72rem;
		  color:#4b5563;
		}
		
		
		/* Pozicije oko kruga – simetričnije */


		.wheel-slot.pos-top{
		  top:11%;
		  left:50%;
		  transform:translateX(-50%);
		}

		.wheel-slot.pos-top-right{
		  top:11%;
		  right:11%;
		}


		.wheel-slot.pos-right{
		  top:50%;
		  right:11%;
		  transform:translateY(-50%);
		}

		.wheel-slot.pos-bottom-right{
		  bottom:11%;
		  right:11%;
		}

		.wheel-slot.pos-bottom{
		  bottom:11%;
		  left:50%;
		  transform:translateX(-50%);
		}

		.wheel-slot.pos-bottom-left{
		  bottom:11%;
		  left:11%;
		}

		.wheel-slot.pos-left{
		  top:50%;
		  left:11%;
		  transform:translateY(-50%);
		}

		.wheel-slot.pos-top-left{
		  top:11%;
		  left:11%;
		}  
		
		
		.module-circle{
		  width: 100%;
		  aspect-ratio: 1;
		  border-radius: 50%;
		  border: 1px solid rgba(148,163,184,.45);
		  background: #fff;
		  box-shadow: 0 12px 34px rgba(148,163,184,.22);
		  display:flex;
		  flex-direction:column;
		  align-items:center;
		  justify-content:center;
		  text-align:center;
		  padding: .9rem;
		  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
		}

		.module-circle:hover{
		  transform: translateY(-3px);
		  border-color: var(--erp-primary);
		  box-shadow: 0 18px 46px rgba(37,99,235,.18);
		}

		.module-circle .code{
		  font-size:.75rem;
		  opacity:.75;
		  margin-bottom:.25rem;
		}

		.module-circle .title{
		  font-weight: 700;
		  font-size: .95rem;
		  line-height: 1.1;
		}

		.module-circle i{
		  font-size: 1.6rem;
		  margin-bottom: .35rem;
		  color: var(--erp-primary);
		}

		@media (max-width: 576px){
		  .module-circle .title{ font-size: .85rem; }
		  .module-circle i{ font-size: 1.35rem; }
		}
				


		/* Hover bez podizanja iz kruga – samo malo povećanje */
		.wheel-item:hover,
		.wheel-item:focus-visible,
		.wheel-item.active{
		  border-color:#2563eb;
		  box-shadow:0 18px 40px rgba(37,99,235,.35);
		  transform:scale(1.03);      /* umjesto translateY(-2px) */
		  outline:none;
		}


		/* Blage boje po modulima */
		.bg-sales{
		  background:linear-gradient(135deg,#bbf7d0,#ecfdf5);
		}
		.bg-finance{
		  background:linear-gradient(135deg,#bfdbfe,#eff6ff);
		}
		.bg-stock{
		  background:linear-gradient(135deg,#fde68a,#fffbeb);
		}
		.bg-services{
		  background:linear-gradient(135deg,#fed7aa,#fff7ed);
		}
		.bg-hr{
		  background:linear-gradient(135deg,#fecaca,#fef2f2);
		}
		.bg-production{
		  background:linear-gradient(135deg,#ddd6fe,#f5f3ff);
		}
		.bg-asset{
		  background:linear-gradient(135deg,#bae6fd,#e0f2fe);
		}
		.bg-bi{
		  background:linear-gradient(135deg,#e5e7eb,#f9fafb);
		}

		/* ROTACIJA – prsten ide u +360°, kartice u -360° → tekst ostaje uspravan */
		@keyframes wheel-rotate{
		  from { transform:rotate(0deg); }
		  to   { transform:rotate(360deg); }
		}

		@keyframes wheel-rotate-counter{
		  from { transform:rotate(0deg); }
		  to   { transform:rotate(-360deg); }
		}

		/* pauza na hover cijelog kotača */
		.erpify-wheel:hover .wheel-orbit,
		.erpify-wheel:hover .wheel-item{
		  animation-play-state:paused;
		}

			/* Malo responsivnosti na mobitelima */
			@media (max-width: 476px){


				.wheel-slot.pos-top{
				  top:2%;
				  left:50%;
				  transform:translateX(-50%);
				}

				.wheel-slot.pos-top-right{
				  top:14%;
				  right:12%;
				}


				.wheel-slot.pos-right{
				  top:50%;
				  right:2%;
				  transform:translateY(-50%);
				}

				.wheel-slot.pos-bottom-right{
				  bottom:14%;
				  right:12%;
				}

				.wheel-slot.pos-bottom{
				  bottom:2%;
				  left:50%;
				  transform:translateX(-50%);
				}

				.wheel-slot.pos-bottom-left{
				  bottom:14%;
				  left:12%;
				}

				.wheel-slot.pos-left{
				  top:50%;
				  left:2%;
				  transform:translateY(-50%);
				}

				.wheel-slot.pos-top-left{
				  top:14%;
				  left:12%;
				}  
			}
			


@media (max-width:576px){
  [data-animate="left"], [data-animate="left"]{ transform: translateY(12px) scale(.99) !important; }
}

/* Back to top */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 8px;
  z-index: 9999;

  width: 52px;
  height: 52px;
  border-radius: 999px;

  border: 1px solid rgba(148,163,184,.65);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);

  box-shadow: 0 16px 40px rgba(15,23,42,.14);
  color: #111827;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.to-top i{ font-size: 1.25rem; }

.to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.to-top:hover{
  border-color: var(--erp-primary);
  box-shadow: 0 18px 46px rgba(37,99,235,.22);
}

.to-top:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 18px 46px rgba(37,99,235,.22);
}

@media (max-width:576px){
  .to-top{ right: 12px; bottom: 12px; width: 46px; height: 46px; }
}


[data-animate]{
  opacity:0;
  transform: translate3d(0,12px,0);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}

[data-animate="left"]{ transform: translate3d(-16px,0,0); }
[data-animate="right"]{ transform: translate3d(16px,0,0); }
[data-animate="top"]{ transform: translate3d(0,16px,0); }

.is-inview{
  opacity:1;
  transform: translate3d(0,0,0);
}