/* ==========================================================================
   Codema 2026 — glavni stilovi
   ========================================================================== */

:root{
  --ink:#0D1117;
  --ink-2:#262C36;
  --muted:#3B4250;
  --soft:#6B7280;
  --bg:#F5F4EF;
  --sand:#E9E6DB;
  --line:#E2E0D8;
  --white:#FFFFFF;
  --lime:#FFD84D;
  --lime-2:#F5C933;
  --lime-dk:#B88A00;
  --lime-rgb:255,216,77;
  --lime-soft:#FFF6D6;
  --dark-line:#2A303A;
  --dark-muted:#B7BCC5;
  --radius:20px;
  --wrap:1280px;
  --pad:32px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-body:'Onest',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---------- Osnova ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin:0}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--muted)}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.section--dark :focus-visible,.numbers :focus-visible{outline-color:var(--lime)}
::selection{background:var(--lime);color:var(--ink)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px}
.skip-link:focus{top:12px;color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative}
.wrap--mid{max-width:1112px}
.muted{color:var(--muted)}
.small{font-size:14px}
.strong{font-weight:600}
.lime{color:var(--lime)}
.link{font-weight:600;text-decoration:underline;text-decoration-color:var(--lime-dk);text-underline-offset:3px}

.h1{font-size:clamp(38px,5.2vw,68px)}
.h1--article{font-size:clamp(32px,4.2vw,56px)}
.h2{font-size:clamp(30px,3.6vw,48px)}
.h3{font-size:clamp(20px,1.7vw,24px)}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow .dot,.pill-label .dot{width:8px;height:8px;border-radius:2px;background:var(--lime-dk);flex-shrink:0}
.eyebrow--lime{color:var(--lime)}
.eyebrow--lime .dot{background:var(--lime)}
.pill-label{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:4px 14px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:13px;font-weight:600}
.pill-label .dot{border-radius:50%}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:2px 12px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink)}
.chip--lime{background:var(--lime);border-color:var(--lime)}
.chip--ghost{background:transparent;border-color:#3A414D;color:#fff;font-weight:500}
.meta{font-size:13px;color:var(--muted)}

/* ---------- Dugmad ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .3s var(--ease);will-change:transform}
.btn--sm{min-height:46px;padding:0 20px}
.btn--block{width:100%}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-2);color:#fff}
.btn--line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--line:hover{background:var(--ink);color:#fff}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:var(--lime-2);color:var(--ink)}
.btn .icon{transition:transform .3s var(--ease)}
.btn:hover .icon--arrow{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Gornja traka i zaglavlje ---------- */
.topbar{background:var(--ink);color:#D9DCE1;font-size:13px}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topbar a{color:#D9DCE1}
.topbar a:hover{color:var(--lime)}
.topbar__links{display:flex;gap:20px;flex-wrap:wrap}

.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(245,244,239,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.menu-open .site-header::before{background:var(--bg)}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(13,17,23,.4)}
.site-header__in{display:flex;align-items:center;gap:24px;height:84px}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}

.logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;color:var(--ink)}
.logo span{font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:-.03em;line-height:1}
.logo b{color:var(--lime-dk)}
.logo--light{color:#fff}
.logo--light b{color:var(--lime)}
.logo:hover{color:inherit}
.custom-logo-link img{max-height:40px;width:auto}

.nav{margin-left:24px}
.nav .menu{list-style:none;display:flex;align-items:center;gap:2px}
.nav .menu>li{position:relative}
.nav .menu a{display:block;font-size:15px;font-weight:500;padding:10px 12px;border-radius:999px;transition:background .2s}
.nav .menu a:hover,.nav .menu .current-menu-item>a,.nav .menu .current-menu-ancestor>a{background:#ECEAE2;color:var(--ink)}
.nav .menu .menu-item-has-children>a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.nav .sub-menu{list-style:none;position:absolute;left:0;top:100%;min-width:280px;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -24px rgba(13,17,23,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .25s var(--ease),visibility .2s}
.nav .menu>li:hover>.sub-menu,.nav .menu>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav .sub-menu a{border-radius:10px;padding:10px 12px}
.nav__cta-mobile{display:none}
.site-header__end{margin-left:auto;display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;align-items:center;justify-content:center;cursor:pointer}
.menu-btn__close{display:none}
.menu-open .menu-btn__open{display:none}
.menu-open .menu-btn__close{display:inline-flex}

@media (max-width:1100px){
  .menu-btn{display:inline-flex}
  .nav{position:fixed;inset:124px 0 0;margin:0;background:var(--bg);padding:24px var(--pad) 40px;overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility .25s;z-index:49;display:flex;flex-direction:column;gap:24px}
  .nav{top:var(--nav-top,124px)}
  .menu-open .nav{opacity:1;visibility:visible;transform:none}
  .nav{isolation:isolate;gap:18px;padding:18px var(--pad) 28px}
  .nav .menu{flex-direction:column;align-items:stretch;gap:8px}
  .nav .menu>li>a{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-display);font-size:18px;font-weight:600;letter-spacing:-.01em;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .nav .menu>li:not(.menu-item-has-children)>a::after{content:"";width:8px;height:8px;margin-right:4px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.35;transition:opacity .2s,transform .2s}
  .nav .menu>li>a:hover::after{opacity:.8}
  .nav .menu a:hover,.nav .menu .current-menu-item>a,.nav .menu .current-menu-ancestor>a{background:var(--white);border-color:var(--ink)}
  .nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:6px 0 4px 14px;min-width:0;margin-left:12px;border-left:2px solid var(--lime);border-radius:0}
  .nav .sub-menu a{font-family:var(--f-body);font-size:15px;font-weight:500;padding:9px 12px;border-radius:10px}
  .nav .sub-menu a:hover{background:rgba(var(--lime-rgb),.25)}
  .nav .menu .menu-item-has-children>a::after{display:inline-block;width:8px;height:8px;margin:0 6px 4px 0;border-width:0 2px 2px 0;opacity:.6;transition:transform .25s}
  .nav .menu .menu-item-has-children.is-open>a::after{transform:translateY(3px) rotate(-135deg)}
  .menu-open .nav .menu>li{animation:nav-in .45s var(--ease) both}
  .menu-open .nav .menu>li:nth-child(2){animation-delay:.04s}.menu-open .nav .menu>li:nth-child(3){animation-delay:.08s}.menu-open .nav .menu>li:nth-child(4){animation-delay:.12s}.menu-open .nav .menu>li:nth-child(5){animation-delay:.16s}.menu-open .nav .menu>li:nth-child(6){animation-delay:.2s}.menu-open .nav .menu>li:nth-child(7){animation-delay:.24s}
  .menu-open .nav__cta-mobile,.menu-open .nav__meta{animation:nav-in .45s .28s var(--ease) both}
  .nav__meta{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
  .nav__meta a{color:var(--ink);font-weight:600}
  .nav__bg{display:block}
  .nav .menu .menu-item-has-children>.sub-menu{display:none}
  .nav .menu .menu-item-has-children.is-open>.sub-menu{display:block}
  .nav__cta-mobile{display:inline-flex;align-self:stretch;justify-content:center}
  .menu-open{overflow:hidden}
}
@media (max-width:640px){.site-header__cta{display:none}}
@media (min-width:1101px){.nav__meta,.nav__bg{display:none!important}}
@keyframes nav-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.nav__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.nav__bg span{position:absolute;font-family:var(--f-mono);font-weight:600;line-height:1;color:var(--ink);opacity:.06;animation:nav-float 9s ease-in-out infinite}
.nav__bg span:nth-child(1){font-size:120px;right:-20px;top:6%}
.nav__bg span:nth-child(2){font-size:80px;left:-10px;top:48%;animation-delay:-3s;animation-duration:11s}
.nav__bg span:nth-child(3){font-size:96px;right:12%;bottom:6%;animation-delay:-6s}
.nav__bg span:nth-child(4){font-size:56px;left:30%;top:28%;animation-delay:-2s;animation-duration:13s}
.nav__bg i{position:absolute;border-radius:50%;filter:blur(40px);background:rgba(var(--lime-rgb),.45);animation:nav-blob 14s ease-in-out infinite}
.nav__bg i:nth-of-type(1){width:220px;height:220px;right:-60px;top:-40px}
.nav__bg i:nth-of-type(2){width:180px;height:180px;left:-70px;bottom:10%;animation-delay:-7s;background:rgba(var(--lime-rgb),.3)}
@keyframes nav-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}
@keyframes nav-blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.15)}}
@media (max-width:600px){.admin-bar .site-header{top:0}}
@media (max-width:640px){.topbar__links{display:none}.topbar__in{justify-content:center}
  .shapes--services,.shapes--dark,.shapes--portfolio,.shapes--process,.shapes--prices,.shapes--blog,.shapes--cta{display:none}}

