:root{--gold:#c58d42;--ink:#633c31;--muted:#84695f;--line:rgba(197,141,66,.28);--shadow:0 24px 70px rgba(122,76,54,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff7f2;color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}a{text-decoration:none;color:inherit}
.header{position:sticky;top:0;z-index:30;background:rgba(255,248,243,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;gap:24px;align-items:center;justify-content:space-between;padding:14px clamp(18px,5vw,78px)}.brand{display:flex;align-items:center;gap:12px;font-family:Georgia,serif}.brand img{width:54px;height:54px;object-fit:contain}.brand strong{font-size:24px;font-weight:500}.brand small{display:block;letter-spacing:.18em;font-size:10px}.nav{display:flex;gap:22px;font-size:14px}.langs{display:flex;gap:6px;flex-wrap:wrap}.langs button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:7px 10px;color:var(--ink);font-weight:700;cursor:pointer}.langs button.active{background:var(--ink);color:#fff}
.hero{min-height:560px;background:url("../img/hero.jpg") center/cover no-repeat;position:relative;display:flex;align-items:center;padding:60px clamp(24px,7vw,120px)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,248,242,.92),rgba(255,248,242,.45),rgba(255,248,242,.03))}.hero-inner{position:relative;max-width:520px}.hero h1{font:500 clamp(54px,6vw,90px)/.95 Georgia,serif;margin:0;color:#8f4f24}.hero h2{font:500 clamp(24px,3vw,34px) Georgia,serif;margin:18px 0;color:#4c332e}.hero p{font-size:18px;line-height:1.55}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;font-weight:750;border:1px solid var(--gold);background:#fff;color:var(--ink);box-shadow:0 12px 28px rgba(100,60,42,.08);cursor:pointer}.btn.primary{background:linear-gradient(135deg,#d7a457,#be8241);color:#fff}.btn.lav{background:#eee0f8}.section{padding:74px clamp(18px,5vw,80px)}.section h2{text-align:center;font:500 clamp(34px,4vw,54px) Georgia,serif;color:#8f4f24;margin:0 0 26px}.lead{max-width:880px;margin:0 auto;text-align:center;line-height:1.8;color:var(--muted);font-size:18px}
.cards{max-width:1180px;margin:35px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.work-card{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);min-height:270px;text-align:center}.work-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.work-card .content{position:relative;z-index:1;min-height:270px;padding:118px 28px 28px;background:rgba(255,238,231,.18)}.work-card h3{font:500 27px Georgia,serif;margin:0 0 10px;color:#2f2524}.work-card p{line-height:1.6;color:#2f2524}.work-card a{display:inline-flex;margin-top:8px;background:rgba(255,255,255,.85);border-radius:999px;padding:11px 28px;font-weight:700}
.zero-section{background:linear-gradient(180deg,#fff8f4,#fffdf9);text-align:center}.zero-wrap{position:relative;max-width:1180px;margin:0 auto}.zero-entity{width:100%;display:block}.zero-overlay{position:absolute;left:8.2%;right:8.2%;top:43.5%;height:46%;padding:clamp(18px,3vw,44px);text-align:left;font-size:clamp(17px,2vw,28px);line-height:1.55;color:#2e2826;overflow:hidden}.zero-cursor{display:inline-block;width:.45em;height:1.15em;background:var(--gold);vertical-align:-.15em;margin-left:3px;animation:blink 1s step-start infinite}@keyframes blink{50%{opacity:0}}.domain-hotspots button{position:absolute;border:0;background:transparent;cursor:pointer}
.zero-listen{position:fixed;right:26px;bottom:26px;z-index:50;display:none;align-items:center;gap:12px;border:1px solid rgba(198,142,58,.5);background:#fffaf6;border-radius:999px;padding:12px 18px;box-shadow:0 18px 50px rgba(76,38,25,.22);cursor:pointer}.zero-listen.show{display:flex}.zero-listen img{width:62px;height:62px}.zero-listen b{display:block}.zero-listen span{font-size:12px;color:var(--muted)}
.audience{background:#fffaf6}.aud-grid{max-width:1180px;margin:30px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.aud-card{background:rgba(255,255,255,.68);border:1px solid var(--line);border-radius:24px;padding:24px 18px;text-align:center;box-shadow:0 16px 35px rgba(120,70,55,.06)}.aud-card img{height:48px;object-fit:contain}.aud-card h3{font:500 20px Georgia,serif;color:#173865}.aud-card p{font-size:14px;color:var(--muted);line-height:1.55}
.carousel{background:#fff4ef}.manual-carousel{max-width:540px;margin:25px auto 0;position:relative}.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:28px;box-shadow:var(--shadow);scroll-behavior:smooth}.track::-webkit-scrollbar{display:none}.slide{flex:0 0 100%;scroll-snap-align:center;margin:0;background:#fff}.slide img{width:100%;display:block;aspect-ratio:4/5;object-fit:contain}.cbtn{position:absolute;top:50%;transform:translateY(-50%);border:1px solid var(--line);background:#fff;width:44px;height:44px;border-radius:50%;font-size:28px;color:var(--ink)}.prev{left:-22px}.next{right:-22px}.flow-img{width:100%;display:block}.fibo-block{display:grid;grid-template-columns:1fr 1fr;background:#fffaf6}.fibo-image{background:url("../img/fibonacci-life.jpg") center/cover no-repeat;min-height:360px}.fibo-text{padding:60px clamp(24px,5vw,80px);display:flex;flex-direction:column;justify-content:center}.fibo-text h2{font:500 38px Georgia,serif;color:#8f4f24;margin:0 0 18px}.fibo-text p{line-height:1.75;color:#473431}.path-grid{max-width:1220px;margin:40px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.step{border:1px solid var(--line);background:rgba(255,255,255,.68);border-radius:24px;text-align:center;padding:24px 18px}.num{width:76px;height:76px;margin:-50px auto 15px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ece0ff,#f7c387);border:2px solid var(--gold);font:500 42px Georgia,serif;color:#26426c}.step h3{font:500 22px Georgia,serif;color:#173865}.step p{font-size:14px;line-height:1.55}
.signatures{background:#fff8f4}.sig-grid{max-width:1100px;margin:30px auto;display:grid;grid-template-columns:1fr 1fr;gap:26px}.sig{white-space:pre-line;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.7);padding:28px;text-align:center;line-height:1.55;box-shadow:var(--shadow)}.sig:first-line{font:500 30px Georgia,serif;color:#8f4f24}.sig img{max-width:260px;margin:0 auto 10px;display:block}.faq{max-width:900px;margin:0 auto}.faq details{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px 22px;margin:10px 0}.faq summary{font-weight:800;color:#8f4f24;cursor:pointer}.footer{display:grid;grid-template-columns:repeat(4,1fr);background:#fffaf7;border-top:1px solid var(--line);padding:16px clamp(18px,5vw,70px)}.footer a{display:flex;align-items:center;gap:12px;padding:12px 18px;border-right:1px solid var(--line)}.footer img{width:38px;height:38px}.footer span{display:block;text-transform:uppercase;font-size:12px;font-weight:800}.footer small{display:block;color:var(--muted);font-size:12px}.modal{position:fixed;inset:0;z-index:60;background:rgba(40,25,20,.45);display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-card{background:#fffaf6;border:1px solid var(--line);border-radius:30px;max-width:760px;padding:38px;box-shadow:0 28px 100px rgba(0,0,0,.25)}.modal-card h3{font:500 36px Georgia,serif;color:#8f4f24}.modal-card p{line-height:1.8}.close{float:right;border:0;background:#fff;border-radius:50%;width:38px;height:38px;font-size:22px}
@media(max-width:1050px){.nav{display:none}.header{flex-wrap:wrap}.cards,.aud-grid,.path-grid,.sig-grid,.fibo-block,.footer{grid-template-columns:1fr}.aud-grid{max-width:560px}.hero{background-image:url("../img/hero-mobile.jpg");align-items:flex-end}.zero-overlay{font-size:15px;line-height:1.45;top:44%;padding:15px}.footer a{border-right:0;border-bottom:1px solid var(--line)}}


/* === V2 fixes === */
.zero-section{padding-top:62px;padding-bottom:70px}
.zero-title{margin-bottom:18px}
.zero-wrap{max-width:1240px}
.zero-overlay{
  left:10.2%;
  right:10.2%;
  top:48.2%;
  height:33%;
  padding:12px 30px 22px 30px;
  font-size:clamp(15px,1.65vw,23px);
  line-height:1.52;
  overflow:hidden;
}
.domain-layer{
  position:absolute;
  left:7.5%;
  right:7.5%;
  top:23.2%;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:6px;
  pointer-events:none;
}
.domain-layer button{
  pointer-events:auto;
  min-height:96px;
  border:0;
  background:transparent;
  cursor:pointer;
  color:#633c31;
  font-family:Georgia,serif;
  font-size:14px;
  text-align:center;
  padding-top:72px;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.domain-layer button.active span{
  border-bottom:2px solid #c58d42;
  color:#8f4f24;
}
.domain-hotspots{display:none}
.aud-card{
  text-align:left;
  position:relative;
  padding:24px 20px 22px 22px;
}
.aud-card .aud-num{
  font:500 42px Georgia,serif;
  color:#8f4f24;
  display:block;
  margin-bottom:8px;
}
.aud-card img{
  position:absolute;
  right:16px;
  top:18px;
  height:38px;
  opacity:.72;
}
.aud-card h3{padding-right:46px;margin-top:0}
.carousel .slide{
  min-height:520px;
  position:relative;
  overflow:hidden;
}
.carousel .slide img{
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  object-fit:cover;
  opacity:.88;
}
.carousel .slide figcaption{
  position:absolute;
  inset:auto 34px 34px 34px;
  background:rgba(255,250,246,.82);
  border:1px solid rgba(197,141,66,.28);
  border-radius:24px;
  padding:24px;
  color:#3f2e2b;
  line-height:1.55;
}
.carousel .slide figcaption h3{
  margin:0 0 8px;
  font:500 28px Georgia,serif;
  color:#8f4f24;
}
.fibo-text p{font-size:17px}
.sig img{background:transparent!important}
.footer a[href^="tel:"]{cursor:pointer}
.footer a:hover small{text-decoration:underline}
@media(max-width:1050px){
  .zero-overlay{top:49%;font-size:14px;padding:8px 16px;height:31%}
  .domain-layer{top:22.2%;left:6%;right:6%;gap:2px}
  .domain-layer button{font-size:9px;min-height:62px;padding-top:47px}
}


/* === V3 corrected layout === */
.langs{order:3}.langs button{min-width:42px}
.zero-section{padding-top:58px;padding-bottom:70px}
.zero-title{display:none}
.zero-wrap{max-width:1240px;margin:0 auto;position:relative}
.zero-entity{width:100%;display:block}
.zero-meta{
  position:absolute;left:8.4%;right:8.4%;top:8.7%;height:12%;
  text-align:left;padding-left:10px;color:#633c31;pointer-events:none
}
.zero-meta h2{margin:0;font:600 clamp(24px,3.2vw,50px) Georgia,serif;color:#633c31;text-align:left}
.zero-meta p{margin:.25rem 0 0;color:#84695f;font-size:clamp(12px,1.5vw,21px)}
.domain-layer{position:absolute;left:7.4%;right:7.4%;top:23.5%;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;pointer-events:none}
.domain-layer button{pointer-events:auto;min-height:98px;border:0;background:transparent;cursor:pointer;color:#633c31;font-family:Georgia,serif;font-size:14px;text-align:center;padding-top:72px;text-shadow:0 1px 0 rgba(255,255,255,.95)}
.domain-layer button.active span{border-bottom:2px solid #c58d42;color:#8f4f24}
.domain-hotspots{display:none!important}
.zero-overlay{left:10.2%;right:10.2%;top:49%;height:31%;padding:8px 30px 22px;font-size:clamp(15px,1.55vw,22px);line-height:1.55;overflow:hidden}
.zero-breath{animation:zeroBreath 3.4s ease-in-out infinite}
@keyframes zeroBreath{0%,100%{filter:drop-shadow(0 0 0 rgba(198,142,58,0));opacity:1}50%{filter:drop-shadow(0 0 10px rgba(198,142,58,.18));opacity:.985}}
.aud-card{text-align:left;position:relative;padding:24px 20px 22px 22px}
.aud-card .aud-num{font:500 44px Georgia,serif;color:#8f4f24;display:block;margin-bottom:8px}
.aud-card img{position:absolute;right:18px;top:20px;height:38px;opacity:.72}
.aud-card h3{padding-right:50px;margin-top:0}
.carousel .slide{min-height:520px;position:relative;overflow:hidden;background:#fff}
.carousel .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.carousel .slide figcaption{position:absolute;left:32px;right:32px;bottom:32px;background:rgba(255,250,246,.86);border:1px solid rgba(197,141,66,.28);border-radius:24px;padding:22px;color:#3f2e2b;line-height:1.55}
.carousel .slide figcaption h3{margin:0 0 8px;font:500 28px Georgia,serif;color:#8f4f24}
.fibo-block{align-items:stretch}.fibo-text p{font-size:17px}.sig img{background:transparent!important}.sig:first-line{font:500 30px Georgia,serif;color:#8f4f24}
.contact-form-wrap{max-width:920px;margin:0 auto;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{display:flex;flex-direction:column;gap:7px;font-weight:700;color:#633c31}.contact-form input,.contact-form select,.contact-form textarea{border:1px solid rgba(197,141,66,.34);border-radius:16px;padding:13px 14px;background:#fffaf6;color:#2f2524;font:inherit}.contact-form textarea{min-height:130px}.contact-form .full{grid-column:1/-1}.form-status{margin-top:14px;color:#8f4f24;font-weight:700}.footer a[href^="tel:"]{cursor:pointer}.footer a:hover small{text-decoration:underline}
@media(max-width:1050px){.langs{width:100%;justify-content:center}.zero-meta{top:7.5%}.domain-layer{top:22%;left:5.8%;right:5.8%;gap:2px}.domain-layer button{font-size:8.5px;min-height:62px;padding-top:46px}.zero-overlay{top:49%;height:31%;font-size:13px;padding:8px 14px}.contact-form{grid-template-columns:1fr}}


/* === V4 final corrections === */

/* Work cards: clean background, system text over it, icon CTA not ugly box */
.cards{align-items:stretch}
.work-card{min-height:330px;background:#fff}
.work-card img{filter:none!important;opacity:1!important}
.work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,248,242,.08),rgba(255,248,242,.58));z-index:0}
.work-card .content{position:relative;z-index:1;min-height:330px;padding:108px 28px 26px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.work-card h3{font-size:28px;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.work-card p{text-align:center;max-width:310px;margin:0 auto 14px}
.work-card a{background:transparent!important;padding:0!important;margin-top:8px!important;border-radius:0!important;display:flex!important;flex-direction:column;align-items:center;gap:7px;color:#633c31}
.work-card a .work-svg{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.78);border:1px solid rgba(197,141,66,.38);box-shadow:0 8px 24px rgba(120,70,55,.10)}
.work-card a svg{width:34px;height:34px;stroke:#c58d42;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.work-card a .work-label{font-size:14px;font-weight:800;background:rgba(255,255,255,.72);border-radius:999px;padding:6px 14px}

/* ZERO: title inside entity, labels centered below icons */
.zero-meta{top:7.8%;left:8.6%;right:8.6%;height:13%}
.zero-meta h2{text-align:left;margin:0;font:600 clamp(25px,3vw,48px) Georgia,serif}
.zero-meta p{text-align:left;margin:4px 0 0}
.domain-layer{top:23.5%;left:7.5%;right:7.5%;gap:6px}
.domain-layer button{display:flex;align-items:flex-end;justify-content:center;padding:0 0 3px 0;min-height:114px;font-size:14px;line-height:1.1}
.domain-layer button span{display:inline-block;min-width:70px;text-align:center;padding-top:75px}
.zero-overlay{top:50%;height:30%;padding:10px 34px;font-size:clamp(15px,1.48vw,22px);line-height:1.55}

/* Za koga je: number left, icon right, centered text */
.aud-card{text-align:center;padding:22px 18px 24px;min-height:246px}
.aud-card .aud-num{position:absolute;left:20px;top:16px;font:500 42px Georgia,serif;color:#8f4f24;margin:0}
.aud-card img{position:absolute;right:20px;top:20px;height:42px;opacity:.72}
.aud-card h3{padding:58px 0 0;margin:0 0 10px;text-align:center;font-size:21px}
.aud-card p{text-align:center;margin:0 auto;max-width:220px}

/* Carousel: pure images, no boxes, no captions */
.carousel .manual-carousel{max-width:min(92vw,560px)}
.carousel .slide{min-height:auto;background:#fff}
.carousel .slide img{position:static!important;width:100%;height:auto!important;aspect-ratio:4/5;object-fit:cover;opacity:1!important;display:block}
.carousel .slide figcaption{display:none!important}

/* Fibonacci modal reliable visual */
.modal-card{max-height:86vh;overflow:auto}
#fiboOpen{width:max-content}

/* Contact form only in Vanja page */
.main-contact-removed{display:none}

/* footer click feedback */
.footer a[href^="tel:"] small::after{content:"  ↗";font-weight:900;color:#c58d42}

@media(max-width:1050px){
  .work-card,.work-card .content{min-height:310px}
  .domain-layer{top:22.2%;left:5.5%;right:5.5%;gap:1px}
  .domain-layer button{min-height:66px;font-size:8px}
  .domain-layer button span{min-width:34px;padding-top:44px}
  .zero-meta{top:7%}
  .zero-overlay{top:50%;height:30%;font-size:12.7px;padding:7px 14px}
}


/* === V5 language + ZERO scroll + signature fix === */
.zero-overlay{
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(197,141,66,.45) transparent;
}
.zero-overlay::-webkit-scrollbar{width:7px}
.zero-overlay::-webkit-scrollbar-thumb{background:rgba(197,141,66,.45);border-radius:999px}
.sig img[src*="vanja-potpis-clean"]{
  max-width:300px;
  width:min(300px,90%);
  height:auto;
  object-fit:contain;
  margin-bottom:14px;
}
.faq details p{line-height:1.7;color:#5f4943}


/* === V6 corrections: work cards clean, no CTA icons, ZERO sluša tied to ZERO section === */
.work-card{min-height:335px}
.work-card img{filter:none!important;opacity:1!important}
.work-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,248,242,.02), rgba(255,248,242,.22), rgba(255,248,242,.50));
  z-index:0;
}
.work-card .content{
  justify-content:flex-end!important;
  padding:0 30px 34px!important;
  min-height:335px!important;
  background:transparent!important;
}
.work-card .content a,
.work-card .content .work-svg,
.work-card .content .work-label{
  display:none!important;
}
.work-card h3{
  margin:0 0 10px!important;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.85), 0 8px 24px rgba(255,255,255,.60);
}
.work-card p{
  text-align:center;
  margin:0 auto!important;
  max-width:330px;
  text-shadow:0 1px 0 rgba(255,255,255,.80), 0 8px 24px rgba(255,255,255,.55);
}

/* ZERO sluša must stay tied to ZERO govori block, not float across the page */
.zero-wrap{position:relative}
.zero-listen{
  position:absolute!important;
  right:8.6%;
  bottom:6.2%;
  z-index:12;
  display:none;
}
.zero-listen.show{display:flex!important}
.zero-listen-inline{transform:none}

@media(max-width:1050px){
  .zero-listen{
    right:7%;
    bottom:3.8%;
    padding:7px 10px;
    gap:7px;
  }
  .zero-listen img{width:42px;height:42px}
  .zero-listen small{font-size:10px}
  .zero-listen b{font-size:12px}
}

/* === V7: completely replaced work-card photos, no CTA/icon clutter === */
.work-card{
  min-height:340px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#fff!important;
}
.work-card img{
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  object-fit:cover!important;
}
.work-card::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg, rgba(255,248,242,0) 0%, rgba(255,248,242,.10) 44%, rgba(255,248,242,.74) 100%)!important;
  z-index:0!important;
}
.work-card .content{
  min-height:340px!important;
  padding:0 30px 32px!important;
  background:transparent!important;
  justify-content:flex-end!important;
}
.work-card .content a,
.work-card .content .work-svg,
.work-card .content .work-label{
  display:none!important;
}
.work-card h3{
  margin:0 0 8px!important;
  font-size:29px!important;
  text-align:center!important;
  color:#2f2524!important;
  text-shadow:0 1px 0 rgba(255,255,255,.85), 0 10px 24px rgba(255,255,255,.55)!important;
}
.work-card p{
  margin:0 auto!important;
  max-width:330px!important;
  text-align:center!important;
  color:#2f2524!important;
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(255,255,255,.60)!important;
}

/* === V8: Oblici rada — potpuno nove čiste slike, samo sistemski tekst === */
.work-card{
  min-height:340px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#fff!important;
}
.work-card img{
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  object-fit:cover!important;
}
.work-card::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(
    180deg,
    rgba(255,248,242,0) 0%,
    rgba(255,248,242,.05) 42%,
    rgba(255,248,242,.72) 100%
  )!important;
  z-index:0!important;
}
.work-card .content{
  min-height:340px!important;
  padding:0 30px 34px!important;
  background:transparent!important;
  justify-content:flex-end!important;
  align-items:center!important;
}
.work-card .content a,
.work-card .content .work-svg,
.work-card .content .work-label{
  display:none!important;
}
.work-card h3{
  margin:0 0 8px!important;
  font-size:29px!important;
  text-align:center!important;
  color:#2f2524!important;
  text-shadow:0 1px 0 rgba(255,255,255,.92), 0 10px 24px rgba(255,255,255,.64)!important;
}
.work-card p{
  margin:0 auto!important;
  max-width:330px!important;
  text-align:center!important;
  color:#2f2524!important;
  text-shadow:0 1px 0 rgba(255,255,255,.92), 0 10px 24px rgba(255,255,255,.64)!important;
}

/* === V9: Oblici rada — only three new real photos + existing system text === */
.work-card{
  min-height:340px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#fff!important;
}
.work-card img{
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  object-fit:cover!important;
}
.work-card::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(
    180deg,
    rgba(255,248,242,0) 0%,
    rgba(255,248,242,.05) 42%,
    rgba(255,248,242,.72) 100%
  )!important;
  z-index:0!important;
}
.work-card .content{
  min-height:340px!important;
  padding:0 30px 34px!important;
  background:transparent!important;
  justify-content:flex-end!important;
  align-items:center!important;
}
.work-card .content a,
.work-card .content .work-svg,
.work-card .content .work-label{
  display:none!important;
}
.work-card h3{
  margin:0 0 8px!important;
  font-size:29px!important;
  text-align:center!important;
  color:#2f2524!important;
  text-shadow:0 1px 0 rgba(255,255,255,.92), 0 10px 24px rgba(255,255,255,.64)!important;
}
.work-card p{
  margin:0 auto!important;
  max-width:330px!important;
  text-align:center!important;
  color:#2f2524!important;
  text-shadow:0 1px 0 rgba(255,255,255,.92), 0 10px 24px rgba(255,255,255,.64)!important;
}


/* === V10: ZERO responsive polish + Fibonacci mobile focus === */

/* Desktop/laptop: allow the ZERO visual block to breathe with longer text */
.zero-wrap{
  --zero-extra: 0px;
  padding-bottom: var(--zero-extra);
  transition: padding-bottom .35s ease;
}
.zero-overlay{
  min-height: 30%;
  overflow-y: auto!important;
}

/* Fibonacci: keep the spiral/snail visible on narrow screens */
@media (max-width:1050px){
  .fibo-image{
    background-position: 18% center!important;
    min-height: 360px!important;
  }
}

/* Phone-only ZERO layout */
@media (max-width:760px){
  .zero-section{
    padding: 34px 10px 46px!important;
  }

  .zero-wrap{
    width: min(100%, 560px)!important;
    margin: 0 auto!important;
    padding-bottom: max(var(--zero-extra), 110px);
  }

  .zero-entity{
    width: 100%!important;
    min-height: 720px!important;
    object-fit: fill!important;
  }

  .zero-meta{
    top: 4.2%!important;
    left: 8%!important;
    right: 8%!important;
    height: auto!important;
    padding: 0!important;
    text-align: center!important;
  }

  .zero-meta h2{
    text-align: center!important;
    font-size: clamp(28px, 8.5vw, 42px)!important;
    line-height: 1.05!important;
    margin: 0 0 6px 0!important;
  }

  .zero-meta p{
    text-align: center!important;
    font-size: clamp(13px, 4vw, 18px)!important;
    line-height: 1.25!important;
    margin: 0 auto!important;
    max-width: 90%!important;
  }

  /* Domains: one visible row, bigger icons zone, readable labels below icons */
  .domain-layer{
    top: 18.5%!important;
    left: 4.5%!important;
    right: 4.5%!important;
    height: 95px!important;
    display: grid!important;
    grid-template-columns: repeat(4, 1fr)!important;
    grid-auto-rows: 48px!important;
    gap: 8px 2px!important;
    z-index: 10!important;
  }

  .domain-layer button{
    min-height: 46px!important;
    height: 46px!important;
    display: flex!important;
    align-items: flex-end!important;
    justify-content: center!important;
    padding: 0 0 0 0!important;
    font-size: clamp(9.5px, 2.65vw, 12px)!important;
    line-height: 1.05!important;
    text-align: center!important;
    color: #633c31!important;
    text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.85)!important;
  }

  .domain-layer button span{
    min-width: 0!important;
    width: 100%!important;
    padding-top: 30px!important;
    display: block!important;
    white-space: normal!important;
  }

  .domain-layer button.active span{
    border-bottom: 2px solid #c58d42!important;
  }

  /* Screen: push lower so text does not enter the icon/title zone */
  .zero-overlay{
    top: 39.5%!important;
    left: 9.5%!important;
    right: 9.5%!important;
    height: auto!important;
    min-height: 300px!important;
    max-height: none!important;
    padding: 14px 15px 24px!important;
    font-size: clamp(15px, 4.15vw, 18px)!important;
    line-height: 1.56!important;
    overflow-y: auto!important;
    background: rgba(255,255,255,.02)!important;
    border-radius: 18px!important;
  }

  .zero-listen{
    right: 10%!important;
    bottom: 4.8%!important;
    max-width: 80%!important;
  }
}

/* Very small phones */
@media (max-width:430px){
  .zero-entity{
    min-height: 760px!important;
  }
  .domain-layer{
    top: 18.2%!important;
    height: 104px!important;
    grid-auto-rows: 51px!important;
  }
  .zero-overlay{
    top: 40.5%!important;
    min-height: 320px!important;
  }
  .zero-meta h2{
    font-size: 30px!important;
  }
  .zero-meta p{
    font-size: 13px!important;
  }
}

/* Extra narrow phones */
@media (max-width:370px){
  .zero-entity{
    min-height: 800px!important;
  }
  .domain-layer button{
    font-size: 8.5px!important;
  }
  .zero-overlay{
    top: 41.5%!important;
    min-height: 340px!important;
    font-size: 14px!important;
  }
}

/* === V12: remove carousel note + long scrollable Fibonacci popup === */
.carousel-note:empty{
  display:none!important;
}
.modal{
  align-items:center!important;
}
.modal-card{
  max-height:86vh!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(197,141,66,.55) rgba(255,250,246,.4);
}
.modal-card::-webkit-scrollbar{width:9px}
.modal-card::-webkit-scrollbar-thumb{background:rgba(197,141,66,.55);border-radius:999px}
.modal-card p{
  white-space:pre-line;
  line-height:1.82!important;
  font-size:17px;
}
@media(max-width:760px){
  .modal{padding:10px!important}
  .modal-card{
    max-height:88vh!important;
    width:96vw!important;
    padding:24px 18px!important;
  }
  .modal-card p{font-size:15.5px;line-height:1.72!important}
}

/* === V13: welcome overlay, language row, KNG image button === */

/* Keep all language buttons in one row on desktop/laptop and compact row on phone */
.langs{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
}
.langs button{
  white-space:nowrap!important;
  min-width:auto!important;
  padding:7px 9px!important;
  font-size:13px!important;
}
@media(max-width:1050px){
  .langs{
    width:100%!important;
    justify-content:center!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .langs::-webkit-scrollbar{display:none!important}
  .langs button{
    flex:0 0 auto!important;
    padding:6px 8px!important;
    font-size:12px!important;
  }
}

/* Full page welcome: appears gently, then collapses into a small badge */
.zero-welcome-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.92), rgba(255,244,237,.78) 45%, rgba(255,226,219,.56) 100%);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transform:scale(1.01);
  transition:opacity 900ms ease, transform 1100ms ease, backdrop-filter 1100ms ease;
}
.zero-welcome-overlay.show{
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}
.zero-welcome-overlay.soften{
  backdrop-filter:blur(4px);
}
.zero-welcome-overlay.hide{
  opacity:0;
  pointer-events:none;
}
.zero-welcome-card{
  width:min(88vw,760px);
  text-align:center;
  color:#633c31;
  padding:44px 28px;
  border:1px solid rgba(197,141,66,.24);
  border-radius:36px;
  background:rgba(255,250,246,.72);
  box-shadow:0 30px 100px rgba(122,76,54,.16);
}
.zero-welcome-line{
  font:500 clamp(24px,4vw,42px) Georgia,serif;
  color:#8f4f24;
  margin-bottom:12px;
}
.zero-welcome-main{
  font:500 clamp(30px,5.5vw,64px)/1.08 Georgia,serif;
  color:#2f2524;
}
.zero-welcome-sign{
  margin-top:18px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:13px;
  color:#c58d42;
}
.zero-welcome-badge{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:200;
  display:none;
  max-width:260px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid rgba(197,141,66,.35);
  background:rgba(255,250,246,.88);
  color:#633c31;
  box-shadow:0 12px 40px rgba(122,76,54,.13);
  font-weight:700;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
.zero-welcome-badge.show{
  display:block;
  animation:badgeIn .55s ease both;
}
@keyframes badgeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:760px){
  .zero-welcome-card{
    width:90vw;
    padding:34px 20px;
    border-radius:28px;
  }
  .zero-welcome-badge{
    left:12px;
    right:12px;
    bottom:12px;
    max-width:none;
    text-align:center;
  }
}

/* Hero image-button for KNG application / measuring apparatus */
.actions{
  align-items:center!important;
}
.kng-aparat-image-link{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:min(330px,92vw);
  text-align:center;
  color:#633c31;
  font-weight:800;
}
.kng-aparat-image-link img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 14px 30px rgba(122,76,54,.16));
  transition:transform .25s ease, filter .25s ease;
}
.kng-aparat-image-link span{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,250,246,.74);
  border:1px solid rgba(197,141,66,.24);
  font-size:13px;
}
.kng-aparat-image-link:hover img{
  transform:translateY(-2px);
  filter:drop-shadow(0 18px 38px rgba(122,76,54,.22));
}
@media(max-width:760px){
  .kng-aparat-image-link{
    width:min(310px,88vw);
  }
}

/* === V14: welcome separate + ZERO field expands instead of scrolling === */

.zero-welcome-overlay{
  opacity:1!important;
  pointer-events:auto!important;
  animation:zeroWelcomeFade 5.2s ease forwards!important;
}
.zero-welcome-overlay.run{
  animation:zeroWelcomeFade 5.2s ease forwards!important;
}
@keyframes zeroWelcomeFade{
  0%{opacity:0;transform:scale(1.012);backdrop-filter:blur(12px)}
  12%{opacity:1;transform:scale(1);backdrop-filter:blur(10px)}
  58%{opacity:1;transform:scale(1);backdrop-filter:blur(6px)}
  100%{opacity:0;transform:scale(.992);backdrop-filter:blur(0);pointer-events:none}
}
.zero-welcome-badge{
  opacity:0;
  pointer-events:none;
}
.zero-welcome-badge.show{
  display:block!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* ZERO govori: no internal scroll, field grows with text */
.zero-wrap{
  --zero-extra:0px;
  padding-bottom:var(--zero-extra)!important;
  transition:padding-bottom .28s ease;
}
.zero-overlay{
  height:auto!important;
  min-height:230px!important;
  max-height:none!important;
  overflow:visible!important;
  transition:min-height .22s ease;
}
.zero-overlay::-webkit-scrollbar{
  display:none!important;
}

@media(max-width:760px){
  .zero-wrap{
    padding-bottom:max(var(--zero-extra), 120px)!important;
  }
  .zero-overlay{
    min-height:330px!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

/* === V15: welcome layer appears once, then disappears completely === */
.zero-welcome-overlay{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
}

.zero-welcome-overlay.show{
  display:grid!important;
  opacity:1!important;
  pointer-events:auto!important;
  animation:none!important;
  transition:opacity 900ms ease, transform 900ms ease, backdrop-filter 900ms ease;
}

.zero-welcome-overlay.show.soften{
  opacity:.92!important;
  backdrop-filter:blur(4px)!important;
}

.zero-welcome-overlay.hide{
  display:grid!important;
  opacity:0!important;
  pointer-events:none!important;
  animation:none!important;
}

.zero-welcome-badge,
.zero-welcome-badge.show{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* === V16: ZERO screen expands visually + domain labels above icons === */

/* ZERO screen is now a real expanding panel, not only text over the static image */
.zero-wrap{
  --zero-extra: 0px;
  padding-bottom: var(--zero-extra)!important;
  transition: padding-bottom .28s ease!important;
}

/* The text field itself becomes the visible expandable white screen */
.zero-overlay{
  box-sizing:border-box!important;
  height:auto!important;
  min-height:230px!important;
  max-height:none!important;
  overflow:visible!important;
  background:rgba(255,255,255,.94)!important;
  border:1.5px solid rgba(197,141,66,.42)!important;
  border-radius:24px!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    0 14px 42px rgba(122,76,54,.10)!important;
  color:#3f2e2b!important;
  z-index:11!important;
  transition:min-height .22s ease, padding .22s ease!important;
}

/* Clear old scrollbar logic */
.zero-overlay::-webkit-scrollbar{display:none!important}

/* Domain labels: label sits ABOVE the icon row, not inside the screen */
.domain-layer{
  left:6.9%!important;
  right:4.6%!important;
  top:19.6%!important;
  height:118px!important;
  display:grid!important;
  grid-template-columns:repeat(8,1fr)!important;
  gap:0!important;
  align-items:start!important;
  z-index:12!important;
  pointer-events:none!important;
}

.domain-layer button{
  pointer-events:auto!important;
  height:118px!important;
  min-height:118px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  cursor:pointer!important;
  font-family:Georgia,serif!important;
  font-size:clamp(12px,1vw,15px)!important;
  line-height:1.1!important;
  color:#633c31!important;
  text-align:center!important;
  text-shadow:0 1px 0 rgba(255,255,255,.96), 0 0 10px rgba(255,255,255,.9)!important;
}

.domain-layer button span{
  display:inline-block!important;
  width:100%!important;
  min-width:0!important;
  padding:0 2px!important;
  margin:0!important;
  white-space:normal!important;
}

.domain-layer button.active span{
  color:#8f4f24!important;
  border-bottom:2px solid #c58d42!important;
}

/* Push ZERO text screen below domain icons/labels */
@media (min-width:761px){
  .zero-overlay{
    top:43.8%!important;
    left:10.1%!important;
    right:10.1%!important;
    padding:22px 34px 28px!important;
  }
}

/* Phone: make ZERO taller, labels readable, icons row lower, screen lower and expandable */
@media(max-width:760px){
  .zero-section{
    padding:34px 10px 54px!important;
  }

  .zero-wrap{
    width:min(100%,560px)!important;
    margin:0 auto!important;
    padding-bottom:max(var(--zero-extra),130px)!important;
  }

  .zero-entity{
    width:100%!important;
    min-height:800px!important;
    object-fit:fill!important;
  }

  .zero-meta{
    top:4.4%!important;
    left:7%!important;
    right:7%!important;
    text-align:center!important;
  }

  .zero-meta h2{
    text-align:center!important;
    font-size:clamp(29px,8vw,42px)!important;
    line-height:1.05!important;
    margin:0 0 6px!important;
  }

  .zero-meta p{
    text-align:center!important;
    font-size:clamp(13px,3.8vw,18px)!important;
    line-height:1.25!important;
    margin:0 auto!important;
    max-width:92%!important;
  }

  /* 4 + 4 grid on phone so labels are readable */
  .domain-layer{
    top:18.8%!important;
    left:5.2%!important;
    right:5.2%!important;
    height:138px!important;
    grid-template-columns:repeat(4,1fr)!important;
    grid-auto-rows:69px!important;
    gap:0 2px!important;
  }

  .domain-layer button{
    height:69px!important;
    min-height:69px!important;
    font-size:clamp(10px,2.8vw,12.5px)!important;
    line-height:1.08!important;
    align-items:flex-start!important;
    padding-top:0!important;
  }

  .domain-layer button span{
    padding:0 2px!important;
  }

  .zero-overlay{
    top:42.6%!important;
    left:9.2%!important;
    right:9.2%!important;
    min-height:340px!important;
    padding:16px 16px 26px!important;
    font-size:clamp(15px,4vw,18px)!important;
    line-height:1.58!important;
    border-radius:20px!important;
    overflow:visible!important;
  }

  .zero-listen{
    right:10%!important;
    bottom:4.6%!important;
    max-width:80%!important;
  }
}

@media(max-width:430px){
  .zero-entity{
    min-height:840px!important;
  }
  .domain-layer{
    top:18.4%!important;
    height:148px!important;
    grid-auto-rows:74px!important;
  }
  .zero-overlay{
    top:43.2%!important;
    min-height:360px!important;
  }
}

@media(max-width:370px){
  .zero-entity{
    min-height:880px!important;
  }
  .domain-layer button{
    font-size:9px!important;
  }
  .zero-overlay{
    top:44%!important;
    min-height:380px!important;
    font-size:14px!important;
  }
}

/* === V17: ZERO domain labels separated + screen grows downward without drifting === */

/*
  Bitno:
  U V16 se ZERO ekran spuštao zato što je --zero-extra išao kao padding-bottom na .zero-wrap.
  Pošto su domain-layer i zero-overlay apsolutno pozicionirani u .zero-wrap,
  procentualni top se računao od uvećane visine wrappera.
  Sada dodatni prostor ide kao margin-bottom, pa se ZERO ekran više ne pomera naniže.
*/
.zero-wrap{
  --zero-extra:0px;
  padding-bottom:0!important;
  margin-bottom:var(--zero-extra)!important;
  transition:margin-bottom .28s ease!important;
}

/* Domeni: ravnomerno preko širine, nazivi iznad ikonica, bez ulaska preko okruglih ikona */
.domain-layer{
  top:14.4%!important;
  left:6.65%!important;
  right:2.75%!important;
  height:150px!important;
  display:grid!important;
  grid-template-columns:repeat(8,1fr)!important;
  gap:0!important;
  align-items:start!important;
  z-index:12!important;
  pointer-events:none!important;
}

.domain-layer button{
  pointer-events:auto!important;
  height:150px!important;
  min-height:150px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  cursor:pointer!important;
  font-family:Georgia,serif!important;
  font-size:clamp(12px,0.95vw,15px)!important;
  line-height:1.08!important;
  color:#633c31!important;
  text-align:center!important;
  text-shadow:0 1px 0 rgba(255,255,255,.98), 0 0 12px rgba(255,255,255,.95)!important;
}

.domain-layer button span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0 2px!important;
  white-space:normal!important;
  transform:translateY(0)!important;
}

.domain-layer button.active span{
  color:#8f4f24!important;
  border-bottom:2px solid #c58d42!important;
}

/* ZERO tekstualni ekran: početak ostaje stabilan; raste nadole */
@media (min-width:761px){
  .zero-overlay{
    top:43.6%!important;
    left:10.1%!important;
    right:10.1%!important;
    height:auto!important;
    min-height:230px!important;
    max-height:none!important;
    overflow:visible!important;
    padding:22px 34px 28px!important;
    background:rgba(255,255,255,.94)!important;
    border:1.5px solid rgba(197,141,66,.42)!important;
    border-radius:24px!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.75),
      0 14px 42px rgba(122,76,54,.10)!important;
  }
}

/* Telefon: domeni su 4+4, tekst iznad krugova, ZERO ekran stabilan i raste nadole */
@media(max-width:760px){
  .zero-wrap{
    padding-bottom:0!important;
    margin-bottom:max(var(--zero-extra),130px)!important;
  }

  .domain-layer{
    top:15.8%!important;
    left:5.4%!important;
    right:5.4%!important;
    height:172px!important;
    grid-template-columns:repeat(4,1fr)!important;
    grid-auto-rows:86px!important;
    gap:0 2px!important;
  }

  .domain-layer button{
    height:86px!important;
    min-height:86px!important;
    font-size:clamp(10px,2.75vw,12.5px)!important;
    line-height:1.05!important;
    align-items:flex-start!important;
    justify-content:center!important;
    padding:0!important;
  }

  .domain-layer button span{
    padding:0 2px!important;
  }

  .zero-overlay{
    top:43.2%!important;
    left:9.2%!important;
    right:9.2%!important;
    height:auto!important;
    min-height:340px!important;
    max-height:none!important;
    overflow:visible!important;
    padding:16px 16px 26px!important;
    font-size:clamp(15px,4vw,18px)!important;
    line-height:1.58!important;
    background:rgba(255,255,255,.94)!important;
    border:1.5px solid rgba(197,141,66,.42)!important;
    border-radius:20px!important;
  }
}

@media(max-width:430px){
  .zero-wrap{
    margin-bottom:max(var(--zero-extra),145px)!important;
  }
  .domain-layer{
    top:15.2%!important;
    height:184px!important;
    grid-auto-rows:92px!important;
  }
  .zero-overlay{
    top:43.8%!important;
    min-height:360px!important;
  }
}

@media(max-width:370px){
  .domain-layer button{
    font-size:9px!important;
  }
  .zero-overlay{
    top:44.5%!important;
    min-height:380px!important;
    font-size:14px!important;
  }
}

/* === V18: ZERO rebuilt as flexible entity; icons are real elements, screen grows naturally === */

.zero-section{
  padding-top:54px!important;
  padding-bottom:70px!important;
}

/* Static PNG is no longer the layout master; it caused fixed-frame problems. */
.zero-entity{
  display:none!important;
}

.zero-wrap{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  width:min(94vw,1320px)!important;
  max-width:1320px!important;
  margin:0 auto!important;
  padding:32px 54px 92px!important;
  background:rgba(255,255,255,.94)!important;
  border:2px solid rgba(198,142,58,.72)!important;
  border-radius:42px!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.84),
    inset 0 0 0 16px rgba(255,250,246,.72),
    0 28px 80px rgba(122,76,54,.13)!important;
  overflow:visible!important;
  min-height:0!important;
}

/* Title and subtitle now sit in normal flow */
.zero-meta{
  position:relative!important;
  inset:auto!important;
  height:auto!important;
  padding:0!important;
  margin:0 0 18px!important;
  color:#633c31!important;
  pointer-events:auto!important;
  text-align:left!important;
}

.zero-meta h2{
  margin:0!important;
  font:700 clamp(32px,3.3vw,56px)/1.02 Georgia,serif!important;
  color:#633c31!important;
  text-align:left!important;
}

.zero-meta p{
  margin:6px 0 0!important;
  color:#633c31!important;
  font-size:clamp(16px,1.35vw,21px)!important;
  line-height:1.25!important;
  text-align:left!important;
}

/* Domain row: evenly distributed across the full width */
.domain-layer{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  height:auto!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:start!important;
  margin:12px 0 34px!important;
  z-index:2!important;
  pointer-events:auto!important;
}

.domain-layer button{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  cursor:pointer!important;
  color:#633c31!important;
  font-family:Georgia,serif!important;
  font-size:clamp(13px,1vw,16px)!important;
  line-height:1.1!important;
  text-align:center!important;
  text-shadow:none!important;
}

.domain-layer button span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  white-space:normal!important;
  transform:none!important;
  border-bottom:2px solid transparent!important;
}

.domain-layer button img{
  display:block!important;
  width:64px!important;
  height:64px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 7px 16px rgba(122,76,54,.12))!important;
}

.domain-layer button.active span{
  color:#8f4f24!important;
  border-bottom:2px solid #c58d42!important;
}

/* Real expanding screen */
.zero-overlay{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:100%!important;
  box-sizing:border-box!important;
  height:auto!important;
  min-height:260px!important;
  max-height:none!important;
  overflow:visible!important;
  padding:72px 44px 42px!important;
  margin:0!important;
  background:rgba(255,255,255,.98)!important;
  border:1.5px solid rgba(197,141,66,.42)!important;
  border-radius:24px!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),
    0 16px 44px rgba(122,76,54,.10)!important;
  color:#3f2e2b!important;
  font-size:clamp(17px,1.45vw,23px)!important;
  line-height:1.62!important;
  z-index:1!important;
  transition:min-height .22s ease!important;
}

/* three dots in the screen */
.zero-overlay::before{
  content:"";
  position:absolute;
  right:26px;
  top:22px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#c58d42;
  box-shadow:20px 0 0 #d6a45d, 40px 0 0 #f0d58f;
}

/* ZERO sluša tied to the entity, not to the viewport; placed below the screen */
.zero-listen{
  position:absolute!important;
  right:56px!important;
  bottom:28px!important;
  z-index:4!important;
}

.zero-listen.show{
  display:flex!important;
}

/* Phone layout */
@media(max-width:760px){
  .zero-section{
    padding:34px 10px 54px!important;
  }

  .zero-wrap{
    width:min(96vw,560px)!important;
    padding:28px 18px 96px!important;
    border-radius:32px!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.84),
      inset 0 0 0 10px rgba(255,250,246,.72),
      0 22px 60px rgba(122,76,54,.12)!important;
  }

  .zero-meta{
    text-align:center!important;
    margin-bottom:18px!important;
  }

  .zero-meta h2{
    text-align:center!important;
    font-size:clamp(32px,9vw,44px)!important;
  }

  .zero-meta p{
    text-align:center!important;
    font-size:clamp(14px,4vw,18px)!important;
    max-width:92%!important;
    margin:8px auto 0!important;
  }

  .domain-layer{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px 6px!important;
    margin:18px 0 30px!important;
  }

  .domain-layer button{
    font-size:clamp(11px,3vw,13px)!important;
    gap:7px!important;
  }

  .domain-layer button img{
    width:56px!important;
    height:56px!important;
  }

  .zero-overlay{
    min-height:340px!important;
    padding:62px 18px 32px!important;
    font-size:clamp(15.5px,4.2vw,18px)!important;
    line-height:1.62!important;
    border-radius:20px!important;
  }

  .zero-listen{
    right:22px!important;
    bottom:24px!important;
    max-width:82%!important;
  }
}

@media(max-width:370px){
  .domain-layer button{
    font-size:10px!important;
  }
  .domain-layer button img{
    width:50px!important;
    height:50px!important;
  }
  .zero-overlay{
    font-size:14.5px!important;
  }
}

/* === V19: click-safe ZERO, circular icons, top welcome bar, Instagram signature buttons === */

/* Remove any older full-screen welcome layer so it never blocks clicks */
#zeroWelcomeOverlay,
#zeroWelcomeBadge{
  display:none!important;
  pointer-events:none!important;
}

/* Top welcome bar: non-blocking and temporary */
.zero-welcome-bar{
  position:fixed;
  top:10px;
  left:50%;
  transform:translate(-50%,-16px);
  z-index:9999;
  width:min(92vw,980px);
  padding:12px 22px;
  border:1px solid rgba(197,141,66,.34);
  border-radius:999px;
  background:rgba(255,250,246,.92);
  color:#633c31;
  box-shadow:0 14px 44px rgba(122,76,54,.14);
  backdrop-filter:blur(12px);
  text-align:center;
  font-weight:700;
  opacity:0;
  pointer-events:none;
}
.zero-welcome-bar.show{
  animation:zeroBarIn .65s ease forwards;
}
.zero-welcome-bar.hide{
  animation:zeroBarOut .85s ease forwards;
}
@keyframes zeroBarIn{
  from{opacity:0;transform:translate(-50%,-16px)}
  to{opacity:1;transform:translate(-50%,0)}
}
@keyframes zeroBarOut{
  from{opacity:1;transform:translate(-50%,0)}
  to{opacity:0;transform:translate(-50%,-16px)}
}

/* ZERO flexible panel */
.zero-entity{display:none!important}
.zero-wrap{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(94vw,1320px)!important;
  max-width:1320px!important;
  margin:0 auto!important;
  padding:32px 54px 92px!important;
  background:rgba(255,255,255,.94)!important;
  border:2px solid rgba(198,142,58,.72)!important;
  border-radius:42px!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.84),
    inset 0 0 0 16px rgba(255,250,246,.72),
    0 28px 80px rgba(122,76,54,.13)!important;
  overflow:visible!important;
}

.zero-meta{
  position:relative!important;
  inset:auto!important;
  height:auto!important;
  padding:0!important;
  margin:0 0 18px!important;
  text-align:left!important;
  pointer-events:auto!important;
}
.zero-meta h2{
  margin:0!important;
  font:700 clamp(32px,3.3vw,56px)/1.02 Georgia,serif!important;
  color:#633c31!important;
  text-align:left!important;
}
.zero-meta p{
  margin:6px 0 0!important;
  color:#633c31!important;
  font-size:clamp(16px,1.35vw,21px)!important;
  line-height:1.25!important;
  text-align:left!important;
}

/* Domain icons: real separate circular PNGs, no square frame, equal spacing */
.domain-layer{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:start!important;
  margin:14px 0 34px!important;
  z-index:3!important;
  pointer-events:auto!important;
}
.domain-layer button{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  cursor:pointer!important;
  font-family:Georgia,serif!important;
  font-size:clamp(13px,1vw,16px)!important;
  line-height:1.1!important;
  color:#633c31!important;
  text-align:center!important;
}
.domain-layer button span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border-bottom:2px solid transparent!important;
  white-space:normal!important;
}
.domain-layer button img{
  display:block!important;
  width:62px!important;
  height:62px!important;
  object-fit:contain!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:50%!important;
  filter:drop-shadow(0 7px 14px rgba(122,76,54,.12))!important;
}
.domain-layer button.active span{
  color:#8f4f24!important;
  border-bottom-color:#c58d42!important;
}

/* ZERO text screen */
.zero-overlay{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  box-sizing:border-box!important;
  height:auto!important;
  min-height:260px!important;
  max-height:none!important;
  overflow:visible!important;
  padding:72px 44px 42px!important;
  margin:0!important;
  background:rgba(255,255,255,.98)!important;
  border:1.5px solid rgba(197,141,66,.42)!important;
  border-radius:24px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), 0 16px 44px rgba(122,76,54,.10)!important;
  color:#3f2e2b!important;
  font-size:clamp(17px,1.45vw,23px)!important;
  line-height:1.62!important;
  z-index:1!important;
}
.zero-overlay::before{
  content:"";
  position:absolute;
  right:26px;
  top:22px;
  width:10px;height:10px;border-radius:50%;
  background:#c58d42;
  box-shadow:20px 0 0 #d6a45d, 40px 0 0 #f0d58f;
}

/* ZERO listens stays tied to ZERO panel */
.zero-listen{
  position:absolute!important;
  right:56px!important;
  bottom:28px!important;
  z-index:4!important;
}
.zero-listen.show{display:flex!important}

/* Signature Instagram buttons */
.sig-grid-three{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.sig-institute strong{
  display:block;
  font:500 30px Georgia,serif;
  color:#8f4f24;
  margin-bottom:14px;
}
.insta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(197,141,66,.35);
  background:rgba(255,250,246,.82);
  color:#633c31;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 28px rgba(122,76,54,.10);
}
.insta-btn::before{
  content:"◎";
  color:#c58d42;
  font-weight:900;
}
.insta-btn:hover{
  transform:translateY(-1px);
}

/* Phone */
@media(max-width:760px){
  .zero-welcome-bar{
    top:8px;
    width:calc(100vw - 24px);
    padding:10px 14px;
    font-size:13px;
    border-radius:22px;
  }
  .zero-wrap{
    width:min(96vw,560px)!important;
    padding:28px 18px 96px!important;
    border-radius:32px!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.84),
      inset 0 0 0 10px rgba(255,250,246,.72),
      0 22px 60px rgba(122,76,54,.12)!important;
  }
  .zero-meta{
    text-align:center!important;
    margin-bottom:16px!important;
  }
  .zero-meta h2{
    text-align:center!important;
    font-size:clamp(32px,9vw,44px)!important;
  }
  .zero-meta p{
    text-align:center!important;
    font-size:clamp(14px,4vw,18px)!important;
    max-width:92%!important;
    margin:8px auto 0!important;
  }
  .domain-layer{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px 6px!important;
    margin:18px 0 30px!important;
  }
  .domain-layer button{
    font-size:clamp(11px,3vw,13px)!important;
    gap:7px!important;
  }
  .domain-layer button img{
    width:56px!important;
    height:56px!important;
  }
  .zero-overlay{
    min-height:340px!important;
    padding:62px 18px 32px!important;
    font-size:clamp(15.5px,4.2vw,18px)!important;
    line-height:1.62!important;
    border-radius:20px!important;
  }
  .zero-listen{
    right:22px!important;
    bottom:24px!important;
    max-width:82%!important;
  }
  .sig-grid-three{
    grid-template-columns:1fr!important;
  }
}

/* === V22: translation polish — natural flow is system text, not baked image === */
.natural-flow{
  max-width:1180px;
  margin:0 auto;
}
.natural-flow h2{
  text-align:center;
}
.flow-steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-top:24px;
}
.flow-step{
  position:relative;
  min-height:150px;
  border:1px solid rgba(197,141,66,.28);
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.88), rgba(255,245,238,.78)),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,240,226,.68));
  box-shadow:0 16px 46px rgba(122,76,54,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px 14px;
}
.flow-step span{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:600 25px Georgia,serif;
  color:#8f4f24;
  border:1px solid rgba(197,141,66,.44);
  background:rgba(255,255,255,.72);
  margin-bottom:12px;
}
.flow-step strong{
  font:500 18px Georgia,serif;
  color:#3f2e2b;
}
@media(max-width:900px){
  .flow-steps{
    grid-template-columns:1fr;
  }
  .flow-step{
    min-height:112px;
  }
}


