/* BIRO 404 · Partner Space R02 — jedan sistem za javnu stranu, ulaz i portal.
   Tamna SIGNAL zona: tokeni iz SIGNAL kanona (DESIGN.md), zlato i radijusi iz sajta 2027.
   Zlato je signal, ne ukras: CTA, aktivno stanje, napredak, novac. */
@font-face{font-family:"Archivo";font-weight:100 900;font-display:swap;src:url(/assets/Archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-weight:100 900;font-display:swap;src:url(/assets/Archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/assets/IBMPlexMono-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/assets/IBMPlexMono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;
  --bg:#050505; --bg-2:#0a0a0b; --panel:#101011; --panel-2:#151513; --raise:#1c1b18;
  --line:rgba(244,240,230,.08); --line-2:rgba(244,240,230,.15); --line-3:rgba(244,240,230,.26);
  --ink:#f4f0e6; --ink-2:#cdc7ba; --ink-3:#9c978b;
  --gold:#e9b850; --gold-hi:#ffe2a0; --gold-deep:#9a712c; --on-gold:#1a1306;
  --gold-wash:rgba(233,184,80,.08); --gold-wash-2:rgba(233,184,80,.14); --gold-line:rgba(233,184,80,.38);
  --r-s:12px; --r-m:16px; --r-card:22px; --r-xl:28px; --r-pill:999px;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --max-w:1320px; --pad-x:clamp(20px,5.2vw,88px);
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --shadow:0 40px 80px -40px rgba(0,0,0,.9),0 12px 30px -18px rgba(0,0,0,.8);
  --gold-ink:#e9b850; --glass:rgba(5,5,5,.78); --glass-2:rgba(5,5,5,.6); --scrim:rgba(5,5,5,.92);
  --panel-a:rgba(16,16,17,.75); --bg-deep:#0b0a08; --card-shadow:none; --grain:.05; --img-dim:1;
}
/* SVETLA TEMA: papir i mastilo sa sajta 2027, isto zlato; zlato u tekstu tamnije radi kontrasta (AA). */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f5f2; --bg-2:#fbfaf8; --panel:#fffdfa; --panel-2:#ffffff; --raise:#efece6; --bg-deep:#f1ede5;
  --line:rgba(20,19,16,.09); --line-2:rgba(20,19,16,.16); --line-3:rgba(20,19,16,.30);
  --ink:#141310; --ink-2:#4a463f; --ink-3:#6b665d;
  --gold:#e9b850; --gold-hi:#f1c766; --gold-deep:#9a712c; --gold-ink:#7d5a1f; --on-gold:#1a1306;
  --gold-wash:rgba(233,184,80,.16); --gold-wash-2:rgba(233,184,80,.26); --gold-line:rgba(154,113,44,.45);
  --glass:rgba(251,250,248,.82); --glass-2:rgba(251,250,248,.7); --scrim:rgba(251,250,248,.94); --panel-a:rgba(255,253,250,.86);
  --shadow:0 30px 60px -30px rgba(70,56,28,.28),0 10px 24px -14px rgba(70,56,28,.18);
  --card-shadow:0 1px 0 rgba(70,56,28,.04),0 18px 40px -26px rgba(70,56,28,.28); --grain:.025;
}
.card,.lesson,.svc a,.rrow,.door,.people>div,.tier,.res a,.stage,.money>div{box-shadow:var(--card-shadow)}
.grain::after{opacity:var(--grain)}
.logo-light{display:none!important}
:root[data-theme="light"] .logo-dark{display:none!important}
:root[data-theme="light"] .logo-light{display:block!important}
:root[data-theme="light"] ::placeholder{color:#8a857b}
:root[data-theme="light"] .chip.won,:root[data-theme="light"] .btn-gold{color:var(--on-gold)}
/* izbor teme i jezika */
.prefs{display:inline-flex;align-items:center;gap:6px}
.tswitch{display:inline-flex;padding:3px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--bg-2)}
.tswitch button{width:34px;height:30px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.tswitch button .ic{width:16px;height:16px}
.tswitch button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.lswitch{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--bg-2)}
.lswitch a,.lswitch button{min-width:34px;height:30px;padding:0 8px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-3);font:600 12.5px/30px var(--f);text-align:center;text-decoration:none;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.lswitch [aria-current="true"]{background:var(--ink);color:var(--bg)}
/* R04: tema sa tekstom + dugme „izgled i jezik“ (vidljivo na svakoj sirini) */
.tswitch.labeled button{width:auto;height:34px;padding:0 12px 0 10px;display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--f);white-space:nowrap;transition:background-color .16s var(--ease-out),color .16s var(--ease-out)}
.tswitch.labeled button .ic{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){.tswitch.labeled button[aria-pressed="false"]:hover{color:var(--ink)}}
.pmenu{position:relative}
.pm-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 13px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--bg-2);color:var(--ink);font:600 13.5px/1 var(--f);cursor:pointer;white-space:nowrap;transition:border-color .16s var(--ease-out),transform .16s var(--ease-out)}
.pm-btn .ic{width:16px;height:16px;flex:none}
.pm-btn .pm-lang{padding-left:9px;border-left:1px solid var(--line-2);color:var(--ink-3);letter-spacing:.04em}
.pm-btn .pm-car{width:12px;height:12px;color:var(--ink-3);transition:transform .2s var(--ease-out)}
.pm-btn[aria-expanded="true"]{border-color:var(--gold-line)}
.pm-btn[aria-expanded="true"] .pm-car{transform:rotate(180deg)}
.pm-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pm-btn:hover{border-color:var(--line-3)}}
.pm-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:288px;padding:14px 14px 16px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--panel);box-shadow:var(--shadow);transform-origin:top right;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
@starting-style{.pm-panel{opacity:0;transform:translateY(-4px) scale(.98)}}
.pm-panel .pm-h{margin:0 0 8px;font:600 12px/1.2 var(--f);color:var(--ink-3)}
.pm-panel .pm-h:not(:first-child){margin-top:14px}
.pm-panel .tswitch,.pm-panel .lswitch{display:flex!important;width:100%}
.pm-panel .tswitch button,.pm-panel .lswitch a,.pm-panel .lswitch button{flex:1 1 0;justify-content:center}
.pm-panel .pm-hint{margin:8px 2px 0;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
@media (max-width:640px){
  .pm-btn{height:44px;padding:0 12px}
  .pm-btn .pm-name{display:none}
  .pm-btn .pm-car{display:none}
  .pm-panel{position:fixed;left:12px;right:12px;min-width:0}
}
@media (prefers-reduced-motion:reduce){.pm-panel,.pm-btn .pm-car{transition:none}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:var(--on-gold)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* zrno: fiksni sloj, nikad na skrol kontejneru */
.grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- tipografija ---------- */
.display{font-weight:850;letter-spacing:-.045em;line-height:.94;margin:0;font-size:clamp(48px,7.4vw,112px)}
.h1{font-weight:800;letter-spacing:-.035em;line-height:1;margin:0;font-size:clamp(36px,4.6vw,68px)}
.h2{font-weight:780;letter-spacing:-.03em;line-height:1.04;margin:0;font-size:clamp(30px,3.4vw,50px)}
.h3{font-weight:720;letter-spacing:-.02em;line-height:1.15;margin:0;font-size:clamp(20px,1.7vw,24px)}
.h4{font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0;font-size:18px}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2);max-width:56ch;margin:0}
.body{color:var(--ink-2);max-width:62ch;margin:0}
.small{font-size:14px;line-height:1.5}
.muted{color:var(--ink-3)}
.gold{color:var(--gold-ink)}
.eyebrow{font:400 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 22px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}

