/* Vibe Code Academy: zajednički stilovi srpskih stranica (tokeni + komponente iz design systema).
   Tema: Ink sa svetlim trakama (varijanta C). Stilovi vezani za jednu stranicu idu u njen fajl (npr. css/sr-home.css).
   Izvor istine za boje i pravila: Vibe Code Academy design system.
   Layout: jedan sadržaj, četiri varijante teme. Sve boje dolaze iz tokena design systema (Ink / Paper), nijedna komponenta nema svoju boju. */
:root{
  --sans:Geist,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --max:1220px;
  --radius-sm:9px;--radius-md:14px;--radius-lg:18px;--radius-xl:22px;--radius-full:999px;
  --section-pad:92px;
  /* fiksni inverse tokeni (footer, klijenti, final kartica) */
  --inverse-bg:#070807;--inverse-surface:#11130f;--inverse-text:#f1eee5;--inverse-muted:#7c847a;--inverse-line:#262a24;
  /* default (Ink) dok JS ne postavi varijantu */
  --page:#0b0c0b;
  color-scheme:dark;
}
body{background:var(--page);margin:0}

/* ---------- TEME (tokeni iz design systema) ---------- */
.site[data-v="ink"],.site[data-v="ink-bands"],.site[data-v="paper-bands"] .band,.site[data-v^="paper"] .flip{
  --bg:#0b0c0b;--bg-alt:#111310;--surface:#151814;--surface-alt:#1c201a;
  --text:#f3f0e5;--text-muted:#9a9f94;--border:#30352d;--border-strong:#454c40;
  --blue:#5bc8ff;--danger:#ff674b;
  --grid-line:rgba(243,240,229,.045);--shadow:0 30px 80px rgba(0,0,0,.35);
}
.site[data-v="paper"],.site[data-v="paper-bands"],.site[data-v="ink-bands"] .band,.site[data-v^="ink"] .flip{
  --bg:#eff0eb;--bg-alt:#e4e6df;--surface:#ffffff;--surface-alt:#f6f7f3;
  --text:#161813;--text-muted:#676c63;--border:#ccd1c8;--border-strong:#a9aea4;
  --blue:#1456e8;--danger:#cf2d1f;
  --grid-line:rgba(22,24,19,.06);--shadow:0 30px 70px rgba(29,35,27,.12);
}

/* AKCENT: jedan po stranici. Prati stranicu (jezik), nikad traku. */
.site[data-v="ink"],.site[data-v="ink-bands"],.site[data-v="ink-bands"] .band{--accent:#d5ff45;--accent-ink:#11150c;--accent-text:var(--accent)}
.site[data-v="paper"],.site[data-v="paper-bands"],.site[data-v="paper-bands"] .band{--accent:#e84a2a;--accent-ink:#fffdf7;--accent-text:var(--accent)}
/* Žuta je nečitljiva kao tekst na svetloj traci: tamo je samo pozadina (dugme, marker, kartica, traka napretka). */
.site[data-v="ink-bands"] .band,.site[data-v^="ink"] .flip{--accent-text:var(--text)}
.site[data-v="ink-bands"] .band h2 em,.site[data-v^="ink"] .flip h2 em{background:var(--accent);color:var(--accent-ink);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.site[data-v="ink-bands"] .band h2,.site[data-v^="ink"] .flip h2{line-height:1.12}
.site[data-v="ink-bands"] .band .meter i,.site[data-v^="ink"] .flip .meter i{height:6px}
.site[data-v="ink-bands"] .band .meter i.on,.site[data-v^="ink"] .flip .meter i.on{box-shadow:inset 0 0 0 1px var(--accent-ink)}

*{box-sizing:border-box}
.site{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;}
.site a{color:inherit;text-decoration:none}
.site img{max-width:100%;display:block}
.site h1,.site h2,.site h3,.site p,.site figure,.site blockquote,.site ol,.site ul{margin:0}
.site ol,.site ul{padding:0;list-style:none}
.container{width:min(var(--max),100% - 64px);margin-inline:auto}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}

/* ---------- TIPOGRAFIJA ---------- */
.site h1{font-size:clamp(38px,4.4vw,64px);line-height:1;letter-spacing:-.045em;font-weight:800;text-wrap:balance;max-width:14em}
.site h2{font-size:clamp(30px,3.3vw,48px);line-height:1.05;letter-spacing:-.04em;font-weight:800;text-wrap:balance;max-width:900px}
.site h3{font-size:clamp(19px,1.5vw,22px);line-height:1.2;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.site h1 em,.site h2 em,.site blockquote em{font-style:normal;color:var(--accent-text)}
.lede{max-width:640px;color:var(--text-muted);font-size:18px;line-height:1.65}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));border-radius:var(--radius-full);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent-text);font:900 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:currentColor}
.mono{font-family:var(--mono)}
.label{font:800 10px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted)}

/* ---------- DUGMAD ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:10px;border:1px solid transparent;font-size:13px;font-weight:900;letter-spacing:.01em;cursor:pointer;transition:transform .2s,background .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.site .btn-solid{background:var(--accent);color:var(--accent-ink)}
.site .btn-outline{border-color:var(--border-strong);color:var(--text)}
.btn-outline:hover{border-color:var(--text)}
.btn.is-disabled{opacity:.45;cursor:default;pointer-events:none}
.section .offer-call{margin:40px 0 0;text-align:center;color:var(--text-muted);font-size:15px}
.section .offer-call a{color:var(--text);font-weight:800;white-space:nowrap}

/* ---------- SEKCIJE: 5 zvaničnih tipova ---------- */
.section{position:relative;padding-block:var(--section-pad)}
.section.alt{background:var(--bg-alt)}
.band{background:var(--bg-alt);color:var(--text)}
.site[data-v$="-bands"] .band{background:var(--bg)}
/* .flip: sekcija uvek u suprotnoj temi (svetla na Ink stranici), bez obzira na varijantu */
.site .flip{background:var(--bg);color:var(--text)}
.statement{background:var(--accent);color:var(--accent-ink);padding-block:110px}
.final{background:var(--danger);padding-block:110px}
.head{display:grid;gap:22px;margin-bottom:56px}
.grid-bg:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.section>.container{position:relative}