/* === V27: Metodologija povratka sebi — full width justified intro text === */
#metod{
  max-width: min(1220px, calc(100vw - 48px)) !important;
}

#metod h2{
  text-align: center !important;
}

#metod .lead{
  max-width: none !important;
  width: 100% !important;
  text-align: justify !important;
  text-align-last: left;
  hyphens: auto;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.82 !important;
}

@media(max-width:760px){
  #metod{
    max-width: calc(100vw - 28px) !important;
  }
  #metod .lead{
    text-align: left !important;
    line-height: 1.72 !important;
  }
}


/* === V28: Natural flow robust layout override === */
section#prirodan-tok.natural-flow{
  max-width: min(1220px, calc(100vw - 48px)) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

section#prirodan-tok.natural-flow > h2{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

section#prirodan-tok.natural-flow .flow-steps{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  justify-content: center !important;
  margin: 28px auto 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

section#prirodan-tok.natural-flow .flow-step{
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 172px !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 24px 14px !important;
  text-align: center !important;
  border-radius: 28px !important;
  border: 1px solid rgba(197,141,66,.34) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.96), rgba(255,246,238,.86) 52%, rgba(255,235,220,.72) 100%) !important;
  box-shadow:
    0 18px 50px rgba(122,76,54,.09),
    inset 0 0 0 1px rgba(255,255,255,.72) !important;
  color: #3f2e2b !important;
}