/* ---------- Sekcije ---------- */
.site-main{display:block}
.section{position:relative;padding:112px 0;overflow:hidden}
.section--tight-t{padding-top:0}
.section--tight-b{padding-bottom:0}
.section--white{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--dark{background:var(--ink);color:#fff}
.section--dark .lead,.section--dark p{color:var(--dark-muted)}
.section--dark .h2,.section--dark .h3{color:#fff}
.section > .wrap{z-index:1}
.section-head{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:48px}
.section-head.split{max-width:none}
.split{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.split > p{max-width:380px}
@media (max-width:820px){.split{flex-direction:column;align-items:flex-start}}

.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.grid--2,.grid--3{grid-template-columns:1fr}}
@media (max-width:640px){
  :root{--pad:16px}
  .section{padding:72px 0}
  .section--tight-t{padding-top:0}
  .grid--4{grid-template-columns:1fr}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:72px 0 104px;overflow:hidden}
.hero__code{position:absolute;inset:0;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);}
.section--code{position:relative;overflow:hidden}
.section--code>.wrap{position:relative;z-index:1}
.section__code{position:absolute;inset:0;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:28px;position:relative;z-index:2}
.hero__text .lead{color:var(--muted);max-width:560px}
.hl-mark{background:linear-gradient(var(--lime),var(--lime)) 0 88%/0 38% no-repeat;padding:0 4px;animation:mark .9s .7s var(--ease) forwards}
@keyframes mark{to{background-size:100% 38%}}
.hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;padding-top:24px;border-top:1px solid var(--line)}
.hero__stats strong{display:block;font-family:var(--f-display);font-size:26px;font-weight:700;line-height:1.2}
.hero__stats span{font-size:14px;color:var(--muted)}
@media (max-width:1100px){.hero__grid{grid-template-columns:1fr}}
@media (max-width:640px){.hero{padding:40px 0 64px}.hero__stats{grid-template-columns:1fr 1fr}.hero__stats>div:last-child{display:none}}

/* Ilustracija: editor + browser */
.hero__art{position:relative;height:560px;border-radius:32px;background:var(--ink);z-index:2}
.hero__art::before{content:"";position:absolute;inset:0;border-radius:32px;background-image:radial-gradient(rgba(var(--lime-rgb),.16) 1px,transparent 1px);background-size:22px 22px}
.editor{position:absolute;left:7%;top:44px;width:62%;border-radius:16px;background:#161B22;border:1px solid var(--dark-line);padding:16px 18px 18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.editor__bar,.browser__bar{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.editor__bar i,.browser__bar i{width:10px;height:10px;border-radius:50%;background:#3A414D}
.editor__bar span{margin-left:8px;font-family:var(--f-mono);font-size:11px;color:#8B93A1}
.editor__code{margin:0;font-family:var(--f-mono);font-size:13px;line-height:1.7;color:var(--lime);white-space:pre-wrap;min-height:204px}
.caret{display:inline-block;width:8px;height:16px;background:var(--lime);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.browser{position:absolute;right:6%;bottom:56px;width:58%;border-radius:16px;background:var(--white);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.browser__bar{margin:0;height:36px;padding:0 12px;background:#F1EFE8;border-bottom:1px solid var(--line)}
.browser__bar span{margin-left:8px;flex:1;height:22px;border-radius:999px;background:#fff;font-size:10px;color:var(--muted);display:flex;align-items:center;padding:0 10px}
.browser__body{padding:12px;display:flex;flex-direction:column;gap:10px;min-height:214px}
.build{opacity:0;transform:translateY(10px) scale(.97);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.build.is-on{opacity:1;transform:none}
.build--1{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 10px;border-radius:8px;background:var(--bg);font-size:13px}
.build--1 b{font-family:var(--f-display)}
.build__nav{display:flex;gap:6px}
.build__nav i{width:26px;height:6px;border-radius:3px;background:var(--line)}
.build--2{padding:14px;border-radius:10px;background:var(--ink);color:#fff;display:flex;flex-direction:column;gap:8px}
.build--2>span{font-family:var(--f-display);font-size:18px;font-weight:700;line-height:1.1}
.build--3{align-self:flex-start;font-style:normal;height:28px;padding:0 12px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:11px;font-weight:700;display:inline-flex;align-items:center}
.build__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.build__grid i{aspect-ratio:1/1;border-radius:8px;background:#E8E3D6}
.build__grid i:nth-child(2){background:rgba(var(--lime-rgb),.4)}.build__grid i:nth-child(3){background:#E5DCD3}
.build__ok{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.build__ok .icon{background:var(--lime);border-radius:50%;padding:3px;width:20px;height:20px}

.float{position:absolute;z-index:3;background:var(--white);border-radius:16px;padding:14px 16px;box-shadow:0 20px 40px -16px rgba(13,17,23,.35)}
.float--order{left:-28px;bottom:150px;display:flex;align-items:center;gap:12px;width:236px}
.float--order strong{display:block;font-size:13px}
.float--order small{font-size:12px;color:var(--muted)}
.float__ico{width:40px;height:40px;border-radius:12px;background:var(--lime);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.float--chart{right:-24px;top:40px;width:190px}
.float--chart small{font-size:12px;color:var(--muted)}
.float--chart strong{display:block;font-family:var(--f-display);font-size:19px;margin-bottom:8px}
.bars{display:flex;align-items:flex-end;gap:5px;height:44px}
.bars i{flex:1;border-radius:4px;background:var(--line);transform-origin:bottom;animation:grow 1.1s var(--ease) both}
.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:45%;animation-delay:.1s}.bars i:nth-child(3){height:55%;background:rgba(var(--lime-rgb),.55);animation-delay:.2s}.bars i:nth-child(4){height:75%;background:var(--lime-2);animation-delay:.3s}.bars i:nth-child(5){height:100%;background:var(--ink);animation-delay:.4s}
@keyframes grow{from{transform:scaleY(.12)}}
.float--pill{right:24px;bottom:18px;display:flex;align-items:center;gap:8px;padding:0 16px;height:42px;border-radius:999px;background:var(--lime);font-size:13px;font-weight:700}
.bob-a{animation:bob 6s ease-in-out infinite}
.bob-b{animation:bob 7s 1.2s ease-in-out infinite}
.bob-c{animation:bob 5.5s .6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:640px){
  .hero__art{height:440px}
  .editor{left:5%;width:90%;top:24px}
  .browser{right:5%;width:78%;bottom:24px}
  .float{display:none}
}

/* Ulazne animacije */
.in-1,.in-2,.in-3,.in-4,.in-5{animation:rise .8s var(--ease) both}
.in-2{animation-delay:.12s}.in-3{animation-delay:.24s}.in-4{animation-delay:.36s}.in-5{animation-delay:.2s;animation-duration:1s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}

/* ---------- Traka alata ---------- */
.tools{display:flex;align-items:center;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden}
.tools__label{flex-shrink:0;padding:0 28px 0 max(var(--pad),calc((100% - var(--wrap))/2 + var(--pad)));font-size:14px;font-weight:600;color:var(--muted);background:var(--white);position:relative;z-index:1}
.marquee{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;font-family:var(--f-display);font-size:20px;font-weight:600}
.marquee__group span{padding:0 26px;white-space:nowrap}
.marquee__group i{font-style:normal;color:var(--lime-dk)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:640px){.tools__label{display:none}}

/* ---------- Kartice usluga (3D nagib) ---------- */
.svc{position:relative;display:flex;flex-direction:column;gap:16px;padding:28px;min-height:300px;color:var(--ink);overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .35s,border-color .2s}
.svc:hover{color:var(--ink);border-color:var(--ink);box-shadow:0 30px 50px -30px rgba(13,17,23,.45)}
.svc__top{display:flex;justify-content:space-between;align-items:center}
.svc__num{font-size:13px;font-weight:700;color:var(--muted)}
.svc__title{font-family:var(--f-display);font-size:23px;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.svc__text{font-size:15px;color:var(--muted);flex:1}
.svc__more{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600}
.svc__arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s}
.svc:hover .svc__arrow{background:var(--lime);border-color:var(--lime)}
.tilt__glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(var(--lime-rgb),.42),transparent 60%)}
.tilt.is-tilting .tilt__glare{opacity:1}
.svc>*:not(.tilt__glare){position:relative}

/* Ikonice koje oživljavaju */
.svc .icon path,.svc .icon circle,.svc .icon rect{stroke-dasharray:120;stroke-dashoffset:0}
.svc:hover .icon path,.svc:hover .icon circle,.svc:hover .icon rect{animation:draw 1s ease both}
@keyframes draw{from{stroke-dashoffset:120}}
.svc:hover .icon--cart{animation:shake .5s ease 1s 2;transform-origin:50% 20%}
@keyframes shake{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.svc:hover .icon--seo .lens{animation:scan 1.4s ease-in-out .6s infinite alternate}
@keyframes scan{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
.svc:hover .icon--rocket{animation:launch .9s var(--ease) .6s}
@keyframes launch{50%{transform:translate(4px,-4px)}}

/* ---------- Zašto Codema + pre/posle ---------- */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:start}
.why__list{display:flex;flex-direction:column;gap:14px}
.why__item{border:1px solid var(--dark-line);border-radius:var(--radius);padding:24px 26px;display:flex;flex-direction:column;gap:10px;background:rgba(13,17,23,.6)}
.why__n{font-size:13px;font-weight:700;color:var(--lime)}
.section--dark .why__item p{font-size:15px}
.why__fix{color:#fff !important;padding-top:12px;border-top:1px solid var(--dark-line)}
.why__fix strong{color:var(--lime)}
@media (max-width:1000px){.why{grid-template-columns:1fr}}

.ba{position:sticky;top:120px;height:460px;border-radius:24px;overflow:hidden;border:1px solid var(--dark-line);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ba__new{position:absolute;inset:0;background:#161B22;color:#fff;padding:32px;display:flex;flex-direction:column;gap:16px;align-items:flex-end;text-align:right}
.ba__row{display:flex;justify-content:space-between;align-items:center;width:100%}
.ba__row b{font-family:var(--f-display);font-size:20px}
.ba__claim{font-family:var(--f-display);font-size:34px;font-weight:700;line-height:1.05;max-width:320px;color:#fff !important}
.ba__speed{margin-top:auto}
.ba__speed small{display:block;font-size:12px;color:var(--dark-muted)}
.ba__speed strong{font-family:var(--f-display);font-size:52px;line-height:1;color:var(--lime)}
.ba__old{position:absolute;top:0;bottom:0;left:0;width:50%;overflow:hidden;border-right:2px solid #fff}
.ba__old-in{width:var(--ba-w,600px);height:100%;background:#D9D6CE;padding:32px;display:flex;flex-direction:column;gap:10px;font-family:'Times New Roman',Times,serif;color:#3B4250}
.ba__menu{display:flex;gap:6px;flex-wrap:wrap}
.ba__menu span{background:#B8B4A8;padding:2px 6px;font-size:12px}
.ba__old-title{font-size:26px;font-weight:700;color:#3B4250 !important}
.ba__old-text{font-size:13px;max-width:260px;color:#3B4250 !important}
.ba__old .ba__speed strong{color:#3B4250;font-family:inherit}
.ba__old .ba__speed small{color:#3B4250}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:0;pointer-events:none}
.ba__handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-weight:700;transition:transform .2s}
.ba:hover .ba__handle span{transform:translate(-50%,-50%) scale(1.08)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba__range:focus-visible ~ .ba__handle span,.ba:focus-within .ba__handle span{outline:3px solid var(--lime);outline-offset:2px}
@media (max-width:1000px){.ba{position:relative;top:0;height:380px}}

/* ---------- Klijenti ---------- */
.logos{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.logo-slot{height:104px;border-radius:16px;border:1px solid var(--line);background:var(--white);display:flex;align-items:center;justify-content:center;padding:18px;transition:border-color .2s,transform .3s var(--ease)}
.logo-slot img{max-height:56px;width:auto;object-fit:contain;transition:transform .3s var(--ease)}
a.logo-slot:hover,.logo-slot:hover{border-color:var(--ink);transform:translateY(-3px)}
.logo-slot:hover img{transform:scale(1.04)}
.logo-slot__name{font-family:var(--f-display);font-size:clamp(14px,1.4vw,18px);overflow-wrap:anywhere;font-weight:700;color:var(--ink);opacity:.75;text-align:center;line-height:1.1}
@media (max-width:1100px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-slot{height:88px}}

/* ---------- Portfolio ---------- */
.proj__link{display:flex;flex-direction:column;gap:18px;color:var(--ink)}
.proj__link:hover{color:var(--ink)}
.proj__shot{position:relative;display:block;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:var(--white);border:1px solid var(--line)}
.proj__scroll{display:block;transition:transform 6s cubic-bezier(.45,.05,.55,.95)}
.proj__scroll img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top}
.proj__link:hover .proj__scroll{transform:translateY(var(--scroll-to,0))}
.proj__info{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.proj__txt{display:flex;flex-direction:column;gap:4px}
.proj__title{font-family:var(--f-display);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.proj__desc{font-size:15px;color:var(--muted)}
.proj__tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.proj__url{font-size:14px;font-weight:600;color:var(--muted)}
.proj.is-hidden{display:none}
.proj-empty{aspect-ratio:16/10;border-radius:22px;border:2px dashed #CFCBBE;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}
.proj-empty__t{font-family:var(--f-display);font-size:26px;font-weight:600}
@media (hover:hover) and (pointer:fine){.fx-on [data-cursor-target]{cursor:none}}
.cursor-label{position:fixed;left:0;top:0;z-index:90;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--lime);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;pointer-events:none;opacity:0;transform:translate3d(var(--cx,-200px),var(--cy,-200px),0) scale(.4);transition:opacity .25s,transform .25s var(--ease);box-shadow:0 10px 30px rgba(13,17,23,.25)}
.cursor-label.is-on{opacity:1;transform:translate3d(var(--cx),var(--cy),0) scale(1)}
@media (hover:none){.cursor-label{display:none}}

/* ---------- Proces (linija koja se crta) ---------- */
.process{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.process__line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.process__line span{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--ink);transition:width .15s linear}
.process__step{position:relative;padding:28px 24px 0 0;display:flex;flex-direction:column;gap:12px}
.process__n{font-family:var(--f-display);font-size:56px;font-weight:700;line-height:1;color:#C9C5B8;transition:color .4s}
.process__step.is-on .process__n{color:var(--lime-dk)}
.process__step::before{content:"";position:absolute;left:0;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--white);border:2px solid var(--line);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.process__step.is-on::before{background:var(--lime);border-color:var(--ink);transform:scale(1.15)}
@media (max-width:1000px){
  .process{grid-template-columns:1fr;padding-left:36px}
  .process__line{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .process__line span{width:100%;height:calc(var(--p,0) * 100%)}
  .process__step{padding:0 0 40px}
  .process__step::before{left:-35px;top:6px}
}

/* ---------- Paralaks fotografija sa brojevima ---------- */
.para{position:relative;overflow:hidden}
.para__img{position:absolute;left:0;right:0;top:-15%;width:100%;height:130%;object-fit:cover;will-change:transform}
.numbers{background:var(--ink);color:#fff}
.numbers__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,17,23,.93),rgba(13,17,23,.78) 45%,rgba(13,17,23,.45))}
.numbers__in{padding-top:140px;padding-bottom:140px;z-index:1}
.numbers .h2{color:#fff}
.numbers__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.numbers__grid>div{padding:8px 28px;border-left:1px solid rgba(255,255,255,.18)}
.numbers__grid>div:first-child{padding-left:0;border-left:0}
.numbers__grid strong{display:block;font-family:var(--f-display);font-size:clamp(48px,5vw,76px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.numbers__grid span{display:block;margin-top:10px;color:#D9DCE1}
.numbers__grid strong span{display:inline;margin:0;color:inherit}
@media (max-width:820px){
  .numbers__in{padding-top:80px;padding-bottom:80px}
  .numbers__grid{grid-template-columns:1fr 1fr;row-gap:32px}
  .numbers__grid>div{padding:0 16px;border:0}
  .numbers__grid>div:nth-child(odd){padding-left:0}
}

/* ---------- Cene ---------- */
.switch-row{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px}
.switch{position:relative;width:64px;height:36px;border-radius:999px;border:0;background:var(--ink);cursor:pointer;padding:0;flex-shrink:0}
.switch__knob{position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:var(--lime);transition:transform .3s var(--ease)}
.switch[aria-pressed="true"] .switch__knob{transform:translateX(28px)}
.plans{align-items:stretch;perspective:900px}
.plan{position:relative;padding:32px;display:flex;flex-direction:column;gap:18px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.plan:hover{transform:translateY(-6px);box-shadow:0 24px 40px -26px rgba(13,17,23,.4)}
.plan--top{background:var(--ink);color:#fff;border-color:var(--ink)}
.plan--top .plan__sub{color:var(--dark-muted)}
.plan__badge{position:absolute;top:-14px;left:32px;height:28px;padding:0 12px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;display:inline-flex;align-items:center}
.plan__sub{font-size:15px;color:var(--muted)}
.plan__price{font-family:var(--f-display);font-size:clamp(34px,3.4vw,46px);font-weight:700;line-height:1;min-height:1.1em}
.flip{display:inline-block;animation:flipin .5s var(--ease) both}
@keyframes flipin{from{opacity:0;transform:rotateX(90deg) translateY(10px)}}
.checks{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;padding-top:20px;border-top:1px solid var(--line);flex:1}
.plan--top .checks{border-color:var(--dark-line)}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks .icon{flex-shrink:0;margin-top:3px;color:var(--lime-dk)}
.plan--top .checks .icon{color:var(--lime)}
.monthly{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:28px 32px;margin-top:24px}
.monthly small{display:block;font-size:14px;color:var(--muted)}
.monthly strong{font-family:var(--f-display);font-size:23px}
@media (max-width:1100px){.monthly{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.monthly{grid-template-columns:1fr}.plan{padding:26px}}

/* ---------- O nama ---------- */
.about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:32px;background:var(--sand);overflow:hidden}
.about__text{padding:64px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;justify-content:center}
.about__stats{display:flex;gap:32px;flex-wrap:wrap;padding:8px 0}
.about__stats strong{display:block;font-family:var(--f-display);font-size:40px;font-weight:700;line-height:1}
.about__stats span{font-size:14px;color:var(--muted)}
.about__img{min-height:480px}
@media (max-width:900px){.about{grid-template-columns:1fr}.about__text{padding:36px 24px}.about__img{min-height:320px}}

/* ---------- Kartice članaka ---------- */
.post-card{overflow:hidden}
.post-card__link{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.post-card__link:hover{color:var(--ink)}
.post-card__img{display:block;aspect-ratio:16/10;overflow:hidden}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post-card:hover .post-card__img img{transform:scale(1.04)}
.cover{aspect-ratio:16/10;display:flex;align-items:flex-end;padding:22px;font-family:var(--f-display);font-size:28px;font-weight:700;line-height:1.02;letter-spacing:-.02em;overflow:hidden}
.cover span{transition:transform .5s var(--ease)}
.post-card:hover .cover span{transform:translateY(-6px)}
.cover--0{background:var(--ink);color:var(--lime)}
.cover--1{background:var(--lime);color:var(--ink)}
.cover--2{background:var(--sand);color:var(--ink)}
.post-card__body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card__title{font-family:var(--f-display);font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.post-card__ex{font-size:15px;color:var(--muted)}
.lift{transition:transform .35s var(--ease),box-shadow .35s,border-color .2s}
.lift:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(13,17,23,.35);border-color:var(--ink)}

/* Blog */
.page-hero{position:relative;padding:64px 0 48px;overflow:hidden}
.page-hero .wrap{display:flex;flex-direction:column;gap:18px;align-items:flex-start;z-index:1}
.page-hero .h1{max-width:900px}
.page-hero .lead{max-width:680px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.chip-btn{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);font-size:14px;font-weight:600;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
.chip-btn:hover{border-color:var(--ink);color:var(--ink)}
.chip-btn.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.featured{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);overflow:hidden;margin-bottom:40px;color:var(--ink)}
.featured:hover{color:var(--ink)}
.featured__img img{width:100%;height:100%;object-fit:cover}
.featured__cover{background:var(--ink);min-height:380px;padding:40px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.featured__big{font-family:var(--f-display);font-size:clamp(40px,5vw,64px);font-weight:700;color:var(--lime);line-height:.98;letter-spacing:-.03em}
.featured__body{padding:40px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.featured__title{font-family:var(--f-display);font-size:clamp(26px,2.8vw,38px);font-weight:600;line-height:1.1;letter-spacing:-.02em}
@media (max-width:820px){.featured{grid-template-columns:1fr}.featured__cover{min-height:260px}.featured__body{padding:28px}}
.nav-links{display:flex;justify-content:center;gap:8px;padding-top:40px}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 6px;border-radius:999px;border:1px solid var(--line);background:var(--white);font-weight:600}
.page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.page-numbers.dots{border:0;background:none}

/* ---------- Članak ---------- */
.article__head{padding-top:48px;padding-bottom:36px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.byline{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--muted)}
.byline strong{color:var(--ink)}
.byline__av{width:44px;height:44px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.article__hero{margin:0 0 56px;border-radius:28px;overflow:hidden}
.article__cover{margin-bottom:56px;border-radius:28px;background:var(--ink);min-height:340px;padding:48px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.article__cover>span:first-child{font-family:var(--f-display);font-size:clamp(44px,6vw,76px);font-weight:700;color:var(--lime);line-height:.95;letter-spacing:-.03em}
.article__cover-tags{display:flex;gap:8px;flex-wrap:wrap}
.article__grid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:72px;justify-content:center;align-items:start;padding-bottom:96px}
.article__side{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px}
.toc{padding:18px;display:flex;flex-direction:column}
.toc__h{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 12px 10px}
.toc a{padding:8px 12px;border-radius:10px;font-size:14px;color:var(--muted);transition:background .2s,color .2s}
.toc a:hover{background:var(--bg);color:var(--ink)}
.toc a.is-active{background:var(--lime);color:var(--ink);font-weight:600}
.side-cta{border-radius:var(--radius);background:var(--lime);padding:28px;display:flex;flex-direction:column;gap:14px}
.article__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;margin-top:12px;border-top:1px solid var(--line)}
.article__tags{display:flex;gap:8px;flex-wrap:wrap}
.share{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:15px}
.share__btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.share__btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:1100px){.article__grid{grid-template-columns:minmax(0,1fr);gap:40px}.article__side{position:static}}
@media (max-width:640px){.article__cover{padding:28px;min-height:240px}}

/* Tekst (prose) */
.prose{font-size:18px;line-height:1.75;color:var(--ink-2);display:flex;flex-direction:column;gap:22px}
.prose>*{margin:0}
.prose h2{font-size:clamp(26px,2.4vw,32px);color:var(--ink);margin-top:20px;scroll-margin-top:110px}
.prose h3{font-size:22px;color:var(--ink);margin-top:10px}
.prose ul,.prose ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose a{font-weight:600;text-decoration:underline;text-decoration-color:var(--lime-dk);text-underline-offset:3px}
.prose blockquote{margin:0;padding:28px 30px;border-radius:var(--radius);background:var(--ink);color:#E6E8EB;font-size:17px}
.prose blockquote strong:first-child{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.prose blockquote p{margin:0}
.prose img{border-radius:16px}
.prose .lead-p{font-size:21px;line-height:1.6;color:var(--ink)}
.prose code{font-family:var(--f-mono);font-size:.88em;background:var(--sand);padding:2px 6px;border-radius:6px}
.prose pre{background:var(--ink);color:var(--lime);padding:20px;border-radius:16px;overflow-x:auto;font-family:var(--f-mono);font-size:14px}
.prose pre code{background:none;padding:0;color:inherit}
@media (max-width:640px){.prose{font-size:17px}}

/* ---------- Usluga ---------- */
.page-hero--service{padding-bottom:96px}
.service-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start;width:100%;margin-top:16px}
.service-hero__text{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.price-card{padding:32px;display:flex;flex-direction:column;gap:18px}
.price-card__price{font-family:var(--f-display);font-size:clamp(40px,4vw,52px);font-weight:700;line-height:1}
@media (max-width:1100px){.service-hero{grid-template-columns:1fr}}

/* Blokovi iz sadržaja usluge (piše se u editoru, klase su navedene u README) */
.block{position:relative;padding:96px 0;overflow:hidden}
.block--white{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.block .wrap{display:flex;flex-direction:column;gap:40px}
.block .block__head{display:flex;flex-direction:column;gap:16px;max-width:760px}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feature{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--radius);background:var(--bg);transition:transform .35s var(--ease),background .3s}
.block--white .feature{background:var(--bg)}
.feature:hover{transform:translateY(-4px);background:var(--sand)}
.feature__ico{width:48px;height:48px;border-radius:14px;background:var(--ink);color:var(--lime);display:flex;align-items:center;justify-content:center}
.feature h3{font-size:22px}
.feature p{font-size:15px;color:var(--muted)}
@media (max-width:1000px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.features{grid-template-columns:1fr}.block{padding:64px 0}}
.media-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.media-split__img{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--white)}
.media-split__img img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.media-split__text{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
@media (max-width:900px){.media-split{grid-template-columns:1fr;gap:28px}}
.table-box{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:8px 8px 16px}
.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:680px}
.cmp th,.cmp td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp thead th{font-family:var(--f-display);font-size:20px;font-weight:600}
.cmp thead th:first-child{font-family:var(--f-body);font-size:14px;color:var(--muted)}
.cmp .hl{background:var(--lime-soft)}
.steps{list-style:none}
.steps li{border-top:2px solid var(--lime);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.steps li>span{font-size:13px;font-weight:700;color:var(--lime)}
.steps p{font-size:15px}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
.faq-wrap .section-head{margin:0;position:sticky;top:120px}
.faq{display:flex;flex-direction:column;gap:10px}
.faq__item{padding:0;transition:border-color .2s}
.faq__item[open]{border-color:var(--ink)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;font-weight:600;font-size:17px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__plus{position:relative;width:28px;height:28px;border-radius:50%;background:var(--bg);flex-shrink:0;transition:transform .3s var(--ease),background .2s}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px}
.faq__plus::after{transform:rotate(90deg)}
.faq__item[open] .faq__plus{transform:rotate(45deg);background:var(--lime)}
.faq__a{padding:0 24px 22px;color:var(--muted);font-size:15px}
.faq__a p{margin:0 0 10px}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr}.faq-wrap .section-head{position:static}}

/* ---------- CTA ---------- */
.section--cta{padding:0 0 112px}
.cta-band{position:relative;overflow:hidden;border-radius:32px;background:var(--lime);padding:64px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.cta-band__text{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;max-width:640px}
.cta-band .btn-row{position:relative;z-index:1}
@media (max-width:900px){.cta-band{flex-direction:column;align-items:flex-start;padding:40px 24px}.section--cta{padding-bottom:72px}}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
.contact-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
@media (max-width:1100px){.contact-grid{grid-template-columns:1fr}.contact-side{position:static}}
.qform{padding:40px;display:flex;flex-direction:column;gap:36px;position:relative}
.qform__set{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.qform__set legend{font-family:var(--f-display);font-size:24px;font-weight:600;margin-bottom:14px;padding:0}
.qform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--white);font-size:15px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--ink)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt__tick{width:22px;height:22px;flex-shrink:0;border-radius:7px;border:1.5px solid #BDB8AA;display:flex;align-items:center;justify-content:center;color:transparent;transition:background .2s,border-color .2s,color .2s}
.opt:has(input:checked){border-color:var(--ink);background:var(--lime-soft)}
.opt:has(input:checked) .opt__tick{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);font-size:14px;font-weight:600;transition:all .2s}
.pill:hover span{border-color:var(--ink)}
.pill input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.pill input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.fld input,.fld textarea,.search-form input{min-height:52px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--white);font-size:15px;font-weight:400;transition:border-color .2s}
.fld input:focus,.fld textarea:focus,.search-form input:focus{outline:none;border-color:var(--ink)}
.qform__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.qform__foot p{max-width:420px}
.qform__msg{padding:14px 18px;border-radius:14px;background:var(--bg);font-weight:600}
.qform__msg.is-ok{background:var(--lime-soft);border:1px solid var(--lime-dk)}
.qform__msg.is-err{background:#FFF1EC;border:1px solid #B5452A}
.qform.is-sending button[type=submit]{opacity:.6;pointer-events:none}
@media (max-width:640px){.qform{padding:24px}.opts,.fields{grid-template-columns:1fr}}
.summary{border-radius:24px;background:var(--ink);color:#fff;padding:28px;display:flex;flex-direction:column;gap:18px}
.summary__head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.summary__pct{font-size:13px;color:var(--lime);font-weight:700}
.summary__bar{height:6px;border-radius:999px;background:var(--dark-line);overflow:hidden}
.summary__bar span{display:block;height:100%;width:20%;background:var(--lime);border-radius:999px;transition:width .4s var(--ease)}
.summary__row{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--dark-line)}
.summary__row small{font-size:13px;color:var(--dark-muted)}
.summary__chips{display:flex;flex-wrap:wrap;gap:6px;font-size:15px;color:#E6E8EB}
.summary__chips .chip{animation:rise .35s var(--ease) both}
.summary__note{display:flex;gap:10px;align-items:center;padding-top:16px;border-top:1px solid var(--dark-line);font-size:14px;color:#E6E8EB}
.summary__note .icon{color:var(--lime)}
.contact-card{padding:24px;display:flex;flex-direction:column;gap:14px}
.contact-card__row{display:flex;align-items:center;gap:12px;font-weight:600}
.contact-card__row>span{width:40px;height:40px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cf7-wrap{padding:40px}
/* Contact Form 7 u izgledu ugrađene forme */
.cf7-wrap .wpcf7-form{display:flex;flex-direction:column;gap:36px;position:relative}
.cf7-wrap .wpcf7-form-control-wrap{display:block}
.cf7-wrap .opts{display:block}
.cf7-wrap .wpcf7-checkbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cf7-wrap .wpcf7-list-item{margin:0;display:block}
.cf7-wrap .wpcf7-checkbox label{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--white);font-size:15px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.cf7-wrap .wpcf7-checkbox label:hover{border-color:var(--ink)}
.cf7-wrap .wpcf7-checkbox input,.cf7-wrap .wpcf7-radio input{position:absolute;opacity:0;width:1px;height:1px}
.cf7-wrap .wpcf7-checkbox .wpcf7-list-item-label{display:flex;align-items:center;gap:12px}
.cf7-wrap .wpcf7-checkbox .wpcf7-list-item-label::before{content:"";width:22px;height:22px;flex-shrink:0;border-radius:7px;border:1.5px solid #BDB8AA;background:center/14px no-repeat;transition:background-color .2s,border-color .2s}
.cf7-wrap .wpcf7-checkbox label:has(input:checked){border-color:var(--ink);background:var(--lime-soft)}
.cf7-wrap .wpcf7-checkbox input:checked+.wpcf7-list-item-label::before{background-color:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD84D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.cf7-wrap .wpcf7-checkbox label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.cf7-wrap .wpcf7-radio{display:flex;flex-wrap:wrap;gap:8px}
.cf7-wrap .wpcf7-radio label{position:relative;cursor:pointer}
.cf7-wrap .wpcf7-radio .wpcf7-list-item-label{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);font-size:14px;font-weight:600;transition:all .2s}
.cf7-wrap .wpcf7-radio label:hover .wpcf7-list-item-label{border-color:var(--ink)}
.cf7-wrap .wpcf7-radio input:checked+.wpcf7-list-item-label{background:var(--ink);border-color:var(--ink);color:#fff}
.cf7-wrap .wpcf7-radio input:focus-visible+.wpcf7-list-item-label{outline:2px solid var(--ink);outline-offset:2px}
.cf7-wrap .fld .wpcf7-form-control-wrap input,.cf7-wrap .fld textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--white);font:inherit;font-size:15px;font-weight:400}
.cf7-wrap .fld textarea{min-height:140px;resize:vertical}
.cf7-wrap .fld input:focus,.cf7-wrap .fld textarea:focus{outline:none;border-color:var(--ink)}
.cf7-wrap .wpcf7-not-valid{border-color:#B5452A!important}
.cf7-wrap .wpcf7-not-valid-tip{font-size:13px;font-weight:600;color:#B5452A;margin-top:6px}
.cf7-wrap .wpcf7-submit{cursor:pointer;border:0}
.cf7-wrap .wpcf7-spinner{margin:0 0 0 10px}
.cf7-wrap .wpcf7-response-output{margin:0!important;padding:14px 18px!important;border-radius:14px;border:1px solid var(--line)!important;background:var(--bg);font-weight:600}
.cf7-wrap .wpcf7 form.sent .wpcf7-response-output{background:var(--lime-soft);border-color:var(--lime-dk)!important}
.cf7-wrap .wpcf7 form.invalid .wpcf7-response-output,.cf7-wrap .wpcf7 form.failed .wpcf7-response-output,.cf7-wrap .wpcf7 form.spam .wpcf7-response-output{background:#FFF1EC;border-color:#B5452A!important}
.cf7-wrap .wpcf7 form.submitting .wpcf7-submit{opacity:.6;pointer-events:none}
@media (max-width:640px){.cf7-wrap{padding:24px}.cf7-wrap .wpcf7-checkbox{grid-template-columns:1fr}}
.search-form{display:flex;gap:10px}
.search-form input{flex:1;min-width:0}

/* Konfete od koda */
.bit{position:fixed;z-index:95;left:0;top:0;font-family:var(--f-mono);font-weight:600;font-size:16px;pointer-events:none;animation:burst 1.2s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--rot)) scale(1);opacity:0}}

/* ---------- 404 ---------- */
.notfound{padding:96px 0 120px}
.notfound__code{margin:0;font-family:var(--f-mono);font-size:18px;line-height:1.7;background:var(--ink);color:var(--dark-muted);padding:22px 26px;border-radius:18px}
.notfound__code b{color:var(--lime)}

/* ---------- Podnožje ---------- */
.site-footer{background:var(--ink);color:var(--dark-muted);font-size:15px}
.site-footer a{color:var(--dark-muted)}
.site-footer a:hover,.site-footer a.strong{color:#fff}
.site-footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-top:72px;padding-bottom:48px}
.site-footer__brand{display:flex;flex-direction:column;gap:16px}
.site-footer__h{font-size:17px;color:#fff;margin-bottom:16px}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-footer__social{display:flex;gap:16px;flex-wrap:wrap}
.site-footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px;border-top:1px solid var(--dark-line);font-size:13px}
.site-footer__bottom .legal{flex-direction:row;gap:20px}
@media (max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Pozadinski elementi (paralaks)
   ========================================================================== */
.shapes{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.shape{position:absolute;display:block;color:#D4D0C3;will-change:transform;transition:color .3s}
.shape svg{width:100%;height:100%;display:block}
.shape--s{width:56px;height:56px}
.shape--m{width:96px;height:96px}
.shape--l{width:150px;height:150px}
.shape__txt{display:block;font-family:var(--f-mono);font-weight:600;line-height:1;white-space:nowrap}
.shape--s .shape__txt{font-size:48px}
.shape--m .shape__txt{font-size:80px}
.shape--l .shape__txt{font-size:120px}
.shape--code .shape__txt{color:var(--lime-dk);opacity:.35}
.shape--cursor{color:var(--ink);opacity:.14}
.shape__tag{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:700;font-size:14px;opacity:.85;white-space:nowrap}
.shape__chart{display:flex;align-items:flex-end;gap:6px;height:80px}
.shape__chart i{width:16px;border-radius:4px;background:#D4D0C3}
.shape__chart i:nth-child(1){height:30%}.shape__chart i:nth-child(2){height:50%}.shape__chart i:nth-child(3){height:70%;background:rgba(var(--lime-rgb),.7)}.shape__chart i:nth-child(4){height:100%;background:var(--lime)}
.shape__term{display:block;width:230px;border-radius:14px;background:#1A2029;border:1px solid var(--dark-line);padding:14px;font-family:var(--f-mono);font-size:12px;color:#8B93A1;line-height:1.7}
.shape__term b{color:var(--lime);font-weight:400}
.shape__blocks{display:grid;grid-template-columns:repeat(2,40px);gap:8px}
.shape__blocks i{height:40px;border-radius:10px;border:2px solid #D4D0C3}
.shape__blocks i:first-child{grid-column:span 2;width:88px;background:rgba(var(--lime-rgb),.35);border-color:transparent}
.shape__dots{display:block;width:100%;height:100%;background-image:radial-gradient(var(--lime-dk) 2px,transparent 2.4px);background-size:16px 16px;opacity:.35}
.section--dark .shape,.shapes--dark .shape{color:#2A303A}
.section--dark .shape--code .shape__txt{color:var(--lime);opacity:.5}
.cta-band .shape{color:rgba(13,17,23,.14)}
.cta-band .shape--code .shape__txt{color:rgba(13,17,23,.16);opacity:1}
@media (max-width:820px){
  .shape--l{width:96px;height:96px}
  .shape--l .shape__txt{font-size:76px}
  .shape--m .shape__txt{font-size:56px}
  .shapes .shape:nth-child(n+4){display:none}
  .shape__term{display:none}
}

/* ==========================================================================
   Pojavljivanje pri skrolu
   ========================================================================== */
.js .fx-on .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .fx-on .reveal.is-in{opacity:1;transform:none}

/* Prelazi između stranica (Chrome, Edge) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s ease both}
::view-transition-new(root){animation:vt-in .35s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* Terminal mod (skrivena šala: otkucajte „codema“) */
.terminal-mode{filter:none}
.terminal-mode body,body.terminal-mode{background:#050806 !important}
body.terminal-mode *{color:#4AF626 !important;background-color:transparent !important;border-color:#1F6F12 !important;font-family:var(--f-mono) !important;text-shadow:0 0 6px rgba(74,246,38,.5)}
body.terminal-mode img,body.terminal-mode .shapes{opacity:.15}
.terminal-toast{position:fixed;left:50%;bottom:24px;z-index:99;transform:translateX(-50%);background:#050806;color:#4AF626;font-family:var(--f-mono);font-size:14px;padding:12px 18px;border:1px solid #1F6F12;border-radius:10px}

/* Isključeni efekti (Customizer) i smanjenje pokreta (sistem) */
.fx-off .reveal{opacity:1 !important;transform:none !important}
.fx-off .shapes{display:none}
.fx-off .bob-a,.fx-off .bob-b,.fx-off .bob-c,.fx-off .marquee__track{animation:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1 !important;transform:none !important}
  .shapes{display:none}
  .hl-mark{background-size:100% 38%}
  .build{opacity:1;transform:none}
  @view-transition{navigation:none}
}

/* ---------- Članak: traka napretka, autor, prethodni/sledeći ---------- */
.read-progress{position:fixed;left:0;right:0;top:0;height:4px;z-index:60;pointer-events:none}
.admin-bar .read-progress{top:32px}
.read-progress span{display:block;height:100%;width:100%;background:var(--lime-dk);transform-origin:0 50%;transform:scaleX(var(--rp,0))}
.article__main{min-width:0;display:flex;flex-direction:column;gap:40px}
.author-box{display:flex;gap:18px;align-items:flex-start;padding:24px;border-radius:var(--radius);background:var(--sand);font-size:16px;line-height:1.6;margin-top:16px}
.author-box strong{display:block;color:var(--ink);margin-bottom:4px}
.author-box p{color:var(--muted)}
.post-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.post-nav__a{display:flex;flex-direction:column;gap:6px;padding:22px 24px;color:var(--ink)}
.post-nav__a:hover{color:var(--ink)}
.post-nav__a small{font-size:13px;color:var(--muted);font-weight:600}
.post-nav__a span{font-family:var(--f-display);font-size:19px;font-weight:600;line-height:1.25}
.post-nav__a--next{text-align:right;grid-column:2}
@media (max-width:640px){.post-nav{grid-template-columns:1fr}.post-nav__a--next{grid-column:auto}}

/* Blog: pretraga pored kategorija */
.blog-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.blog-bar .chips{margin:0}
.blog-bar .search-form{min-width:280px}
.blog-bar .search-form input{min-height:44px;padding:10px 16px;border-radius:999px}
.blog-bar .search-form .btn{min-height:44px}

/* ---------- Portfolio: telefon na kartici ---------- */
.proj__phone{position:absolute;right:4%;bottom:-6%;width:21%;max-width:150px;aspect-ratio:375/812;border-radius:18px;overflow:hidden;border:5px solid var(--ink);background:var(--ink);box-shadow:0 18px 40px -14px rgba(13,17,23,.5);transform:translateY(0) rotate(4deg);transition:transform .5s var(--ease)}
.proj__phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.proj__link:hover .proj__phone{transform:translateY(-10%) rotate(0)}

/* ---------- Projekat: računar + telefon ---------- */
.page-hero--case{padding-bottom:40px}
.devices-wrap{position:relative;padding:8px 0 40px}
.devices{position:relative;padding-right:120px}
.device-desktop{margin:0;border-radius:18px;background:var(--ink);padding:0 0 14px;box-shadow:0 40px 80px -40px rgba(13,17,23,.55)}
.device-desktop__bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px}
.device-desktop__bar i{width:10px;height:10px;border-radius:50%;background:#3A414D}
.device-desktop__bar span{margin-left:10px;flex:1;max-width:420px;height:24px;border-radius:999px;background:#1A2029;color:#8B93A1;font-size:12px;display:flex;align-items:center;padding:0 12px}
.device-desktop__screen{display:block;margin:0 14px;border-radius:8px;overflow:hidden;aspect-ratio:16/10;background:#fff}
.device-desktop__screen img{width:100%;height:auto;transition:transform 7s cubic-bezier(.45,.05,.55,.95)}
.device-desktop__screen:hover img{transform:translateY(var(--scroll-to,0))}
.device-phone{position:absolute;right:0;bottom:-40px;width:clamp(150px,22%,270px);margin:0;padding:12px;border-radius:40px;background:var(--ink);box-shadow:0 40px 70px -30px rgba(13,17,23,.65)}
.device-phone__notch{position:absolute;left:50%;top:20px;width:30%;height:16px;border-radius:999px;background:var(--ink);transform:translateX(-50%);z-index:2}
.device-phone__screen{display:block;border-radius:28px;overflow:hidden;aspect-ratio:375/812;background:#fff}
.device-phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.device-cap{position:absolute;left:0;top:calc(100% + 10px);font-size:13px;font-weight:600;color:var(--muted)}
.device-phone .device-cap{left:50%;transform:translateX(-50%)}
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start;padding-top:40px}
.case-side{position:sticky;top:110px;padding:26px;display:flex;flex-direction:column;gap:20px}
.case-side dl{margin:0;display:flex;flex-direction:column;gap:14px}
.case-side dl>div{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.case-side dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.case-side dd{margin:0;font-weight:600}
@media (max-width:900px){
  .devices{padding-right:0;padding-bottom:40px}
  .device-phone{width:34%;right:-4px;bottom:-30px;padding:8px;border-radius:26px}
  .device-phone__screen{border-radius:20px}
  .device-phone__notch{top:13px;height:10px}
  .device-cap{display:none}
  .case-grid{grid-template-columns:1fr;gap:32px}
  .case-side{position:static}
}

/* ---------- Usluga: uvod + za koga ---------- */
.intro-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:start}
.intro-split__text{display:flex;flex-direction:column;gap:18px}
.intro-split__fit{position:sticky;top:110px;padding:28px;border-radius:var(--radius);background:var(--ink);color:#fff;display:flex;flex-direction:column;gap:16px}
.intro-split__fit .checks{border-color:var(--dark-line)}
.intro-split__fit .checks .icon{color:var(--lime)}
@media (max-width:900px){.intro-split{grid-template-columns:1fr;gap:28px}.intro-split__fit{position:static}}
.grid--svc{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.grid--svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--svc{grid-template-columns:1fr}}

/* Logotipi: svetli logotipi dobijaju tamnu pozadinu */
.logo-slot--dark{background:var(--ink);border-color:var(--ink)}
.logo-slot--dark img{opacity:1}
.logo-slot img[src$=".svg"]{width:100%;max-width:150px;height:56px}

/* Portfolio sa mnogo projekata: 3 kolone, manji naslovi */
.projects--sm .proj__title{font-size:21px}
.projects--sm .proj__desc{font-size:14px}
.projects--sm .proj__info{flex-direction:column;gap:10px}
.projects--sm .proj__tags{justify-content:flex-start}
.projects--sm .proj-empty__t{font-size:21px}

/* Prebacivač jezika */
.lang-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);transition:background .2s,color .2s}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.is-on{background:var(--ink);color:#fff}

/* Usluge: svaka kartica u svojoj nežnoj boji */
.grid--svc .svc{background:var(--svc-bg,var(--white));border-color:var(--svc-line,var(--line))}
.grid--svc .svc .svc__arrow{border-color:var(--svc-line,var(--line));background:rgba(255,255,255,.55)}
.grid--svc .svc:hover .svc__arrow{background:var(--ink);border-color:var(--ink);color:#fff}
.grid--svc .svc:hover{border-color:var(--svc-deep,var(--ink))}
.grid--svc .svc .svc__num{color:var(--svc-deep,var(--muted))}
.grid--svc .svc:nth-child(9n+1){--svc-bg:#EEF6D6;--svc-line:#DCE9B4;--svc-deep:#5E7A0E}
.grid--svc .svc:nth-child(9n+2){--svc-bg:#FCEADF;--svc-line:#F2D2BE;--svc-deep:#A4532A}
.grid--svc .svc:nth-child(9n+3){--svc-bg:#E4EDFB;--svc-line:#C9D8F2;--svc-deep:#3559A8}
.grid--svc .svc:nth-child(9n+4){--svc-bg:#EFE8FB;--svc-line:#DACDF2;--svc-deep:#6A4AB0}
.grid--svc .svc:nth-child(9n+5){--svc-bg:#DFF3EA;--svc-line:#BFE4D3;--svc-deep:#1E7A57}
.grid--svc .svc:nth-child(9n+6){--svc-bg:#FFF3D3;--svc-line:#F2DFA6;--svc-deep:#8F6A00}
.grid--svc .svc:nth-child(9n+7){--svc-bg:#FAE4EC;--svc-line:#F0C9D7;--svc-deep:#A23E64}
.grid--svc .svc:nth-child(9n+8){--svc-bg:#E1F2F4;--svc-line:#C2E2E6;--svc-deep:#1F6E78}
.grid--svc .svc:nth-child(9n+9){--svc-bg:#EEEBE3;--svc-line:#DDD8CB;--svc-deep:#5E5644}
.grid--svc .svc .tilt__glare{background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.7),transparent 60%)}

/* „Zašto Codema“: elementi koji se vrte + raketa */
@keyframes c-spin{to{transform:rotate(360deg)}}
.shape__spin{display:block;width:100%;height:100%;animation:c-spin 24s linear infinite}
.shape--gear2 .shape__spin{animation-duration:12s;animation-direction:reverse}
.shape--wp .shape__spin{animation-duration:40s}
.shape--atom .shape__spin{animation-duration:16s}
.section--dark .shape--gear,.section--dark .shape--wp,.section--dark .shape--atom{color:#353C48}
.section--dark .shape--gear2{color:var(--lime);opacity:.28}
.shape__orbit{position:relative;display:block;width:100%;height:100%}
.shape__orbit i{position:absolute;inset:0;border:1.5px dashed #353C48;border-radius:50%;animation:c-spin 60s linear infinite}
.shape__orbit b{position:absolute;inset:0;animation:c-spin 7s linear infinite}
.shape__orbit b::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px rgba(var(--lime-rgb),.8)}
.shape--rocket{width:120px;height:220px;overflow:visible}
.rocket{position:relative;display:block;width:100%;height:100%}
.rocket__body{position:absolute;left:50%;bottom:30px;width:64px;height:120px;margin-left:-32px;animation:rocket-fly 9s infinite}
.rocket__body svg{width:100%;height:100%;display:block;overflow:visible}
.rocket__hull{fill:#1E252F;stroke:var(--lime);stroke-width:2.5;stroke-linejoin:round}
.rocket__win{fill:var(--lime);stroke:#0D1117;stroke-width:3}
.rocket__fin{fill:var(--lime-dk);stroke:var(--lime);stroke-width:2;stroke-linejoin:round}
.rocket__nozzle{fill:#3A414D}
.rocket__flame{position:absolute;left:50%;top:58%;width:18px;height:34px;margin-left:-9px;margin-top:-6px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:linear-gradient(#FFF6C2,var(--lime) 40%,#FF8A3D);transform-origin:50% 0;animation:rocket-flame 9s infinite}
.rocket__flame::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;filter:blur(6px);animation:rocket-flicker .12s infinite alternate}
.rocket__smoke{position:absolute;left:50%;bottom:62px;width:0;height:0}
.rocket__smoke i{position:absolute;left:-14px;top:-10px;width:28px;height:28px;border-radius:50%;background:rgba(183,188,197,.35);opacity:0;animation:rocket-smoke 9s infinite}
.rocket__smoke i:nth-child(2){left:-34px;animation-delay:.12s}
.rocket__smoke i:nth-child(3){left:6px;animation-delay:.2s}
.rocket__smoke i:nth-child(4){left:-12px;top:4px;animation-delay:.3s}
@keyframes rocket-fly{
	0%,100%{transform:translateY(0);opacity:1}
	25%{transform:translateY(-8px)}
	50%{transform:translateY(0)}
	60%{transform:translate(-2px,0)}62%{transform:translate(2px,0)}64%{transform:translate(-2px,0)}66%{transform:translate(2px,0)}68%{transform:translate(-1px,0)}
	70%{transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.9,.4)}
	86%{transform:translateY(-1100px);opacity:1}
	86.1%{transform:translateY(40px);opacity:0}
	94%{transform:translateY(40px);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
}
@keyframes rocket-flame{
	0%,58%,96%,100%{transform:scaleY(.45);opacity:.55}
	62%,68%{transform:scaleY(.9);opacity:.9}
	72%,85%{transform:scaleY(2.6);opacity:1}
	86.1%,94%{transform:scaleY(.2);opacity:0}
}
@keyframes rocket-flicker{from{transform:scaleX(.85)}to{transform:scaleX(1.1)}}
@keyframes rocket-smoke{
	0%,62%{transform:scale(.2);opacity:0}
	66%{opacity:.8}
	82%{transform:scale(2.4) translateY(10px);opacity:0}
	100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){.shape__spin,.shape__orbit i,.shape__orbit b,.rocket__body,.rocket__flame,.rocket__flame::after,.rocket__smoke i{animation:none}}

/* Klijenti: posebna pozadina, da se odvoji od portfolija */
#klijenti{background:#ECE8DD;padding-bottom:112px}
@media (max-width:1100px){#klijenti{padding-bottom:72px}}
#klijenti + .section{padding-top:112px}
@media (max-width:1100px){#klijenti + .section{padding-top:72px}}

/* Različite pozadine sekcija */
#usluge{background:#FBFAF7}
.section--pf{background:var(--bg)}
#cene{background:#FFF8E3}
#o-nama{background:var(--bg)}
.section--blog{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--faq{background:#EEF0E9}
.section--faq + .section--cta{background:#EEF0E9}
.page-hero{background:#ECE8DD}
.page-hero + .section{padding-top:72px}
@media (max-width:1100px){.page-hero + .section{padding-top:48px}}

/* Linije i progresi koji se iscrtavaju dok se skroluje */
.has-lines{isolation:isolate}
.scroll-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.scroll-lines svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scroll-lines path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.scroll-lines .l1{stroke:rgba(13,17,23,.16);stroke-width:2}
.scroll-lines .l2{stroke:var(--lime);stroke-opacity:.9;stroke-width:3.5;stroke-dashoffset:calc(1 - var(--p2,0))}
.scroll-lines .l3{stroke:rgba(13,17,23,.08);stroke-width:1;stroke-dasharray:.004 .012;stroke-dashoffset:0;opacity:var(--p,0)}
.scroll-lines__bars{position:absolute;display:flex;flex-direction:column;gap:10px;width:150px}
.scroll-lines__bars.is-right{right:3%;top:14%}
.scroll-lines__bars.is-left{left:3%;bottom:12%}
.scroll-lines__bars span{position:relative;display:block;height:6px;border-radius:99px;background:rgba(13,17,23,.07);overflow:hidden}
.scroll-lines__bars span::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--lime);transform-origin:left;transform:scaleX(calc(var(--p,0) * var(--k,1)))}
.scroll-lines__bars span:nth-child(1){width:100%;--k:1}
.scroll-lines__bars span:nth-child(2){width:72%;--k:.8}
.scroll-lines__bars span:nth-child(3){width:88%;--k:1.15}
.scroll-lines__bars small{font-family:var(--f-mono);font-size:11px;color:rgba(13,17,23,.35);letter-spacing:.04em}
.section--dark .scroll-lines .l1{stroke:rgba(255,255,255,.12)}
.section--dark .scroll-lines .l3{stroke:rgba(255,255,255,.1)}
.section--dark .scroll-lines__bars span{background:rgba(255,255,255,.08)}
.section--dark .scroll-lines__bars small{color:rgba(255,255,255,.35)}
@media (max-width:900px){.scroll-lines__bars{display:none}}

/* Portfolio: velike reči u pozadini koje klize pri skrolu */
.section--pf{isolation:isolate}
.pf-words{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none;overflow:hidden}
.pf-words__row{white-space:nowrap;font-family:var(--f-display);font-weight:700;font-size:clamp(72px,11vw,170px);line-height:1;letter-spacing:-.03em;will-change:transform}
.pf-words__row--1{color:transparent;-webkit-text-stroke:1.5px rgba(13,17,23,.14)}
.pf-words__row--2{color:rgba(var(--lime-rgb),.45)}
.pf-words__row--3{color:transparent;-webkit-text-stroke:1.5px rgba(var(--lime-rgb),.9)}
.pf-words__row--2{transform:translate3d(-50%,0,0)}

/* Uvodna sekcija sa fotografijom */
.intro{position:relative;min-height:calc(100svh - 124px);display:flex;align-items:flex-end;overflow:hidden;background:#07090C;color:#fff;isolation:isolate}
.admin-bar .intro{min-height:calc(100svh - 156px)}
.intro__img{position:absolute;inset:-6% 0 0;width:100%;height:112%;object-fit:cover;z-index:-3;transform-origin:50% 40%;animation:intro-zoom 18s ease-out both;will-change:transform}
.intro__shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,9,12,.92) 0%,rgba(7,9,12,.7) 42%,rgba(7,9,12,.25) 100%),linear-gradient(0deg,rgba(7,9,12,.85) 0%,rgba(7,9,12,0) 45%)}
.intro__grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%)}
.intro__in{position:relative;padding-top:96px;padding-bottom:112px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.intro__label{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75);animation:intro-fade .8s .2s both}
.intro__label .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.intro__title{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(56px,10vw,152px);line-height:.92;letter-spacing:-.045em}
.intro__line{display:block;overflow:hidden;padding-bottom:.04em}
.intro__line>span{display:inline-block;transform:translateY(110%);animation:intro-up .9s var(--ease) both}
.intro__line:nth-child(1)>span{animation-delay:.25s}.intro__line:nth-child(2)>span{animation-delay:.4s}.intro__line:nth-child(3)>span{animation-delay:.55s}
.intro__accent{color:var(--lime)}
.intro__sub{max-width:560px;margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(255,255,255,.78);animation:intro-fade .8s .8s both}
.intro__cta{display:flex;flex-wrap:wrap;gap:12px;animation:intro-fade .8s .95s both}
.btn--ghost-light{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent}
.btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.intro__scroll{position:absolute;right:var(--pad);bottom:40px;width:30px;height:48px;border:1.5px solid rgba(255,255,255,.55);border-radius:20px}
.intro__scroll span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:4px;background:var(--lime);animation:intro-wheel 1.6s ease-in-out infinite}
@keyframes intro-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes intro-up{to{transform:none}}
@keyframes intro-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes intro-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@media (max-width:640px){.intro{min-height:calc(100svh - 100px)}.intro__in{padding-bottom:88px;gap:22px}.intro__scroll{display:none}.intro__shade{background:linear-gradient(0deg,rgba(7,9,12,.95) 10%,rgba(7,9,12,.55) 60%,rgba(7,9,12,.35) 100%)}}
@media (prefers-reduced-motion:reduce){.intro__img,.intro__line>span,.intro__label,.intro__sub,.intro__cta,.intro__scroll span{animation:none;transform:none;opacity:1}}
/* Naslov uvoda u jednom redu */
.intro__title{display:flex;flex-wrap:wrap;column-gap:.22em;font-size:clamp(40px,6.2vw,104px);line-height:1}
.intro__line{display:inline-block}
@media (max-width:640px){.intro__title{font-size:clamp(34px,10.5vw,48px)}}

/* ---------- Uvodni slajder (3 fotografije) ---------- */
.intro__media{position:absolute;inset:-6% 0 0;z-index:-3;will-change:translate}
.intro__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease,visibility 0s 1.2s;visibility:hidden;overflow:hidden}
.intro__slide.is-on{opacity:1;visibility:visible;transition:opacity 1.2s ease,visibility 0s}
.intro__slide .intro__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none;transform:scale(1.12);transition:transform 9s ease-out}
.intro__slide.is-on .intro__img{transform:scale(1)}
.intro__texts{display:grid;width:100%}
.intro__text{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:28px;visibility:hidden;opacity:0;transition:opacity .5s ease,visibility 0s .5s}
.intro__text.is-on{visibility:visible;opacity:1;transition:opacity .3s ease,visibility 0s}
.intro__text .intro__label,.intro__text .intro__sub,.intro__text .intro__cta,.intro__text .intro__line>span{animation:none}
.intro__text.is-on .intro__label{animation:intro-fade .7s .1s both}
.intro__text.is-on .intro__line>span{animation:intro-up .85s var(--ease) both}
.intro__text.is-on .intro__line:nth-child(1)>span{animation-delay:.15s}
.intro__text.is-on .intro__line:nth-child(2)>span{animation-delay:.28s}
.intro__text.is-on .intro__line:nth-child(3)>span{animation-delay:.41s}
.intro__text.is-on .intro__sub{animation:intro-fade .7s .6s both}
.intro__text.is-on .intro__cta{animation:intro-fade .7s .72s both}
.intro__nav{display:flex;align-items:center;gap:14px;margin-top:8px;animation:intro-fade .8s 1.1s both}
.intro__arrow{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(7,9,12,.25);color:#fff;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.intro__arrow:first-child .icon,.intro__arrow:first-child svg{transform:scaleX(-1)}
.intro__arrow:hover,.intro__arrow:focus-visible{background:var(--lime);border-color:var(--lime);color:#0B0D10}
.intro__dots{display:flex;gap:6px}
.intro__dot{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:8px;row-gap:8px;min-width:150px;padding:6px 4px;border:0;background:none;color:rgba(255,255,255,.55);text-align:left;cursor:pointer;font:inherit;transition:color .25s}
.intro__dot:hover,.intro__dot.is-on{color:#fff}
.intro__dot-num{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}
.intro__dot.is-on .intro__dot-num{color:var(--lime)}
.intro__dot-name{font-size:14px;font-weight:600}
.intro__dot-bar{grid-column:1/-1;position:relative;height:2px;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
.intro__dot-bar i{position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
.intro__dot.is-done .intro__dot-bar i{transform:scaleX(1)}
.intro__dot.is-on .intro__dot-bar i{animation:intro-bar var(--intro-dur,7s) linear both}
.intro.is-paused .intro__dot.is-on .intro__dot-bar i{animation-play-state:paused}
@keyframes intro-bar{to{transform:scaleX(1)}}
@media (max-width:640px){
	.intro__text{gap:22px}
	.intro__nav{gap:10px;width:100%}
	.intro__arrow{display:none}
	.intro__dots{width:100%}
	.intro__dot{min-width:0;flex:1}
	.intro__dot-name{display:none}
}
@media (prefers-reduced-motion:reduce){
	.intro__slide,.intro__slide .intro__img,.intro__text{transition:none}
	.intro__slide .intro__img{transform:none}
	.intro__text.is-on .intro__label,.intro__text.is-on .intro__sub,.intro__text.is-on .intro__cta,.intro__text.is-on .intro__line>span,.intro__nav{animation:none;transform:none;opacity:1}
	.intro__dot.is-on .intro__dot-bar i{animation:none;transform:scaleX(1)}
}

/* ---------- Naslovna: prozirna navigacija preko slajdera dok je stranica na vrhu ---------- */
body:has(.intro) .intro{margin-top:-85px;min-height:calc(100svh - 40px)}
.admin-bar:has(.intro) .intro{min-height:calc(100svh - 72px)}
@media (max-width:640px){body:has(.intro) .intro{min-height:calc(100svh - 40px)}}
.site-header::before{transition:opacity .35s ease}
.site-header .logo,.site-header .logo b,.site-header .menu-btn,.site-header__cta,.lang-switch,.lang-switch a{transition:color .3s,background .3s,border-color .3s}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled)::before{opacity:0}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled) .logo{color:#fff}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled) .logo b{color:var(--lime)}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled) .menu-btn{border-color:rgba(255,255,255,.7);color:#fff}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled) .site-header__cta{background:var(--lime);color:#0D1117}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled) .site-header__cta:hover{background:#fff;color:#0D1117}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled) .lang-switch{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled) .lang-switch a{color:rgba(255,255,255,.75)}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled) .lang-switch a:hover{color:#fff}
body:has(.intro):not(.menu-open) .site-header:not(.is-scrolled) .lang-switch a.is-on{background:#fff;color:#0D1117}
@media (min-width:1101px){
	body:has(.intro) .site-header:not(.is-scrolled) .nav .menu>li>a{color:#fff}
	body:has(.intro) .site-header:not(.is-scrolled) .nav .menu>li>a:hover,
	body:has(.intro) .site-header:not(.is-scrolled) .nav .menu>li.current-menu-item>a,
	body:has(.intro) .site-header:not(.is-scrolled) .nav .menu>li.current-menu-ancestor>a,
	body:has(.intro) .site-header:not(.is-scrolled) .nav .menu>li:hover>a{background:rgba(255,255,255,.14);color:#fff}
}