/* ---------- NAV ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav-inner{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px}
.brandmark{width:36px;height:36px;border:1px solid var(--border-strong);border-radius:10px;position:relative;overflow:hidden;background:var(--surface);flex:none}
.brandmark i{position:absolute;top:5px;width:8px;height:25px;background:var(--accent);transform:skew(-21deg);border-radius:2px}
.brandmark i:first-child{left:9px}.brandmark i:last-child{right:8px}
.brandtype{font-size:17px;font-weight:900;letter-spacing:-.035em;line-height:1}
.brandtype small{display:block;font-size:8px;letter-spacing:.24em;color:var(--text-muted);margin-top:4px;font-weight:800}
.nav-links{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--text-muted)}
.nav-links>a,.nav-links summary{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;border-radius:var(--radius-sm);cursor:pointer;list-style:none}
.nav-links summary::-webkit-details-marker{display:none}
.nav-links>a:hover,.nav-links summary:hover,.nav-links details[open] summary{background:var(--surface);color:var(--text)}
.nav-links details{position:relative}
.nav-links summary:after{content:"";width:6px;height:6px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:translateY(-2px) rotate(45deg)}
.menu{position:absolute;top:48px;left:0;width:300px;padding:8px;display:grid;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow)}
.menu a{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;padding:10px;border-radius:10px;color:var(--text)}
.menu a:hover{background:var(--surface-alt)}
.menu small{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border);border-radius:8px;color:var(--accent-text);font:800 9px/1 var(--mono)}
.menu b{display:block;font-size:13px}.menu em{display:block;font-style:normal;font-size:11px;color:var(--text-muted);margin-top:2px}
.nav-cta{min-height:42px;padding:10px 16px}

/* ---------- HERO ---------- */
.hero{padding-block:110px 90px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-copy{display:grid;gap:28px;min-width:0}
.actions{display:flex;flex-wrap:wrap;gap:11px}
.facts{display:flex;flex-wrap:wrap;gap:10px}
.facts span{display:inline-flex;align-items:baseline;gap:8px;padding:11px 16px;border-radius:11px;background:var(--text);color:var(--bg);font-size:13px;font-weight:650}
.facts b{font:800 19px/1 var(--mono);color:var(--bg);letter-spacing:-.03em}
.window{padding:12px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow);min-width:0}
.window-bar{display:flex;justify-content:space-between;gap:12px;padding:4px 6px 12px;font:800 9px/1 var(--mono);letter-spacing:.1em;color:var(--text-muted)}
.window-bar span{display:flex;align-items:center;gap:7px}
.window-bar i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.window-bar b{color:var(--accent-text)}
.video{position:relative;display:block;aspect-ratio:16/9;max-width:100%;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--surface-alt)}
.video img,.video video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.play{position:absolute;inset:0;display:grid;place-items:center}
.play span{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-ink);font:900 12px/1 var(--mono);letter-spacing:.06em;box-shadow:var(--shadow)}
.window-foot{display:flex;justify-content:space-between;padding:12px 6px 2px;font:800 9px/1 var(--mono);letter-spacing:.1em;color:var(--text-muted)}

