/* 365activation — cenovnik u svetloj liniji (odobren, Nikola 14. 10.: kartice + sklopivo poređenje). Okvir: okvir-sajta.css. */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Geist,system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--zel);font-weight:600;text-decoration:none}
h1{font-weight:600;font-size:var(--h1);line-height:1.06;letter-spacing:-.025em;margin:20px 0 22px}
h1 em{font-style:normal;color:var(--zel)}
h2{font-weight:600;font-size:var(--h2);line-height:1.12;letter-spacing:-.02em;margin-top:14px}
h3{font-weight:600;font-size:var(--h3);letter-spacing:-.01em;line-height:1.3}
p{font-size:var(--tekst);line-height:1.5;color:var(--siva)}
.sitno{font-size:var(--sitno);line-height:1.5;color:var(--siva)}
.num{font-variant-numeric:tabular-nums}
section{padding:80px 0}
.crta{border-top:1px solid var(--linija);padding-top:72px}
.s-zag{max-width:760px}.s-zag p{margin-top:14px}
ul{list-style:none}
/* vrh */
.vrh{padding:64px 0 56px}
.vrh .sirina:first-child{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.vrh .dugmad{margin-top:30px}
.lepeza{position:relative;height:420px;overflow:hidden}
.lepeza img{position:absolute;width:150px;border-radius:18px;box-shadow:var(--senka2);top:50%;left:50%}
.lepeza img:nth-child(1){transform:translate(-190%,-46%) rotate(-10deg)}
.lepeza img:nth-child(2){transform:translate(-120%,-52%) rotate(-5deg)}
.lepeza img:nth-child(3){transform:translate(-50%,-56%);z-index:2;width:170px}
.lepeza img:nth-child(4){transform:translate(20%,-52%) rotate(5deg)}
.lepeza img:nth-child(5){transform:translate(90%,-46%) rotate(10deg)}
.cinj{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linija);border-bottom:1px solid var(--linija);margin-top:40px}
.cinj div{padding:26px 0}.cinj div+div{border-left:1px solid var(--linija);padding-left:28px}
.cinj b{display:block;font:600 32px Geist;letter-spacing:-.02em;white-space:nowrap}
.cinj span{font-size:14px;color:var(--siva)}
/* paketi A: kartice */
.paketi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;align-items:start}
.pk{border:1px solid var(--linija);border-radius:22px;padding:26px 26px 28px;position:relative;background:#fff}
.pk.pop{border:2px solid var(--zel);box-shadow:0 18px 40px rgba(18,168,106,.12)}
.pk .znak{position:absolute;top:-13px;left:26px;background:var(--zel);color:#fff;font:500 12px "Geist Mono";letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:20px}
.pk .ime{font:500 14px "Geist Mono";letter-spacing:.12em;color:var(--siva)}
.pk .cena{font:600 40px Geist;letter-spacing:-.03em;margin:10px 0 2px}
.pk .cena small{font:400 14px Geist;color:var(--siva);letter-spacing:0;margin-left:6px}
.pk .za{font-size:16px;color:var(--ink);margin-top:10px;line-height:1.45}
.pk .za2{font-size:14px;margin-top:6px}
.pk .dug{width:100%;margin:22px 0 6px}
.pk h4{font:500 12px "Geist Mono";letter-spacing:.1em;text-transform:uppercase;color:var(--siva2);margin:22px 0 10px}
.pk li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:14px;line-height:1.45;padding:4px 0}
.pk li::before{content:"";width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2312A86A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.pk .kred{margin-top:16px;background:var(--povrs);border-radius:12px;padding:12px 14px;font-size:14px}
.pk .kred b{font-weight:600}
.pk .tel{display:block;width:84px;border-radius:12px;box-shadow:var(--senka);float:right;margin:-8px -6px 8px 12px}
.napom{margin-top:26px;font-size:14px}
/* paketi B: uporedna tabela */
.uporedi{margin-top:40px;border:1px solid var(--linija);border-radius:22px;overflow:hidden}
.uporedi table{width:100%;border-collapse:collapse}
.uporedi th,.uporedi td{padding:14px 20px;text-align:left;font-size:14px;vertical-align:top;border-bottom:1px solid var(--linija)}
.uporedi thead th{vertical-align:bottom;padding:26px 20px 22px;background:#fff}
.uporedi thead th.pop{background:var(--mint)}
.uporedi td.pop{background:#F4FBF7}
.uporedi .grp td{font:500 12px "Geist Mono";letter-spacing:.1em;text-transform:uppercase;color:var(--siva2);background:var(--povrs);padding:10px 20px}
.uporedi tbody th{font-weight:400;color:var(--siva);width:28%}
.uporedi .ime{font:500 14px "Geist Mono";letter-spacing:.12em;color:var(--siva)}
.uporedi .cena{font:600 32px Geist;letter-spacing:-.03em;margin:6px 0}
.uporedi .cena small{font:400 14px Geist;color:var(--siva)}
.uporedi .za{font-size:14px;color:var(--siva);font-weight:400;margin-bottom:14px;max-width:240px;line-height:1.4}
.uporedi .dug{min-height:44px;font-size:14px;padding:0 20px}
.da{color:var(--zel);font-weight:600}.ne{color:#B6C0BB}
.pop-z{display:inline-block;background:var(--zel);color:#fff;font:500 12px "Geist Mono";letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:20px;margin-left:8px;vertical-align:4px}
.seg{display:none}
/* katalog */
.kat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.kg{border:1px solid var(--linija);border-radius:18px;padding:22px}
.kg .z{display:flex;justify-content:space-between;align-items:center;gap:8px}
.oz{font:500 12px "Geist Mono";letter-spacing:.08em;color:var(--zel);border:1px solid var(--zel);border-radius:20px;padding:2px 8px;white-space:nowrap}
.kg .sl{display:flex;margin:16px 0 14px}.kg .sl img{width:46px;border-radius:7px;box-shadow:var(--senka);margin-right:-10px;border:2px solid #fff}
.kg li{font-size:14px;line-height:1.45;color:var(--siva);padding:3px 0}
.kg li b{color:var(--ink);font-weight:500}
/* krediti */
.kr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:40px}
.kut{border:1px solid var(--linija);border-radius:18px;padding:24px}
.kut p{font-size:14px;margin-top:6px}
.tr{display:grid;grid-template-columns:1fr auto;padding:9px 0;border-bottom:1px solid var(--linija);font-size:14px}
.tr b{font-weight:600}
.kut li{font-size:14px;color:var(--siva);padding:4px 0}
table.t{width:100%;border-collapse:collapse;margin-top:12px}
table.t th{font:500 12px "Geist Mono";letter-spacing:.08em;text-transform:uppercase;color:var(--siva2);text-align:left;padding:6px 0;border-bottom:1px solid var(--linija)}
table.t td{font-size:14px;padding:9px 0;border-bottom:1px solid var(--linija);vertical-align:top}
table.t td:last-child,table.t th:last-child{text-align:right;font-weight:600;white-space:nowrap}
table.t td small{display:block;color:var(--siva);font-size:12px}
.racun{display:grid;grid-template-columns:1.3fr 1fr;gap:0;margin-top:20px;border-radius:22px;overflow:hidden;border:1px solid var(--linija)}
.racun .polja{padding:28px;display:grid;gap:22px}
.racun label{display:block;font:500 14px Geist;margin-bottom:10px}
.izb{display:flex;gap:8px;flex-wrap:wrap}
.izb button{font:500 14px Geist;border:1px solid var(--linija);background:#fff;border-radius:22px;padding:10px 16px;color:var(--ink)}
.izb button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--zel)}
.rez{background:var(--mint);padding:28px;display:flex;flex-direction:column;justify-content:center}
.rez .r1{font:500 12px "Geist Mono";letter-spacing:.1em;text-transform:uppercase;color:var(--zel)}
.rez .r2{font:600 40px Geist;letter-spacing:-.03em;margin:8px 0}
.rez .r3{font-size:14px;color:var(--siva)}
/* važenje, usluge */
.dva{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.ukl{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
.ukl span{font-size:12px;background:var(--povrs);border-radius:20px;padding:6px 11px}
.velika{margin-top:20px;border:1px solid var(--linija);border-radius:18px;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.velika b{font-size:19px}.velika .c{font:600 20px Geist;white-space:nowrap}
/* koraci, pitanja, kraj */
.koraci{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.korak{border-top:2px solid var(--zel);padding-top:20px}
.korak .n{font:400 40px/1 Geist;color:var(--zel);margin-bottom:14px}
.korak p{font-size:14px;margin-top:8px}
.pit{margin-top:32px;border-top:1px solid var(--linija)}
.pit details{border-bottom:1px solid var(--linija)}
.pit summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:500 19px Geist;position:relative}
.pit summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 24px Geist;color:var(--zel)}
.pit details[open] summary::after{content:"–"}
.pit details p{padding:0 0 20px;font-size:16px;max-width:760px}
.kraj{background:var(--mint);border-radius:28px;padding:64px 40px;text-align:center}
.kraj p{max-width:600px;margin:14px auto 28px}.kraj .dugmad{justify-content:center}
.kraj .dug:not(.z){background:#fff}
.bez{text-align:center;margin-top:18px;font-size:14px}
/* B: varijanta paketa */

@media (max-width:760px){
 :root{--h1:32px;--h2:24px;--h3:20px;--tekst:16px;--sitno:14px}
 section{padding:52px 0}.crta{padding-top:48px}.vrh{padding:28px 0 36px}
 .vrh .sirina:first-child{grid-template-columns:1fr;gap:12px}
 .dugmad{flex-direction:column}.dugmad .dug{width:100%}
 .lepeza{height:260px}.lepeza img{width:96px}.lepeza img:nth-child(3){width:112px}
 .cinj{grid-template-columns:1fr 1fr}.cinj div{padding:16px 0}.cinj div+div{border-left:0;padding-left:0}.cinj div:nth-child(2n){border-left:1px solid var(--linija);padding-left:16px}.cinj div:nth-child(n+3){border-top:1px solid var(--linija)}.cinj b{font-size:20px}.cinj span{font-size:12px}
 .paketi{grid-template-columns:1fr;gap:26px}
 .kat,.kr3,.dva,.tri,.koraci{grid-template-columns:1fr}
 .kat{grid-template-columns:1fr 1fr;gap:12px}.kg{padding:16px}.kg .z{flex-direction:column;align-items:flex-start}
 .racun{grid-template-columns:1fr}
 .velika{flex-direction:column;align-items:flex-start}
 .kraj{padding:44px 20px}
 /* B na telefonu: izbor paketa umesto tabele */
 .vB .seg{display:flex;gap:6px;margin-top:28px;background:var(--povrs);border-radius:26px;padding:5px}
 .vB .seg button{flex:1;border:0;background:none;font:600 14px Geist;padding:11px;border-radius:22px;color:var(--siva)}
 .vB .seg button.on{background:#fff;color:var(--ink);box-shadow:var(--senka)}
 .vB .uporedi table th:not(:first-child):not(.vid),.vB .uporedi table td:not(.vid){display:none}
 .vB .uporedi tbody th{width:50%}
 .vB .uporedi .grp td{display:table-cell!important}
}

h1 .rok{display:block;color:var(--zel);font-size:32px;letter-spacing:-.015em;margin-top:14px;line-height:1.15}
.nema{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font:500 14px Geist;color:var(--ink)}
.nema li::before{content:"✓";color:var(--zel);font-weight:600;margin-right:8px}
.s-pak{padding-top:24px}
.p2 .pk{display:flex;flex-direction:column}
.p2 .glavno{margin:18px 0 22px;flex:1}
.p2 .glavno li{font-size:16px;padding:7px 0;border-top:1px solid var(--linija)}
.p2 .glavno li:first-child{border-top:0}
.p2 .glavno b{font-weight:600}
.p2 .dug{margin:0}
.sklop{margin-top:28px;border:1px solid var(--linija);border-radius:18px}
.sklop>summary{list-style:none;cursor:pointer;padding:18px 22px;font:600 16px Geist;display:flex;justify-content:space-between;align-items:center}
.sklop>summary::after{content:"+";font:400 24px Geist;color:var(--zel)}
.sklop[open]>summary::after{content:"–"}
.sklop .uporedi{margin:0 18px 18px}
.sklop>p{padding:0 22px 20px}
.red{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.galer{display:grid;grid-template-columns:repeat(8,1fr);gap:18px;margin-top:40px}
.galer a{display:block;color:var(--ink);font:500 14px Geist;text-align:center}
.galer img{width:100%;border-radius:16px;box-shadow:var(--senka2);display:block;margin-bottom:12px;transition:transform .3s}
.galer a:hover img{transform:translateY(-5px)}
.jedn .kut{position:relative}
.br{position:absolute;top:22px;right:22px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--zel);color:var(--zel);font:600 14px/27px Geist;text-align:center}
.u3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px}
.u3 b{display:block;font:600 32px Geist;letter-spacing:-.02em}.u3 span{font:500 12px "Geist Mono";letter-spacing:.1em;color:var(--siva)}
.velik{font:600 32px Geist!important;color:var(--ink)!important;letter-spacing:-.02em;margin:14px 0 6px}.velik small{font:400 14px Geist;color:var(--siva)}
.istak{margin-top:20px;background:var(--mint);border-radius:16px;padding:20px 24px;font-size:16px;line-height:1.5;color:var(--ink)}
.istak b{font-weight:600}
.dva-v{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.prod{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prod div{border:1px solid var(--linija);border-radius:16px;padding:20px}
.prod b{display:block;font:600 19px Geist}.prod span{display:block;font:600 32px Geist;letter-spacing:-.02em;margin-top:6px;color:var(--zel)}
.prod small{display:block;font-size:12px;color:var(--siva);margin-top:6px;line-height:1.35}
.teh{margin-top:26px;color:var(--siva2)}
.koraci{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){
 .galer{grid-template-columns:repeat(2,1fr);gap:14px}
 .red{display:block}.red>a{display:inline-block;margin-top:10px}
 .dva-v{grid-template-columns:1fr;gap:20px}.prod{grid-template-columns:1fr}
 .sklop .uporedi{margin:0 10px 10px}
 .seg{display:flex;gap:6px;margin:0 10px 12px;background:var(--povrs);border-radius:26px;padding:5px}
 .seg button{flex:1;border:0;background:none;font:600 14px Geist;padding:11px;border-radius:22px;color:var(--siva)}
 .seg button.on{background:#fff;color:var(--ink);box-shadow:var(--senka)}
 .uporedi table th:not(:first-child):not(.vid),.uporedi table td:not(.vid){display:none}
 .uporedi .grp td{display:table-cell!important}.uporedi tbody th{width:50%}
 .u3 b{font-size:24px}
 .koraci{grid-template-columns:1fr}
}

.sklop .seg{display:none}
.zag-pak-ok{}
.sklop .t{margin:0}
.sklop-kr{padding:0 22px 22px}
.sklop-kr .kut{margin-top:4px}
.racun label{display:block}
.racun .vr{font-weight:600}
@media (max-width:760px){.sklop .seg{display:flex}.sklop-kr{padding:0 12px 14px}}
.red>a{padding:12px 0}
input[type=range]{height:44px}
.sklop-kr table{width:100%;border-collapse:collapse;margin-top:12px}
.sklop-kr th{font:500 12px "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--siva2);text-align:left;padding:6px 0;border-bottom:1px solid var(--linija)}
.sklop-kr td{font-size:14px;padding:9px 8px 9px 0;border-bottom:1px solid var(--linija);vertical-align:top}
.sklop-kr td.c,.sklop-kr th:last-child{text-align:right!important;font-weight:600;white-space:nowrap;padding-right:0}
.sklop-kr td small{display:block;color:var(--siva);font-size:12px}
.sklop-kr .racun{margin-top:20px}
@media (max-width:760px){.uporedi tbody th{width:58%!important}.rez .r2{font-size:40px}}
/* poređenje: samo link ispod kartica, tabela bez ponovljenih kartica (izmena 14. 10.) */
.sklop.poredi{border:0;margin-top:22px}
.sklop.poredi>summary{display:inline-flex;gap:10px;padding:12px 0;color:var(--zel);font:600 16px Geist,system-ui,sans-serif}
.sklop.poredi>summary::after{font-size:20px;line-height:1}
.sklop.poredi .uporedi{margin:12px 0 0}
.uporedi thead th{padding:16px 20px;font:500 12px "Geist Mono",monospace;letter-spacing:.1em;color:var(--siva);vertical-align:middle}
.uporedi thead th.pop{color:var(--zel)}
@media (max-width:760px){.sklop.poredi .seg{margin:6px 0 12px}.sklop.poredi .uporedi{margin:0}}
/* galerija: ekrani veći (7 + Vaša ideja u redu), kartica „Vaša ideja“ kao na početnoj */
.galer{grid-template-columns:repeat(7,1fr);gap:16px}
.galer .ideja{aspect-ratio:360/779;background:#F2FBF6;border:2px solid var(--zel);border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;padding:16px 14px;text-align:left;margin-bottom:12px}
.galer .ideja .plus{width:36px;height:36px;border-radius:50%;background:var(--zel);color:#fff;font:400 24px/36px Geist;text-align:center}
.galer .ideja b{font:600 19px/1.2 Geist;color:var(--ink)}
.galer .ideja .dno{display:flex;justify-content:space-between;align-items:center;gap:6px;font:600 12px Geist;color:var(--zel);white-space:nowrap}
.galer .ideja .str{flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--zel);font:600 14px/25px Geist;text-align:center}
@media (max-width:1100px){.galer{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.galer{grid-template-columns:repeat(2,1fr)}}
/* cenovnik v4: MINI kao četvrta kartica, produženja u dva reda (14. 10.) */
.paketi.p2{grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.p2 .pk{padding:24px 22px 24px}
.p2 .pk .cena{font-size:40px}
.p2 .pk .znak{left:22px}
.p2 .glavno li{font-size:14px}
.pk .bez-st{font-size:14px;color:var(--siva);margin:-10px 0 18px}
.prod2{display:grid;gap:12px}
.prod2 .pr{border:1px solid var(--linija);border-radius:16px;padding:16px 20px 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px}
.prod2 .pr-ime{grid-column:1/-1;font:500 12px "Geist Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--siva);margin-bottom:6px}
.prod2 b{display:block;font:600 16px Geist}.prod2 span{display:block;font:600 24px Geist;letter-spacing:-.02em;margin-top:2px;color:var(--zel)}
.prod2>small{font-size:12px;color:var(--siva);line-height:1.35}
@media (max-width:1100px){.paketi.p2{grid-template-columns:repeat(2,1fr);gap:26px 16px}}
@media (max-width:760px){.paketi.p2{grid-template-columns:1fr;gap:26px}.prod2 .pr{padding:14px 16px 16px;gap:4px 10px}.prod2 b{font-size:14px}.prod2 span{font-size:24px}.seg button{padding:11px 4px;font-size:14px}}
.prod2 .pr-opis{grid-column:1/-1;font-size:14px;color:var(--siva);margin:-4px 0 8px;line-height:1.4}