/* Landing /besplatna-izrada only. Supplements the preserved original Free CSS. */
[hidden]{display:none!important}
.promo-page .promo-skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px;background:white;color:#111}
.promo-page .promo-skip:focus{left:12px}
.promo-page .promo-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.promo-page .purchase-form>label,.promo-page .purchase-fields label{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-bottom:17px;font-size:13px;font-weight:650;color:#30404e}
.promo-page .purchase-form textarea{width:100%;min-height:92px;padding:12px 13px;font:15px/1.5 Inter,Arial,sans-serif;border:1px solid #c9d1d5;border-radius:6px;background:#fff;color:#182630;resize:vertical}
.promo-page .purchase-form input:focus-visible,.promo-page .purchase-form textarea:focus-visible{outline:2px solid #a98c30;outline-offset:2px}
.promo-page .purchase-form .lead-form__turnstile{min-height:62px;margin:8px 0 4px}
.promo-page .purchase-form .lead-form__msg{min-height:20px;margin:10px 0;color:#277146;font-size:12px;line-height:1.5}
.promo-page .purchase-form .lead-form__msg--error{color:#b43838}
.promo-page .promo-legal-note{margin:10px 0 14px;color:#5a6670;font-size:11px;line-height:1.65}
.promo-page .promo-legal-note a{text-decoration:underline;text-underline-offset:3px}
.promo-page .purchase-form button[type=submit]{width:100%;min-height:53px}
.promo-page .purchase-form button:disabled{opacity:.58;cursor:wait}
.promo-page .demo-site[hidden]{display:none!important}
.promo-page .demo-site{width:100%;height:100%}
.promo-page .demo-phone-screen{overflow:hidden}
.promo-page .purchase-packages .purchase-package{cursor:pointer}
.promo-page .pricing-disclosures{margin-top:24px}
.promo-page .final-section{scroll-margin-top:25px}
.promo-page .site-header nav.mobile-open{z-index:100}
.promo-page .preview-strip{background:#20252c}
.promo-page .availability.center{margin:20px auto 0}
@media(max-width:767px){
.promo-page .purchase-fields{display:grid;grid-template-columns:1fr;gap:0}
.promo-page .purchase-form .lead-form__turnstile{min-height:78px}
.promo-page .hero-actions{flex-wrap:wrap}
}

/* Let visitors browse the main website without leaving the promotion funnel accidentally. */
.promo-page .preview-strip{flex-wrap:wrap;gap:5px 9px;text-align:center}
.promo-page .preview-strip__site-link{color:#f1d178;text-decoration:underline;text-underline-offset:2px;font-weight:750}
.promo-page .preview-strip__site-link:hover{color:#fff}
.promo-page .site-header nav .promo-back-link{color:#edc763;white-space:nowrap}
.promo-page .site-header nav .promo-back-link:hover{color:#fff}
@media(min-width:768px) and (max-width:1199px){.promo-page .site-header nav .promo-back-link{display:none}}
@media(max-width:570px){.promo-page .preview-strip{padding:7px 12px;font-size:9px;line-height:1.4}}


/* Inline hero contact form - mirrored placement from main izradastranica.hr.
   Isolated to the promotional page, so the main website is unchanged. */
.promo-page .hero{
  display:block;
  min-height:0;
  height:auto;
  padding:0;
  overflow:hidden;
}
.promo-page .hero-grid{
  min-height:0;
  grid-template-columns:minmax(0,1fr) minmax(390px,.99fr);
  gap:clamp(28px,4vw,57px);
  align-items:start;
  padding-top:clamp(20px,3vw,40px);
  padding-bottom:clamp(40px,5vw,65px);
}
.promo-page .hero h1{font-size:clamp(35px,4vw,54px);white-space:normal}
.promo-page .hero-copy{align-self:start;min-width:0;max-width:100%}
.promo-page .hero-proof{flex-wrap:wrap}
.promo-page .promo-hero-form{
  position:relative;
  z-index:3;
  width:100%;
  max-width:530px;
  min-width:0;
  margin:0;
  justify-self:end;
  padding:clamp(20px,2.5vw,29px);
  background:#fff;
  border:1px solid #eee5d3;
  border-top:4px solid #d4af37;
  border-radius:12px;
  box-shadow:0 28px 80px rgba(0,0,0,.30);
  color:#172431;
  scroll-margin-top:90px;
}
.promo-page .promo-hero-form .purchase-kicker{font-size:10px;letter-spacing:.1em}
.promo-page .promo-hero-form h3{font:700 clamp(23px,2.5vw,28px)/1.17 Outfit,Inter,sans-serif;letter-spacing:-.03em;margin:8px 0 0;color:#172431}
.promo-page .promo-hero-form>p{margin:8px 0 0;font-size:12px;line-height:1.5;color:#52606d}
.promo-page .promo-hero-form .purchase-packages{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.promo-page .promo-hero-form .purchase-package{
  min-height:68px;
  padding:10px 12px;
  align-content:center;
  border-radius:6px;
}
.promo-page .promo-hero-form .purchase-package strong{font-size:12px}
.promo-page .promo-hero-form .purchase-package b{font-size:14px}
.promo-page .promo-hero-form .purchase-package small{font-size:10px}
.promo-page .promo-hero-form .purchase-form{margin-top:15px}
.promo-page .promo-hero-form .purchase-form>label,
.promo-page .promo-hero-form .purchase-fields label{
  font-size:12px;
  margin-bottom:10px;
  gap:6px;
}
.promo-page .promo-hero-form .purchase-form input:not([type="checkbox"]){
  height:43px;
  padding:10px 12px;
  font-size:14px;
}
.promo-page .promo-hero-form .purchase-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.promo-page .promo-hero-form .purchase-form textarea{min-height:61px;padding:9px 12px}
.promo-page .promo-hero-form .purchase-form .lead-form__turnstile{min-height:49px;margin:2px 0 0}
.promo-page .promo-hero-form .promo-legal-note{margin:7px 0 10px;font-size:10px;line-height:1.45}
.promo-page .promo-hero-form .purchase-submit{min-height:47px}
.promo-page .promo-hero-form .purchase-safe{margin:7px 0 0;font-size:10px}
.promo-page .promo-hero-form .lead-form__msg{margin:6px 0 0;min-height:0}

/* Keep the original interactive demo, but show it BELOW the lead form hero. */
.promo-page .promo-demo-section{padding:65px 0 80px;background:linear-gradient(160deg,#151d28,#0c121a);overflow:hidden;color:#eef0f3}
.promo-page .promo-demo-heading{text-align:center;max-width:650px;margin:0 auto 18px}
.promo-page .promo-demo-heading .section-kicker{color:#d4af37;margin-bottom:12px}
.promo-page .promo-demo-heading h2{font:700 clamp(30px,3.9vw,48px)/1.12 Outfit,Inter,sans-serif;letter-spacing:-.035em}
.promo-page .promo-demo-heading h2 span{color:#d4af37}
.promo-page .promo-demo-heading p{margin:12px 0 0;color:#b5bec8;font-size:13px}
.promo-page .promo-demo-section .hero-visual{
  width:min(620px,100%);
  max-width:620px;
  height:465px;
  position:relative;
  margin:28px auto 0;
  transform:none;
}
.promo-page .promo-demo-section .demo-disclaimer{bottom:0}

/* Bottom is a short reminder, never a second form. */
.promo-page .promo-final-cta{padding:65px 0 85px}
.promo-page .promo-final-cta__inner{max-width:690px;text-align:center}
.promo-page .promo-final-cta h2{font:700 clamp(34px,4vw,52px)/1.1 Outfit,Inter,sans-serif;color:#fff;letter-spacing:-.04em}
.promo-page .promo-final-cta h2 span{color:#d4af37}
.promo-page .promo-final-cta p{max-width:600px;margin:18px auto 22px;color:#bbc6d0;font-size:15px;line-height:1.7}
.promo-page .promo-final-cta .button{margin-top:3px}
.promo-page .promo-final-cta .promo-final-cta__note{font-size:11px;color:#a4b0ba;margin:14px auto 0}
@media(max-width:1150px){
  .promo-page .hero-grid{grid-template-columns:minmax(0,1fr) minmax(345px,1fr);gap:24px}
  .promo-page .hero h1{font-size:clamp(32px,4.2vw,47px)}
  .promo-page .promo-hero-form{padding:21px}
}
@media(max-width:850px){
  .promo-page .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:620px;min-height:0;padding:18px 0 39px}
  .promo-page .hero h1{font-size:clamp(35px,6.3vw,52px)}
  .promo-page .hero-copy{text-align:left}
  .promo-page .promo-hero-form{max-width:620px;justify-self:stretch;margin:0 auto}
  .promo-page .hero-actions{margin-top:19px}
}
@media(max-width:570px){
  .promo-page .hero-grid{padding-top:12px;gap:17px;padding-bottom:32px}
  .promo-page .eyebrow{margin-bottom:15px}
  .promo-page .hero h1{font-size:clamp(33px,9vw,41px)}
  .promo-page .hero-intro{margin-top:14px;line-height:1.6}
  .promo-page .hero-price{margin-top:11px}
  .promo-page .hero-actions{margin-top:13px}
  .promo-page .promo-hero-form{padding:18px 15px}
  .promo-page .promo-hero-form .purchase-package{min-height:64px;padding:9px}
  .promo-page .promo-hero-form .purchase-package b{font-size:13px}
  .promo-page .promo-hero-form .purchase-fields{grid-template-columns:1fr;gap:0}
  .promo-page .promo-demo-section{padding:48px 0 50px}
  .promo-page .promo-demo-section .hero-visual{height:345px}
  .promo-page .promo-final-cta{padding:55px 0 80px}
}
@media(max-width:380px){
  .promo-page .promo-hero-form .purchase-package{padding:7px;min-height:61px}
  .promo-page .promo-hero-form .purchase-package strong{font-size:11px}
  .promo-page .promo-hero-form .purchase-package b{font-size:12px}
  .promo-page .promo-demo-section .hero-visual{height:295px}
}

/* Restrict intrinsic sizing and flex labels to the mobile viewport. */
.promo-page main,.promo-page .hero-grid,.promo-page .hero-copy,
.promo-page .promo-hero-form,.promo-page .purchase-form{min-width:0;max-width:100%}
.promo-page .promo-hero-form .purchase-package{min-width:0}
.promo-page .promo-hero-form .purchase-package span,
.promo-page .promo-hero-form .purchase-package strong,
.promo-page .promo-hero-form .purchase-package b{min-width:0;overflow-wrap:break-word}
@media(max-width:850px){
  .promo-page .hero-grid{align-items:start}
  .promo-page .hero-price{display:block;max-width:100%;line-height:1.6}
  .promo-page .hero-actions{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;max-width:100%;gap:9px;
  }
  .promo-page .hero-actions .button{
    min-width:0;width:100%;white-space:normal;overflow-wrap:break-word;
    padding:12px 9px;gap:7px;justify-content:center;
  }
  .promo-page .promo-hero-form .purchase-packages{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:375px){
  .promo-page .hero h1{font-size:clamp(31px,8.6vw,35px)}
  .promo-page .hero-grid{padding-top:9px}
  .promo-page .promo-hero-form .purchase-packages{gap:6px}
  .promo-page .promo-hero-form .purchase-package{padding:8px 6px}
}