/* ---------- KAKO RADI · prikaz 1: kartice ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}
.steps li{position:relative;display:flex;min-width:0}
.steps li:not(:last-child):after{content:"→";position:absolute;right:-23px;top:50%;translate:0 -50%;font:800 16px/1 var(--mono);color:var(--text-muted);pointer-events:none}
.step{flex:1;display:flex;flex-direction:column;gap:12px;min-height:280px;padding:24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.step p{color:var(--text-muted);font-size:14px;line-height:1.6}
.step-btn{margin-top:auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;align-self:stretch;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);color:var(--text);font-size:13px;font-weight:800;transition:background-color .25s,border-color .25s,color .25s}
.step-btn i{font-style:normal;transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.step:hover .step-btn,.step-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step:hover .step-btn i,.step-btn:hover i{translate:5px 0}
.site .step.result{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step.result p{color:var(--accent-ink);opacity:.8}
.site .step.result .step-btn{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--accent)}
.step.result .step-btn i{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{translate:5px 0}}

/* ---------- KAKO RADI · Koraci: lista + slika ---------- */
.path{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
.path-list{display:grid;gap:6px;align-content:start}
.path-cta{display:grid;justify-items:start;gap:16px;margin-top:22px;padding:0 20px}
.path-cta strong{font-size:18px;letter-spacing:-.02em;color:var(--text-muted);font-weight:700}
.path-cta .btn span{transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.path-cta .btn:hover span{translate:5px 0}
.path-item{position:relative;border-radius:var(--radius-md);transition:background-color .3s}
.path-item.is-active{background:var(--surface)}
.path-head{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;border-radius:var(--radius-md)}
.path-head:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.path-head h3{font-size:clamp(22px,2vw,30px);letter-spacing:-.035em;color:var(--text-muted);transition:color .3s}
.path-item.is-active .path-head h3,.path-head:hover h3{color:var(--text)}
.path-head span{font:800 18px/1 var(--mono);color:var(--text-muted);transition:rotate .3s,color .3s}
.path-item.is-active .path-head span{rotate:90deg;color:var(--accent-text)}
.path-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.path-item.is-active .path-body{grid-template-rows:1fr}
.path-body>div{overflow:hidden;display:grid;gap:16px;padding-inline:20px}
.path-item.is-active .path-body>div{padding-bottom:20px}
.path-body p{color:var(--text-muted);max-width:460px}
.path-body .step-btn{justify-self:start;align-self:auto;margin-top:0}
.path-bar{position:absolute;left:20px;right:20px;bottom:0;height:2px;border-radius:2px;background:var(--border);overflow:hidden;opacity:0}
.path-item.is-active .path-bar{opacity:1}
.path-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;scale:0 1}
.path-item.is-active .path-bar i{animation:fillbar var(--dur,6s) linear forwards}
.path.paused .path-bar i{animation-play-state:paused}
@keyframes fillbar{to{scale:1 1}}
.path-media{position:sticky;top:96px;aspect-ratio:4/3;max-width:100%;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.path-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.06;transition:opacity .6s,scale 1.2s cubic-bezier(.2,.8,.2,1)}
.path-media img.on{opacity:1;scale:1}
.path-media figcaption{position:absolute;left:14px;bottom:14px;padding:9px 13px;border-radius:10px;background:var(--inverse-surface);color:var(--inverse-text);font:800 10px/1 var(--mono);letter-spacing:.1em}
.tools{display:grid;gap:18px;margin-top:80px}
.tool-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.tool-grid div{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-size:13px;font-weight:700;min-width:0}
.tool-grid img{width:22px;height:22px;object-fit:contain;border-radius:5px;background:#fff;padding:2px;flex:none}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:40px}
.cta-row strong{font-size:20px;letter-spacing:-.02em}

/* ---------- TIMELINE (2022/2024/Danas) ---------- */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.timeline li{display:grid;gap:12px;align-content:start;padding:26px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.timeline .year{font:800 13px/1 var(--mono);letter-spacing:.06em;color:var(--text-muted)}
.timeline p{color:var(--text-muted)}
.timeline .now{background:var(--text);border-color:var(--text);color:var(--bg)}
.timeline .now .year,.timeline .now p{color:var(--bg)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;margin-top:64px}
.note{font-size:19px;line-height:1.6;color:var(--text-muted)}
.note b{color:var(--text)}
.photo{display:grid;gap:12px}
.photo img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--border);aspect-ratio:16/10;object-fit:cover}
.photo figcaption{font-size:13px;color:var(--text-muted)}


/* ---------- KRIVA RASTA (2022 → 2024 → Danas) ---------- */
.growth{position:relative;height:clamp(420px,38vw,500px)}
.growth-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.growth-line .g0{stop-color:var(--border-strong)}
.growth-line .g1{stop-color:var(--text-muted)}
.growth-line .g2{stop-color:var(--accent-text)}
.growth-path{fill:none;stroke:url(#gl);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.growth-area{fill:url(#ga)}
.growth-line .a0{stop-color:var(--surface);stop-opacity:.9}
.growth-line .a1{stop-color:var(--surface);stop-opacity:0}
.growth-steps li{position:absolute}
.growth-steps .dot{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--text-muted);translate:-50% -50%;z-index:1}
.growth-steps div{position:absolute;display:grid;gap:8px;width:min(280px,26vw)}
.growth-steps .year{font:800 clamp(28px,2.6vw,40px)/1 var(--mono);letter-spacing:-.05em;color:var(--text-muted)}
.growth-steps p{color:var(--text-muted);font-size:15px}
/* tacke na krivoj (iste koordinate kao putanja: 330,400 / 660,230 / 900,60 od 1200x440) */
.g-2022{left:27.5%;top:90.9%}
.g-2024{left:55%;top:52.27%}
.g-now{left:75%;top:13.64%}
/* tekst: iznad-levo od tacke dok kriva raste, ispod-desno na vrhu */
.g-2022 div,.g-2024 div{right:18px;bottom:22px;text-align:right;justify-items:end}
.g-now div{top:30px;left:-40px}
.g-now .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);animation:ring 2s infinite}
.g-now .year{color:var(--accent-text)}
@keyframes ring{70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .growth-path{animation:draw linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
    .growth-steps div,.growth-note{animation:rise linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
  }
}
.growth-note{position:absolute;right:0;bottom:6%;width:min(470px,40%);margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.5;letter-spacing:-.02em;font-weight:600;color:var(--text-muted);text-wrap:pretty}
.growth-note b{color:var(--text);font-weight:800}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- TABELA POREĐENJA: kolona Akademije je istaknuti panel ---------- */
.table-wrap{overflow-x:auto;padding-bottom:4px}
.compare{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;color:var(--text)}
.compare th,.compare td{padding:20px 22px;text-align:left;vertical-align:top;font-size:15px;line-height:1.5}
.compare tbody th,.compare tbody td:not(.ours){border-bottom:1px solid var(--border)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{padding-block:14px;font:800 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);vertical-align:bottom}
.compare tbody th{width:18%;font:800 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-top:23px}
.compare td{width:32%;color:var(--text-muted)}
.compare td:not(.ours):before{content:"×";margin-right:10px;font-weight:800;color:var(--border-strong)}
/* panel Akademije */
.compare .ours{width:50%;background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:650;padding-inline:28px;border-bottom:1px solid color-mix(in srgb,var(--accent-ink) 14%,transparent)}
.compare thead .ours{border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding-top:26px;padding-bottom:16px;font-size:13px;color:var(--accent-ink)}
.compare tbody tr:last-child .ours{border-radius:0 0 var(--radius-lg) var(--radius-lg);border-bottom:0;padding-bottom:28px}
.compare .ours i{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:12px;border-radius:50%;background:var(--accent-ink);color:var(--accent);font-style:normal;font-size:12px;font-weight:900;vertical-align:-4px}
.compare tbody tr{transition:background-color .2s}
.compare tbody tr:hover th,.compare tbody tr:hover td:not(.ours){color:var(--text)}
.compare tbody tr:hover .ours{background:color-mix(in srgb,var(--accent) 88%,var(--accent-ink))}

/* ---------- CHAT VS SISTEM (spojeno sa citatom) ---------- */
/* dve iste kolone; zaključak + CTA stoje ispod desne kartice, iste širine */
.versus,.build-close{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.versus{position:relative;align-items:stretch}
.vs{display:grid;gap:16px;align-content:start;padding:32px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.vs h3{font-size:clamp(20px,1.7vw,24px);color:var(--text-muted)}
.vs ul{display:grid;gap:12px}
.vs li{position:relative;padding-left:30px;font-size:15px;line-height:1.5;color:var(--text-muted)}
.vs li:before{content:"×";position:absolute;left:0;top:1px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);color:var(--text-muted);font-size:11px;font-weight:800}
.site .vs.yes{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.vs.yes .label,.vs.yes h3,.vs.yes li{color:var(--accent-ink)}
.vs.yes li:before{content:"✓";border:0;background:var(--accent-ink);color:var(--accent)}
/* strelica prelaza izmedju kartica */
.versus:after{content:"→";position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--border-strong);color:var(--text);font:800 16px/1 var(--mono);z-index:1}
.build-close{margin-top:28px}
.build-close>div{grid-column:2;display:grid;justify-items:start;gap:18px;padding-inline:32px}
.build-close p{font-size:16px;line-height:1.6;color:var(--text-muted)}
.build-close b{color:var(--text)}
.build-close .btn span{transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.build-close .btn:hover span{translate:5px 0}

/* ---------- STATEMENT ---------- */
.statement blockquote{font-size:clamp(26px,3vw,44px);line-height:1.12;letter-spacing:-.035em;font-weight:800;max-width:1080px;text-wrap:balance}
.statement blockquote em{color:inherit;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}
.statement-foot{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:44px}
.statement-foot p{max-width:640px;font-size:17px;line-height:1.65;opacity:.85}
.site .btn-ink{background:var(--accent-ink);color:var(--accent)}

/* ---------- NIVOI ---------- */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.level{display:flex;flex-direction:column;gap:12px;min-height:240px;padding:24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.level p{color:var(--text-muted);font-size:14px}
.meter{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.meter i{height:4px;border-radius:2px;background:var(--border)}
.meter i.on{background:var(--accent)}
.level-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.level-top b{font:800 12px/1 var(--mono);color:var(--text)}
.level .tag{margin-top:auto;font:800 10px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.level.top{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink)}
.level.top p,.level.top .tag,.level.top b{color:var(--accent-ink)}
.level.top .meter i{background:var(--accent-ink)}
.inline-cta{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;margin-top:12px;padding:26px 28px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.inline-cta div{display:grid;gap:6px;max-width:680px}
.inline-cta b{font-size:19px}
.inline-cta p{color:var(--text-muted)}
.wide{margin-top:12px}
.wide img{aspect-ratio:21/8}


/* ---------- NIVOI: stepenice (stil kartica sa Community stranice) ---------- */
.stairs{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;align-items:end;padding-top:44px}
.stair{position:relative;display:flex;flex-direction:column;min-height:calc(190px + var(--i) * 46px);padding:22px;border:1px solid var(--border);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--surface);overflow:visible;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s}
/* tekstura mreze unutra + prsten u uglu */
.stair:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:radial-gradient(circle at 100% 0,transparent 33px,var(--border-strong) 34px,transparent 35px),linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:auto,24px 24px,24px 24px;mask-image:linear-gradient(to bottom,#000,transparent 75%)}
.stair-body{position:relative;display:grid;gap:10px;padding-right:18px}
.stair h3{font-size:clamp(17px,1.4vw,21px)}
.stair p{font-size:13px;line-height:1.55;color:var(--text-muted)}
.stair:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.site .stair.top{background:radial-gradient(circle at 30% 20%,color-mix(in srgb,#fff 35%,var(--accent)),var(--accent) 55%);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 12%,transparent),0 0 80px color-mix(in srgb,var(--accent) 35%,transparent)}
.stair.top p{color:var(--accent-ink);opacity:.8}
.stair.top .stair.top:before{display:none}
.pin{position:absolute;left:0;bottom:calc(100% + 12px);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:800 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.pin:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.stair.top .pin{left:auto;right:0;color:var(--text)}
.stair.top .pin:before{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.stairs:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--border)}
/* slika odvojena: "room" blok kao na Community stranici */
.room{position:relative;margin-top:56px;min-height:440px;border-radius:var(--radius-xl);overflow:hidden;display:flex;align-items:flex-end;background:var(--inverse-bg)}
.room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.2s cubic-bezier(.2,.8,.2,1)}
.room:hover img{scale:1.03}
.room:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,8,7,.92) 0%,rgba(7,8,7,.62) 46%,rgba(7,8,7,.1) 100%)}
.room-copy{position:relative;z-index:2;display:grid;justify-items:start;gap:16px;max-width:520px;padding:clamp(28px,4vw,48px);color:var(--inverse-text)}
.room-copy h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;font-weight:800}
.room-copy p{color:#c4cbc1;font-size:16px;line-height:1.65}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .stair{animation:rise linear both;animation-timeline:view();animation-range:entry calc(var(--i) * 5%) cover calc(25% + var(--i) * 4%)}
  }
}

/* ---------- ULOGE + TRZISTE ---------- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.role{display:grid;gap:10px;align-content:start;padding:26px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.role p{color:var(--text-muted);font-size:14px}
.role .label{color:var(--blue)}
.role.cta{background:var(--surface-alt);border-color:var(--border-strong);gap:16px}
.market{margin-top:56px;display:grid;gap:22px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stats div{display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--radius-lg);background:var(--text);color:var(--bg)}
.stats b{font:800 clamp(32px,3.2vw,46px)/1 var(--mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stats span{color:var(--bg);opacity:.75;font-size:14px;max-width:250px}
.source{font:600 11px/1.4 var(--mono);color:var(--text-muted)}

/* ---------- TIM ---------- */
.team{display:grid;grid-template-columns:1fr 1fr .8fr;gap:12px}
.person{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.person img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top}
.person div{display:grid;gap:8px;align-content:start;padding:22px}
.person p{color:var(--text-muted);font-size:14px}
.person .label{color:var(--accent-text)}
.numbers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.numbers div{display:grid;gap:8px;align-content:end;padding:22px;border-radius:var(--radius-lg);background:var(--text);color:var(--bg)}
.numbers b{font:800 34px/1 var(--mono);letter-spacing:-.05em;color:var(--bg)}
.numbers span{font-size:13px;color:var(--bg);opacity:.75}
.clients{margin-top:12px;padding:26px;border-radius:var(--radius-lg);background:var(--inverse-bg);color:var(--inverse-text);display:grid;gap:20px}
.clients .label{color:var(--inverse-muted)}
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--inverse-line);border:1px solid var(--inverse-line);border-radius:var(--radius-md);overflow:hidden}
.logo-grid div{display:grid;place-items:center;height:86px;padding:18px;background:var(--inverse-surface);font-weight:800;letter-spacing:-.02em;color:var(--inverse-text)}
.logo-grid img{max-height:34px;width:auto;object-fit:contain}

/* ---------- LIVE Q&A ---------- */
.qa-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.qa-step{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:26px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.qa-step>b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:900 14px/1 var(--mono)}
.qa-step div{display:grid;gap:8px}
.qa-step p{color:var(--text-muted);font-size:14px}
.gallery{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;margin-top:12px}
.shot{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.shot figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:5px;padding:13px 15px;border-radius:12px;background:var(--inverse-surface);color:var(--inverse-text)}
.shot figcaption span{font:800 9px/1 var(--mono);letter-spacing:.1em;color:var(--inverse-muted)}
.shot figcaption b{font-size:14px}
.gallery .shot:nth-child(4n+2),.gallery .shot:nth-child(4n+3){}
.gallery-2{grid-template-columns:1fr 1.6fr}

/* ---------- UTISCI ---------- */
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vcard{display:grid;gap:14px;padding:14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);transition:border-color .2s}
.vcard:hover{border-color:var(--border-strong)}
.vthumb{display:grid;place-items:center;aspect-ratio:16/9;max-width:100%;border-radius:var(--radius-md);background:var(--inverse-surface);color:var(--inverse-text);background-image:linear-gradient(var(--inverse-line) 1px,transparent 1px),linear-gradient(90deg,var(--inverse-line) 1px,transparent 1px);background-size:28px 28px}
.vthumb span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:18px}
.vcard div{display:grid;gap:4px;padding:0 4px 4px}
.vcard p{font-size:13px;color:var(--text-muted)}
.messages{display:grid;gap:16px;margin-top:40px}
.msg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.msg-grid img{width:100%;border-radius:var(--radius-md);border:1px solid var(--border)}

