/* Digitalni partner: zajednički stil za sve stranice.
   Raspored: kamen je osnovna podloga, svjetliji kamen razdvaja trake, smaragd je jedina obojena traka (paketi),
   oniks samo u tekstu i podnožju. Tanke zlatne linije su jedini ukras; zlato se na svijetlom ne koristi za tekst (1,9 : 1). */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(fontovi/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(fontovi/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --oniks:#0B0B0C; --smaragd:#0F3B33; --kamen:#E7E4DE; --kamen-svj:#F1EFEA; --grafit:#5E6266; --zlato:#C6A15B;
  --linija:rgba(11,11,12,.14); --linija-tam:rgba(231,228,222,.18); --tekst-tam:#B9B6AF;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pad:max(24px,8vw);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--kamen);color:var(--oniks);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:600;line-height:1.1;margin:0;letter-spacing:-.025em;text-wrap:balance}
em{font-style:normal}
p{margin:0}
a{color:inherit}
::selection{background:var(--smaragd);color:var(--kamen)}
:focus-visible{outline:1.5px solid var(--smaragd);outline-offset:4px}
.green :focus-visible,footer :focus-visible{outline-color:var(--zlato)}
.wrap{max-width:calc(1120px + 2 * var(--pad));margin:0 auto;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
section{padding-block:clamp(80px,11vw,140px)}
.svj{background:var(--kamen-svj)}
.green{background:var(--smaragd);color:var(--kamen)}
.label{display:inline-flex;align-items:center;gap:14px;font:600 .74rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--grafit)}
.label::before{content:"";width:36px;height:1px;background:var(--zlato)}
.green .label{color:var(--zlato)}
.txt-link{color:var(--smaragd);text-underline-offset:4px;text-decoration-thickness:1px}

/* LOGO (svijetla podloga: sve u smaragdu; tamna podloga: znak u kamenu, „digitalni” u zlatu) */
.mono{display:grid;place-items:center;background:var(--smaragd);border-radius:.46em;font:700 1em/1 var(--sans);letter-spacing:-.02em;color:var(--kamen);width:2.1em;height:2.1em;padding-bottom:.1em}
.word{font:400 1em/1.1 var(--sans);letter-spacing:.005em;white-space:nowrap;color:var(--smaragd)}
.word b{font-weight:700}
footer .mono{background:var(--kamen);color:var(--smaragd)}

/* Preskoči na sadržaj: vidljivo tek kad dobije fokus tipkovnicom */
.skip{position:fixed;top:8px;left:8px;z-index:60;padding:12px 18px;background:var(--smaragd);color:var(--kamen);font:600 .8rem var(--sans);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}
main:focus{outline:none}

/* IZBORNIK */
nav{--p:1;position:fixed;inset:0 0 auto 0;z-index:30;padding-top:env(safe-area-inset-top,0px);background:var(--kamen);border-bottom:1px solid rgba(11,11,12,calc(.12 * var(--p)))}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-height:44px}
.brand .mono{font-size:15px}
.brand .word{font-size:20px}
.links{display:flex;align-items:center;gap:32px}
.links a{text-decoration:none;font:600 .74rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--oniks);position:relative}
.links a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--zlato);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.links a:not(.cta):hover::after,.links a.on:not(.cta)::after{transform:scaleX(1)}
.links a.on{color:var(--smaragd)}
.links .cta{border:1px solid var(--smaragd);padding:10px 18px;color:var(--smaragd);transition:background .25s,color .25s}
.links .cta:hover,.links .cta.on{background:var(--smaragd);color:var(--kamen)}
/* MOBITEL: izbornik se otvara gumbom s tri crte (klasa js-menu znači da skripta radi; bez nje poveznice ostaju vidljive u drugom redu) */
.menu-btn{display:none}
@media(max-width:860px){
  .brand .word{font-size:17px}
  html:not(.js-menu) nav .wrap{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:12px;row-gap:12px}
  html:not(.js-menu) .links{width:100%;justify-content:space-between;gap:10px}
  html:not(.js-menu) .links a{font-size:.68rem;letter-spacing:.1em}
  html:not(.js-menu) .links .cta{padding:8px 12px}
  .js-menu nav .wrap{height:64px}
  .js-menu .menu-btn{display:grid;place-content:center;gap:6px;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:transparent;cursor:pointer}
  .js-menu .menu-btn span{display:block;width:24px;height:1.5px;background:var(--oniks);transition:transform .25s,opacity .2s}
  .js-menu nav.open .menu-btn span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .js-menu nav.open .menu-btn span:nth-child(2){opacity:0}
  .js-menu nav.open .menu-btn span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .js-menu .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--kamen);border-bottom:1px solid var(--linija);padding:8px var(--pad) 28px;max-height:calc(100vh - 64px);overflow:auto}
  .js-menu nav.open{z-index:40}
  .js-menu nav.open .links{display:flex}
  .js-menu .links a{font-size:.85rem;padding:18px 0;border-bottom:1px solid var(--linija)}
  .js-menu .links a:not(.cta)::after{bottom:12px;right:auto;width:36px}
  .js-menu .links .cta{margin-top:24px;padding:16px 18px;text-align:center;border-bottom:1px solid var(--smaragd)}
}

