:root{
    --white:#fff;
    --black:#000;
    --dark:#2e2e2e;
    --green:#28a745;
    --blue:#1976d2;
    --yellow:#ffc107;
    --red:#e71d16;
    --grey:#e6e6e6;
    --maxw:1180px;
  }
  *{margin:0;padding:0;box-sizing:border-box;border-radius:0 !important;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--dark);
    background:var(--white);
    line-height:1.6;
    font-size:16px;
  }
  h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;color:var(--black);line-height:1.15;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  a{color:var(--blue);text-decoration:none;}
  a:hover{text-decoration:underline;}
  a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

  /* ============ NAV ============ */
  .nav{
    position:sticky;top:0;z-index:50;
    background:var(--white);
    border-bottom:2px solid var(--black);
  }
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:72px;max-width:var(--maxw);margin:0 auto;padding:0 24px;
  }
  .nav-logo img{height:44px;display:block;}
  .nav-links{display:flex;gap:32px;align-items:center;list-style:none;}
  .nav-links a{
    color:var(--dark);font-weight:500;font-size:15px;text-decoration:none;
    border-bottom:2px solid transparent;padding:4px 0;
  }
  .nav-links a:hover{border-bottom-color:var(--yellow);text-decoration:none;}
  .nav-links a.nav-cta{
    background:var(--black);color:var(--white) !important;
    padding:10px 22px;font-weight:600;border-bottom:none !important;
  }
  .nav-links a.nav-cta:hover{background:var(--dark);}
  .nav-toggle{display:none;background:none;border:2px solid var(--black);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;padding:8px 14px;cursor:pointer;color:var(--black);}

  /* ============ HERO ============ */
  .hero{padding:88px 0 72px;}
  .hero-eyebrow{
    display:inline-block;font-family:'Space Grotesk',sans-serif;
    font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    background:var(--yellow);color:var(--black);padding:6px 14px;margin-bottom:28px;
  }
  .hero h1{font-size:clamp(38px,5.6vw,68px);font-weight:700;max-width:900px;margin-bottom:24px;letter-spacing:-.015em;}
  .hero h1 em{font-style:normal;box-shadow:inset 0 -14px 0 var(--yellow);}
  .hero p.lead{font-size:19px;max-width:680px;margin-bottom:36px;color:var(--dark);}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px;}
  .btn{
    display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:600;
    font-size:16px;padding:15px 32px;text-decoration:none !important;cursor:pointer;border:2px solid var(--black);
  }
  .btn-primary{background:var(--black);color:var(--white);}
  .btn-primary:hover{background:var(--dark);border-color:var(--dark);}
  .btn-outline{background:var(--white);color:var(--black);}
  .btn-outline:hover{background:var(--black);color:var(--white);}

  .status-demo{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:56px;
    border-top:1px solid var(--grey);border-bottom:1px solid var(--grey);padding:18px 0;
  }
  .status-demo .cap{font-size:14px;color:var(--dark);font-weight:500;margin-right:6px;}
  .chip{
    font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;
  }
  .chip-green{background:var(--green);color:var(--white);}
  .chip-yellow{background:var(--yellow);color:var(--black);}
  .chip-red{background:var(--red);color:var(--white);}
  .chip-blue{background:var(--blue);color:var(--white);}

  .shot{
    background:var(--grey);
    border:1px solid var(--black);
    display:flex;align-items:center;justify-content:center;
    text-align:center;padding:24px;
    font-family:'Space Grotesk',sans-serif;font-weight:500;color:var(--dark);
  }
  .shot span{font-size:15px;}
  a.shot-link{display:block;text-decoration:none !important;}
  img.shot{width:100%;display:block;object-fit:cover;padding:0;aspect-ratio:1920/825;height:auto;min-height:0;}
  .shot-hero{min-height:460px;}
  .shot-md{min-height:300px;}

  /* ============ SECTION GENERICS ============ */
  section{padding:88px 0;}
  .sec-label{
    font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--black);
    border-left:4px solid var(--yellow);padding-left:12px;margin-bottom:18px;
  }
  .sec-title{font-size:clamp(28px,3.6vw,44px);font-weight:700;margin-bottom:20px;max-width:760px;letter-spacing:-.01em;}
  .sec-intro{font-size:18px;max-width:700px;margin-bottom:48px;}

  /* dark band */
  .band-dark{background:var(--dark);color:var(--white);}
  .band-dark h2,.band-dark h3,.band-dark h4{color:var(--white);}
  .band-dark .sec-label{color:var(--white);}
  .band-dark p{color:var(--white);}

  /* ============ PROCES ============ */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--black);}
  .step{padding:32px 28px;border-right:1px solid var(--black);background:var(--white);}
  .step:last-child{border-right:none;}
  .step-num{
    font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:700;
    color:var(--black);display:block;margin-bottom:14px;
    border-bottom:4px solid var(--yellow);padding-bottom:10px;
  }
  .step h3{font-size:18px;margin-bottom:10px;}
  .step p{font-size:15px;color:var(--dark);}

  /* ============ VREDNOSTI ============ */
  .val-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
  .val-col{border-top:6px solid var(--black);padding-top:28px;}
  .val-col.market{border-top-color:var(--blue);}
  .val-col.dobavljac{border-top-color:var(--green);}
  .val-col h3{font-size:24px;margin-bottom:6px;}
  .val-col .who{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px;display:block;}
  .val-col.market .who{color:var(--blue);}
  .val-col.dobavljac .who{color:var(--green);}
  ul.plain{list-style:none;}
  ul.plain li{
    padding:14px 0;border-top:1px solid var(--grey);font-size:16px;
  }
  ul.plain li:first-child{border-top:none;}
  ul.plain li strong{color:var(--black);}
  .band-dark ul.plain li{border-top-color:#4a4a4a;}
  .band-dark ul.plain li strong{color:var(--white);}

  /* ============ FUNKCIONALNOSTI ============ */
  .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
  .feat-card{border:1px solid var(--black);padding:34px 32px;background:var(--white);}
  .feat-card h3{font-size:21px;margin-bottom:18px;padding-bottom:14px;border-bottom:3px solid var(--yellow);}
  .feat-card ul.plain li{padding:11px 0;font-size:15px;}
  .feat-shots{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;}

  /* ============ ADMIN + INFRA ============ */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
  .duo h3{font-size:24px;margin-bottom:22px;padding-bottom:14px;border-bottom:3px solid var(--yellow);}

  /* ============ KOME ============ */
  .aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .aud{border:1px solid var(--black);padding:28px 24px;}
  .aud h3{font-size:18px;margin-bottom:10px;}
  .aud p{font-size:15px;}
  .aud-tag{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;margin-bottom:16px;color:var(--white);}

  /* ============ CTA STRIP ============ */
  .cta-strip{background:var(--black);padding:72px 0;}
  .cta-strip h2{color:var(--white);font-size:clamp(26px,3.4vw,40px);margin-bottom:10px;}
  .cta-strip p{color:var(--white);font-size:18px;margin-bottom:32px;}
  .cta-strip .btn-yellow{background:var(--yellow);color:var(--black);border-color:var(--yellow);}
  .cta-strip .btn-yellow:hover{background:var(--white);border-color:var(--white);}

  /* ============ KONTAKT ============ */
  .contact-box{border:1px solid var(--black);padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;}
  .contact-box h3{font-size:22px;margin-bottom:14px;}
  .contact-line{padding:12px 0;border-top:1px solid var(--grey);font-size:16px;}
  .contact-line:first-of-type{border-top:none;}
  .contact-line b{display:inline-block;min-width:110px;font-weight:600;color:var(--black);}

  /* ============ FOOTER ============ */
  footer{margin-top:0;}
  .footer-body{
    background:var(--dark);
    border-top:6px solid var(--yellow);
    padding:64px 0 56px;
    color:var(--white);
  }
  .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;align-items:start;}
  .footer-logo img{height:64px;display:block;margin-bottom:20px;}
  .footer-body p{font-size:15px;color:var(--white);max-width:360px;}
  .footer-body h4{color:var(--white);font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;}
  .footer-body ul{list-style:none;}
  .footer-body ul li{margin-bottom:12px;}
  .footer-body ul a{color:var(--white);font-size:15px;text-decoration:none;border-bottom:1px solid transparent;}
  .footer-body ul a:hover{border-bottom-color:var(--yellow);text-decoration:none;}
  .footer-bottom{background:var(--black);padding:18px 0;}
  .footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
  .footer-bottom span{color:var(--white);font-size:13px;}

  /* ============ RESPONSIVE ============ */
  @media (max-width: 960px){
    .steps{grid-template-columns:1fr 1fr;}
    .step{border-bottom:1px solid var(--black);}
    .step:nth-child(2n){border-right:none;}
    .step:nth-child(3),.step:nth-child(4){border-bottom:none;}
    .aud-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr;gap:36px;}
  }
  @media (max-width: 760px){
    .nav-links{
      display:none;position:absolute;top:72px;left:0;right:0;
      background:var(--white);flex-direction:column;align-items:flex-start;
      padding:20px 24px;gap:18px;border-bottom:2px solid var(--black);
    }
    .nav-links.open{display:flex;}
    .nav-toggle{display:block;}
    .val-grid,.feat-grid,.feat-shots,.duo,.contact-box{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;}
    .step{border-right:none;border-bottom:1px solid var(--black);}
    .step:nth-child(3){border-bottom:1px solid var(--black);}
    .step:last-child{border-bottom:none;}
    .aud-grid{grid-template-columns:1fr;}
    section{padding:64px 0;}
    .hero{padding:56px 0;}
    .shot-hero{min-height:280px;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
  }