body .portal-view.network-view {
  position: fixed!important; inset: 0!important; display: block!important;
  height: 100dvh!important; min-height: 0!important; padding: 0!important;
  overflow-x: hidden!important; overflow-y: auto!important;
  background: var(--portal-background)!important; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--circle-blue) transparent;
}
body .portal-view.network-view::before,
body .portal-view.network-view::after { display: none!important; content: none!important; }
.network-track { position: relative; min-height: 100dvh; }
.network-stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.network-map-layer { position: absolute; inset: 0; }
.network-map-cursor { display: none; position: fixed; z-index: 4; pointer-events: none; }
body .network-map-cursor span { position: absolute; left: 18px; top: 12px; width: max-content; max-width: 280px; color: var(--circle-blue)!important; font-size: 15px; line-height: 1.3; text-shadow: 0 1px 2px #fff; }
body .network-map-cursor.network-cursor-flip span { left: auto; right: 18px; }
@media (hover: hover) and (pointer: fine) {
  .network-map-frame.network-cursor-active, .network-map-frame.network-cursor-active * { cursor: none!important; }
  .network-map-layer:has(.network-cursor-active) > .network-map-cursor { display: block; }
  html:has(.network-view.is-active .network-map-frame.network-cursor-active:not(:has(.network-heart:hover))) .brand-cursor { display: none!important; }
  .network-heart:hover svg { animation: network-heart-hop .75s cubic-bezier(.22,1,.36,1); }
}
@keyframes network-heart-hop {
  0%,100% { translate: 0 0; }
  35% { translate: 0 -12px; }
  65% { translate: 0 -3px; }
  80% { translate: 0 -5px; }
}
body .network-title {
  position: absolute; top: 5dvh; left: 1.2vw; margin: 0;
  writing-mode: vertical-rl; text-orientation: upright; white-space: pre;
  letter-spacing: -.4em!important;
  font-family: Modak,Arial,sans-serif!important; font-weight: 400!important;
  color: var(--circle-blue)!important; font-size: min(clamp(38.4px,4.8vw,91.2px),6.72dvh); line-height: 1;
}
.network-view.is-active .network-title {
  animation: network-title-enter 9s cubic-bezier(.22,1,.36,1) both;
}
body .network-title > span {
  font-family: Modak,Arial,sans-serif!important; font-weight: 400!important;
  font-size: inherit; letter-spacing: inherit!important;
}
body .network-title .network-title-word {
  position: absolute; top: 0; left: 5vw;
  color: var(--circle-orange)!important;
}
@keyframes network-title-enter {
  from { translate: 0 -110dvh; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}
.network-map-frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(70vw,calc(87dvh * 2000 / 1260)); aspect-ratio: 2000 / 1260;
}
.network-map-frame picture,.network-map { display: block; width: 100%; height: 100%; }
.network-map { object-fit: contain; }
.network-corner {
  position: absolute; width: clamp(36px,3.3vw,64px); height: auto; aspect-ratio: 1;
  border-radius: 50%; translate: -50% -50%;
}
.network-top-left { top: 0; left: 0; }
.network-top-right { top: 0; left: 100%; }
.network-bottom-left { top: 100%; left: 0; }
.network-bottom-right { top: 100%; left: 100%; }
.network-heart {
  position: absolute; left: 54.58%; top: 40.90%; transform: translate(-50%,-50%);
  border: 0; padding: 0; width: clamp(12.8px,1.12vw,19.2px); aspect-ratio: 1;
  background: transparent; cursor: pointer;
}
.network-heart-pulse { display: block; position: relative; width: 100%; height: 100%; animation: network-heartbeat 6s ease-in-out infinite; }
.network-heart svg { display: block; width: 100%; height: 100%; fill: #ed2330; }
.network-heart-label {
  position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%);
  white-space: nowrap;
}
body .network-heart-label,body .network-heart-label * {
  font-size: clamp(7px,.55vw,10px)!important; color: #ed2330!important; line-height: 1!important;
}
.network-heart::after { content: ''; position: absolute; width: 44px; height: 44px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.network-heart:focus-visible { outline: 3px solid #ed2330; outline-offset: 5px; border-radius: 50%; }
@keyframes network-heartbeat { 0%,100% { scale: 1; } 20% { scale: 1.18; } 36% { scale: 1; } 52% { scale: 1.12; } }
.network-scroll {
  position: absolute; bottom: 4dvh; left: 50%; transform: translateX(-50%);
  background: transparent; border: 0; padding: 12px; color: var(--circle-blue);
  font-size: clamp(8px,.65vw,11px); cursor: pointer;
}
.network-scroll span { padding-left: 12px; }
.network-scrim { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; }
.network-story {
  position: absolute; z-index: 2; top: 12dvh; left: 50%;
  width: min(94vw,1500px); aspect-ratio: 1; border-radius: 50%;
  background: var(--circle-orange); transform: translate(-50%,110dvh); visibility: hidden;
}
.network-story-close {
  position: absolute; z-index: 3; left: 50%; top: -58px; transform: translateX(-50%);
  width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 50%;
  background: var(--circle-blue); color: #fff; cursor: pointer;
}
.network-story-close svg { display: block; width: 100%; height: 100%; }
.network-reading {
  position: absolute; top: 12%; left: 17%; width: 66%; height: min(64dvh,58%);
  overflow: hidden;
}
.network-text { position: relative; padding: 16px 0 28px; }
body[data-view="globalna-mreza-optimizma"] .portal-view.network-view.is-active .network-text p,
body[data-view="globalna-mreza-optimizma"] .portal-view.network-view.is-active .network-text p * {
  color: #fff!important; font-size: clamp(17px,1.3vw,23px); line-height: 1.55;
  margin: 0 0 1.2em;
}
.network-principles { text-align: center; }
.network-subview { position: absolute; inset: 0; background: var(--portal-background); }
.network-city { position: absolute; width: 0; height: 0; }
.network-city { padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2; }
.network-city::after { content: ''; position: absolute; inset: -22px; }
.network-city-symbol { transition: rotate .5s ease, scale .5s ease; }
.network-city:hover .network-city-symbol { rotate: -12deg; scale: 1.22; }
.network-city:focus-visible .network-city-symbol { outline: 3px solid #fff; outline-offset: 4px; border-radius: 50%; }
.network-office {
  position: absolute; z-index: 3; width: min(24vw,50dvh); aspect-ratio: 1; border-radius: 50%;
  box-sizing: border-box; padding: 3vw; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 3.8s cubic-bezier(.22,1,.36,1), opacity 3.2s cubic-bezier(.22,1,.36,1), visibility 0s linear 3.8s;
}
.network-office-otocac { left: 6.5vw; top: 40dvh; background: var(--circle-orange); transform: translateX(-110vw); }
.network-office-koprivnica { right: 3vw; top: 30dvh; background: var(--circle-blue); transform: translateX(110vw); }
.network-office.is-open { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
body .network-office h2, body .network-office h3 {
  font-family: Modak,Arial,sans-serif!important; font-weight: 400!important; letter-spacing: 0!important;
  margin: 0 0 .3em; line-height: 1.15; font-size: clamp(24px,2.3vw,44px);
}
body .network-office-otocac h2 { color: var(--circle-blue)!important; }
body .network-office-koprivnica h2, body .network-office-koprivnica h3 { color: var(--circle-orange)!important; }
body .network-office h3 { font-size: clamp(18px,1.6vw,30px); }
body .network-office p { font-family: Arial,sans-serif!important; font-weight: 700!important; letter-spacing: .1em!important; color: #fff!important; font-size: clamp(13px,1.1vw,21px); line-height: 1.4; margin: .4em 0; }
body .portal-view.network-view.is-active .network-office h2 {
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
  max-width: 100%; font-size: min(10cqw,40px)!important;
}
body[data-view="globalna-mreza-optimizma"] .portal-view.network-view.is-active .network-subview .network-office p,
body[data-view="globalna-mreza-optimizma"] .portal-view.network-view.is-active .network-subview .network-office p * {
  color: #fff!important; --letter-color: #fff!important; --letter-hover-color: #fff!important;
}
body .network-office-otocac h2 * { color: var(--circle-blue)!important; --letter-color: var(--circle-blue)!important; }
body .network-office-koprivnica h2 *, body .network-office-koprivnica h3 * { color: var(--circle-orange)!important; --letter-color: var(--circle-orange)!important; }
@media(max-width:820px) {
  .network-office { width: min(70vw,44dvh); padding: 7vw; }
  .network-office-otocac { left: 3vw; top: 44dvh; }
  .network-office-koprivnica { right: 3vw; top: 23dvh; }
}
@media(prefers-reduced-motion:reduce) { .network-office, .network-city-symbol { transition: none; } }
.network-city-symbol {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px;
  max-width: none; display: block;
  transform: translate(-50%,-50%);
  animation: network-city-pulse 8s ease-in-out infinite;
}
.network-city-heart { fill: #ed2330; }
.network-city-logo { border-radius: 50%; }
@keyframes network-city-pulse { 0%,100% { scale: 1; } 50% { scale: 1.08; } }
body .portal-view.network-view.is-active .network-city-label,
body .portal-view.network-view.is-active .network-city-label * {
  color: #fff!important; --letter-color: #fff!important; --letter-hover-color: #fff!important;
  text-shadow: none!important; filter: none!important;
}
body .network-city-label {
  position: absolute; display: flex; align-items: center; gap: 6px;
  left: 18px; top: -8px; white-space: nowrap; color: #fff!important;
  font-size: clamp(10px,1vw,16px); line-height: 1.1;
  text-shadow: none;
}
.network-city-sequence { position: absolute; inset: 0; pointer-events: none; }
.network-sequence-city {
  position: absolute; opacity: 0; animation: network-city-sequence 45s linear infinite;
}
.network-sequence-city i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ed2330;
  transform: translate(-50%,-50%); box-shadow: 0 0 0 1px #fff;
}
body .network-sequence-city > span {
  position: absolute; left: 0; bottom: 10px; transform: translateX(-50%);
  white-space: nowrap; color: #ed2330!important; font-size: clamp(9px,.75vw,13px);
  text-shadow: 0 1px 2px #fff,0 -1px 2px #fff;
}
@keyframes network-city-sequence {
  0%,6.666667%,100% { opacity: 0; }
  1%,5% { opacity: 1; }
}
.network-back {
  position: absolute; top: 6dvh; left: 5vw; width: 56px; height: 56px;
  padding: 13px; border: 0; border-radius: 50%; background: var(--circle-blue); color: #fff; cursor: pointer;
  transition: scale .35s ease,box-shadow .35s ease;
}
.network-back svg { display: block; width: 100%; height: 100%; }
.network-back:hover { scale: 1.08; box-shadow: 0 6px 20px #24242326; }
.network-back:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
body[data-view="globalna-mreza-optimizma"]:has(.network-view.is-active.network-in-subview) .logo-menu-button {
  visibility: hidden!important; pointer-events: none!important;
}
.network-in-subview { overflow: hidden!important; }
@media(max-width:820px) {
  body .network-title { top: 6dvh; left: 1vw; font-size: min(clamp(24px,3.6vw,36px),6.72dvh); }
  .network-map-frame { width: 84vw; }
  .network-corner { width: 36px; }
  .network-city-label { gap: 3px; }
  .network-city-symbol { width: 20px; height: 20px; }
  .network-story { top: 18dvh; width: max(116vw,85dvh); }
  .network-reading { top: 14%; left: 50%; transform: translateX(-50%); width: 76vw; height: 54dvh; }
  body[data-view="globalna-mreza-optimizma"] .portal-view.network-view.is-active .network-text p { font-size: 17px; }
}
@media(prefers-reduced-motion:reduce) {
  .network-view.is-active .network-title { animation: none; }
  .network-heart-pulse { animation: none; }
  .network-heart:hover svg { animation: none; }
  .network-city-symbol { animation: none; }
  .network-sequence-city { animation-timing-function: steps(1,end); }
}
