/* Urbano on the night ground of the statement, the founders and the globe, with the site's display sans in
   the headings instead of the light "Serif" at 400 that only this section used. The accent is Urbano's own
   green (#10A483, from its brand), since its navy disappears on dark. Loaded after home-refinement.css. */
#urbano.uv{--uv-noc:#0f0e0c;--uv-svj:#f4efe4;--uv-zel:#10a483;background:var(--uv-noc);color:var(--uv-svj)}
#urbano.uv::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(46% 38% at 78% 18%,rgba(16,164,131,.13),transparent 70%),
             radial-gradient(40% 40% at 10% 70%,rgba(47,86,196,.12),transparent 70%)}
#urbano .uv-sloj,#urbano .uv-stage,#urbano .uvt,#urbano .uv-restore-footer{position:relative;z-index:1}

/* headings: display sans, tight, with the second line as an italic accent */
#urbano .uv-story{width:42%;max-width:560px}
#urbano .uv-chapter{font:400 clamp(40px,4.4vw,72px)/1 var(--sans-d);letter-spacing:-.05em;color:var(--uv-svj)}
#urbano .uv-chapter>span:last-child{font-family:"Newsreader",Georgia,serif;font-style:italic;letter-spacing:-.03em;color:var(--uv-zel)}
#urbano .uv-ulaz-naslov{font:400 clamp(44px,6.6vw,112px)/.95 var(--sans-d);letter-spacing:-.05em}
#urbano .uvt-slajd h3{font:400 clamp(32px,3.6vw,56px)/1.02 var(--sans-d);letter-spacing:-.045em;color:var(--uv-svj)}
#urbano .uvt-slajd h3 em{font-family:"Newsreader",Georgia,serif;font-style:italic;letter-spacing:-.02em;color:var(--uv-zel)}

/* body copy and small type in light ink */
#urbano .uv-kicker{display:inline-flex;align-items:center;gap:10px;font:12px var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,228,.7)}
#urbano .uv-kicker::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--uv-zel);box-shadow:0 0 0 5px rgba(16,164,131,.18)}
#urbano .uv-description,#urbano .uvt-slajd p{color:rgba(244,239,228,.72)}
#urbano .uv-case{color:var(--uv-svj);border-bottom-color:rgba(244,239,228,.35)}
#urbano .uv-case:hover{color:var(--uv-zel)}
#urbano .uv-wordmark{color:rgba(244,239,228,.035)}
#urbano .uv-stage-footer{border-top-color:rgba(244,239,228,.12);color:rgba(244,239,228,.5)}
#urbano .uvt{color:var(--uv-svj)}
#urbano .uvt-brojac{color:rgba(244,239,228,.5)}
#urbano .uvt-brojac b{color:var(--uv-svj)}
#urbano .uvt-traka{background:rgba(244,239,228,.14)}
#urbano .uvt-traka i,#urbano .uvt-moduli li.je-tu::before{background:var(--uv-zel)}
#urbano .uvt-moduli{color:rgba(244,239,228,.32)}
#urbano .uvt-moduli li.je-tu{color:var(--uv-svj)}
#urbano .uv-restore-footer,#urbano .uv-restore-footer p{color:rgba(244,239,228,.6)}
#urbano .uv-restore-footer a{color:var(--uv-svj)}

/* the phone's shadow and the screen frames need a little light to separate from the night */
#urbano .uv-detalj>span{box-shadow:0 0 0 1px rgba(244,239,228,.12),0 40px 60px -30px rgba(0,0,0,.9)}

@media (max-width:900px){
  #urbano .uv-story{width:auto;max-width:480px}
  #urbano .uv-chapter{font-size:clamp(38px,10.4vw,52px)}
  #urbano .uvt-slajd h3{font-size:clamp(28px,7.6vw,36px)}
}

/* ── The pinned walk through the app ────────────────────────────────────────
   One idea: each step lights its place in the city. The plate behind the phone is a dark cut of a map
   with Urbano-green rings round the phone, and each step sends one ring out from it (.uv-puls, set by
   urbano-tok.js); the step's module lights up as a green chip, and the step number stands large beside
   the heading. */
#urbano .uv-podloga{background:
    radial-gradient(70% 60% at 50% 30%,rgba(16,164,131,.22),transparent 70%),
    linear-gradient(180deg,#121a17 0%,#0d1210 100%);
  box-shadow:inset 0 0 0 1px rgba(244,239,228,.14),0 50px 90px -40px rgba(0,0,0,.9)}
#urbano .uv-podloga::before{background:repeating-radial-gradient(circle,transparent 0 calc(var(--pw) * .2 - 1px),
    rgba(16,164,131,.22) calc(var(--pw) * .2 - 1px) calc(var(--pw) * .2))}
#urbano .uv-podloga::after{box-shadow:inset 0 1px 0 rgba(244,239,228,.08)}
/* faint street grid inside the plate */
#urbano .uv-podloga{background-image:
    radial-gradient(75% 65% at 50% 28%,rgba(16,164,131,.34),transparent 72%),
    linear-gradient(rgba(244,239,228,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,239,228,.05) 1px,transparent 1px),
    linear-gradient(180deg,#18261f 0%,#101814 100%);
  background-size:auto,calc(var(--pw) * .24) calc(var(--pw) * .24),calc(var(--pw) * .24) calc(var(--pw) * .24),auto}
/* the ring each step sends out */
#urbano .uv-device::after{content:'';position:absolute;left:50%;top:calc(var(--pw) * 1.1);width:calc(var(--pw) * .6);aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(16,164,131,.8);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:0}
#urbano.uv-puls .uv-device::after{animation:uv-puls 1.4s cubic-bezier(.2,.7,.2,1)}
@keyframes uv-puls{0%{transform:translate(-50%,-50%) scale(.4);opacity:.9}100%{transform:translate(-50%,-50%) scale(4.2);opacity:0}}
#urbano .uv-sjena{background:radial-gradient(closest-side,rgba(0,0,0,.8),rgba(0,0,0,0))}

/* the step number, large */
/* no progress rule beside it: the label sits above, "/ 09" rides on the number's baseline */
#urbano .uvt-oznaka{margin:0 0 14px;font:11px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,228,.5)}
#urbano .uvt-brojac{align-items:baseline;gap:10px}
#urbano .uvt-brojac b{font:400 clamp(56px,6vw,96px)/.9 var(--sans-d);letter-spacing:-.06em;color:var(--uv-zel)}
#urbano .uvt-od{font:12px/1 var(--mono,monospace);letter-spacing:.12em;color:rgba(244,239,228,.45)}

/* modules as chips, the current one lit */
#urbano .uvt-moduli{gap:8px;max-width:44ch;font-size:11px;letter-spacing:.12em}
#urbano .uvt-moduli li{padding:7px 11px;border-radius:9999px;box-shadow:inset 0 0 0 1px rgba(244,239,228,.14);color:rgba(244,239,228,.45);
  transition:color .35s ease,background-color .35s ease,box-shadow .35s ease}
#urbano .uvt-moduli li.je-tu{background:var(--uv-zel);color:#06120e;box-shadow:inset 0 0 0 1px var(--uv-zel)}
#urbano .uvt-moduli li.je-tu::before{display:none}

@media (max-width:1100px){
  #urbano .uvt-brojac,#urbano .uvt-oznaka{justify-content:center;text-align:center}
  #urbano .uvt-brojac b{font-size:48px}
  #urbano .uvt-moduli{justify-content:center;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){#urbano .uv-device::after{display:none}}