section#prirodan-tok.natural-flow .flow-step span{
  flex: 0 0 auto !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font: 700 27px/1 Georgia, serif !important;
  color: #8f4f24 !important;
  border: 1px solid rgba(197,141,66,.48) !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 10px 26px rgba(122,76,54,.08) !important;
}

section#prirodan-tok.natural-flow .flow-step strong{
  display: block !important;
  font: 500 18px/1.22 Georgia, serif !important;
  color: #3f2e2b !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media(max-width:1050px){
  section#prirodan-tok.natural-flow .flow-steps{
    grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }
  section#prirodan-tok.natural-flow .flow-step{
    min-width: 132px !important;
  }
}

@media(max-width:760px){
  section#prirodan-tok.natural-flow{
    max-width: calc(100vw - 28px) !important;
  }

  section#prirodan-tok.natural-flow .flow-steps{
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
    gap: 12px !important;
  }

  section#prirodan-tok.natural-flow .flow-step{
    min-width: 0 !important;
    min-height: 118px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 20px 22px !important;
  }

  section#prirodan-tok.natural-flow .flow-step span{
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
  }

  section#prirodan-tok.natural-flow .flow-step strong{
    font-size: 18px !important;
  }
}


/* =========================================================
   V29 — LOCKED NATURAL FLOW / PRIRODAN TOK
   Strong override for Joomla / Gantry.
   Markup expected:
   <section id="prirodan-tok" class="section natural-flow">
     <h2>...</h2>
     <div class="flow-steps">
       <div class="flow-step"><span>1</span><strong>...</strong></div>
       ...
     </div>
   </section>
   ========================================================= */