/* ---------- ikonice ---------- */
.ic{width:20px;height:20px;flex:none;fill:currentColor;display:inline-block;vertical-align:middle}
.ic.s{width:16px;height:16px}.ic.l{width:24px;height:24px}.ic.xl{width:30px;height:30px}
.itile{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--gold-wash);color:var(--gold-ink);border:1px solid rgba(233,184,80,.18);flex:none}
.itile.n{background:var(--panel-2);color:var(--ink);border-color:var(--line-2)}

/* ---------- dugmad ---------- */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 22px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:transparent;color:var(--ink);font-weight:650;font-size:15.5px;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.btn:active{transform:scale(.97)}
.btn .ic{width:18px;height:18px}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn-ghost{background:rgba(244,240,230,.03)}
.btn-quiet{border-color:transparent;padding:0 12px}
.btn-sm{--h:40px;padding:0 16px;font-size:14.5px}
.btn-lg{--h:56px;padding:0 28px;font-size:16.5px}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
  .btn-ghost:hover,.btn:not(.btn-gold):hover{border-color:var(--line-3);background:rgba(244,240,230,.06)}
  .btn-quiet:hover{border-color:transparent}
  .btn:hover .ic-arrow{transform:translateX(3px)}
}
.ic-arrow{transition:transform 200ms var(--ease-out)}
.link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold-line);padding-bottom:1px;transition:border-color 200ms ease}
.link:hover{border-color:var(--gold)}

/* ---------- status chip ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:var(--r-pill);font-size:13px;font-weight:620;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--ink-2);background:rgba(244,240,230,.02)}
.chip .ic{width:14px;height:14px}
.chip.live{border-color:var(--gold-line);color:var(--gold-ink);background:var(--gold-wash)}
.chip.won{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.chip.draft{border-style:dashed;color:var(--ink-3)}
.chip.closed{color:var(--ink-3);border-color:var(--line)}
.chip.test{font:400 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;height:24px;padding:0 10px;color:var(--ink-3);border-style:dashed}

/* ---------- kartice ---------- */
.card{background:linear-gradient(180deg,rgba(244,240,230,.025),rgba(244,240,230,0) 40%),var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,2.2vw,30px);position:relative}
.card.raise{background:var(--panel-2)}
.card.glow{overflow:hidden;border-color:rgba(233,184,80,.24)}
.card.glow::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(233,184,80,.20),rgba(233,184,80,0));pointer-events:none}
.card.glow>*{position:relative}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.card-head .h4{display:flex;align-items:center;gap:10px}
a.card{text-decoration:none;display:block;transition:border-color 220ms ease,transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.card:hover{border-color:var(--line-3);transform:translateY(-2px)}}

