body {margin:0;font-family:'Inter',sans-serif;background:#0b1228;color:#fff;}
.container{width:min(1100px,90%);margin:auto;}
.header{background:#091020;border-bottom:1px solid rgba(255,255,255,0.1);position:sticky;top:0;}
.nav{display:flex;justify-content:space-between;align-items:center;padding:12px 0;}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700;}
.menu a{margin:0 10px;text-decoration:none;color:#ddd;}
.menu a:hover{color:#fff;}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:600;}
.btn-primary{background:#21c07a;color:#06131a;}
.btn-ghost{background:rgba(255,255,255,0.15);color:#fff;}
.hero{position:relative;text-align:left;padding:120px 0;}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);z-index:0;}
.hero-inner{position:relative;z-index:1;}
.hero h1{font-size:2.5rem;margin-bottom:10px;}
.tagline{color:#bfc8da;margin-bottom:20px;}
.bullets{display:flex;gap:15px;list-style:none;padding:0;color:#bfc8da;}
.section{padding:60px 0;}
.section.light{background:#f5f7fb;color:#06131a;}
.section.light .section-lead{color:#333;}
.section h2{font-size:2rem;margin-bottom:10px;}
.section-lead{color:#bfc8da;margin-bottom:30px;}
.service-grid,.product-grid,.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.service,.card,.about-card{background:#111a35;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);}
.section.light .service,.section.light .about-card,.section.light .card{background:#fff;border:1px solid #d5d8e0;color:#06131a;}
.service img,.card img,.about-card img{width:100%;height:220px;object-fit:cover;}
.body,.pad{padding:16px;}
.input,.textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #ccc;font-family:inherit;}
.btn-send{padding:10px 20px;background:#21c07a;border:0;border-radius:8px;color:#06131a;font-weight:700;}
.notice{margin-top:8px;font-size:14px;color:#444;}
.footer{background:#090f20;text-align:center;padding:20px 0;color:#bfc8da;}

/* Enhanced product images */
.card img {
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  background: #fff;
}

/* Header logo styling */
.header .brand img {
  height: 60px;
  width: auto;
  display: block;
  margin: 0 auto;
}
.header .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}


/* === Color scheme overrides (2025-10-24) === */
:root{
  --bluegray:#d6dee8;
  --text-dark:#06131a;
  --white:#ffffff;
}

/* Header & Footer to blue-gray */
.header, .footer{
  background:var(--bluegray) !important;
  color:var(--text-dark) !important;
}

/* Header links/brand */
.header .brand,
.header .menu a{
  color:var(--text-dark) !important;
}
.header .menu a:hover{
  color:#000 !important;
}

/* Footer links */
.footer a{
  color:var(--text-dark) !important;
}

/* Section backgrounds per user spec */
#about{
  background:var(--white) !important;
  color:var(--text-dark) !important;
}
#services{
  background:var(--bluegray) !important;
  color:var(--text-dark) !important;
}
#products{
  background:var(--white) !important;
  color:var(--text-dark) !important;
}
#contact{
  background:var(--bluegray) !important;
  color:var(--text-dark) !important;
}

/* Utility: ensure cards keep readable contrast if they relied on dark bg */
.section .card{
  background: #ffffff;
  color: var(--text-dark);
}


/* Ensure header/logo seamless blend */
.header .brand img{display:block;height:60px;width:auto;background:#d6dee8}
@media (max-width:640px){.header .brand img{height:50px}}


/* === Readability update for Services cards === */
#services .card .card-body,
#services .service-card .card-body,
#services .feature .card-body,
#services .card .content,
#services .service-card .content,
#services .feature .content,
#services .card .text,
#services .service-card .text,
#services .feature .text,
#services .card .info,
#services .service-card .info,
#services .feature .info,
#services .card .details,
#services .service-card .details,
#services .feature .details,
#services .card--white {
  background:#ffffff !important;
  color:#000000 !important;
  border-radius:20px;
}

/* Remove unwanted dark overlays if present */
#services .card .overlay,
#services .service-card .overlay,
#services .feature .overlay{
  background:transparent !important;
}

/* Ensure inner headings and paragraphs inherit correct text color */
#services .card--white h3,
#services .card--white p,
#services .card--white li{
  color:#000000 !important;
}


/* === Services readability: white text panels === */
#services .service .body{
  background:#ffffff !important;
  color:#000000 !important;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}
#services .service h3,
#services .service p{color:#000000 !important;}


/* === Services fixes (readability & white panels) === */
#services .section-lead{
  color:#000000 !important;
  opacity:1 !important;
}

/* Make the entire service card white (no dark background peeking) */
#services .service{
  background:#ffffff !important;
  color:#000000 !important;
  border:1px solid #d5d8e0 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Remove any decorative dark bars/overlays */
#services .service::after,
#services .service .overlay{
  content:none !important;
  background:transparent !important;
}

/* Image stays on top; body is white with a subtle divider */
#services .service img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  background:#ffffff;
}

#services .service .body{
  background:#ffffff !important;
  color:#000000 !important;
  border-top:1px solid #e6e8ee;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}

#services .service .body h3,
#services .service .body p{
  color:#000000 !important;
}


/* === Styling update: "O nama" and "Proizvodi" text boxes background === */
#about .about-card .body,
#about .about-card .pad,
#about .about-grid .about-card .body,
#products .card .body,
#products .card .pad {
  background:#d6dee8 !important;
  color:#000000 !important;
}
#about .about-card h3,
#about .about-card p,
#products .card h3,
#products .card p {
  color:#000000 !important;
}