html body main#top section#prirodan-tok.section.natural-flow,
html body section#prirodan-tok.section.natural-flow,
body #prirodan-tok.natural-flow,
#prirodan-tok.natural-flow{
  box-sizing:border-box!important;
  position:relative!important;
  display:block!important;
  width:min(1220px, calc(100vw - 48px))!important;
  max-width:1220px!important;
  margin:74px auto!important;
  padding:54px 34px 64px!important;
  float:none!important;
  clear:both!important;
  overflow:hidden!important;
  border-radius:38px!important;
  border:1px solid rgba(197,141,66,.32)!important;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,.96) 0%, rgba(255,248,242,.88) 42%, rgba(255,232,218,.74) 100%)!important;
  box-shadow:
    0 24px 80px rgba(122,76,54,.12),
    inset 0 0 0 1px rgba(255,255,255,.76)!important;
  isolation:isolate!important;
}

/* Soft Fibonacci watermark, pure CSS, no image dependency */
html body #prirodan-tok.natural-flow::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  right:-110px!important;
  top:-120px!important;
  width:520px!important;
  height:520px!important;
  border-radius:50%!important;
  border:2px solid rgba(197,141,66,.12)!important;
  box-shadow:
    -54px 54px 0 -2px rgba(197,141,66,.08),
    -116px 116px 0 -4px rgba(197,141,66,.06),
    -190px 190px 0 -6px rgba(197,141,66,.045)!important;
  pointer-events:none!important;
  transform:rotate(-18deg)!important;
}

