:root {
    /* Svetla paleta, boje uzete iz mokapa (dizajn/dizajn.png).
       Imena promenljivih su zadržana da se ne dira ostatak CSS-a:
       --black je sada pozadina stranice, --white je boja teksta. */
    --black: #f5f7f7;      /* pozadina stranice i sekcija */
    --dark: #ffffff;       /* izdignute površine */
    --card: #ffffff;       /* kartice */
    --border: #e3e9e9;     /* linije i okviri */
    --green: #109058;      /* akcent iz mokapa */
    --green-dim: #0e7f4e;
    --green-deep: #0b6b41;
    --green-glow: rgba(16,144,88,0.12);
    --accent: #0e7f4e;
    --white: #0a1a2f;      /* osnovna boja teksta */
    --muted: #3a4850;      /* prigušen tekst */
    --orange: #d97316;
    --future: #5b63d3;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--black);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
    cursor: auto;
  }

  /* Cursor — hide on touch */
  @media (hover: none) { .cursor, .cursor-ring { display: none !important; } body { cursor: auto; } }
  .cursor {
    position: fixed; width: 10px; height: 10px;
    background: var(--green); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transition: transform 0.15s ease, opacity 0.3s;
    transform: translate(-50%, -50%);
  }
  .cursor-ring {
    position: fixed; width: 34px; height: 34px;
    border: 1.5px solid rgba(16,144,88,0.35); border-radius: 50%;
    pointer-events: none; z-index: 9998;
    transition: transform 0.35s ease, width 0.2s, height 0.2s;
    transform: translate(-50%, -50%);
  }

  /* Noise */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 9997; opacity: 0.5;
  }

  /* ======= NAV ======= */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 52px;
    background: rgba(245,247,247,0.88); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
  }
  .logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.75rem; letter-spacing: 2px;
    color: var(--white); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  .logo-leaf {
    width: 28px; height: 28px;
    background: var(--green); border-radius: 50% 4px 50% 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; flex-shrink: 0;
  }
  .logo em { color: var(--green); font-style: normal; }
  .nav-links { display: flex; gap: 32px; list-style: none; }
  .nav-links a {
    color: var(--muted); text-decoration: none;
    font-size: 0.82rem; font-weight: 500;
    letter-spacing: 1.4px; text-transform: uppercase;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--white); }
  .nav-cta {
    background: var(--green); color: var(--black);
    padding: 9px 24px; font-weight: 700;
    font-size: 0.8rem; letter-spacing: 1.5px;
    text-transform: uppercase; text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s, transform 0.15s;
  }
  .nav-cta:hover { background: var(--accent); transform: translateY(-1px); }
  .hamburger {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 4px;
  }
  .hamburger span { width: 24px; height: 2px; background: var(--white); display: block; transition: all 0.3s; }
  .mobile-menu {
    display: none; position: fixed; top: 65px; left: 0; right: 0;
    background: rgba(245,247,247,0.97); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border); z-index: 199;
    padding: 20px 28px; flex-direction: column; gap: 0;
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    color: var(--muted); text-decoration: none; font-size: 0.9rem;
    font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 14px 0; border-bottom: 1px solid var(--border);
    transition: color 0.2s;
  }
  .mobile-menu a:hover { color: var(--green); }
  .mobile-menu .mob-cta {
    background: var(--green); color: var(--black);
    text-align: center; margin-top: 14px; border-radius: 2px;
    border-bottom: none; font-weight: 700; padding: 14px 0;
  }

  /* ======= HERO ======= */
  #hero {
    min-height: 100vh;
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; padding: 100px 52px 60px;
    position: relative; overflow: hidden;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 55% 65% at 70% 50%, rgba(16,144,88,0.07) 0%, transparent 70%),
      radial-gradient(ellipse 35% 45% at 15% 85%, rgba(16,144,88,0.04) 0%, transparent 60%);
  }
  .hero-content { position: relative; z-index: 2; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.25} }

  h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(3.6rem, 7.5vw, 7rem);
    line-height: 0.92; letter-spacing: 2px; margin-bottom: 26px;
    animation: fadeUp 0.6s 0.1s ease both;
  }
  h1 em { color: var(--green); font-style: normal; }
  .hero-sub {
    font-size: 1.05rem; color: var(--muted);
    max-width: 430px; line-height: 1.75; margin-bottom: 40px;
    font-weight: 300;
    animation: fadeUp 0.6s 0.2s ease both;
  }
  .hero-actions {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    animation: fadeUp 0.6s 0.3s ease both;
  }
  .btn-primary {
    background: var(--green); color: var(--black);
    padding: 14px 34px; font-weight: 700; font-size: 0.88rem;
    letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    border-radius: 2px; transition: all 0.2s; position: relative; overflow: hidden;
  }
  .btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(10,26,47,0.16);
    transform: translateX(-110%) skewX(-15deg); transition: transform 0.4s;
  }
  .btn-primary:hover::after { transform: translateX(110%) skewX(-15deg); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(16,144,88,0.28); }
  .btn-ghost {
    color: var(--muted); text-decoration: none; font-size: 0.85rem;
    font-weight: 500; letter-spacing: 1px;
    display: flex; align-items: center; gap: 6px; transition: color 0.2s;
  }
  .btn-ghost:hover { color: var(--white); }

  .hero-stats {
    display: flex; gap: 40px; margin-top: 50px; flex-wrap: wrap;
    animation: fadeUp 0.6s 0.4s ease both;
  }
  .stat-num {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.3rem;
    color: var(--green); line-height: 1;
  }
  .stat-label { font-size: 0.72rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }

  /* Hero visual */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

  /* ======= MARQUEE ======= */
  .marquee-wrap {
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: var(--dark); overflow: hidden; padding: 13px 0;
  }
  .marquee-track { display: flex; animation: marquee 32s linear infinite; white-space: nowrap; }
  .marquee-item {
    display: flex; align-items: center; gap: 14px; padding: 0 36px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem;
    letter-spacing: 2px; color: var(--muted);
  }
  .marquee-item .sep { color: var(--green); font-size: 0.45rem; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ======= SECTION COMMONS ======= */
  section { padding: 90px 52px; }
  .section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
  .section-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2.4rem, 4.5vw, 3.8rem); line-height: 1; letter-spacing: 1px; margin-bottom: 14px; }
  .section-sub { color: var(--muted); font-size: 0.98rem; max-width: 500px; line-height: 1.75; font-weight: 300; }

  /* ======= FUTURE BANNER ======= */
  .future-banner {
    background: linear-gradient(135deg, rgba(129,140,248,0.06) 0%, rgba(16,144,88,0.04) 100%);
    border: 1px solid rgba(129,140,248,0.2);
    padding: 18px 28px;
    display: flex; gap: 16px; align-items: flex-start; margin-bottom: 52px;
    border-radius: 2px;
  }
  .future-banner-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
  .future-banner-text h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; letter-spacing: 1.5px; color: var(--future); margin-bottom: 4px; }
  .future-banner-text p { font-size: 0.83rem; color: var(--muted); line-height: 1.6; font-weight: 300; }

  /* ======= CATEGORIES ======= */
  #kategorije { background: var(--dark); }
  .categories-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; flex-wrap: wrap; gap: 20px; }
  .categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .cat-card {
    position: relative; background: var(--card); padding: 40px 32px;
    border: 1px solid var(--border); overflow: hidden;
    cursor: pointer; transition: border-color 0.3s; text-decoration: none; color: inherit; display: block;
  }
  .cat-card:hover { border-color: rgba(16,144,88,0.35); }
  .cat-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(16,144,88,0.04) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.3s;
  }
  .cat-card:hover::before { opacity: 1; }
  .cat-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.65rem; letter-spacing: 1px; margin-bottom: 8px; }
  .cat-card p { color: var(--muted); font-size: 0.87rem; line-height: 1.65; font-weight: 300; }
  .cat-arrow { position: absolute; bottom: 32px; right: 32px; width: 34px; height: 34px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 0.95rem; transition: all 0.3s; }
  .cat-card:hover .cat-arrow { background: var(--green); color: var(--black); border-color: var(--green); transform: rotate(45deg); }
  .cat-card.featured { background: linear-gradient(135deg, rgba(16,144,88,0.10) 0%, var(--card) 100%); border-color: rgba(16,144,88,0.28); }

  /* ======= LFP PAGE / SECTION ======= */
  #lfp { background: var(--black); }
  .lfp-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 52px; flex-wrap: wrap; gap: 20px; }
  .lfp-intro { max-width: 640px; }
  .lfp-intro p { color: var(--muted); font-size: 1rem; line-height: 1.8; font-weight: 300; margin-top: 14px; }

  .compare-table { width: 100%; border-collapse: collapse; margin-bottom: 56px; }
  .compare-table th, .compare-table td { padding: 14px 18px; font-size: 0.88rem; border-bottom: 1px solid var(--border); text-align: left; }
  .compare-table th { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; letter-spacing: 1.5px; color: var(--muted); background: var(--dark); font-weight: 400; }
  .compare-table th.lfp-col { color: var(--green); }
  .compare-table td { color: var(--white); font-weight: 300; }
  .compare-table td.lfp-val { color: var(--green); font-weight: 500; }
  .compare-table td.old-val { color: var(--muted); }
  .compare-table tr:hover td { background: rgba(16,144,88,0.02); }
  .td-icon { margin-right: 6px; }

  .lfp-advantages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 0; }
  .adv-card { background: var(--card); border: 1px solid var(--border); padding: 28px 24px; transition: border-color 0.3s; }
  .adv-card:hover { border-color: rgba(16,144,88,0.3); }
  .adv-card h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 8px; color: var(--green); }
  .adv-card p { font-size: 0.84rem; color: var(--muted); line-height: 1.65; font-weight: 300; }

  /* Future roadmap */
  .tech-roadmap { display: flex; gap: 2px; margin-top: 56px; }
  .road-item {
    flex: 1; background: var(--card); border: 1px solid var(--border);
    padding: 28px 22px; position: relative;
  }
  .road-badge { display: inline-block; padding: 3px 10px; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; border-radius: 2px; }
  .badge-now { background: rgba(16,144,88,0.12); color: var(--green); border: 1px solid rgba(16,144,88,0.25); }
  .badge-soon { background: rgba(251,146,60,0.1); color: var(--orange); border: 1px solid rgba(251,146,60,0.2); }
  .badge-future { background: rgba(129,140,248,0.1); color: var(--future); border: 1px solid rgba(129,140,248,0.2); }
  .road-item h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; letter-spacing: 1px; margin-bottom: 8px; }
  .road-item p { font-size: 0.83rem; color: var(--muted); line-height: 1.65; font-weight: 300; }

  /* ======= PRODUCTS ======= */
  #proizvodi { background: var(--dark); }
  .products-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; flex-wrap: wrap; gap: 16px; }
  .filter-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
  .filter-tab {
    padding: 7px 18px; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--border);
    background: transparent; color: var(--muted); cursor: pointer; transition: all 0.2s; border-radius: 2px;
  }
  .filter-tab.active, .filter-tab:hover { background: var(--green); color: var(--black); border-color: var(--green); }
  .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .product-card {
    background: var(--card); border: 1px solid var(--border);
    padding: 26px; transition: all 0.3s; cursor: pointer;
    position: relative; overflow: hidden;
  }
  .product-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--green); transform: scaleX(0); transition: transform 0.3s; }
  .product-card:hover::after { transform: scaleX(1); }
  .product-card:hover { border-color: rgba(16,144,88,0.28); transform: translateY(-4px); }
  .product-badge { display: inline-block; padding: 3px 10px; font-size: 0.66rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; border-radius: 2px; }
  .badge-new { background: rgba(16,144,88,0.12); color: var(--green); border: 1px solid rgba(16,144,88,0.25); }
  .badge-hot { background: rgba(251,146,60,0.12); color: var(--orange); border: 1px solid rgba(251,146,60,0.22); }
  .badge-sale { background: rgba(16,144,88,0.08); color: var(--accent); border: 1px solid rgba(16,144,88,0.18); }
  .badge-pro { background: rgba(129,140,248,0.1); color: var(--future); border: 1px solid rgba(129,140,248,0.2); }
  .product-img { width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: rgba(10,26,47,0.025); border-radius: 2px; }
  .product-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; letter-spacing: 1px; margin-bottom: 5px; }
  .product-spec { font-size: 0.78rem; color: var(--muted); margin-bottom: 16px; font-weight: 300; line-height: 1.5; }
  .product-footer { display: flex; justify-content: space-between; align-items: center; }
  .product-price { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; color: var(--green); letter-spacing: 1px; }
  .old-price { font-size: 0.78rem; color: var(--muted); text-decoration: line-through; font-weight: 400; margin-top: 2px; }
  .add-btn { width: 38px; height: 38px; background: rgba(16,144,88,0.1); border: 1px solid rgba(16,144,88,0.22); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; border-radius: 2px; }
  .add-btn:hover { background: var(--green); color: var(--black); }

  /* ======= FEATURES ======= */
  #prednosti { background: var(--black); position: relative; overflow: hidden; }
  #prednosti::before { content: ''; position: absolute; top: -200px; right: -200px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(16,144,88,0.045) 0%, transparent 70%); pointer-events: none; }
  .features-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
  .features-list { display: flex; flex-direction: column; gap: 2px; margin-top: 36px; }
  .feature-item { display: flex; gap: 18px; padding: 22px; border: 1px solid var(--border); background: var(--card); transition: all 0.3s; cursor: pointer; }
  .feature-item:hover { border-color: rgba(16,144,88,0.28); }
  .feature-icon { width: 42px; height: 42px; flex-shrink: 0; background: rgba(16,144,88,0.09); border: 1px solid rgba(16,144,88,0.18); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
  .feature-item h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 4px; }
  .feature-item p { font-size: 0.83rem; color: var(--muted); line-height: 1.65; font-weight: 300; }
  .features-visual { position: relative; height: 460px; display: flex; align-items: center; justify-content: center; }
  .voltage-bar-wrap { position: relative; width: 100%; max-width: 310px; }
  .voltage-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 3.2rem; color: var(--white); letter-spacing: 2px; margin-bottom: 28px; }
  .voltage-label span { color: var(--green); }
  .v-bar { margin-bottom: 14px; }
  .v-bar-label { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--muted); margin-bottom: 6px; letter-spacing: 1px; text-transform: uppercase; font-weight: 500; }
  .v-bar-label strong { color: var(--white); }
  .v-bar-track { height: 5px; background: rgba(10,26,47,0.08); position: relative; overflow: hidden; border-radius: 2px; }
  .v-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--accent)); transform-origin: left; animation: barFill 1.6s ease both; border-radius: 2px; }
  @keyframes barFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* ======= BRANDS ======= */
  #brendovi { background: var(--dark); }
  .brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 44px; }
  .brand-card {
    background: var(--card); border: 1px solid var(--border);
    padding: 32px 20px; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 8px;
    transition: all 0.3s; cursor: pointer;
  }
  .brand-card:hover { border-color: rgba(16,144,88,0.3); }
  .brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; letter-spacing: 2px; color: var(--muted); transition: color 0.3s; }
  .brand-card:hover .brand-name { color: var(--green); }
  .brand-origin { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(107,138,110,0.5); }
  .brand-flag { font-size: 1.2rem; }

  /* ======= CTA ======= */
  #kontakt { background: var(--black); text-align: center; padding: 110px 52px; position: relative; overflow: hidden; }
  #kontakt::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 50% 50%, rgba(16,144,88,0.055) 0%, transparent 70%); }
  #kontakt .section-title { font-size: clamp(2.8rem, 6.5vw, 5.5rem); margin-bottom: 18px; }
  #kontakt .section-sub { max-width: 520px; margin: 0 auto 44px; text-align: center; }
  .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .btn-outline { padding: 14px 34px; font-weight: 700; font-size: 0.88rem; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border: 1px solid var(--border); color: var(--muted); transition: all 0.2s; display: inline-flex; align-items: center; gap: 10px; border-radius: 2px; }
  .btn-outline:hover { border-color: var(--white); color: var(--white); }
  .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; text-align: left; }
  .contact-item { background: var(--card); border: 1px solid var(--border); padding: 28px; }
  .contact-item .contact-icon { font-size: 1.5rem; margin-bottom: 12px; }
  .contact-item h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; letter-spacing: 1px; margin-bottom: 6px; }
  .contact-item p { color: var(--muted); font-size: 0.86rem; line-height: 1.65; font-weight: 300; }

  /* ======= FOOTER ======= */
  footer {
    background: var(--dark); border-top: 1px solid var(--border);
    padding: 36px 52px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  }
  footer p { color: var(--muted); font-size: 0.8rem; }
  .footer-links { display: flex; gap: 26px; }
  .footer-links a { color: var(--muted); text-decoration: none; font-size: 0.8rem; transition: color 0.2s; }
  .footer-links a:hover { color: var(--green); }
  .footer-domain { font-size: 0.8rem; color: rgba(16,144,88,0.45); letter-spacing: 1px; }

  /* ======= REVEAL ======= */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* ======= RESPONSIVE ======= */
  @media (max-width: 1100px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .lfp-advantages { grid-template-columns: repeat(2, 1fr); }
    .brands-grid { grid-template-columns: repeat(3, 1fr); }
    .tech-roadmap { flex-direction: column; }
  }

  @media (max-width: 900px) {
    nav { padding: 16px 22px; }
    .nav-links, .nav-cta { display: none; }
    .hamburger { display: flex; }

    #hero {
      grid-template-columns: 1fr;
      min-height: auto;
      padding: 88px 22px 52px;
      text-align: center;
    }

    .hero-content {
      max-width: 620px;
      margin: 0 auto;
    }

    .hero-sub {
      margin-left: auto;
      margin-right: auto;
    }

    .hero-actions {
      justify-content: center;
    }

    .hero-stats {
      justify-content: center;
      margin-top: 38px;
    }

    section { padding: 60px 22px; }
    .features-layout { grid-template-columns: 1fr; gap: 36px; }
    .features-visual { display: none; }
    .contact-grid { grid-template-columns: 1fr; }
    footer { flex-direction: column; text-align: center; padding: 28px 22px; }
    .footer-links { justify-content: center; }
    .compare-table { font-size: 0.78rem; }
    .compare-table th, .compare-table td { padding: 10px 12px; }
  }

  @media (max-width: 640px) {
    nav { padding: 14px 18px; }
    .logo { font-size: 1.45rem; }

    #hero {
      padding: 82px 18px 44px;
    }

    h1 {
      font-size: clamp(3rem, 13vw, 4.5rem);
      margin-bottom: 20px;
    }

    .hero-sub {
      font-size: 0.96rem;
      line-height: 1.65;
      margin-bottom: 30px;
    }

    .hero-stats {
      gap: 22px;
      justify-content: center;
      margin-top: 32px;
    }

    .stat-num {
      font-size: 2rem;
    }

    .hero-actions {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

    .categories-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .lfp-advantages { grid-template-columns: 1fr; }
    .brands-grid { grid-template-columns: repeat(2, 1fr); }
    .btn-primary, .btn-outline { width: 100%; justify-content: center; }
    .future-banner { flex-direction: column; gap: 10px; }
    .filter-tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
    .filter-tab { text-align: center; }
    .cta-actions { flex-direction: column; }
    .categories-header { flex-direction: column; align-items: flex-start; }
    .products-header { flex-direction: column; align-items: flex-start; }
    .lfp-header { flex-direction: column; align-items: flex-start; }
    .compare-table-wrap { overflow-x: auto; }
  }

  /* ======= DODATO: elementi novih stranica (proizvod, kategorija) ======= */
  a.product-card { text-decoration: none; color: inherit; display: block; }

  .breadcrumbs { max-width: 1400px; margin: 0 auto; padding: 100px 5vw 0; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.5px; }
  .breadcrumbs a { color: var(--muted); text-decoration: none; }
  .breadcrumbs a:hover { color: var(--green); }
  .breadcrumbs span { margin: 0 6px; opacity: 0.5; }

  .page { max-width: 1400px; margin: 0 auto; padding: 2.5rem 5vw 5rem; }
  .page-head { max-width: 780px; }
  .page h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: 1px; margin-bottom: 1rem; }
  .page h1 em { color: var(--green); font-style: normal; }
  .page-lead { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; }

  .prose { max-width: 780px; }
  .prose h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: 1px; margin: 2.6rem 0 0.9rem; }
  .prose h3 { font-size: 1.05rem; font-weight: 700; margin: 1.8rem 0 0.6rem; color: var(--accent); }
  .prose p { color: #43596b; line-height: 1.8; margin-bottom: 1rem; }
  .prose ul { margin: 0 0 1.2rem 1.1rem; }
  .prose li { color: #43596b; line-height: 1.75; margin-bottom: 0.45rem; }
  .prose a { color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(16,144,88,0.35); }
  .prose a:hover { color: var(--accent); }
  .prose strong { color: var(--white); }

  .product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
  .gallery-main { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 2rem; display: flex; align-items: center; justify-content: center; min-height: 380px; }
  .gallery-main img { max-width: 100%; max-height: 340px; object-fit: contain; }
  .gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
  .gallery-thumbs button { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 6px; cursor: pointer; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
  .gallery-thumbs button.active, .gallery-thumbs button:hover { border-color: var(--green); }
  .gallery-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; }

  .p-brand { font-size: 0.75rem; letter-spacing: 2.5px; color: var(--green); text-transform: uppercase; margin-bottom: 0.8rem; }
  .p-price { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 1.4rem 0 0.4rem; }
  .p-price .glavna { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.6rem; color: var(--green); letter-spacing: 1px; }
  .p-price .sporedna { color: var(--muted); font-size: 1rem; }
  .p-price-note { color: var(--muted); font-size: 0.78rem; margin-bottom: 1.6rem; }

  .spec-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; }
  .spec-table th, .spec-table td { text-align: left; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
  .spec-table th { color: var(--muted); font-weight: 400; width: 46%; }
  .spec-table td { color: var(--white); }

  .p-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.8rem 0; }

  .note-box { background: var(--card); border: 1px solid var(--border); border-left: 2px solid var(--green); border-radius: 12px; padding: 1.1rem 1.3rem; color: var(--muted); font-size: 0.88rem; line-height: 1.65; }

  .related { margin-top: 4.5rem; }
  .related h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.8rem; letter-spacing: 1px; margin-bottom: 1.5rem; }

  .link-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
  .link-chip { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 1.05rem; font-size: 0.82rem; color: var(--white); text-decoration: none; }
  .link-chip:hover { border-color: var(--green); color: var(--green); }

  .faq-item { border-bottom: 1px solid var(--border); padding: 1.15rem 0; }
  .faq-item h3 { font-size: 1rem; color: var(--white); margin-bottom: 0.5rem; }
  .faq-item p { color: var(--muted); line-height: 1.7; font-size: 0.93rem; }

  @media (max-width: 900px) {
    .product-layout { grid-template-columns: 1fr; gap: 2rem; }
    .breadcrumbs { padding-top: 88px; }
  }

  .product-price-sporedna { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }

  /* ======= DODATO: blog ======= */
  .blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .blog-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    padding: 1.6rem 1.5rem; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: 0.55rem;
    transition: border-color 0.3s, transform 0.3s;
  }
  .blog-card:hover { border-color: var(--green); transform: translateY(-3px); }
  .blog-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; letter-spacing: 0.6px; line-height: 1.15; color: var(--white); }
  .blog-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.65; }
  .blog-vise { color: var(--green); font-size: 0.8rem; letter-spacing: 1px; margin-top: auto; padding-top: 0.5rem; }
  .blog-datum { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

  .prose .blog-datum { margin-bottom: 0.8rem; }
  .prose h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; letter-spacing: 1px; margin-bottom: 1rem; }

  .tabela { width: 100%; border-collapse: collapse; margin: 1.4rem 0 1rem; font-size: 0.9rem; }
  .tabela th, .tabela td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--border); }
  .tabela thead th { color: var(--green); font-weight: 500; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; }
  .tabela td { color: #43596b; }
  .tabela td a { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--border); }
  .tabela td a:hover { color: var(--green); }

  @media (max-width: 900px) {
    .blog-list { grid-template-columns: 1fr; }
    .tabela { font-size: 0.82rem; }
    .tabela th, .tabela td { padding: 0.55rem 0.3rem; }
  }

  /* Sest stavki u meniju: malo uzi razmak na manjim ekranima da nista ne iskace */
  @media (max-width: 1150px) { .nav-links { gap: 20px; } }

  /* Sa sest stavki meni se stisne ranije nego sa pet, pa hamburger preuzima na 1000px */
  @media (max-width: 1000px) {
    .nav-links, .nav-cta { display: none; }
    .hamburger { display: flex; }
  }

  /* ==========================================================================
     PREMIUM SLOJ — tipografija, površine, razmaci, prikaz proizvoda.
     Dolazi posle osnovnih pravila i namerno ih pregazuje.
     ========================================================================== */

  :root {
    --bg: #ffffff;
    --bg-alt: #f6f8f8;
    --ink: #0b1a24;
    --ink-2: #41566180;
    /* Izjednaceno sa --muted 22.09.2026: ovo je glavni tekst na blogu i
       stranicama proizvoda, a bio je svetliji (6.69:1) od kratkih opisa. */
    --text: #3a4850;
    --line: #e9efee;
    --line-2: #dde6e4;
    --brand: #109058;
    --brand-2: #0c7547;
    --brand-soft: #eaf5ef;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;

    --sh-1: 0 1px 2px rgba(11,26,36,0.04);
    --sh-2: 0 1px 2px rgba(11,26,36,0.04), 0 12px 32px -14px rgba(11,26,36,0.18);
    --sh-3: 0 2px 4px rgba(11,26,36,0.05), 0 26px 56px -20px rgba(11,26,36,0.26);

    --pad-x: clamp(20px, 5vw, 64px);
    --sec-y: clamp(72px, 9vw, 132px);

    /* zadrzana imena iz starog sistema */
    --black: var(--bg);
    --dark: var(--bg-alt);
    --card: #ffffff;
    --border: var(--line);
    --green: var(--brand);
    --green-dim: var(--brand-2);
    --green-deep: #0a6640;
    --accent: var(--brand-2);
    --white: var(--ink);
    /* Zatamnjeno 22.09.2026. Ova vrednost pregazuje onu iz osnovnog sloja i
       vazi na celom sajtu. #6b8390 je na beloj podlozi imao kontrast 3.98:1,
       ispod minimuma za citljivost, a koristi se za skoro sav tekst.
       #3a4850 daje 9.45:1. */
    --muted: #3a4850;
  }

  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
    font-size: 16.5px;
    line-height: 1.65;
    font-weight: 400;
    cursor: auto;
    letter-spacing: -0.005em;
  }

  /* kursor i zrnavost su bili deo tamne teme */
  .cursor, .cursor-ring { display: none !important; }
  body::before { display: none; }

  /* ---------- tipografija ---------- */

  h1, h2, h3, h4, .section-title, .logo, .product-name, .product-price,
  .stat-num, .cat-num, .voltage-label, .blog-card h3, .cat-card h3,
  .page h1, .prose h1, .prose h2, .prose h3, .related h2, .brand-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--ink);
    text-transform: none;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
  }

  h1, .hero-content h1 {
    font-size: clamp(2.6rem, 5.6vw, 4.6rem);
    line-height: 1.02;
    margin-bottom: 22px;
    font-weight: 800;
  }
  h1 em { color: var(--brand); font-style: normal; }

  .section-title {
    font-size: clamp(2rem, 3.8vw, 3.1rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
  }
  .section-title em { color: var(--brand); font-style: normal; }

  .section-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--brand);
    display: inline-block; margin-bottom: 14px;
  }
  .section-sub { color: var(--text); font-size: 1.02rem; line-height: 1.75; font-weight: 400; }

  .hero-sub {
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    color: var(--text); font-weight: 400; line-height: 1.7;
    max-width: 480px; margin-bottom: 36px;
  }

  /* ---------- logo ---------- */

  .logo { font-size: 1.32rem; letter-spacing: -0.04em; font-weight: 800; gap: 9px; }
  .logo em { color: var(--brand); font-style: normal; }
  .logo-leaf {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--brand); font-size: 0.85rem;
    box-shadow: 0 4px 12px -3px rgba(16,144,88,0.5);
  }

  /* ---------- navigacija ---------- */

  nav {
    padding: 15px var(--pad-x);
    background: rgba(255,255,255,0.86);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line);
  }
  .nav-links { gap: 30px; }
  .nav-links a {
    font-size: 0.87rem; font-weight: 600; letter-spacing: -0.01em;
    text-transform: none; color: var(--text);
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta {
    background: var(--ink); color: #fff;
    padding: 11px 22px; border-radius: 8px;
    font-size: 0.85rem; font-weight: 700; letter-spacing: -0.01em;
    text-transform: none; box-shadow: var(--sh-1);
  }
  .nav-cta:hover { background: var(--brand); transform: translateY(-1px); }
  .hamburger span { background: var(--ink); border-radius: 2px; }
  .mobile-menu { background: rgba(255,255,255,0.97); padding: 14px var(--pad-x) 22px; }
  .mobile-menu a { text-transform: none; font-size: 1rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
  .mobile-menu .mob-cta { background: var(--ink); color: #fff; border-radius: 8px; }

  /* ---------- dugmad ---------- */

  .btn-primary {
    background: var(--brand); color: #fff;
    padding: 15px 30px; border-radius: 8px;
    font-size: 0.94rem; font-weight: 700; letter-spacing: -0.01em;
    text-transform: none; box-shadow: 0 8px 22px -10px rgba(16,144,88,0.75);
  }
  .btn-primary::after { display: none; }
  .btn-primary:hover { background: var(--brand-2); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(16,144,88,0.8); }

  .btn-outline {
    border: 1px solid var(--line-2); color: var(--ink); background: #fff;
    padding: 14px 26px; border-radius: 8px; font-weight: 600;
    text-transform: none; letter-spacing: -0.01em; font-size: 0.94rem;
  }
  .btn-outline:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
  .btn-ghost { color: var(--text); font-weight: 600; text-transform: none; letter-spacing: -0.01em; font-size: 0.94rem; }
  .btn-ghost:hover { color: var(--brand); }

  /* ---------- sekcije i razmaci ---------- */

  section { padding: var(--sec-y) var(--pad-x); }
  /* gornji odmak smanjen ukupno za 51px u odnosu na prvu verziju (1 cm + 3 mm) */
  #hero { padding: calc(var(--sec-y) - 11px) var(--pad-x) var(--sec-y); min-height: auto; gap: 40px; }
  #kategorije, #proizvodi, #brendovi { background: var(--bg); }
  #lfp, #prednosti, #kontakt { background: var(--bg-alt); }

  .hero-bg { opacity: 0.55; }

  .stat-num { font-size: clamp(1.7rem, 2.4vw, 2.2rem); color: var(--brand); letter-spacing: -0.04em; }
  .stat-label { font-size: 0.78rem; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }

  /* ---------- kartice, zajednička površina ---------- */

  .product-card, .cat-card, .adv-card, .brand-card, .contact-item,
  .road-item, .blog-card, .feature-item, .gallery-main, .note-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    transition: transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s, border-color 0.25s;
  }
  .product-card:hover, .cat-card:hover, .blog-card:hover, .brand-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-3);
    border-color: var(--line-2);
  }

  /* ---------- proizvodi ---------- */

  .products-grid { gap: 22px; }

  .product-card { padding: 18px 18px 20px; display: flex; flex-direction: column; }

  .product-img {
    height: 230px; margin-bottom: 18px;
    background: linear-gradient(180deg, #fbfdfc 0%, #f3f7f6 100%);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    padding: 18px; overflow: hidden;
  }
  .product-img img {
    max-width: 100% !important; max-height: 100% !important;
    width: auto; height: auto; object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
  }
  .product-card:hover .product-img img { transform: scale(1.05); }

  .product-name {
    font-size: 1.04rem; font-weight: 700; letter-spacing: -0.025em;
    line-height: 1.3; margin-bottom: 8px; color: var(--ink);
  }
  .product-spec {
    font-size: 0.86rem; color: var(--muted); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .product-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); align-items: center; }
  .product-price { font-size: 1.32rem; color: var(--ink); font-weight: 800; letter-spacing: -0.035em; }
  .product-price-sporedna { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
  .add-btn {
    width: 40px; height: 40px; border-radius: 8px;
    background: var(--brand-soft); border: none; color: var(--brand-2);
    font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
    transition: background 0.25s, color 0.25s, transform 0.25s;
  }
  .product-card:hover .add-btn { background: var(--brand); color: #fff; transform: rotate(90deg); }

  .filter-tabs { gap: 8px; }
  .filter-tab {
    border-radius: 8px; padding: 9px 20px;
    border: 1px solid var(--line-2); background: #fff; color: var(--text);
    font-weight: 600; font-size: 0.86rem; letter-spacing: -0.01em; text-transform: none;
  }
  .filter-tab.active, .filter-tab:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

  /* ---------- kategorije ---------- */

  .categories-grid { gap: 20px; }
  .cat-card { padding: 30px 28px 26px; }
  .cat-card h3 { font-size: 1.28rem; margin: 14px 0 10px; letter-spacing: -0.03em; }
  .cat-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; }
  .cat-card.featured { background: var(--ink); border-color: var(--ink); }
  .cat-card.featured h3, .cat-card.featured .cat-arrow { color: #fff; }
  .cat-card.featured p { color: rgba(255,255,255,0.72); }
  .cat-arrow { border-radius: 8px; border-color: var(--line-2); color: var(--ink); }

  /* ---------- prednosti, brendovi, kontakt ---------- */

  .adv-card, .contact-item, .road-item, .feature-item { padding: 28px 26px; }
  .adv-card h4, .contact-item h4 { font-size: 1.08rem; font-weight: 700; color: var(--ink); letter-spacing: -0.025em; margin-bottom: 8px; }
  .adv-card p, .contact-item p, .road-item p { color: var(--muted); font-size: 0.92rem; line-height: 1.7; }
  .adv-icon, .feature-icon, .contact-icon { font-size: 1.6rem; margin-bottom: 14px; }
  .brand-card { padding: 26px 22px; }
  .brand-name { font-size: 1.1rem; letter-spacing: -0.03em; }
  .road-badge { border-radius: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; padding: 5px 13px; }
  .note-box { box-shadow: none; background: var(--brand-soft); border-color: rgba(16,144,88,0.18); border-left-width: 1px; color: var(--brand-2); border-radius: var(--r-md); padding: 16px 20px; }

  .compare-table th { color: var(--brand); font-size: 0.74rem; letter-spacing: 0.1em; }
  .compare-table td { color: var(--text); font-weight: 400; }
  .compare-table-wrap { border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-2); padding: 6px 18px; }

  .marquee-wrap { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .marquee-item { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; text-transform: none; }

  /* ---------- podnožje ---------- */

  footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding: 46px var(--pad-x); }
  footer p, .footer-domain { color: var(--muted); font-size: 0.86rem; }
  .footer-links a { color: var(--text); font-size: 0.86rem; font-weight: 500; }
  .footer-links a:hover { color: var(--brand); }

  /* ---------- unutrašnje stranice ---------- */

  .breadcrumbs { padding: 104px var(--pad-x) 0; font-size: 0.8rem; }
  .page { padding: 2rem var(--pad-x) var(--sec-y); max-width: 1280px; }
  .page h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing: -0.04em; }
  .page-lead { font-size: 1.06rem; line-height: 1.75; color: var(--text); }

  .prose { max-width: 720px; }
  .prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); margin: 3rem 0 1rem; letter-spacing: -0.035em; }
  .prose h3 { font-size: 1.08rem; font-weight: 700; color: var(--ink); margin: 2rem 0 0.6rem; letter-spacing: -0.025em; }
  .prose p, .prose li { color: var(--text); font-size: 1.02rem; line-height: 1.8; }
  .prose strong { color: var(--ink); font-weight: 700; }
  .prose a { color: var(--brand-2); border-bottom-color: rgba(16,144,88,0.3); }

  .gallery-main { min-height: 440px; padding: 40px; }
  .gallery-main img { max-height: 400px; mix-blend-mode: multiply; }
  .gallery-thumbs { gap: 10px; margin-top: 12px; }
  .gallery-thumbs button { border-radius: var(--r-md); border-color: var(--line); background: var(--bg-alt); padding: 8px; }
  .gallery-thumbs button.active { border-color: var(--brand); background: #fff; }
  .gallery-thumbs img { mix-blend-mode: multiply; }

  .p-brand { font-size: 0.74rem; letter-spacing: 0.14em; font-weight: 700; color: var(--brand); }
  .p-price .glavna { font-size: clamp(2rem, 3.4vw, 2.7rem); color: var(--ink); letter-spacing: -0.04em; font-weight: 800; }
  .p-price .sporedna { color: var(--muted); font-weight: 500; }
  .spec-table th { color: var(--muted); font-weight: 500; font-size: 0.92rem; }
  .spec-table td { color: var(--ink); font-weight: 600; font-size: 0.92rem; }
  .spec-table th, .spec-table td { padding: 0.85rem 0; border-color: var(--line); }

  .link-chip { border-radius: 8px; border-color: var(--line-2); color: var(--ink); font-weight: 600; padding: 0.55rem 1.15rem; background: #fff; }
  .link-chip:hover { border-color: var(--brand); color: var(--brand); }

  .faq-item { border-color: var(--line); padding: 1.3rem 0; }
  .faq-item h3 { font-size: 1.04rem; margin-bottom: 0.5rem; }
  .faq-item p { color: var(--text); font-size: 0.98rem; }

  .tabela th { color: var(--brand); font-size: 0.72rem; letter-spacing: 0.1em; }
  .tabela td { color: var(--text); }
  .tabela th, .tabela td { border-color: var(--line); padding: 0.85rem 0.7rem; }
  .tabela td a { color: var(--ink); font-weight: 600; border: none; }
  .tabela td a:hover { color: var(--brand); }

  /* ---------- blog ---------- */

  .blog-list { gap: 20px; }
  .blog-card { padding: 26px 24px 24px; gap: 0.6rem; }
  .blog-card h3 { font-size: 1.18rem; line-height: 1.28; letter-spacing: -0.03em; }
  .blog-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; }
  .blog-datum { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; }
  .blog-vise { color: var(--brand); font-weight: 700; font-size: 0.84rem; letter-spacing: -0.01em; }
  .related { margin-top: 5rem; }
  .related h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 1.4rem; letter-spacing: -0.035em; }

  /* ---------- mobilni ---------- */

  @media (max-width: 900px) {
    body { font-size: 16px; }
    #hero { padding-top: calc(var(--sec-y) + 10px); }
    .product-img { height: 190px; }
    .gallery-main { min-height: 300px; padding: 24px; }
    .gallery-main img { max-height: 260px; }
    .breadcrumbs { padding-top: 92px; }
  }

  .p-naslov { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.035em; margin: 2.4rem 0 0.2rem; color: var(--ink); }
  .future-banner { border-radius: var(--r-lg); border-color: var(--line); background: #fff; box-shadow: var(--sh-2); padding: 20px 24px; }
  .future-banner-text h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
  .future-banner-text p { font-size: 0.92rem; line-height: 1.7; color: var(--muted); }

  /* ---------- crtane ikonice umesto emodzija ---------- */
  .logo-leaf svg { width: 62%; height: 62%; color: #fff; }
  .cat-icon svg, .adv-icon svg, .feature-icon svg, .contact-icon svg, .future-banner-icon svg {
    width: 26px; height: 26px; color: var(--brand); display: block;
  }
  .adv-icon, .feature-icon, .contact-icon {
    width: 46px; height: 46px; border-radius: var(--r-md);
    background: var(--brand-soft); display: flex; align-items: center; justify-content: center;
    font-size: 0; margin-bottom: 16px;
  }
  .future-banner-icon {
    width: 40px; height: 40px; border-radius: var(--r-sm);
    background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-size: 0;
  }
  .btn-primary svg, .btn-outline svg { width: 17px; height: 17px; flex-shrink: 0; }
  .btn-primary, .btn-outline { display: inline-flex; align-items: center; gap: 9px; }
  .p-actions .btn-primary span, .p-actions .btn-outline span { display: inline-block; }

  .tacka { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); display: inline-block; margin-right: 9px; vertical-align: 1px; }
  .th-munja { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 6px; }
  .compare-table .lfp-val { color: var(--ink); font-weight: 600; }

  /* Prilagodjeni kursor je izbacen, pa se pokazivac vraca na normalan.
     Klikabilno dobija ruku, sve ostalo standardnu strelicu. */
  body, section, div, p, h1, h2, h3, h4, li, td, th { cursor: auto; }
  a, a *, button, button *, .product-card, .cat-card, .blog-card, .filter-tab, .add-btn,
  .link-chip, .gallery-thumbs button, .nav-cta, .btn-primary, .btn-outline, .btn-ghost { cursor: pointer; }
  .adv-card, .feature-item, .contact-item, .road-item, .brand-card { cursor: auto; }

  /* ==========================================================================
     HERO SA FOTOGRAFIJOM — po mokapu dizajn/1000087135 (1866×843).png
     Tamna sekcija preko pejzaza, tekst levo, statistika u traci uz donju ivicu.
     Dolazi posle premium sloja i namerno ga pregazuje.
     ========================================================================== */

  #hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 0;
    padding: 0;
    /* Prva strana mora da stane u ekran zajedno sa trakom statistike,
       zato su i visina i unutrasnji razmaci vezani za visinu prozora. */
    min-height: 100vh;
    min-height: 100svh;
    background: #06140f;
  }

  .hero-bg {
    position: absolute; inset: 0; opacity: 1;
    background-image: url('../img/pozadina/hero-pozadina.webp');
    background-size: cover;
    background-position: 68% center;
  }

  /* Zatamnjenje ide jace ulevo da tekst ima kontrast, a desna strana
     ostaje otvorena da se vidi zeleni talas sa fotografije. */
  .hero-veil {
    position: absolute; inset: 0;
    background:
      linear-gradient(96deg, rgba(4,17,12,0.96) 0%, rgba(4,17,12,0.90) 26%, rgba(4,17,12,0.62) 52%, rgba(4,17,12,0.22) 78%, rgba(4,17,12,0.38) 100%),
      linear-gradient(180deg, rgba(4,17,12,0.5) 0%, transparent 20%),
      linear-gradient(0deg, rgba(4,17,12,0.88) 0%, rgba(4,17,12,0.35) 14%, transparent 28%);
  }

  .hero-content {
    position: relative; z-index: 2;
    align-self: center;
    width: 100%; max-width: 1500px; margin: 0 auto;
    padding: clamp(92px, 13vh, 168px) var(--pad-x) clamp(28px, 6vh, 72px);
  }

  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 16px;
    font-size: 0.73rem; font-weight: 600;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    margin-bottom: 26px;
    animation: fadeUp 0.6s ease both;
  }
  .eyebrow-line { width: 54px; height: 2px; background: #3fd07f; border-radius: 2px; }

  #hero h1 { color: #ffffff; text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
  #hero h1 em { color: #6fe6a2; }
  #hero .hero-sub { color: rgba(255,255,255,0.80); max-width: 470px; }

  #hero .btn-primary {
    background: linear-gradient(118deg, #0f9f5d 0%, #57e08f 100%);
    color: #052b1b;
    box-shadow: 0 14px 34px -14px rgba(60,220,140,0.85);
  }
  #hero .btn-primary:hover { background: linear-gradient(118deg, #0d8d52 0%, #4ad484 100%); }
  #hero .btn-ghost {
    border: 1.5px solid rgba(120,230,170,0.45); border-radius: 8px;
    padding: 13px 26px; color: #e9fff3;
    transition: all 0.2s;
  }
  #hero .btn-ghost:hover { color: #fff; background: rgba(90,220,150,0.14); border-color: rgba(120,230,170,0.75); }

  .hero-stats {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(3, 1fr);
    margin: 0; gap: 0;
    background: rgba(3,13,9,0.84);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  /* Sadrzaj je centriran u svom polju; ranije je bio priljubljen uz levu ivicu,
     pa je prva brojka bila u liniji sa naslovom a ostale dve nasumicno. */
  .hero-stat { display: flex; align-items: center; justify-content: center; gap: 16px; padding: clamp(11px, 1.7vh, 17px) 24px; }
  .hero-stat + .hero-stat { border-left: 1px solid rgba(255,255,255,0.10); }
  .hero-stat svg { width: 30px; height: 30px; color: #6fe6a2; flex-shrink: 0; }
  #hero .stat-num { color: #ffffff; font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: 1; letter-spacing: -0.04em; }
  #hero .stat-label {
    color: rgba(255,255,255,0.62); font-size: 0.73rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px;
  }

  /* Zeleni prsten oko dugmeta "Kupi sada" iz mokapa */
  .nav-cta { display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid var(--brand); }
  .nav-cta svg { flex-shrink: 0; }
  /* display: inline-flex iznad bi pregazio sakrivanje iz mobilnog bloka, pa se ponavlja */
  @media (max-width: 1000px) { .nav-cta { display: none; } }

  @media (max-width: 900px) {
    /* Hero je bio visok koliko i tekst, oko 285px, pa se od fotografije
       videla samo uska traka iza slova. Sa 70% visine ekrana slika dobija
       prostor iznad i ispod teksta, a i dalje se vidi da stranica ide dalje. */
    #hero { padding: 0; min-height: 70vh; min-height: 70svh; }
    /* Fotografija je uspravno jako izrezana na telefonu, pa se kadar pomera
       navise da u sliku udju planine, a ne samo voda. */
    /* Na telefonu se vidi oko trecine panorame. Kadar je pomeren ulevo,
       gde je glavni masiv; desno je samo voda i kraj talasa. */
    .hero-bg { background-position: 38% center; }
    /* Zatamnjenje je jako samo tamo gde stoji tekst — pri vrhu i uz donju
       ivicu. Sredina se otvara da se vide planine i zeleni talas. */
    .hero-veil {
      background: linear-gradient(180deg,
        rgba(4,17,12,0.88) 0%,
        rgba(4,17,12,0.58) 18%,
        rgba(4,17,12,0.28) 44%,
        rgba(4,17,12,0.26) 66%,
        rgba(4,17,12,0.70) 100%);
    }
    /* Senka drzi tekst citljivim preko svetlijih delova slike, pa zatamnjenje
       ne mora da bude jako. */
    #hero h1 { text-shadow: 0 2px 22px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.5); }
    #hero .hero-sub { text-shadow: 0 1px 14px rgba(0,0,0,0.8); color: rgba(255,255,255,0.92); }
    .hero-eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,0.8); }
    /* Traka ostaje vodoravna i na telefonu — tri polja u redu, sa uspravnim
       razdelnicima. Unutar polja ikonica se penje iznad broja, jer u kolonu
       od stotinak piksela ne staju jedno pored drugog. */
    .hero-stats { grid-template-columns: repeat(3, 1fr); }
    .hero-stat { flex-direction: column; gap: 8px; text-align: center; padding: 16px 8px; }
    .hero-stat svg { width: 26px; height: 26px; }
    #hero .stat-num { font-size: clamp(1.3rem, 6vw, 1.8rem); }
    #hero .stat-label { font-size: 0.6rem; letter-spacing: 0.05em; margin-top: 4px; }
  }

  /* Niski laptop ekrani: naslov i razmaci se stisnu da traka ostane u vidokrugu. */
  @media (min-width: 901px) and (max-height: 720px) {
    .hero-content { padding-top: 88px; }
    #hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-bottom: 16px; }
    .hero-eyebrow { margin-bottom: 16px; }
    #hero .hero-sub { margin-bottom: 26px; font-size: 1rem; }
    #hero .stat-num { font-size: clamp(1.6rem, 2.1vw, 2rem); }
    .hero-stat svg { width: 28px; height: 28px; }
  }

  /* Verzija od 960px se na telefonu sa gustim ekranom razvlacila i mutila,
     jer 'cover' na uspravnom okviru uvelica sliku. Koristi se puna (137 KB). */
  @media (max-width: 600px) {
    .hero-bg { background-position: 36% center; }
  }

  /* ==========================================================================
     KATEGORIJE PRIMENE - po mokapu iz dizajn/page2 (21.09.2026)
     Kartice sa fotografijom, bleda panorama iza zaglavlja, traka za pomoc.
     Dolazi posle premium sloja i namerno ga pregazuje.
     ========================================================================== */

  #kategorije { position: relative; overflow: hidden; background: var(--bg); }

  /* Panorama je u izvoru vec istopljena u belo sa leve strane, pa joj ne treba
     maska - samo se nasloni na gornji desni ugao sekcije. */
  /* Levih 42% slike je prakticno belo, pa vidljive planine pocinju tek na
     (100 - 0.58 x sirina) sekcije. Zato je element sirok, a visina je zadata
     posebno da rastom sirine ne naraste i preko kartica - 'cover' visak
     odseca po visini. Donja ivica se stapa maskom da se ne sudari sa
     karticama ispod. */
  .kat-pozadina {
    position: absolute; top: 0; right: 0;
    width: min(92%, 1560px); height: clamp(280px, 27vw, 440px);
    background: url('../img/pozadina/planine-sekcija.webp') center right / cover no-repeat;
    opacity: 0.95; pointer-events: none; z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 56%, transparent 100%);
  }
  /* Sadrzaj ide iznad panorame. Rukopis je izuzet jer je i sam apsolutno
     pozicioniran - ovo pravilo bi mu nametnulo position: relative. */
  #kategorije > *:not(.kat-pozadina):not(.kat-rukopis) { position: relative; z-index: 1; }

  .categories-header { display: block; position: relative; max-width: 640px; margin-bottom: 40px; }
  .categories-header .section-title { margin-bottom: 14px; }
  .categories-header .section-sub { max-width: 520px; }

  /* Stoji preko izbledelog dela panorame, uz desnu ivicu sekcije - zato je
     vezan za sekciju a ne za zaglavlje, koje je usko. */
  .kat-rukopis {
    position: absolute; z-index: 2; margin: 0;
    top: calc(var(--sec-y) + 14px); right: clamp(56px, 9%, 190px); left: auto;
    width: max-content;
    font-family: 'Caveat', cursive;
    font-size: 1.6rem; line-height: 1.15; font-weight: 600;
    color: var(--ink); text-align: center; transform: rotate(-7deg);
  }
  .kat-rukopis::after {
    content: ''; display: block; width: 78px; height: 2px;
    background: var(--brand); border-radius: 2px;
    margin: 9px 0 0 auto; transform: rotate(2deg);
  }

  .categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

  .cat-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 14px 14px 18px;
    text-decoration: none; overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  }
  .cat-card::before { display: none; }
  /* height:auto je obavezan: atribut height="507" u HTML-u vazi kao zadata
     visina, pa bez njega aspect-ratio nema efekta. */
  .cat-card img {
    width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover;
    border-radius: 12px; display: block; margin-bottom: 16px;
  }
  .cat-telo { flex: 1; padding: 0 8px; }
  .cat-card h3 { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 8px; }
  .cat-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }

  .cat-veza {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 16px 8px 0; color: var(--brand); font-weight: 700; font-size: 0.9rem;
  }
  .cat-veza svg { width: 16px; height: 16px; transition: transform 0.25s; }

  .cat-card:hover { border-color: rgba(16,144,88,0.4); box-shadow: var(--sh-2); transform: translateY(-3px); }
  .cat-card:hover .cat-veza svg { transform: translateX(4px); }

  .cat-card.featured { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
  .cat-card.featured h3 { color: var(--ink); }
  .cat-card.featured p { color: var(--muted); }

  /* traka za pomoc pri izboru */
  .kat-pomoc {
    display: flex; align-items: center; gap: 20px;
    margin-top: 26px; padding: 22px 26px;
    background: var(--brand-soft); border: 1px solid rgba(16,144,88,0.18);
    border-radius: var(--r-lg);
  }
  .kat-pomoc-ikonica {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--r-md);
    background: #fff; border: 1px solid rgba(16,144,88,0.18);
    display: flex; align-items: center; justify-content: center; color: var(--brand);
  }
  .kat-pomoc-ikonica svg { width: 26px; height: 26px; }
  .kat-pomoc-tekst { flex: 1; }
  .kat-pomoc-tekst h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 3px; }
  .kat-pomoc-tekst p { font-size: 0.92rem; color: var(--muted); line-height: 1.55; margin: 0; }
  .kat-pomoc .btn-primary { flex-shrink: 0; }

  /* Rukopis nema gde da stane cim se zaglavlje suzi. */
  @media (max-width: 1150px) { .kat-rukopis { display: none; } }

  @media (max-width: 900px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } }

  /* Na telefonu kartice postaju spisak: slicica levo, tekst u sredini,
     strelica desno - kao na mokapu. */
  @media (max-width: 700px) {
    .kat-pozadina { display: none; }
    .categories-grid { grid-template-columns: 1fr; gap: 12px; }
    .cat-card { display: grid; grid-template-columns: 92px 1fr 22px; align-items: center; gap: 14px; padding: 12px; }
    .cat-card img { aspect-ratio: 4 / 3; margin: 0; border-radius: 10px; }
    .cat-telo { padding: 0; }
    .cat-card h3 { font-size: 1rem; margin-bottom: 4px; }
    .cat-card p { font-size: 0.84rem; line-height: 1.45; }
    .cat-veza { margin: 0; justify-content: flex-end; }
    .cat-veza-tekst { display: none; }
    .cat-veza svg { width: 18px; height: 18px; }
    .cat-card:hover { transform: none; }
    .kat-pomoc { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
    .kat-pomoc .btn-primary { width: 100%; justify-content: center; }
  }

  /* ==========================================================================
     ZASTO LIFEPO4 - po mokapu iz "dizajn/page 3" (22.09.2026)
     Uvod sa fotografijom, kartica o buducim tehnologijama, tabela poredjenja.
     Na telefonu se tabela raspada u blokove po karakteristici.
     ========================================================================== */

  /* Sekcija je bela jer se fotografija istapa u belo; na sivoj podlozi bi se
     video rub. */
  #lfp { background: #fff; position: relative; overflow: hidden; }

  /* Levih 34% fotografije je belo, pa baterija pocinje na
     (100 - 0.66 x sirina) sekcije. Visina je zadata posebno da element ne
     naraste preko kartice ispod; 'cover' visak odseca po visini. */
  /* Odnos stranica elementa prati odnos same fotografije, pa 'contain' ne
     odseca nista - baterija se vidi cela. Ranije je visina bila zadata
     nezavisno, pa je 'cover' visak secao po visini. */
  .lfp-pozadina {
    position: absolute; top: 0; right: 0;
    width: min(76%, 1300px); aspect-ratio: 1774 / 887; height: auto;
    background: url('../img/pozadina/lfp-baterija.webp') center right / contain no-repeat;
    pointer-events: none; z-index: 0;
    /* Blaga maska samo na poslednjih 18%, da se prednja ivica police ne
       zavrsi ostrim rezom. Baterija je iznad toga. */
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  }
  #lfp > *:not(.lfp-pozadina) { position: relative; z-index: 1; }

  /* Zaglavlje cuva visinu koliko je fotografiji potrebno, da kartica ispod ne
     naleti na nju. Tekst stoji uspravno centriran pored slike. */
  .lfp-header {
    display: flex; align-items: center;
    min-height: clamp(260px, 30vw, 440px); margin-bottom: 30px;
  }
  .lfp-intro { max-width: 560px; }
  .lfp-intro .section-title { margin-bottom: 18px; }
  .lfp-intro p { color: var(--text); font-size: 1.02rem; line-height: 1.75; max-width: 520px; }

  /* kartica o buducim tehnologijama */
  .future-banner {
    display: flex; gap: 20px; align-items: flex-start;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 24px 26px; box-shadow: var(--sh-1); margin-bottom: 22px;
  }
  /* Umesto zvezdice stoje tri generacije baterija. Podloga kutije je ista kao
     pozadina same fotografije (oko rgb 249,250,250), pa se rub ne primecuje. */
  .future-banner-icon {
    width: 168px; height: auto; aspect-ratio: 760 / 402; flex-shrink: 0;
    border-radius: var(--r-md); background: #fbfbfb;
    overflow: hidden; padding: 0; display: block;
  }
  .future-banner-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .future-banner-text h4 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 8px; }
  .future-banner-text p { font-size: 0.98rem; line-height: 1.7; color: var(--muted); }

  /* tabela poredjenja */
  .compare-table-wrap {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--sh-1);
  }
  .compare-table { width: 100%; border-collapse: collapse; }
  .compare-table th {
    background: var(--bg-alt); text-align: left;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
    font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
  }
  .compare-table th.lfp-col { background: var(--brand-soft); color: var(--brand-2); }
  .th-munja { color: var(--brand); }
  .compare-table td {
    padding: 15px 20px; border-bottom: 1px solid var(--line);
    font-size: 0.95rem; color: var(--muted);
  }
  .compare-table tr:last-child td { border-bottom: 0; }
  .compare-table td:first-child { color: var(--ink); font-weight: 500; }
  /* Vezano za td jer postojece .compare-table td.lfp-val inace pobedjuje. */
  .compare-table td.lfp-val { background: rgba(16,144,88,0.06); color: var(--ink); font-weight: 700; }

  /* Na uzim ekranima fotografija bi stajala iza samog teksta, pa se sklanja -
     mokap je na telefonu i nema. */
  @media (max-width: 900px) {
    .lfp-pozadina { display: none; }
  }

  /* Tabela sa cetiri kolone ne staje na telefon, pa svaki red postaje blok:
     naziv karakteristike iznad, tri vrednosti u redu ispod, svaka sa svojom
     oznakom kolone (iz data-kolona). */
  @media (max-width: 760px) {
    .compare-table-wrap { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
    .compare-table, .compare-table tbody { display: block; width: 100%; }
    .compare-table thead { display: none; }
    .compare-table tr {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
      background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
      padding: 14px; margin-bottom: 10px;
    }
    .compare-table td { border: 0; padding: 0; }
    .compare-table td:first-child {
      grid-column: 1 / -1; margin-bottom: 2px;
      font-size: 0.98rem; font-weight: 800; color: var(--ink);
    }
    .compare-table td:not(:first-child) {
      background: var(--bg-alt); border-radius: 8px; padding: 8px 10px;
      font-size: 0.88rem; color: var(--ink); font-weight: 600;
    }
    .compare-table td:not(:first-child)::before {
      content: attr(data-kolona); display: block;
      font-size: 0.64rem; font-weight: 600; color: var(--muted); margin-bottom: 3px;
    }
    .compare-table td.lfp-val { background: var(--brand-soft); color: var(--brand-2); font-weight: 800; }
    .compare-table td.lfp-val::before { color: var(--brand-2); opacity: 0.75; }
    .compare-table .tacka { display: none; }

    .future-banner { flex-direction: column; gap: 14px; padding: 18px; }
  }

  /* ==========================================================================
     PREDNOSTI LFP-a - po mokapu dizajn/page 3/blabal.png (22.09.2026)
     Sest kartica sa fotografijama. Mreza je na sest kolona, da prvi red moze
     da bude podeljen 4:2 a ostala dva 3:3.
     ========================================================================== */

  .lfp-advantages {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
    margin-top: 28px;
  }
  .adv-card {
    grid-column: span 3;
    display: flex; flex-direction: column;
    background: var(--bg-alt); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden; padding: 0;
    transition: box-shadow 0.25s, transform 0.25s;
  }
  .adv-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
  .adv-card > img {
    width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  }
  .adv-tekst { padding: 22px 26px 26px; }
  .adv-card h4 {
    font-size: 1.32rem; font-weight: 800; letter-spacing: -0.035em;
    color: var(--ink); margin: 0 0 10px;
  }
  .adv-card p { font-size: 0.95rem; line-height: 1.7; color: var(--muted); margin: 0; }

  /* zelena linija napona iznad naslova, jedini znak u ovoj mrezi */
  .adv-znak { color: var(--brand); margin-bottom: 8px; }
  .adv-znak svg { width: 46px; height: 23px; display: block; }

  /* Prva kartica je sira i tekst stoji preko fotografije, u njenom svetlom
     delu. Bela izmaglica sleva drzi kontrast i kad se slika zameni. */
  /* Kartica je flex kolona, pa je glavna osa uspravna: justify-content centrira
     po visini, a align-items drzi tekst uz levu ivicu. Ranije je ovde stajalo
     align-self: center, sto u koloni centrira VODORAVNO - i tekst je zavrsio
     preko baterije. */
  .adv-card:first-child {
    grid-column: span 4; position: relative; min-height: 400px;
    justify-content: center; align-items: flex-start;
  }
  .adv-card:nth-child(2) { grid-column: span 2; }

  .adv-card.adv-preko > img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto; object-fit: cover;
  }
  /* Baterija na fotografiji pocinje na oko 37% sirine, pa izmaglica mora da
     bude gusta do tuda i da nestane pre nje. */
  .adv-card.adv-preko::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(95deg, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.88) 22%, rgba(255,255,255,0.45) 40%, transparent 56%);
  }
  .adv-card.adv-preko .adv-tekst {
    position: relative; z-index: 1;
    max-width: 37%; padding: 40px 38px;
  }
  .adv-card.adv-preko h4 { font-size: clamp(2rem, 3.2vw, 2.9rem); letter-spacing: -0.045em; margin-bottom: 16px; }
  .adv-card.adv-preko p { font-size: 1.02rem; color: var(--text); }

  @media (max-width: 1000px) {
    .lfp-advantages { grid-template-columns: repeat(2, 1fr); }
    .adv-card, .adv-card:first-child, .adv-card:nth-child(2) { grid-column: span 1; }
    .adv-card:first-child { min-height: 0; }
    /* Preko uze kartice tekst vise ne moze da stoji na fotografiji. */
    .adv-card.adv-preko > img { position: static; aspect-ratio: 16 / 9; height: auto; }
    .adv-card.adv-preko::after { display: none; }
    .adv-card.adv-preko .adv-tekst { max-width: none; padding: 22px 26px 26px; align-self: stretch; }
    .adv-card.adv-preko h4 { font-size: 1.32rem; letter-spacing: -0.035em; margin-bottom: 10px; }
    .adv-card.adv-preko p { font-size: 0.95rem; color: var(--muted); }
  }

  @media (max-width: 700px) {
    .lfp-advantages { grid-template-columns: 1fr; gap: 14px; }
  }

  /* Sekcija sa kategorijama i LFP sekcija su obe bele, pa se donji odmak prve
     i gornji odmak druge citaju kao jedna velika praznina (2 x 130px).
     Na tom spoju su prepolovljeni. */
  #kategorije { padding-bottom: calc(var(--sec-y) * 0.5); }
  #lfp { padding-top: calc(var(--sec-y) * 0.5); padding-bottom: calc(var(--sec-y) * 0.5); }
  #proizvodi { padding-top: calc(var(--sec-y) * 0.5); }

  /* ==========================================================================
     TRI TEHNOLOGIJE - kartice ispod tabele, sa fotografijama iz dizajn/page 4
     Svaka nosi svoju boju: zelena za danasnju, narandzasta za natrijumsku,
     ljubicasta za solid-state. Boja se javlja na tri mesta - traka gore,
     sjaj iza proizvoda i znacka - pa kartice deluju kao komplet.
     ========================================================================== */

  .tech-roadmap {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 22px; margin-top: 44px;
  }

  .road-item {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 0;
    box-shadow: var(--sh-1);
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
  }
  /* tanka traka u boji tehnologije, uz gornju ivicu */
  .road-item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--rb-boja) 0%, var(--rb-boja-slaba) 100%);
    z-index: 2;
  }
  .road-item:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--rb-boja-slaba); }

  /* postolje na kom stoji proizvod: blag sjaj u boji tehnologije */
  .road-slika {
    position: relative; padding: 30px 26px 22px;
    background:
      radial-gradient(ellipse 72% 58% at 50% 62%, var(--rb-sjaj) 0%, transparent 70%),
      linear-gradient(180deg, #fbfcfc 0%, #f3f6f6 100%);
    border-bottom: 1px solid var(--line);
  }
  .road-slika img {
    position: relative; z-index: 1;
    width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain;
    display: block;
    filter: drop-shadow(0 14px 22px rgba(11,26,36,0.18));
    transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
  }
  .road-item:hover .road-slika img { transform: translateY(-4px) scale(1.03); }

  .road-telo { padding: 22px 26px 26px; }
  .road-item > .road-badge { margin: 22px 26px 0; }
  .road-item h4 {
    margin: 12px 26px 8px;
    font-size: 1.18rem; font-weight: 800; letter-spacing: -0.035em; color: var(--ink);
  }
  .road-item p { margin: 0 26px 26px; font-size: 0.92rem; line-height: 1.7; color: var(--muted); }

  .road-badge {
    align-self: flex-start;
    border-radius: 999px; padding: 6px 14px;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  }

  /* boje po tehnologiji */
  .road-sada      { --rb-boja: #109058; --rb-boja-slaba: rgba(16,144,88,0.35);  --rb-sjaj: rgba(16,144,88,0.13); }
  .road-uskoro    { --rb-boja: #d97316; --rb-boja-slaba: rgba(217,115,22,0.35); --rb-sjaj: rgba(217,115,22,0.13); }
  .road-buducnost { --rb-boja: #5b63d3; --rb-boja-slaba: rgba(91,99,211,0.35);  --rb-sjaj: rgba(91,99,211,0.13); }

  .badge-now    { background: rgba(16,144,88,0.1);  color: #0c7547; border: 1px solid rgba(16,144,88,0.22); }
  .badge-soon   { background: rgba(217,115,22,0.1); color: #b45c09; border: 1px solid rgba(217,115,22,0.22); }
  .badge-future { background: rgba(91,99,211,0.1);  color: #454cb8; border: 1px solid rgba(91,99,211,0.24); }

  @media (max-width: 900px) {
    .tech-roadmap { grid-template-columns: 1fr; gap: 14px; }
    .road-slika { padding: 22px 22px 16px; }
    .road-slika img { aspect-ratio: 16 / 8; }
  }

  /* ==========================================================================
     PRODAVNICA - jasnije odvojena sekcija i prava dugmad na karticama
     Kartice su bile bele na beloj podlozi sa jedva vidljivom ivicom, pa je
     mreza delovala kao nastavak teksta. Sekcija dobija svetlu podlogu, a
     kartice belu povrsinu sa ivicom i senkom.
     ========================================================================== */

  #proizvodi { background: var(--bg-alt); }

  .products-grid { gap: 22px; }

  .product-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line-2);
    border-radius: var(--r-lg); overflow: hidden;
    padding: 0; box-shadow: var(--sh-1);
    transition: box-shadow 0.28s, transform 0.28s, border-color 0.28s;
  }
  .product-card:hover {
    box-shadow: var(--sh-3); transform: translateY(-4px);
    border-color: rgba(16,144,88,0.4);
  }

  .product-card .product-img {
    margin: 0; border-radius: 0; border: 0;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfcfc 0%, #f4f7f7 100%);
  }
  .product-card .product-name { padding: 18px 22px 0; }
  .product-card .product-spec { padding: 0 22px; }
  .product-card .product-footer { padding: 0 22px 16px; border-top: 0; }

  /* dugme preko cele sirine dna kartice */
  .product-cta {
    margin-top: auto;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 18px;
    background: var(--bg-alt); border-top: 1px solid var(--line);
    color: var(--ink); font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em;
    transition: background 0.25s, color 0.25s;
  }
  .product-cta svg { width: 15px; height: 15px; transition: transform 0.25s; }
  .product-card:hover .product-cta { background: var(--brand); color: #fff; }
  .product-card:hover .product-cta svg { transform: translateX(4px); }

  /* filter dugmad na svetloj podlozi sekcije */
  .filter-tab { background: #fff; }

  @media (max-width: 700px) {
    .products-grid { gap: 14px; }
    .product-cta { padding: 12px 16px; font-size: 0.84rem; }
  }

  /* Prodavnica na telefonu: dve kolone umesto jedne. Kartica se svede na ono
     sto se na ~160px sirine stvarno vidi - fotografija, naziv, cena i dugme.
     Opis se skracuje na dva reda, a tek ispod 360px se sklanja - vecina
     telefona je 390 do 430px, pa bi skrivanje na 420 odnelo opis svima. */
  @media (max-width: 640px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card .product-img { height: auto; aspect-ratio: 1 / 1; padding: 12px; }
    .product-card .product-name { padding: 12px 13px 0; font-size: 0.92rem; line-height: 1.28; }
    .product-card .product-spec { padding: 0 13px; font-size: 0.78rem; line-height: 1.5; -webkit-line-clamp: 2; }
    .product-card .product-footer { padding: 0 13px 12px; padding-top: 12px; }
    .product-price { font-size: 1.08rem; }
    .product-price-sporedna { font-size: 0.72rem; }
    .product-cta { padding: 11px 8px; font-size: 0.78rem; gap: 6px; }
    .product-cta svg { width: 13px; height: 13px; }
  }

  @media (max-width: 360px) {
    .products-grid { gap: 10px; }
    .product-card .product-spec { display: none; }
    .product-card .product-name { font-size: 0.86rem; padding: 10px 11px 0; }
    .product-card .product-footer { padding: 0 11px 10px; padding-top: 10px; }
    .product-cta { padding: 10px 6px; font-size: 0.74rem; }
  }

  /* ======= DODATO: filter traka prodavnice i grupe na kategorijama ======= */
  /* Dva reda filtera (vrsta i namena) se kombinuju, pa se katalog od 35+
     proizvoda suzava bez paginacije. Traka se lepi ispod navigacije da se ne
     skroluje nazad gore; --nav-h meri site.js jer nav menja visinu. */
  .filter-bar {
    position: sticky; top: calc(var(--nav-h, 64px) - 1px); z-index: 60;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
    margin: 0 calc(var(--pad-x) * -1) 30px;
    padding: 14px var(--pad-x);
    background: var(--bg-alt); border-bottom: 1px solid var(--line);
  }
  .filter-red { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .filter-oznaka {
    flex: none; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--ink-2);
  }
  .filter-brojac {
    margin-left: auto; white-space: nowrap;
    font-size: 0.8rem; font-weight: 600; color: var(--text);
  }

  /* Na telefonu se dugmad smanjuju toliko da oba reda stanu bez vodoravnog
     skrolovanja - inace se rec odseca na pola i ne vidi se da ima jos opcija.
     Oznake "Vrsta" i "Brend" ostaju: oba reda pocinju dugmetom "Sve", pa se
     bez njih ne zna sta koji red filtrira. */
  @media (max-width: 860px) {
    .filter-bar { gap: 6px 14px; padding: 10px var(--pad-x); margin-bottom: 20px; }
    /* Oznaka ide iznad reda, a ne pored njega - tako dugmad dobiju punu
       sirinu ekrana i stanu u jedan red. */
    .filter-red { width: 100%; flex-direction: column; align-items: flex-start; gap: 5px; }
    .filter-oznaka { font-size: 0.62rem; letter-spacing: 1.2px; }
    /* display:flex ponistava stariju mobilnu mrezu od dve kolone (linija 465);
       sa dva reda filtera ona je traku dizala na trecinu ekrana. */
    .filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
    .filter-tab { flex: none; padding: 6px 11px; font-size: 0.7rem; letter-spacing: 0.4px; }
    /* Brojac u visini prve oznake, da ne trosi ceo red na zalepljenoj traci. */
    .filter-brojac {
      position: absolute; top: 10px; right: var(--pad-x);
      margin-left: 0; font-size: 0.7rem;
    }
  }

  /* Kategorijske stranice koje drze vise vrsta opreme (off-grid ima 26
     proizvoda) razbijene su po kategoriji. */
  .grupe-proizvoda { margin-top: 2rem; }
  .grupa-naslov {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink);
    margin: 46px 0 16px;
  }
  .grupe-proizvoda > .grupa-naslov:first-child { margin-top: 0; }
  .grupa-naslov span {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px;
    color: var(--brand); background: var(--brand-soft);
    border-radius: 999px; padding: 3px 10px;
  }

  /* ======= DODATO: novi logo (25.09.2026) ======= */
  /* Logo je sada slika sa znakom i tekstom, pa .logo vise ne nosi tipografiju.
     Visina se zadaje, sirina se racuna - odnos je 3,54:1. */
  .logo img { height: 40px; width: auto; display: block; }
  footer .logo img { height: 32px; }

  /* Na telefonu je logo 25% veci nego sto je bio (30 -> 38px), pa navigacija
     poraste; --nav-h se meri u site.js, tako da se zalepljena filter traka
     sama spusti za toliko. */
  @media (max-width: 860px) {
    .logo img { height: 38px; }
    footer .logo img { height: 35px; }
  }
  @media (max-width: 400px) {
    .logo img { height: 33px; }
  }

  /* ======= DODATO: logotipi brendova (26.09.2026) ======= */
  /* Logotipi su vrlo razlicitih oblika - od 440x52 do 321x150 - pa se uklapaju
     u isti okvir po visini umesto da im se zadaje sirina; inace bi jedan bio
     preko cele kartice a drugi tanka crtica. */
  .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .brand-card { min-height: 132px; padding: 26px 26px; }
  .brand-logo {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 54px;
    object-fit: contain;
  }

  @media (max-width: 860px) {
    .brands-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .brand-card { min-height: 104px; padding: 20px 18px; }
    .brand-logo { max-height: 42px; }
  }
  @media (max-width: 420px) {
    .brands-grid { grid-template-columns: 1fr; }
  }

  /* ======= DODATO: blog po mokapu iz dizajn/BLOG (26.09.2026) ======= */
  /* Kartica je fotografija preko cele povrsine, tamni preliv pri dnu, obojena
     pilula rubrike gore levo, datum i naslov preko slike. Kartica vise nema
     unutrasnju ivicu ni belu pozadinu, pa se ponistava ono iz ranijih slojeva. */
  /* .blog-list stoji i na kategorijama (tri teksta), a mreza na blogu nosi
     obe klase - zato pravilo za mrezu ide posle, da ne bude prebijeno. */
  .blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .blog-mreza { grid-template-columns: repeat(4, 1fr); }

  /* Sve kartice su istog kalupa 3:4. Fotografije za kartice se pripremaju
     bas u toj meri, pa se u mrezi ne isecaju dodatno. */
  .blog-card {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 3 / 4; padding: 0; background: #0a1410;
    border: 0; border-radius: var(--r-lg);
  }
  .blog-slika {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.55s cubic-bezier(.2,.7,.3,1);
  }
  .blog-card:hover .blog-slika { transform: scale(1.06); }
  /* preliv mora da bude iznad slike a ispod teksta */
  .blog-card::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top,
      rgba(4,12,10,0.94) 0%, rgba(4,12,10,0.80) 26%,
      rgba(4,12,10,0.28) 54%, rgba(4,12,10,0.04) 78%, rgba(4,12,10,0) 100%);
  }

  .blog-rubrika {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    padding: 5px 11px; border-radius: 6px;
    font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em;
    text-transform: uppercase; color: #fff; line-height: 1.3;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.45);
  }

  .blog-tekst {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 7px;
    padding: 18px 18px 20px;
  }
  .blog-card .blog-datum {
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.72); font-weight: 600;
  }
  .blog-naslov {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.02rem; font-weight: 800; line-height: 1.26;
    letter-spacing: -0.02em; color: #fff;
  }

  /* zaglavlje clanka */
  .clanak-slika {
    /* Ista sirina kao tekst clanka (.prose je 720px). Ranije se pruzala
       preko celih 1152px, pa su zaglavlja iz uspravnih originala - koji su
       siroki svega 1200px - morala da se razvlace i bila su mutna. */
    max-width: 720px;
    margin: 0 0 1.6rem; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--sh-2); background: var(--bg-alt);
  }
  /* Zaglavlja se prave kao traka 2:1 (vidi scratchpad/blog-zaglavlja.js), pa
     se ovde ne sece ponovo - ono sto je iseceno pri obradi je ono sto se vidi.
     aspect-ratio drzi mesto dok se slika ucitava, da tekst ne poskoci. */
  .clanak-slika img { display: block; width: 100%; height: auto; }
  .blog-rubrika-clanak {
    position: static; display: inline-block; margin-bottom: 0.9rem;
  }

  @media (max-width: 1100px) { .blog-mreza { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 860px) {
    .blog-mreza, .blog-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .blog-naslov { font-size: 0.92rem; }
    .blog-tekst { padding: 14px 14px 16px; }
    .blog-rubrika { font-size: 0.58rem; padding: 4px 9px; top: 10px; left: 10px; }
  }
  @media (max-width: 420px) {
    .blog-mreza, .blog-list { grid-template-columns: 1fr; }
  }

  /* ======= DODATO: globalno zaglavlje bloga (26.09.2026) ======= */
  /* Po mokapu dizajn/BLOG/file_0000000084ac...png: fotografija preko cele
     sirine, preko nje mrvice, naslov i uvod. Mrvice ovde nose svoj razmak od
     fiksne navigacije, pa se njihov podrazumevani padding ponistava. */
  .blog-naslovna {
    position: relative; overflow: hidden;
    /* padding: 0 ponistava opsti razmak koji sajt daje svakoj <section> -
       inace se --sec-y dodaje na visinu i zaglavlje naraste za 144px */
    padding: 0;
    min-height: 0; aspect-ratio: 20 / 7; display: flex; align-items: flex-end;
    background: #0a1410;
  }
  .blog-naslovna > img {
    /* Element je siroko tacno koliko i fotografija i prislonjen je desno.
       Zato maska pocinje bas na levoj ivici slike - ranije je bila razvucena
       preko cele sirine zaglavlja, pa se fotografija na 38% pojavljivala
       odjednom na petini vidljivosti: to je bio onaj ostar rez. */
    position: absolute; top: 0; right: 0;
    height: 100%; width: auto; max-width: 100%;
    object-fit: cover; object-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.18) 14%, rgba(0,0,0,0.62) 30%, #000 48%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.18) 14%, rgba(0,0,0,0.62) 30%, #000 48%);
  }
  /* tamniji ka levoj strani i ka dnu, da se beli tekst cita preko neba i vode */
  .blog-naslovna::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(to right, rgba(4,12,10,0.82) 0%, rgba(4,12,10,0.62) 34%, rgba(4,12,10,0.26) 56%, rgba(4,12,10,0) 74%),
      linear-gradient(to top, rgba(4,12,10,0.62) 0%, rgba(4,12,10,0.05) 55%);
  }
  .blog-naslovna-sadrzaj {
    position: relative; z-index: 2; width: 100%;
    max-width: 1280px; margin: 0 auto;
    /* --nav-h meri site.js; razmak odozgo mora da preskoci fiksnu
       navigaciju, inace naslov upadne pod nju */
    padding: calc(var(--nav-h, 77px) + 26px) var(--pad-x) 30px;
  }
  .blog-naslovna-sadrzaj .breadcrumbs {
    padding: 0; margin: 0 0 18px; max-width: none; color: rgba(255,255,255,0.72);
  }
  .blog-naslovna-sadrzaj .breadcrumbs a { color: rgba(255,255,255,0.72); }
  .blog-naslovna-sadrzaj .breadcrumbs a:hover { color: #fff; }
  .blog-naslovna-sadrzaj h1 {
    color: #fff; max-width: 15ch; margin: 0 0 14px;
    text-shadow: 0 2px 18px rgba(0,0,0,0.35);
  }
  .blog-naslovna-sadrzaj h1 em { color: var(--green); font-style: normal; }
  .blog-naslovna-sadrzaj .page-lead {
    color: rgba(255,255,255,0.90); max-width: 46ch; margin: 0;
    text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  }
  /* mreza kartica pocinje odmah ispod zaglavlja */
  .blog-naslovna + .page { padding-top: 2.6rem; }

  @media (max-width: 860px) {
    /* na telefonu manji razmaci, da zaglavlje ostane polozeno kao na
       mokapu - inace se pejzaz isece uspravno i baterija zavrsi iza teksta */
    /* Kadar se drzi odnosa same fotografije (16:9), pa se ona nikad ne
       uzumira: vidi se cela scena, a baterija sa svojim natpisom ostaje
       mala uz desnu ivicu, daleko od naslova. Zato i tekst mora da bude
       manji, da stane u tu visinu. */
    /* Ovde visinu odredjuje tekst, ne odnos: fiksan odnos bi na telefonu
       dao traku nizu od naslova, pa bi se tekst prelio pod navigaciju. */
    .blog-naslovna { min-height: 0; aspect-ratio: auto; }
    /* Baterija je i sama krupna na fotografiji i nosi svoj natpis, pa na
       uskom ekranu preko svega ide ravnomerno zatamnjenje: slika ostaje
       kao ambijent, a naslov je jedini tekst koji se cita. */
    .blog-naslovna::after { background: rgba(4,12,10,0.62); }
    .blog-naslovna > img {
      -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 10%, rgba(0,0,0,0.7) 24%, #000 40%);
      mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 10%, rgba(0,0,0,0.7) 24%, #000 40%);
    }
    .blog-naslovna-sadrzaj { padding: calc(var(--nav-h, 64px) + 14px) var(--pad-x) 14px; }
    .blog-naslovna-sadrzaj h1 { max-width: 11ch; font-size: clamp(1.25rem, 5vw, 1.7rem); margin-bottom: 5px; line-height: 1.12; }
    .blog-naslovna-sadrzaj .breadcrumbs { margin-bottom: 6px; font-size: 0.66rem; }
    .blog-naslovna-sadrzaj .page-lead { font-size: 0.78rem; max-width: 30ch; line-height: 1.45; }
    .blog-naslovna + .page { padding-top: 1.8rem; }
  }