/* === Card edge fix: make parent card match panel color & remove bottom strip === */

/* PRODUCTS & ABOUT: make whole card background #d6dee8 so rounded corners don't reveal white */
#products .card{
  background:#d6dee8 !important;
  border-color:#cfd6df !important;
  overflow:hidden !important;
}
#about .about-card{
  background:#d6dee8 !important;
  border-color:#cfd6df !important;
  overflow:hidden !important;
}

/* The panel area keeps same color; remove unintended margins that cause gaps */
#products .card .body,
#about .about-card .body,
#products .card .pad,
#about .about-card .pad{
  background:#d6dee8 !important;
  color:#000 !important;
  margin:0 !important;
  padding:16px;
}

/* SERVICES: ensure no dark/white bar at the bottom */
#services .service{
  background:#ffffff !important;
  border-color:#d5d8e0 !important;
  overflow:hidden !important;
}
#services .service .body{
  background:#ffffff !important;
  color:#000 !important;
  margin:0 !important;
}
#services .service::after{ content:none !important; }
/* Ensure images fill width without gaps */
#services .service img,
#products .card img,
#about .about-card img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
}


/* === Header logo update: larger proportional centered logo === */
.header .brand img{
  height:88px !important; /* increased from ~60px */
  width:auto !important;
  display:block;
  margin:0 auto;
}
@media (max-width:640px){
  .header .brand img{height:72px !important;}
}


/* === Header nav outlined pills (match hero .btn-primary) === */
.header .menu a{
  display:inline-block;
  padding:8px 14px;
  border:2px solid #21c07a;
  border-radius:9999px;
  text-decoration:none;
  font-weight:600;
  color:#06131a !important;
  background:transparent;
  line-height:1;
}
.header .menu a + a{ margin-left:12px; }
.header .menu a:hover{
  background:#21c07a;
  color:#06131a !important;
}


/* === Header refinement: reduced height & larger logo === */
.header{
  padding-top:6px !important;
  padding-bottom:6px !important;
}
.header .nav{
  padding-top:4px !important;
  padding-bottom:4px !important;
}
.header .brand img{
  height:110px !important; /* previously ~88px */
  width:auto !important;
  display:block;
  margin:0 auto;
}
@media (max-width:640px){
  .header .brand img{height:90px !important;}
}

/* === FINAL FIX: Exact 90px Header and Logo (v25) === */
header.site-header, .site-header, header#site-header {
  height: 90px !important;
  min-height: 90px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.site-header *, header.site-header * {
  line-height: 0 !important;
}
.site-header .logo, header .logo, .header-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.site-header .logo img, header .logo img, .header-logo img, img.site-logo {
  height: 90px !important;
  max-height: 90px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* === V26: Header computed height EXACT 90px; logo follows header height === */
header.site-header, .site-header, header#site-header {
  height: 90px !important;           /* exact height */
  min-height: 90px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;        /* prevent overflow from children */
}
/* Ensure inner wrappers don't add extra height */
header.site-header .container, .site-header .container, header.site-header .inner, .site-header .inner {
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}
/* Logo block positioning */
.site-header .logo, header .logo, .header-logo {
  height: 100% !important;           /* fill header */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* left align by default */
  margin: 0 !important;
  padding: 0 !important;
}
/* Image follows header height exactly */
.site-header .logo img, header .logo img, .header-logo img, img.site-logo {
  height: 100% !important;           /* = 90px via header */
  max-height: 100% !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  vertical-align: middle !important;
}
/* Neutralize stray line-height on inline elements inside header */
header.site-header *, .site-header * {
  line-height: 1 !important;
}
/* Avoid collapsing margins from next sections */
header.site-header { border-bottom: 0.01px solid transparent !important; }

/* === Center nav links while keeping logo left === */
.container.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}

.menu{
  display:flex;
  justify-self:center;
  gap:16px;
}

.menu a{
  margin:0; /* gap handles spacing */
}

/* Responsive: keep things clean on small screens */
@media (max-width: 720px){
  .container.nav{
    grid-template-columns:1fr;
    row-gap:8px;
  }
  .brand{
    justify-self:start;
  }
  .menu{
    justify-self:start; /* or center if preferred */
    flex-wrap:wrap;
    gap:12px;
  }
}

/* === HERO TEXT ANIMATION === */
.hero-copy h1{
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  display:inline-block;
  animation: heroFadeIn 700ms ease-out both;
  /* gradient text shimmer (subtle) */
  background: linear-gradient(90deg, #ffffff, #b7e9d2, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation-name: heroFadeIn, heroShimmer;
  animation-duration: 700ms, 4s;
  animation-timing-function: ease-out, linear;
  animation-iteration-count: 1, infinite;
}

.hero-copy .tagline{
  opacity:0;
  animation: heroFadeUp 800ms 200ms ease-out both;
}

.hero-copy .actions{
  opacity:0;
  animation: heroFadeUp 800ms 380ms ease-out both;
}

.hero-copy .bullets li{
  opacity:0;
  transform: translateY(8px);
}
.hero-copy .bullets li:nth-child(1){ animation: heroFadeUp 700ms 500ms ease-out both; }
.hero-copy .bullets li:nth-child(2){ animation: heroFadeUp 700ms 650ms ease-out both; }
.hero-copy .bullets li:nth-child(3){ animation: heroFadeUp 700ms 800ms ease-out both; }

@keyframes heroFadeIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes heroFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes heroShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: 0% 0; }
}

/* Optional: prevent layout shift while typing */
.hero-copy h1, .hero-copy .tagline{
  will-change: contents, transform, opacity;
}