/* Title stays centered */
html body #prirodan-tok.natural-flow > h2,
html body main#top #prirodan-tok.natural-flow > h2,
#prirodan-tok.natural-flow > h2{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto 42px!important;
  padding:0!important;
  text-align:center!important;
  float:none!important;
  clear:both!important;
  color:#633c31!important;
  font-family:Georgia, "Times New Roman", serif!important;
}

/* Desktop: golden horizontal rhythm */
html body #prirodan-tok.natural-flow .flow-steps,
html body main#top #prirodan-tok.natural-flow .flow-steps,
#prirodan-tok.natural-flow .flow-steps{
  box-sizing:border-box!important;
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:repeat(5, minmax(0, 1fr))!important;
  gap:20px!important;
  width:100%!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:0!important;
  list-style:none!important;
  float:none!important;
  clear:both!important;
  align-items:stretch!important;
  justify-content:center!important;
}

/* Connecting golden line */
html body #prirodan-tok.natural-flow .flow-steps::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:8%!important;
  right:8%!important;
  top:56px!important;
  height:2px!important;
  background:linear-gradient(90deg,
    rgba(197,141,66,0),
    rgba(197,141,66,.54),
    rgba(197,141,66,0))!important;
  pointer-events:none!important;
}

/* Each flow item is a real card */
html body #prirodan-tok.natural-flow .flow-step,
html body main#top #prirodan-tok.natural-flow .flow-step,
#prirodan-tok.natural-flow .flow-step{
  box-sizing:border-box!important;
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:176px!important;
  margin:0!important;
  padding:0 10px!important;
  float:none!important;
  clear:none!important;
  text-align:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#3f2e2b!important;
}