/* ---------- PONUDA ---------- */
.offer-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--radius-full);border:1px solid var(--danger);color:var(--danger);font:800 11px/1 var(--mono);letter-spacing:.08em}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.25}}
.offers{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.offer{display:grid;gap:18px;align-content:start;padding:34px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface)}
.offer.main{border:2px solid var(--accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 8%,transparent),var(--shadow)}
.offer .label{color:var(--text-muted)}
/* u svetloj sekciji Ink stranice glavna kartica je tamna (Ink neutrali), pa zuta ostaje ispuna i citljiv tekst */
.site[data-v^="ink"] .flip .offer.main{--bg:#0b0c0b;--surface:#151814;--surface-alt:#1c201a;--text:#f3f0e5;--text-muted:#9a9f94;--border:#30352d;--border-strong:#454c40;--accent-text:var(--accent);background:var(--surface);color:var(--text);border-color:var(--surface);box-shadow:0 30px 70px rgba(29,35,27,.22)}
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price b{font:800 clamp(40px,3.8vw,54px)/1 var(--mono);letter-spacing:-.06em;color:var(--text)}
.price span{font:700 13px/1 var(--mono);color:var(--text-muted)}
.offer p{color:var(--text-muted)}
.offer s{color:var(--text-muted)}
.offer.main .label{color:var(--accent-text)}
.incl{display:grid;gap:11px;margin-top:4px}
.incl li{position:relative;padding-left:30px;font-size:14px;line-height:1.5;color:var(--text-muted)}
.incl li b{color:var(--text);font-weight:700}
.incl li:before{content:"✓";position:absolute;left:0;top:1px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-alt);border:1px solid var(--border-strong);color:var(--text);font-size:11px;font-weight:900}
.offer.main .incl li:before{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.incl-lead{font-size:14px}
.incl-lead b{color:var(--text)}
.bonus{display:grid;gap:6px;padding:16px 18px;border-radius:var(--radius-md);background:var(--surface-alt);font-size:14px;color:var(--text-muted)}
.bonus b{font:800 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.offer .btn{justify-self:stretch;justify-content:space-between}
.guar{font:600 11px/1.4 var(--mono);color:var(--text-muted)}

/* ---------- FINAL + FOOTER (inverse) ---------- */
.final{position:relative;overflow:hidden;padding-block:130px;background:var(--inverse-bg);color:var(--inverse-text);--grid-line:rgba(241,238,229,.04)}
.final:after{content:"";position:absolute;width:760px;height:760px;right:-120px;top:50%;translate:0 -50%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%);pointer-events:none}
.final-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.final-copy{display:grid;justify-items:start;gap:22px}
.final h2{color:var(--inverse-text)}
.final h2 em{color:var(--accent)}
.final p{color:var(--inverse-muted);font-size:17px;max-width:600px}
.final .final-lead{color:var(--inverse-text);font-size:clamp(19px,1.6vw,22px);font-weight:700;letter-spacing:-.02em}
.final .small{font:600 12px/1.4 var(--mono)}
.final .btn span{transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.final .btn:hover span{translate:5px 0}
.core{justify-self:center;position:relative;width:clamp(220px,22vw,300px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;color:var(--accent-ink);background:radial-gradient(circle at 35% 28%,color-mix(in srgb,#fff 45%,var(--accent)) 0%,var(--accent) 48%,color-mix(in srgb,#000 22%,var(--accent)) 100%);box-shadow:0 0 0 16px color-mix(in srgb,var(--accent) 12%,transparent),0 0 90px color-mix(in srgb,var(--accent) 40%,transparent)}
.core:before,.core:after{content:"";position:absolute;inset:-46px;border:1px solid rgba(241,238,229,.14);border-radius:50%;animation:corePulse 3.2s ease-out infinite}
.core:after{inset:-92px;animation-delay:1.6s}
@keyframes corePulse{from{opacity:.9;scale:.9}to{opacity:0;scale:1.12}}
.core span{display:grid;gap:6px}
.core small{font:800 10px/1 var(--mono);letter-spacing:.14em;opacity:.7}
.core b{font:800 clamp(40px,4vw,56px)/1 var(--mono);letter-spacing:-.05em}
.core i{font-style:normal;font-size:13px;font-weight:700;opacity:.8}
.footer{background:var(--inverse-bg);color:var(--inverse-text);padding-block:70px 40px}
.footer .brandmark{border-color:var(--inverse-line);background:var(--inverse-surface)}
.footer .brandtype small{color:var(--inverse-muted)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot-grid>div{display:grid;gap:10px;align-content:start}
.foot-grid p{color:var(--inverse-muted);max-width:340px;font-size:14px}
.foot-grid b{font:800 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--inverse-muted);margin-bottom:6px}
.foot-grid a{font-size:14px;color:var(--inverse-text)}
.foot-grid a:hover{color:var(--accent-text)}
.foot-legal{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 40px;flex-wrap:wrap;margin-top:56px}
.foot-legal p{max-width:620px;color:var(--inverse-muted);font-size:12px;line-height:1.6}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-legal a{font-size:13px;color:var(--inverse-text)}
.foot-legal a:hover{color:var(--accent-text)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px;font:600 11px/1.4 var(--mono);color:var(--inverse-muted)}


/* ---------- ANIMACIJA KARTICA ---------- */
.facts span,.step,.timeline li,.vs,.level,.role,.person,.numbers div,.stats div,.qa-step,.shot,.vcard,.offer,.tool-grid div,.inline-cta{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .25s,background-color .25s,color .25s}
.facts span:hover,.step:hover,.timeline li:hover,.vs:hover,.level:hover,.role:hover,.person:hover,.numbers div:hover,.stats div:hover,.qa-step:hover,.shot:hover,.vcard:hover,.offer:hover,.tool-grid div:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step:hover,.vs:hover,.level:hover,.role:hover,.qa-step:hover,.vcard:hover,.offer:hover,.tool-grid div:hover,.timeline li:hover{border-color:var(--border-strong)}
/* invertovane kartice na hover pale akcent */
.facts span:hover,.numbers div:hover,.stats div:hover,.timeline .now:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.facts span:hover b,.numbers div:hover b,.numbers div:hover span,.stats div:hover span,.timeline .now:hover .year,.timeline .now:hover p{color:var(--accent-ink)}
.shot img{transition:scale .6s cubic-bezier(.2,.8,.2,1)}
.shot:hover img{scale:1.04}
/* ulazak: hero brojke jedna za drugom */
@keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.facts span{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.facts span:nth-child(2){animation-delay:.12s}.facts span:nth-child(3){animation-delay:.24s}
/* ulazak kartica pri skrolovanju (gde browser podržava) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .step,.timeline li,.vs,.level,.role,.person,.numbers div,.stats div,.qa-step,.shot,.vcard,.offer,.tool-grid div{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}

/* ---------- ULOGE: lista oglasa ---------- */
.jobs{display:grid}
.jobs li{display:grid;grid-template-columns:minmax(260px,.9fr) 1.1fr auto;gap:24px;align-items:center;padding:22px 24px;border-radius:var(--radius-md);transition:background-color .25s}
.jobs li+li{box-shadow:inset 0 1px 0 var(--border)}
.jobs li:after{content:"→";font:800 16px/1 var(--mono);color:var(--text-muted);transition:translate .3s cubic-bezier(.2,.8,.2,1),color .25s}
.jobs li:hover{background:var(--surface)}
.jobs li:hover:after{translate:5px 0;color:var(--accent-text)}
.jobs h3{font-size:clamp(20px,1.7vw,24px)}
.jobs p{color:var(--text-muted);font-size:15px}
.cta-under{display:grid;justify-items:start;gap:18px;max-width:680px;margin-top:40px}
.cta-under p{font-size:17px;line-height:1.6;color:var(--text-muted)}
.cta-under b{color:var(--text)}
.cta-under .btn span{transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.cta-under .btn:hover span{translate:5px 0}
/* ---------- TIM: nizak red brojeva ---------- */
.team{grid-template-columns:1fr 1fr}
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.numbers div{display:flex;align-items:baseline;gap:14px;padding:20px 24px;border-radius:var(--radius-lg);background:var(--text);color:var(--bg)}
/* ---------- LIVE Q&A: tok u 3 koraka + traka snimaka ---------- */
.qa-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;position:relative}
.qa-flow li{position:relative;display:grid;gap:10px;align-content:start}
.qa-flow li:not(:last-child):after{content:"→";position:absolute;right:-34px;top:8px;font:800 16px/1 var(--mono);color:var(--text-muted)}
.qa-flow b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:900 15px/1 var(--mono)}
.qa-flow p{color:var(--text-muted);font-size:15px;max-width:340px}
.strip-wrap{margin-top:56px;display:grid;gap:16px}
.strip-head{display:flex;justify-content:space-between;align-items:center}
.strip-nav{display:flex;gap:8px}
.strip-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--border-strong);background:transparent;color:var(--text);font:800 15px/1 var(--mono);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.strip-nav button:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(440px,82%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:thin}
.strip figure{scroll-snap-align:start;display:grid;gap:12px}
.strip img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border);transition:scale .6s cubic-bezier(.2,.8,.2,1)}
.strip figure:hover img{scale:1.02}
.strip figcaption{display:grid;gap:4px}
.strip figcaption span{font:800 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.strip figcaption b{font-size:16px}
/* ---------- UTISCI: citati ---------- */
.quotes{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-bottom:12px}
.quote{display:grid;gap:22px;align-content:space-between;padding:30px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.quote:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.quote blockquote{margin:0;font-size:18px;line-height:1.5;letter-spacing:-.01em;font-weight:600}
.quote blockquote:before{content:"„";display:block;font:800 54px/.6 var(--sans);color:var(--accent-text);margin-bottom:10px}
.site .quote.big{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.quote.big blockquote{font-size:clamp(20px,1.7vw,24px);font-weight:700}
.quote.big blockquote:before{color:var(--accent-ink)}
.quote figcaption{display:grid;gap:2px}
.quote figcaption span{font:600 11px/1.3 var(--mono);color:var(--text-muted)}
.quote.big figcaption span{color:var(--accent-ink);opacity:.75}
.vthumb{position:relative;display:grid;place-items:center;align-content:center;gap:16px}
.vthumb strong{font-size:clamp(24px,2.2vw,32px);font-weight:800;letter-spacing:-.04em;color:var(--inverse-text)}
.vthumb img{max-height:46px;max-width:60%;object-fit:contain}
.vthumb>span{width:48px!important;height:48px!important}
.vthumb small{position:absolute;left:14px;bottom:12px;font:800 9px/1 var(--mono);letter-spacing:.12em;color:var(--inverse-muted)}
.vcard:hover .vthumb>span{scale:1.1}
.vthumb>span{transition:scale .3s cubic-bezier(.2,.8,.2,1)}
.vthumb em{position:absolute;left:16px;top:14px;font-style:normal;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--inverse-text)}
.raw{margin-top:28px}
.raw summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text-muted);list-style:none}
.raw summary::-webkit-details-marker{display:none}
.raw summary:after{content:"↓";font-family:var(--mono)}
.raw[open] summary:after{content:"↑"}
.raw .msg-grid{margin-top:16px}

/* ---------- LOGOI KLIJENATA: traka koja se vrti (kao na Live Q&A stranici) ---------- */
.clients{grid-template-columns:200px 1fr;align-items:center;gap:0;padding:0;overflow:hidden}
.clients .label{padding:26px;height:100%;display:grid;place-items:center;text-align:center;box-shadow:inset -1px 0 0 var(--inverse-line);color:var(--accent)}
.logo-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;align-items:center;gap:72px;width:max-content;padding:26px 36px;animation:logoMarquee 36s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-track span{flex:none;display:grid;place-items:center;height:48px;min-width:110px;font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--inverse-text);opacity:.75;transition:opacity .25s,scale .25s}
.logo-track img{max-height:36px;max-width:150px;width:auto;object-fit:contain;filter:grayscale(1)}
.logo-track span:hover{opacity:1;scale:1.06}
.logo-track span:hover img{filter:none}
@keyframes logoMarquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none}}