/* GUMBI */
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;font:600 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn.primary{background:var(--smaragd);border-color:var(--smaragd);color:var(--kamen)}
.btn.primary:hover{background:var(--oniks);border-color:var(--oniks)}
.btn.outline{background:transparent;border-color:rgba(11,11,12,.4);color:var(--oniks)}
.btn.outline:hover{border-color:var(--smaragd);color:var(--smaragd)}
.btn.line{background:transparent;border-color:var(--linija-tam);color:var(--kamen)}
.btn.line:hover{border-color:var(--zlato);color:var(--zlato)}

/* NASLOV SEKCIJE */
.head{display:grid;gap:22px;max-width:720px;margin-bottom:clamp(48px,7vw,80px)}
.head h2{font-size:clamp(2rem,4.2vw,3rem)}
.note-min{font:600 .74rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--grafit)}
.green .note-min{color:var(--tekst-tam)}

/* NASLOVNICA: HERO S KARUSELOM
   Pet slajdova, svaki za drugu vrstu posla: velika fotografija prostora, ispred nje laptop s primjerom stranice
   koja se sama skrola i mobitel s Google profilom. Skripta je u js/naslovnica.js.
   Primjer web stranice (.bw) i mobitel s profilom (.ph) su HTML; mjere unutar njih su u cqw,
   pa se cijeli prikaz skalira kao snimka zaslona. */