/* Number circle */
html body #prirodan-tok.natural-flow .flow-step > span,
html body main#top #prirodan-tok.natural-flow .flow-step > span,
#prirodan-tok.natural-flow .flow-step > span{
  box-sizing:border-box!important;
  position:relative!important;
  z-index:2!important;
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  width:112px!important;
  height:112px!important;
  margin:0 auto 18px!important;
  padding:0!important;
  border-radius:50%!important;
  border:1.5px solid rgba(197,141,66,.55)!important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.98), rgba(255,244,232,.94) 52%, rgba(241,211,154,.74) 100%)!important;
  box-shadow:
    0 18px 38px rgba(122,76,54,.13),
    inset 0 0 0 8px rgba(255,255,255,.38)!important;
  color:#8f4f24!important;
  font-family:Georgia, "Times New Roman", serif!important;
  font-size:42px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:-.03em!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/* Text label */
html body #prirodan-tok.natural-flow .flow-step > strong,
html body main#top #prirodan-tok.natural-flow .flow-step > strong,
#prirodan-tok.natural-flow .flow-step > strong{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:170px!important;
  margin:0 auto!important;
  padding:0!important;
  color:#3f2e2b!important;
  font-family:Georgia, "Times New Roman", serif!important;
  font-size:19px!important;
  font-weight:500!important;
  line-height:1.24!important;
  text-align:center!important;
  text-transform:none!important;
}