/* ---------- ZAKLJUCAK "CEO PUT" ---------- */
.journey{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;margin-top:20px;padding:clamp(28px,4vw,48px);border-radius:var(--radius-xl);background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden;isolation:isolate}
.journey:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent,#000 70%)}
.journey-copy{display:grid;justify-items:start;gap:16px}
.journey-copy h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.035em;font-weight:800}
.journey-copy p{color:var(--text-muted);font-size:17px;line-height:1.6;max-width:420px}
.journey-copy b{color:var(--text)}
.journey-copy .btn span{transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.journey-copy .btn:hover span{translate:5px 0}
.journey-path{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.journey-path:before{content:"";position:absolute;left:8%;right:8%;top:21px;height:2px;background:linear-gradient(90deg,var(--border-strong),var(--accent-text))}
.journey-path li{position:relative;display:grid;gap:8px;justify-items:start;align-content:start}
.journey-path span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg);border:2px solid var(--border-strong);font:800 12px/1 var(--mono);color:var(--text-muted)}
.journey-path b{font-size:17px}
.journey-path small{font-size:13px;line-height:1.5;color:var(--text-muted)}
.journey-path .done span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 14%,transparent),0 0 40px color-mix(in srgb,var(--accent) 35%,transparent)}

/* ---------- HERO: brojke kao statusna traka prozora ---------- */
.window-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0 0;padding:4px}
.window-stats div{display:grid;gap:4px;padding:10px 12px}
.window-stats div+div{box-shadow:inset 1px 0 0 var(--border)}
.window-stats dt{font:800 clamp(22px,2vw,28px)/1 var(--mono);letter-spacing:-.04em;color:var(--accent-text)}
.window-stats dd{margin:0;font-size:12px;color:var(--text-muted)}