/* ---------- Prozor preglednika s primjerom stranice ---------- */
.bw{container-type:inline-size;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(11,11,12,.06),0 30px 70px -20px rgba(11,11,12,.35);border:1px solid rgba(11,11,12,.08)}
.bw__top{display:flex;align-items:center;gap:1.1cqw;height:5.4cqw;padding:0 2cqw;background:#F1EFEA;border-bottom:1px solid rgba(11,11,12,.07)}
.bw__top i{width:1.25cqw;height:1.25cqw;border-radius:50%;background:#D5D1C9}
.bw__url{margin-left:2cqw;flex:1;max-width:44cqw;height:3.2cqw;border-radius:1.6cqw;background:#fff;font:500 1.55cqw/3.2cqw var(--sans);color:var(--grafit);padding-left:2.4cqw}
.bw__view{position:relative;aspect-ratio:16/10;overflow:hidden}
.ss{position:absolute;inset:0 0 auto 0;font-family:var(--sans);color:var(--oniks);background:#FBFAF8;will-change:transform}
.ss__nav{display:flex;align-items:center;gap:3cqw;height:7cqw;padding:0 4cqw;font-size:1.7cqw}
.ss__nav b{font-size:2.2cqw;letter-spacing:-.02em;margin-right:auto}
.ss__links{display:flex;gap:2.6cqw;color:var(--grafit)}
.ss__btn{padding:.9cqw 2cqw;background:var(--smaragd);color:#fff;font-weight:600}
.ss__hero{position:relative;height:40cqw;margin:0 4cqw;overflow:hidden;border-radius:.8cqw}
.ss__hero img{width:100%;height:100%;object-fit:cover;display:block}
.ss__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.62),rgba(11,11,12,.05) 70%)}
.ss__copy{position:absolute;z-index:1;left:4cqw;bottom:4cqw;width:52cqw;display:grid;gap:1.4cqw;color:#fff}
.ss__kick{font:600 1.3cqw var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ss__copy strong{font:700 3.9cqw/1.08 var(--sans);letter-spacing:-.02em}
.ss__cta{justify-self:start;margin-top:.8cqw;padding:1.2cqw 2.4cqw;background:#fff;color:var(--oniks);font:600 1.5cqw var(--sans)}
.ss__body{display:grid;grid-template-columns:1fr 2.1fr;gap:4cqw;padding:5cqw 4cqw 3cqw}
.ss__h{display:block;font:600 1.3cqw var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grafit);margin-bottom:1.6cqw}
.ss__col ul{list-style:none;margin:0;padding:0;font-size:1.9cqw;font-weight:600}
.ss__col li{padding:1.3cqw 0;border-bottom:1px solid rgba(11,11,12,.1)}
.ss__gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
.ss__gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:.5cqw}
.ss__foot{display:flex;justify-content:space-between;gap:4cqw;margin:0;padding:3cqw 4cqw;background:var(--oniks);color:#B9B6AF!important;border-top:1px solid rgba(11,11,12,.1);font-size:1.6cqw;color:var(--grafit)}
.ss__foot span{color:#B9B6AF}.ss__foot span:first-child{color:#fff;font-weight:700}

/* ---------- Mobitel s Google poslovnim profilom ---------- */
.ph{container-type:inline-size;aspect-ratio:9/19;padding:3.2%;background:#141414;border-radius:15%/7.2%;
  box-shadow:0 0 0 1px #2a2a2a inset,0 40px 80px -24px rgba(11,11,12,.55)}
.ph__screen{position:relative;height:100%;overflow:hidden;border-radius:12.5%/5.9%;background:#F6F5F2;font-family:var(--sans);color:var(--oniks)}
.ph__status{display:flex;justify-content:space-between;align-items:center;height:12cqw;padding:0 9cqw;font:600 4.2cqw var(--sans)}
.ph__isl{width:26cqw;height:7.5cqw;border-radius:4cqw;background:#141414}
.gp__q{display:flex;align-items:center;gap:3cqw;margin:2cqw 5cqw 4cqw;height:11cqw;padding:0 4.5cqw;border-radius:6cqw;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12);font:500 4.3cqw var(--sans);white-space:nowrap;overflow:hidden}
.gp__q svg{flex:none;width:4.6cqw;height:4.6cqw;fill:none;stroke:var(--grafit);stroke-width:1.6}
.gp__map{display:block;width:100%;height:46cqw}
.gp__card{position:relative;margin:-6cqw 0 0;padding:5cqw 6cqw;background:#fff;border-radius:6cqw 6cqw 0 0;box-shadow:0 -2px 10px rgba(0,0,0,.06);display:grid;gap:1.6cqw}
.gp__fotke{display:grid;grid-template-columns:1.6fr 1fr;gap:1.8cqw;margin-bottom:2.4cqw}
.gp__fotke img{width:100%;height:36cqw;object-fit:cover;display:block;border-radius:3cqw}
.gp__ime{font:700 6.4cqw/1.15 var(--sans);letter-spacing:-.02em}
.gp__vrsta{font-size:4.2cqw;color:var(--grafit)}
.gp__open{font:600 4.2cqw var(--sans);color:var(--smaragd)}
.gp__akcije{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:3cqw}
.gp__akcije span{display:grid;place-items:center;height:10cqw;border-radius:5cqw;border:1px solid rgba(11,11,12,.16);font:600 3.7cqw var(--sans);color:var(--smaragd)}
.gp__akcije span:last-child{background:var(--smaragd);border-color:var(--smaragd);color:#fff}

/* Kontrole karusela: gumb za pauzu, brojač i crtice napretka */
.pk-ctrl{display:flex;align-items:center;gap:16px}
.pk-pause{width:44px;height:44px;margin:-8px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:inherit}
.pk-pause i{width:10px;height:12px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.pk-pause[aria-pressed="true"] i{width:0;height:0;border:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.pk-dots{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.pk-dots button{display:block;width:40px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.pk-dots button::before,.pk-dots button i{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:currentColor;opacity:.25}
.pk-dots button i{opacity:1;background:var(--zlato);transform:scaleX(0);transform-origin:left}
.pk-dots button.is-done i{transform:scaleX(1)}
.pk-dots button.is-active i{animation:pk-fill var(--slide-ms,6000ms) linear forwards}
.is-paused .pk-dots button.is-active i{animation-play-state:paused}
@keyframes pk-fill{to{transform:scaleX(1)}}
.pk-init [data-i],.pk-init [data-i] *{transition:none!important}
.pk-count{font:600 .74rem var(--sans);letter-spacing:.12em;font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .pk-dots button.is-active i{animation:none;transform:scaleX(1)}
}

/* dodatni dijelovi primjera stranice i profila */
.ss__info{display:grid;grid-template-columns:1.3fr 1fr;gap:4cqw;margin:0 4cqw;padding:4cqw 0 5cqw;border-top:1px solid rgba(11,11,12,.1);font-size:1.7cqw;color:var(--grafit)}
.ss__info .gp__map{height:20cqw;border-radius:.6cqw}
.ss__info p{margin:0 0 1.2cqw}
.ss__info p:first-of-type{color:var(--smaragd);font-weight:600}
.ss__cta--tam{display:inline-block;margin-top:1.4cqw;background:var(--smaragd);color:#fff}
.gp__h{display:block;font:600 3.2cqw var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--grafit);margin:4cqw 0 2cqw}
.gp__usl i{display:inline-block;font-style:normal;margin:0 1.6cqw 1.6cqw 0;padding:1.6cqw 3cqw;border-radius:4cqw;background:#F1EFEA;font:500 3.6cqw var(--sans)}
.gp__web{font:500 3.9cqw var(--sans);color:var(--smaragd);border-top:1px solid rgba(11,11,12,.1)}

.b-hero{--slide-ms:7000ms;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:calc(72px + env(safe-area-inset-top,0px) + clamp(24px,4vh,56px)) 0 clamp(56px,8vh,96px);overflow:hidden}
.b-hero__in{width:100%;display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.b-copy{display:grid;gap:24px;align-content:center}
.b-copy h1{font-size:.74rem;line-height:1.4;letter-spacing:.12em;font-weight:600}
.b-naslovi{display:grid}
.b-nas{grid-area:1/1;margin:0;font:800 clamp(2.1rem,3.8vw,3.3rem)/1.02 var(--sans);letter-spacing:-.03em;text-wrap:balance;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .8s cubic-bezier(.22,.61,.36,1)}
.b-nas span{display:block;margin-bottom:16px;font:600 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--smaragd)}
.b-nas.is-active{opacity:1;transform:none;transition-delay:.3s}
.b-lead{color:var(--grafit);max-width:32em}

/* Scena: fotografija kao zid, ispred laptop i mobitel */
.b-scena{position:relative;aspect-ratio:7/6}
.b-zid{position:absolute;top:0;right:0;width:78%;height:86%;overflow:hidden;background:#d8d4cc}
.b-foto{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease}
.b-foto img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.b-foto.is-active{opacity:1}
.b-foto.is-active img{animation:b-kb calc(var(--slide-ms) + 1500ms) ease-out forwards}
@keyframes b-kb{to{transform:scale(1)}}

.b-lap{position:absolute;left:0;bottom:9%;width:78%;filter:drop-shadow(0 40px 50px rgba(11,11,12,.32))}
.b-lap__ekran{position:relative;padding:2.2% 2.2% 2.6%;background:#161616;border-radius:14px 14px 4px 4px;aspect-ratio:16/10.9}
.b-lap__ekran::before{content:"";position:absolute;top:.9%;left:50%;width:.9%;aspect-ratio:1;border-radius:50%;background:#2c2c2c;transform:translateX(-50%)}
.b-lap__baza{height:0;padding-bottom:3.4%;margin:0 -7%;background:linear-gradient(#d9d6d0,#bdb9b1);border-radius:0 0 18px 18px/0 0 60% 60%;position:relative}
.b-lap__baza::before{content:"";position:absolute;left:50%;top:0;width:15%;height:40%;transform:translateX(-50%);background:#a9a59d;border-radius:0 0 8px 8px}
.b-ekr{position:absolute;inset:2.2% 2.2% 2.6%;border-radius:3px;box-shadow:none;border:0;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1),opacity 0s .9s}
.b-ekr .bw__view{aspect-ratio:auto;position:absolute;inset:5.4cqw 0 0 0}
.b-ekr.is-active{opacity:1;clip-path:inset(0);transition:clip-path 1s .15s cubic-bezier(.7,0,.2,1),opacity 0s;z-index:1}
.b-ekr.was-active{opacity:1;clip-path:inset(0)}
.b-ekr.is-active .ss{animation:b-skrol calc(var(--slide-ms) - 400ms) 1.6s cubic-bezier(.45,0,.25,1) forwards}
@keyframes b-skrol{0%,18%{transform:none}62%{transform:translateY(-40%)}100%{transform:translateY(-40%)}}

.b-tel{position:absolute;right:4%;bottom:0;width:23%;aspect-ratio:9/19}
.b-ph{position:absolute;inset:0;opacity:0;transform:translateY(40px);transition:opacity .6s,transform .9s cubic-bezier(.22,.61,.36,1)}
.b-ph.is-active{opacity:1;transform:none;transition-delay:.7s;z-index:1}
.is-paused .b-ekr.is-active .ss,.is-paused .b-foto.is-active img{animation-play-state:paused}

@media(max-width:900px){
  .b-hero{min-height:0;display:block}
  .b-hero__in{grid-template-columns:1fr}
  .b-scena{order:-1;aspect-ratio:1/1;margin:0 calc(-1 * var(--pad)) 8px}
  .b-zid{width:86%;height:80%}
  .b-lap{width:84%;left:3%}
  .b-tel{width:27%;right:3%}
}

/* Traka "za koga radimo": fotografije koje polako putuju */
.b-traka{background:var(--kamen-svj);padding-bottom:clamp(80px,10vw,120px)}
.b-traka .head{margin-bottom:48px}
.b-film{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.b-film__red{display:flex;gap:20px;width:max-content;list-style:none;margin:0;padding:0;animation:b-film 60s linear infinite}
.b-film:hover .b-film__red{animation-play-state:paused}
.b-film li{position:relative;width:clamp(220px,22vw,320px);flex:none;margin:0}
.b-film li:nth-child(even){margin-top:48px}
.b-film img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.b-film span{display:block;margin-top:14px;font:600 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase}
.b-film span::before{content:"";display:inline-block;vertical-align:middle;width:24px;height:1px;margin-right:10px;background:var(--zlato)}
@keyframes b-film{to{transform:translateX(calc(-50% - 10px))}}

@media(prefers-reduced-motion:reduce){
  .b-nas,.b-foto,.b-ekr,.b-ph{transition:none!important}
  .b-foto img,.b-ekr .ss{animation:none!important;transform:none!important}
  .b-film{overflow-x:auto}
  .b-film__red{animation:none}
}

#bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:2px;width:0;z-index:45;background:var(--zlato)}
/* NASLOVNICA: USLUGE */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(40px,7vw,96px);align-items:start}
.split .head{margin-bottom:0}
.split .head p{color:var(--grafit);max-width:30em}
.svc-list{border-top:1px solid var(--linija)}
.svc{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:6px 16px;padding:32px 0;border-bottom:1px solid var(--linija)}
.svc .n{font:600 .95rem/1.6 var(--sans);color:var(--smaragd)}
.svc h3{font-size:1.45rem}
.svc p{grid-column:2;color:var(--grafit);font-size:.98rem}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* NASLOVNICA: KAKO RADIMO */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;counter-reset:s}
.step{display:grid;gap:12px;align-content:start;padding-top:28px;border-top:1px solid var(--linija);position:relative}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-1px;left:0;transform:translateY(calc(-100% - 10px));font:600 .74rem/1 var(--sans);letter-spacing:.12em;color:var(--grafit)}
.step::after{content:"";position:absolute;top:-1px;left:0;width:48px;height:1px;background:var(--zlato)}
.step h3{font-size:1.5rem}
.step p{color:var(--grafit)}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:64px}}

/* PAKETI (smaragdna traka) */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:40px 32px 32px;border:1px solid var(--linija-tam);min-width:0}
.plan h3{font-size:1.7rem}
.price{margin-top:14px;font:600 3rem/1 var(--sans);letter-spacing:-.03em;color:var(--zlato);font-variant-numeric:tabular-nums}
.price small{font:400 .85rem var(--sans);letter-spacing:0;color:var(--tekst-tam);margin-left:6px}
.plan .from{min-height:1.6em;margin:16px 0 22px;font-weight:500}
.plan ul{list-style:none;padding:24px 0 0;margin:0;flex:1;display:grid;gap:14px;align-content:start;border-top:1px solid var(--linija-tam)}
.plan li{position:relative;padding-left:24px;font-size:.94rem;color:var(--tekst-tam)}
.plan li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--zlato)}
.plan .btn{margin-top:32px;width:100%}
/* Preporučeni paket je obrnut: kamen na smaragdu */
.plan.hot{background:var(--kamen);color:var(--oniks);border:1px solid var(--zlato)}
.plan.hot .price{color:var(--smaragd)}
.plan.hot .price small,.plan.hot li{color:var(--grafit)}
.plan.hot ul{border-top-color:var(--linija)}
.plan .tag{position:absolute;top:0;left:32px;transform:translateY(-50%);background:var(--zlato);color:var(--oniks);padding:2px 10px;font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase}
.once{max-width:40em;margin:40px auto 0;text-align:center;color:var(--tekst-tam)}
.once-btn{margin-top:24px;text-align:center}
@media(max-width:960px){.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* POZIV NA KONTAKT I OBRAZAC */
.final .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,96px);align-items:start}
.final h1,.final h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:22px 0 24px}
.final .lead{color:var(--grafit);max-width:30em}
.final .sig{margin-top:40px;font:600 1.25rem var(--sans);color:var(--smaragd)}
.final .cta-box{align-self:center}
@media(max-width:860px){.final .wrap{grid-template-columns:1fr}}
.kontakt-page .final{padding-top:calc(150px + env(safe-area-inset-top,0px))}
form{display:grid;gap:22px;min-width:0}
.field{display:grid;gap:8px}
label{font:600 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--grafit)}
input,textarea{width:100%;padding:12px 0;border:0;border-bottom:1px solid rgba(11,11,12,.3);background:transparent;color:var(--oniks);font:400 1rem var(--sans);border-radius:0;transition:border-color .2s}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--smaragd)}
textarea{min-height:120px;resize:vertical}
form .btn{margin-top:8px;justify-self:start}
#msg{min-height:1.5em;font-size:.9rem;color:var(--grafit)}
.err{font-size:.85rem;color:#8C2F2F}
.err:empty{display:none}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-bottom:2px solid #8C2F2F}
#msg a{color:var(--smaragd)}

/* PODSTRANICE: ZAGLAVLJE */
.top{padding-block:calc(150px + env(safe-area-inset-top,0px)) clamp(56px,7vw,88px)}
.top h1{font-size:clamp(2.4rem,5.5vw,3.6rem);margin:24px 0 22px}
.top p{max-width:640px;color:var(--grafit)}
.back{margin-top:44px}

/* CJENIK: TABLICE */
.tbl{border-top:1px solid var(--linija)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--linija)}
.row .n{font-weight:600}
.row .d{grid-column:1;max-width:44em;font-size:.9rem;color:var(--grafit)}
.row .c{grid-row:1;grid-column:2;text-align:right;font:600 1.2rem var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .c small{display:block;font:600 .7rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--grafit)}
@media(max-width:600px){.row .c{font-size:1.05rem}}
.promo{margin-top:48px;padding:32px;border:1px solid var(--zlato);display:grid;gap:10px}
.promo .k{font:600 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--smaragd)}
.promo p{font:500 1.15rem/1.5 var(--sans)}
.notes{margin-top:40px;display:grid;gap:8px;font-size:.9rem;color:var(--grafit)}

/* USLUGE: POPIS */
.slist{display:grid;border-top:1px solid var(--linija)}
.sitem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px 48px;padding:44px 0;border-bottom:1px solid var(--linija)}
.sitem .n{font:600 .95rem var(--sans);color:var(--smaragd);display:block;margin-bottom:12px}
.sitem h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.sitem p{color:var(--grafit);max-width:36em}
.sitem p + p{margin-top:14px}
.sitem .pr{font:600 .74rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--oniks)}
@media(max-width:820px){.sitem{grid-template-columns:1fr;padding:34px 0}}

/* O NAMA */
.about-p{margin-top:28px;font:500 clamp(1.45rem,2.9vw,2.2rem)/1.32 var(--sans);letter-spacing:-.015em;max-width:26em}
.facts{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:1px solid var(--linija);padding-top:32px}
.facts h3{font-size:1.2rem;margin-bottom:8px}
.facts p{color:var(--grafit)}
@media(max-width:820px){.facts{grid-template-columns:1fr}}

/* PRAVNE INFORMACIJE */
.legal h3{font-size:1.1rem;margin:32px 0 10px}
.legal h3:first-child{margin-top:0}
.legal .sitem h2 + .pr{margin-top:14px;color:var(--grafit)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 24px;margin:0}
.kv dt{font:600 .72rem/1.65rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--grafit)}
.kv dd{margin:0}
@media(max-width:520px){.kv{grid-template-columns:1fr;gap:2px}.kv dd{margin-bottom:12px}}
.privacy-note{font-size:.85rem;color:var(--grafit)}

/* PODNOŽJE */
footer{background:var(--oniks);color:var(--tekst-tam);font-size:.85rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;padding-block:32px calc(32px + env(safe-area-inset-bottom,0px))}
footer .f-brand{display:flex;align-items:center;gap:14px}
footer .mono{font-size:13px}
footer .f-link{color:var(--kamen);text-underline-offset:4px;text-decoration-thickness:1px}
footer .f-sl{font:600 .7rem var(--sans);letter-spacing:.12em;text-transform:uppercase}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Skrivene usluge (oglasi, AI): elementi s atributom hidden ne prikazuju se ni kad im klasa zadaje display. Vidi SKRIVENE-USLUGE.md. */
[hidden]{display:none!important}
@media(min-width:961px){.plans[data-paketa="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin:0 auto}}