/* Small arrow between steps */
html body #prirodan-tok.natural-flow .flow-step:not(:last-child)::after{
  content:"→"!important;
  position:absolute!important;
  z-index:3!important;
  top:42px!important;
  right:-18px!important;
  color:rgba(143,79,36,.54)!important;
  font-family:Georgia, "Times New Roman", serif!important;
  font-size:26px!important;
  line-height:1!important;
  pointer-events:none!important;
}

/* Tablet keeps horizontal scroll instead of breaking ugly */
@media(max-width:1050px){
  html body #prirodan-tok.natural-flow .flow-steps,
  #prirodan-tok.natural-flow .flow-steps{
    grid-template-columns:repeat(5, 148px)!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding:0 4px 14px!important;
    scrollbar-width:thin!important;
  }

  html body #prirodan-tok.natural-flow .flow-step > span,
  #prirodan-tok.natural-flow .flow-step > span{
    width:104px!important;
    height:104px!important;
    font-size:39px!important;
  }
}

/* Phone: vertical ritual timeline */
@media(max-width:760px){
  html body main#top section#prirodan-tok.section.natural-flow,
  html body section#prirodan-tok.section.natural-flow,
  body #prirodan-tok.natural-flow,
  #prirodan-tok.natural-flow{
    width:calc(100vw - 28px)!important;
    max-width:none!important;
    margin:54px auto!important;
    padding:42px 18px 46px!important;
    border-radius:30px!important;
  }

  html body #prirodan-tok.natural-flow > h2,
  #prirodan-tok.natural-flow > h2{
    margin-bottom:30px!important;
    text-align:center!important;
  }

  html body #prirodan-tok.natural-flow .flow-steps,
  #prirodan-tok.natural-flow .flow-steps{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }

  html body #prirodan-tok.natural-flow .flow-steps::before{
    left:35px!important;
    right:auto!important;
    top:32px!important;
    bottom:32px!important;
    width:2px!important;
    height:auto!important;
    background:linear-gradient(180deg,
      rgba(197,141,66,0),
      rgba(197,141,66,.55),
      rgba(197,141,66,0))!important;
  }

  html body #prirodan-tok.natural-flow .flow-step,
  #prirodan-tok.natural-flow .flow-step{
    display:grid!important;
    grid-template-columns:72px 1fr!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:16px!important;
    min-height:88px!important;
    width:100%!important;
    padding:12px 16px 12px 0!important;
    text-align:left!important;
  }

  html body #prirodan-tok.natural-flow .flow-step > span,
  #prirodan-tok.natural-flow .flow-step > span{
    width:70px!important;
    height:70px!important;
    margin:0!important;
    font-size:29px!important;
    justify-self:start!important;
  }

  html body #prirodan-tok.natural-flow .flow-step > strong,
  #prirodan-tok.natural-flow .flow-step > strong{
    max-width:none!important;
    margin:0!important;
    font-size:19px!important;
    line-height:1.25!important;
    text-align:left!important;
  }

  html body #prirodan-tok.natural-flow .flow-step:not(:last-child)::after,
  #prirodan-tok.natural-flow .flow-step:not(:last-child)::after{
    content:""!important;
    display:none!important;
  }
}



/* =========================================================
   V31 — PRIRODAN TOK LOCKED DESIGN
   This block is also injected inline in index.html so Joomla/Gantry cannot miss it.
   ========================================================= */

html body main#top section#prirodan-tok.section.natural-flow,
html body section#prirodan-tok.section.natural-flow,
html body #prirodan-tok.natural-flow,
body #prirodan-tok.natural-flow,
#prirodan-tok.natural-flow{
  box-sizing:border-box!important;
  position:relative!important;
  display:block!important;
  width:min(1220px, calc(100vw - 48px))!important;
  max-width:1220px!important;
  margin:74px auto!important;
  padding:56px 36px 66px!important;
  float:none!important;
  clear:both!important;
  overflow:hidden!important;
  border-radius:38px!important;
  border:1px solid rgba(197,141,66,.34)!important;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,.98) 0%, rgba(255,248,242,.90) 45%, rgba(255,234,220,.78) 100%)!important;
  box-shadow:
    0 26px 84px rgba(122,76,54,.13),
    inset 0 0 0 1px rgba(255,255,255,.78)!important;
  color:#3f2e2b!important;
  font-family:Georgia, "Times New Roman", serif!important;
  isolation:isolate!important;
}