/* ---------- UTISCI: originalne Slack poruke kao dokaz ---------- */
.slack-wall{margin-block:0 40px;display:grid;gap:18px}
.slack-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.slack{display:grid;gap:0;padding:0 0 12px;border-radius:var(--radius-lg);background:#fff;color:#1d1c1d;box-shadow:0 1px 0 rgba(0,0,0,.04),var(--shadow);overflow:hidden;rotate:-.8deg;transition:rotate .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1)}
.slack:nth-child(2n){rotate:.7deg;margin-top:22px}
.slack:hover{rotate:0deg;transform:translateY(-6px)}
.slack-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#f8f8f8;box-shadow:inset 0 -1px 0 #e8e8e8;font:700 12px/1 var(--sans);color:#1d1c1d}
.slack-bar i{width:9px;height:9px;border-radius:50%;background:#2bac76}
.slack-bar time{margin-left:auto;font:600 11px/1 var(--mono);color:#868686}
.slack img{width:100%;height:auto;padding:6px 8px 0}
.slack figcaption{padding:4px 16px 0;font:600 11px/1.3 var(--mono);color:#868686}
@media (prefers-reduced-motion:reduce){.slack{rotate:0deg}}


/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step.result{grid-column:span 2;min-height:0}
  .steps{gap:12px}
  .steps li:after{display:none}
  .tool-grid{grid-template-columns:repeat(4,1fr)}
  .team{grid-template-columns:1fr 1fr}
  .numbers{grid-column:span 2}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  :root{--section-pad:64px}
  .hero-grid,.split,.versus,.offers,.statement-foot,.path,.build-close,.final-grid{grid-template-columns:1fr}
  .core{width:200px}
  .final:after{right:-300px;top:auto;bottom:-300px;translate:none}
  .versus{row-gap:20px}
  .versus:after{content:"↓"}
  .build-close>div{grid-column:1;padding-inline:0}
  .path-media{position:relative;top:0;order:-1}
  .levels,.roles,.qa-steps,.videos{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr;row-gap:26px}
  .timeline{grid-template-columns:1fr}
  .growth{height:auto}
  .growth-line{display:none}
  .growth-steps{display:grid;gap:12px}
  .growth-steps li{position:relative;left:auto;top:auto;padding:22px 22px 22px 46px;border-radius:var(--radius-lg);background:var(--surface)}
  .growth-steps .dot{left:24px;top:34px}
  .growth-steps div{position:static;width:auto;text-align:left;justify-items:start}
  .growth-note{position:static;width:auto;margin-top:24px}
  .gallery,.gallery-2{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr}
  .journey-path{grid-template-columns:1fr;gap:18px}
  .journey-path:before{left:21px;right:auto;top:8%;bottom:8%;width:2px;height:auto;background:linear-gradient(180deg,var(--border-strong),var(--accent-text))}
  .journey-path li{grid-template-columns:44px 1fr;column-gap:14px}
  .journey-path li span{grid-row:span 2}
  .clients{grid-template-columns:1fr}
  .clients .label{box-shadow:inset 0 -1px 0 var(--inverse-line);padding:14px}
  .jobs li{grid-template-columns:1fr auto;gap:8px 16px}
  .jobs li p{grid-column:1}
  .jobs li:after{grid-row:1;grid-column:2}
  .numbers{grid-template-columns:1fr}
  .qa-flow{grid-template-columns:1fr;gap:28px}
  .qa-flow li:not(:last-child):after{content:"↓";right:auto;left:12px;top:auto;bottom:-22px}
  .quotes{grid-template-columns:1fr}
  .slack-grid{grid-template-columns:1fr}
  .slack:nth-child(2n){margin-top:0}
  .stairs{grid-template-columns:1fr;gap:8px;padding-top:0;align-items:start}
  .stairs:after{display:none}
  .stair{min-height:0;width:calc(52% + var(--i) * 9.6%);border-bottom:1px solid var(--border);border-radius:var(--radius-lg);padding:18px}
  .stair.top{border-color:var(--accent)}
  .pin{position:static;margin-bottom:10px}
  .room{min-height:480px}
  .room:before{background:linear-gradient(0deg,rgba(7,8,7,.95) 0%,rgba(7,8,7,.75) 55%,rgba(7,8,7,.2) 100%)}
  .stair.top .pin{color:var(--accent-ink)}
  .stair.top .pin:before{background:var(--accent-ink);box-shadow:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media (max-width:560px){
  .container{width:calc(100% - 32px)}
  .steps,.levels,.roles,.qa-steps,.videos,.msg-grid,.pair,.team,.tool-grid{grid-template-columns:1fr}
  .tool-grid{grid-template-columns:1fr 1fr}
  .step.result,.numbers{grid-column:auto}
  .step{min-height:220px}
  .logo-grid{grid-template-columns:1fr 1fr}
  .vs,.offer{padding:24px}
  .nav-cta .long{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- TELLA VIDEO (hero + utisci) ---------- */
.video iframe,.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vframe{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:var(--radius-md);overflow:hidden;background:var(--inverse-surface)}
.vcard{cursor:default}
/* ---------- MOBILNI MENI ---------- */
.nav-toggle{display:none;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--text);font:800 12px/1 var(--sans);cursor:pointer}
.nav-actions{display:flex;align-items:center;gap:8px}
@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav.open .nav-links{display:grid;position:absolute;left:16px;right:16px;top:calc(100% + 8px);gap:2px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
  .nav.open .nav-links details[open] .menu{position:static;width:auto;box-shadow:none;border:0;padding:4px 0 8px}
  .nav-inner{position:relative}
}

/* ---------- STARE KLASE (šabloni iz pricing/templates i starije stranice) ---------- */
.site .button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:10px;border:1px solid transparent;font-size:13px;font-weight:900;letter-spacing:.01em;cursor:pointer;transition:transform .2s,background .2s,border-color .2s;white-space:nowrap}
.site .button:hover{transform:translateY(-1px)}
.site .button-solid{background:var(--accent);color:var(--accent-ink)}
.site .button-outline{border-color:var(--border-strong);color:var(--text)}
.site .section-kicker,.site .eyebrow{display:none}
/* ---------- FAQ (harmonika) ---------- */
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-copy{display:grid;gap:18px}
.faq-list{display:grid;gap:8px}
.faq{border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);transition:border-color .25s}
.faq.open{border-color:var(--border-strong)}
.faq>button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:16px;color:var(--text)}
.faq>button:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:var(--radius-md)}
.faq>button span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);font:800 14px/1 var(--mono);transition:rotate .3s,background-color .25s,color .25s}
.faq.open>button span{rotate:45deg;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.faq-answer{display:none;padding:0 22px 20px;color:var(--text-muted);font-size:15px;line-height:1.65;max-width:720px}
.faq.open .faq-answer{display:block}
.faq-answer a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.faq-layout{grid-template-columns:1fr;gap:28px}}