/* ---------- signalna linija (potpis sistema) ---------- */
.signal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),1fr);position:relative}
.signal::before{content:"";position:absolute;left:0;right:0;top:var(--y,7px);height:1px;background:var(--line-2)}
.signal .fill{position:absolute;left:0;top:var(--y,7px);height:1px;width:var(--p,0%);background:linear-gradient(90deg,var(--gold-deep),var(--gold));overflow:hidden}
.signal .fill::after{content:"";position:absolute;top:-1px;height:3px;width:60px;left:-60px;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);animation:glint 2.8s var(--ease-io) infinite 1.2s}
.signal li{position:relative;padding-top:26px;font-size:13px;color:var(--ink-3);line-height:1.3;padding-right:8px}
.signal li::before{content:"";position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--line-3);box-sizing:border-box}
.signal li.done{color:var(--ink-2)}
.signal li.done::before{background:var(--gold-deep);border-color:var(--gold-deep)}
.signal li.cur{color:var(--gold-ink);font-weight:650}
.signal li.cur::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(233,184,80,.16)}
.signal li.end::before{background:var(--ink-3);border-color:var(--ink-3)}
.signal.mini{--y:4px}
.signal.mini li{padding-top:0;height:9px;font-size:0}
.signal.mini li::before{top:0;width:9px;height:9px}
.signal.mini li.cur::before{box-shadow:0 0 0 3px rgba(233,184,80,.18)}
@keyframes glint{0%{left:-60px}60%,100%{left:100%}}

/* segmenti napretka */
.segs{display:grid;grid-template-columns:repeat(var(--n,12),1fr);gap:4px}
.segs i{height:6px;border-radius:3px;background:var(--line-2)}
.segs i.on{background:var(--gold)}
.segs i.next{background:var(--gold-wash-2);box-shadow:inset 0 0 0 1px var(--gold-line)}

/* prsten napretka */
.ring{--p:0;width:var(--sz,88px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(closest-side,var(--panel) 79%,transparent 80% 100%),conic-gradient(var(--gold) calc(var(--p)*1%),var(--line-2) 0)}
.ring b{font-size:calc(var(--sz,88px)*.26);font-weight:800;letter-spacing:-.03em;line-height:1}
.ring span{display:block;font-size:11px;color:var(--ink-3);text-align:center;margin-top:2px}

/* forme */
.f{display:grid;gap:8px}
.f label,.f .lbl{font-weight:650;font-size:14.5px}
.f .opt{font-weight:400;color:var(--ink-3)}
.f .help{margin:0;font-size:13.5px;color:var(--ink-3)}
.f .err{margin:0;font-size:13.5px;color:var(--gold-hi);display:flex;gap:6px;align-items:center}
.f .err::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-hi)}
.input,.f input[type=text],.f input[type=email],.f input[type=tel],.f select,.f textarea{width:100%;height:50px;padding:0 16px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);
  transition:border-color 160ms ease,box-shadow 160ms ease}
.f textarea{height:auto;min-height:112px;padding:14px 16px;resize:vertical;line-height:1.5}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 22px) 22px,calc(100% - 17px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(233,184,80,.14)}
.f [aria-invalid="true"]{border-color:var(--gold-hi)}
::placeholder{color:#77736a}
.choice{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-s);cursor:pointer;background:var(--bg-2);transition:border-color 160ms ease,background-color 160ms ease}
.choice input{margin:3px 0 0;accent-color:var(--gold);width:18px;height:18px;flex:none}
.choice:has(input:checked){border-color:var(--gold-line);background:var(--gold-wash)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill-opt{position:relative}
.pill-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pill-opt span{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2);transition:all 160ms ease}
.pill-opt input:checked+span{border-color:var(--gold);color:var(--on-gold);background:var(--gold);font-weight:650}
.pill-opt input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;background:var(--ink);color:var(--bg);padding:13px 20px;border-radius:var(--r-pill);font-weight:650;font-size:14.5px;
  box-shadow:var(--shadow);transition:opacity 240ms ease,transform 240ms var(--ease-out);display:flex;gap:10px;align-items:center}
.toast[data-hide]{opacity:0;transform:translate(-50%,12px);pointer-events:none}

/* ulaz na skrol: jedan, tih */
.rv{opacity:0;transform:translateY(14px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .signal .fill::after,.pulse,.orbit{animation:none!important}
  *{transition-duration:0ms!important}
}