html body #prirodan-tok.natural-flow::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  right:-120px!important;
  top:-130px!important;
  width:540px!important;
  height:540px!important;
  border-radius:50%!important;
  border:2px solid rgba(197,141,66,.12)!important;
  box-shadow:
    -58px 58px 0 -2px rgba(197,141,66,.08),
    -124px 124px 0 -4px rgba(197,141,66,.06),
    -198px 198px 0 -6px rgba(197,141,66,.045)!important;
  transform:rotate(-18deg)!important;
  pointer-events:none!important;
}

html body #prirodan-tok.natural-flow > h2{
  all:unset!important;
  box-sizing:border-box!important;
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  margin:0 auto 42px!important;
  padding:0!important;
  text-align:center!important;
  color:#633c31!important;
  font-family:Georgia, "Times New Roman", serif!important;
  font-size:clamp(34px, 4vw, 58px)!important;
  line-height:1.08!important;
  font-weight:500!important;
}

html body #prirodan-tok.natural-flow .flow-steps{
  all:unset!important;
  box-sizing:border-box!important;
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:repeat(5, minmax(0, 1fr))!important;
  gap:20px!important;
  width:100%!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:0!important;
  align-items:start!important;
  justify-content:center!important;
  list-style:none!important;
}

html body #prirodan-tok.natural-flow .flow-steps::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:8%!important;
  right:8%!important;
  top:56px!important;
  height:2px!important;
  background:linear-gradient(90deg, rgba(197,141,66,0), rgba(197,141,66,.58), rgba(197,141,66,0))!important;
  pointer-events:none!important;
}

html body #prirodan-tok.natural-flow .flow-step{
  all:unset!important;
  box-sizing:border-box!important;
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
  min-height:176px!important;
  margin:0!important;
  padding:0 10px!important;
  text-align:center!important;
  color:#3f2e2b!important;
  font-family:Georgia, "Times New Roman", serif!important;
}

html body #prirodan-tok.natural-flow .flow-step > span{
  all:unset!important;
  box-sizing:border-box!important;
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  place-items:center!important;
  width:112px!important;
  height:112px!important;
  margin:0 auto 18px!important;
  padding:0!important;
  border-radius:50%!important;
  border:1.5px solid rgba(197,141,66,.58)!important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.98), rgba(255,244,232,.95) 52%, rgba(241,211,154,.78) 100%)!important;
  box-shadow:
    0 18px 38px rgba(122,76,54,.14),
    inset 0 0 0 8px rgba(255,255,255,.40)!important;
  color:#8f4f24!important;
  font-family:Georgia, "Times New Roman", serif!important;
  font-size:42px!important;
  font-weight:700!important;
  line-height:1!important;
  text-align:center!important;
}

html body #prirodan-tok.natural-flow .flow-step > strong{
  all:unset!important;
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:170px!important;
  margin:0 auto!important;
  padding:0!important;
  color:#3f2e2b!important;
  font-family:Georgia, "Times New Roman", serif!important;
  font-size:19px!important;
  font-weight:500!important;
  line-height:1.24!important;
  text-align:center!important;
}

html body #prirodan-tok.natural-flow .flow-step:not(:last-child)::after{
  content:"→"!important;
  position:absolute!important;
  z-index:3!important;
  top:42px!important;
  right:-18px!important;
  color:rgba(143,79,36,.55)!important;
  font-family:Georgia, "Times New Roman", serif!important;
  font-size:26px!important;
  line-height:1!important;
  pointer-events:none!important;
}

@media(max-width:760px){
  html body main#top section#prirodan-tok.section.natural-flow,
  html body section#prirodan-tok.section.natural-flow,
  html body #prirodan-tok.natural-flow,
  body #prirodan-tok.natural-flow,
  #prirodan-tok.natural-flow{
    width:calc(100vw - 28px)!important;
    max-width:none!important;
    margin:54px auto!important;
    padding:42px 18px 46px!important;
    border-radius:30px!important;
  }

  html body #prirodan-tok.natural-flow > h2{
    margin-bottom:30px!important;
    font-size:clamp(32px, 9vw, 46px)!important;
  }

  html body #prirodan-tok.natural-flow .flow-steps{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }

  html body #prirodan-tok.natural-flow .flow-steps::before{
    left:35px!important;
    right:auto!important;
    top:32px!important;
    bottom:32px!important;
    width:2px!important;
    height:auto!important;
    background:linear-gradient(180deg, rgba(197,141,66,0), rgba(197,141,66,.58), rgba(197,141,66,0))!important;
  }

  html body #prirodan-tok.natural-flow .flow-step{
    display:grid!important;
    grid-template-columns:72px 1fr!important;
    align-items:center!important;
    gap:16px!important;
    min-height:88px!important;
    width:100%!important;
    padding:12px 16px 12px 0!important;
    text-align:left!important;
  }

  html body #prirodan-tok.natural-flow .flow-step > span{
    width:70px!important;
    height:70px!important;
    margin:0!important;
    font-size:29px!important;
    justify-self:start!important;
  }

  html body #prirodan-tok.natural-flow .flow-step > strong{
    max-width:none!important;
    margin:0!important;
    font-size:19px!important;
    line-height:1.25!important;
    text-align:left!important;
  }

  html body #prirodan-tok.natural-flow .flow-step:not(:last-child)::after{
    content:""!important;
    display:none!important;
  }
}
/* =========================================================
   NUCLEAR MOBILE FIX — PRIRODAN TOK ONLY
   Forces the flow items into one vertical column even if Joomla/Gantry CSS is loaded later.
   ========================================================= */
@media screen and (max-width:1200px){
  html body main#top section#prirodan-tok.section.natural-flow,
  html body section#prirodan-tok.section.natural-flow,
  html body #prirodan-tok.natural-flow,
  body #prirodan-tok.natural-flow,
  #prirodan-tok.natural-flow{
    width:calc(100vw - 28px)!important;
    max-width:620px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:hidden!important;
  }

  html body #prirodan-tok.natural-flow .flow-steps,
  html body main#top #prirodan-tok.natural-flow .flow-steps,
  body #prirodan-tok.natural-flow .flow-steps,
  #prirodan-tok.natural-flow .flow-steps{
    all:unset!important;
    box-sizing:border-box!important;
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    max-width:420px!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    white-space:normal!important;
    list-style:none!important;
    float:none!important;
    clear:both!important;
  }

  html body #prirodan-tok.natural-flow .flow-steps::before,
  #prirodan-tok.natural-flow .flow-steps::before{
    content:none!important;
    display:none!important;
  }

  html body #prirodan-tok.natural-flow .flow-step,
  html body main#top #prirodan-tok.natural-flow .flow-step,
  body #prirodan-tok.natural-flow .flow-step,
  #prirodan-tok.natural-flow .flow-step{
    all:unset!important;
    box-sizing:border-box!important;
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0 auto 22px!important;
    padding:0!important;
    text-align:center!important;
    float:none!important;
    clear:both!important;
    white-space:normal!important;
  }

  html body #prirodan-tok.natural-flow .flow-step:last-child,
  #prirodan-tok.natural-flow .flow-step:last-child{
    margin-bottom:0!important;
  }

  html body #prirodan-tok.natural-flow .flow-step > span,
  html body main#top #prirodan-tok.natural-flow .flow-step > span,
  body #prirodan-tok.natural-flow .flow-step > span,
  #prirodan-tok.natural-flow .flow-step > span{
    all:unset!important;
    box-sizing:border-box!important;
    display:grid!important;
    place-items:center!important;
    width:76px!important;
    height:76px!important;
    margin:0 auto 8px!important;
    border-radius:999px!important;
    border:1.5px solid rgba(197,141,66,.58)!important;
    background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.98), rgba(255,244,232,.95) 52%, rgba(241,211,154,.78) 100%)!important;
    box-shadow:0 14px 28px rgba(122,76,54,.13), inset 0 0 0 7px rgba(255,255,255,.38)!important;
    color:#8f4f24!important;
    font-family:Georgia, "Times New Roman", serif!important;
    font-size:31px!important;
    font-weight:700!important;
    line-height:1!important;
    text-align:center!important;
    float:none!important;
    clear:both!important;
  }

  html body #prirodan-tok.natural-flow .flow-step > strong,
  html body main#top #prirodan-tok.natural-flow .flow-step > strong,
  body #prirodan-tok.natural-flow .flow-step > strong,
  #prirodan-tok.natural-flow .flow-step > strong{
    all:unset!important;
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    color:#3f2e2b!important;
    font-family:Georgia, "Times New Roman", serif!important;
    font-size:19px!important;
    font-weight:500!important;
    line-height:1.25!important;
    text-align:center!important;
    white-space:normal!important;
    float:none!important;
    clear:both!important;
  }

  html body #prirodan-tok.natural-flow .flow-step::before,
  html body #prirodan-tok.natural-flow .flow-step::after,
  #prirodan-tok.natural-flow .flow-step::before,
  #prirodan-tok.natural-flow .flow-step::after{
    content:none!important;
    display:none!important;
  }
}