/* ---------- PONUDA (.offer): zajednicka komponenta za pocetnu i Pakete ----------
   Kartice dolaze iz pricing/templates/ponuda-kartice.html (build_pricing.py). */
/* Ponuda: obe kartice na svetloj podlozi, lista sa objasnjenjima */
.offer{padding:36px 34px;gap:14px}
.offer h3{margin-top:2px;font-size:clamp(21px,1.7vw,24px)}
.offer .label{font:800 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.offer .label{justify-self:start;padding:8px 12px;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-ink)}
.offer-sub{font-size:15px;line-height:1.55;color:var(--text-muted)}
.price{gap:6px;align-items:baseline;margin-top:6px}
.price b,.price i{font:800 clamp(46px,4.2vw,62px)/1 var(--mono);font-style:normal;letter-spacing:-.05em;color:var(--text)}
.price em{margin-left:6px;font:700 15px/1 var(--mono);font-style:normal;color:var(--text-muted)}
.offer .unit{margin-top:-4px;font-size:15px;line-height:1.5;color:var(--text-muted)}
.offer .note{font-size:14px;line-height:1.5;color:var(--text-muted)}
.offer .btn{margin-top:6px}
.incl{gap:18px;margin-top:10px}
.incl li{padding-left:34px;font-size:15px;line-height:1.5}
.incl li b{color:var(--text);font-weight:700;font-size:16px}
.incl li:before{width:22px;height:22px;top:0}
.offer.main .incl li:before{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.offer .bonus{margin-top:4px}
@media(max-width:760px){
  .offer{padding:28px 22px}
}

/* Ponuda: kartice moraju da imaju ram, ne da lebde */
.offers{gap:20px}
.offer{border:1px solid var(--border-strong);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.offer:hover{box-shadow:var(--shadow-elevated)}

/* Objasnjenja iza "i" oznake */
.incl{gap:14px}
.incl li{display:block}
.incl li b{margin-right:7px}
.tip{vertical-align:-3px}
.tip{position:relative;flex:none;display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:1px solid var(--border-strong);border-radius:50%;background:transparent;color:var(--text-muted);font:800 10px/1 var(--mono);cursor:help;transition:color .2s,border-color .2s}
.tip:hover,.tip:focus-visible{color:var(--text);border-color:var(--text)}
.tip em{position:absolute;left:50%;bottom:calc(100% + 11px);translate:-50% 0;width:min(290px,70vw);padding:13px 15px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:400 13px/1.55 var(--sans);font-style:normal;text-align:left;box-shadow:var(--shadow-elevated);opacity:0;visibility:hidden;transition:opacity .18s;z-index:6}
.tip:hover em,.tip:focus-visible em,.tip.open em{opacity:1;visibility:visible}
.offer{overflow:visible}
@media (prefers-reduced-motion:reduce){.tip em{transition:none}}
.incl-lead{margin-top:8px;font-size:15px;color:var(--text-muted)}
.incl-lead b{color:var(--text)}

/* Mobilno: oblacic sa objasnjenjem ostaje unutar kartice */
@media(max-width:760px){
  .incl li{position:relative}
  .tip{position:static}
  .tip em{left:0;right:0;width:auto;max-width:none;translate:none;bottom:calc(100% + 8px)}
}

/* naslov tabele "Cene" na Paketima (pk:sum) */
.pk-heading{margin-bottom:18px}

/* ---------- FOTO CTA: sekcija preko cele sirine sa fotografijom (Zajednica, Kako funkcionise) ---------- */
.photo-cta{position:relative;min-height:720px;display:flex;align-items:center;overflow:hidden;background:var(--inverse-bg);color:var(--inverse-text)}
.photo-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center}
.photo-cta:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,color-mix(in srgb,var(--inverse-bg) 96%,transparent) 0%,color-mix(in srgb,var(--inverse-bg) 80%,transparent) 42%,color-mix(in srgb,var(--inverse-bg) 22%,transparent) 78%,color-mix(in srgb,var(--inverse-bg) 35%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--inverse-bg) 70%,transparent),transparent 48%)}
.photo-cta:after{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(var(--inverse-line) 1px,transparent 1px),linear-gradient(90deg,var(--inverse-line) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,black,transparent 70%);opacity:.6}
.photo-cta .container{position:relative;z-index:2}
.photo-cta-copy{display:grid;justify-items:start;gap:24px;max-width:820px;padding-block:96px}
.photo-cta h2{color:var(--inverse-text);font-size:clamp(40px,5vw,76px)}
.photo-cta h2 em{color:var(--accent)}
.photo-cta p{max-width:680px;color:var(--inverse-muted);font-size:18px;line-height:1.7}
.photo-cta .btn span{transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.photo-cta .btn:hover span{translate:5px 0}
.photo-cta-proof{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.photo-cta-proof li{padding:9px 12px;border:1px solid var(--inverse-line);border-radius:var(--radius-full);background:color-mix(in srgb,var(--inverse-bg) 52%,transparent);backdrop-filter:blur(8px);color:var(--inverse-text);font:800 10px/1 var(--mono)}
@media (max-width:700px){.photo-cta{min-height:620px}.photo-cta p{font-size:16px}}
/* varijanta: tekst dole levo, bez dugmeta */
.photo-cta-bottom{min-height:650px;align-items:flex-end}
.photo-cta-bottom>img{object-position:center}
.photo-cta-bottom .photo-cta-copy{max-width:640px;padding-block:96px 80px}
.photo-cta-bottom h2{font-size:clamp(36px,4.2vw,64px)}

/* ---------- TAMNA KARTICA NA SVETLOJ TRACI (.card-ink) ----------
   Kartica ostaje tamna i kad stoji na svetloj (flip) traci: unutar nje vaze inverse tokeni,
   pa tekst, linije, dugmad i kvacice ostaju citljivi. Odluka tima 15.10.2026 (Video lekcije, Partneri, Zajednica). */
.site .card-ink{--text:var(--inverse-text);--text-muted:color-mix(in srgb,var(--inverse-text) 62%,var(--inverse-bg));--border:var(--inverse-line);--border-strong:color-mix(in srgb,var(--inverse-text) 24%,var(--inverse-bg));--surface:var(--inverse-surface);--surface-alt:var(--inverse-surface);--bg:var(--inverse-bg);--accent-text:var(--accent);background:var(--inverse-bg);border-color:var(--inverse-line);color:var(--inverse-text)}
.site .card-ink:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--inverse-line))}

/* ---------- FUTER NA TELEFONU: kraci, i nista ne visi ispod njega ---------- */
.site{overflow:clip}
html{background:var(--inverse-bg)}
@media (max-width:700px){
  .footer{padding-block:48px 28px}
  .foot-grid{gap:28px 20px}
  .foot-grid>div{gap:8px}
  .foot-grid p{font-size:13px}
  .foot-legal{margin-top:32px;gap:12px}
  .foot-legal nav{gap:6px 16px}
  .foot-bottom{margin-top:16px}
}