/* Stranice grana program-za-* (R2): isti stil kao naslovnica R1c. Tokeni i komponente su preuzeti iz landing.html. */
@font-face{font-family:'Plex zamjena';src:local('Arial'),local('ArialMT'),local('Roboto');font-weight:400 500;size-adjust:101.2%;ascent-override:101%;descent-override:27%;line-gap-override:0%;}
@font-face{font-family:'Plex zamjena';src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold');font-weight:600 700;size-adjust:98.5%;ascent-override:104%;descent-override:28%;line-gap-override:0%;}
:root{
  --pozadina:#ffffff;
  --meko:#f3f6f6;
  --tinta:#17232c;
  --sivo:#56666d;
  --crta:#e6e2d8;
  --crta-jaka:#c9d3d5;
  --teal:#0f7c80;
  --teal-tamni:#0b6467;
  --teal-blijedi:#e8f3f2;
  --hero-gore:#118a8e;
  --hero-dolje:#0b5f62;
  --toplo:#f8f6f1;
  --noc:#13222b;
  --noc-kartica:#1d2f39;
  --na-noci:#b9c6cb;
  --teal-svijetli:#5fc4c0;
  --font:'IBM Plex Sans','Plex zamjena',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sirina:1200px;
  --rub:max(16px,env(safe-area-inset-left,0px));
  --radius:8px;
  --radius-velik:12px;
  --gumb:48px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{background:var(--toplo);color:var(--tinta);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--font);color:var(--tinta);font-weight:600;}
h3{font-size:18px;line-height:1.35;margin:0 0 6px;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.container{max-width:var(--sirina);margin:0 auto;padding-left:var(--rub);padding-right:var(--rub);}
p a,li a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;}

/* ─── Gumbi ─── */
.gumb{display:inline-flex;align-items:center;justify-content:center;min-height:var(--gumb);padding:0 22px;border-radius:var(--radius);background:var(--teal);border:1px solid var(--teal);color:#fff;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;}
.gumb:hover{background:var(--teal-tamni);border-color:var(--teal-tamni);}
.gumb-bijeli{min-height:52px;padding:0 28px;border-radius:10px;background:#fff;border-color:#fff;color:var(--teal-tamni);font-weight:700;}
.gumb-bijeli:hover{background:var(--teal-blijedi);border-color:var(--teal-blijedi);color:var(--teal-tamni);}

/* ─── Izbornik ─── */
.nav{position:sticky;top:0;z-index:100;background:var(--toplo);border-bottom:1px solid var(--crta);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;}
.nav-logo{font-size:20px;font-weight:600;color:var(--tinta);letter-spacing:-.01em;min-height:var(--gumb);display:inline-flex;align-items:center;}
.nav-logo span{color:var(--teal);}
.nav-links{display:flex;align-items:center;gap:24px;}
.nav-links a{font-size:16px;color:var(--sivo);min-height:var(--gumb);display:inline-flex;align-items:center;}
.nav-links a:hover{color:var(--tinta);}
.nav-links a.gumb{color:#fff;}
.nav-menu-btn{display:none;width:var(--gumb);height:var(--gumb);background:none;border:none;cursor:pointer;padding:12px;position:relative;z-index:201;}
.nav-menu-btn span{display:block;width:22px;height:2px;background:var(--tinta);margin:5px 0;border-radius:2px;}

/* ─── Hero grane: teal, bijeli tekst u sredini, a kartica s glavnim isječkom prelazi preko donjeg ruba ─── */
.hero{padding:clamp(28px,3vw,40px) 0 0;background:linear-gradient(180deg,var(--hero-gore) 0%,var(--teal) 55%,var(--hero-dolje) 100%);color:#fff;text-align:center;overflow:hidden;}
.hero-inner{max-width:860px;}
.mrvice{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:0 0 28px;font-size:15px;color:rgba(255,255,255,.8);}
.mrvice a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.hero .oznaka{color:#d5f0ee;margin-bottom:12px;}
.hero h1{color:#fff;font-size:clamp(38px,5.2vw,64px);font-weight:700;line-height:1.06;letter-spacing:-.025em;margin:0 auto 18px;text-wrap:balance;}
.hero-kratko{max-width:36em;margin:0 auto 28px;font-size:clamp(17px,1.4vw,19px);line-height:1.6;opacity:.92;}
.hero-gumbi{display:flex;flex-direction:column;align-items:center;gap:6px;}
.hero-demo{display:inline-flex;align-items:center;min-height:var(--gumb);color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px;}
.hero .sitno{margin:2px 0 0;font-size:16px;line-height:1.5;opacity:.85;}
.hero-isjecak{position:relative;width:min(980px,calc(100% - 2 * var(--rub)));margin:clamp(32px,4vw,48px) auto 0;}
.hero-isjecak::before{content:"";position:absolute;left:-100vw;right:-100vw;top:55%;bottom:0;background:var(--toplo);}
.hero-isjecak .isjecak{position:relative;margin:0;text-align:left;}

/* ─── Blokovi: oznaka u tealu, H2, uvod; izmjena toplo i bijelo ─── */
.oznaka{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:0 0 10px;}
.blok{padding:clamp(56px,5vw,80px) 0;}
.blok-bijeli{background:#fff;}
.blok h2{font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance;}
.blok .uvod{max-width:62ch;margin:0 0 24px;color:var(--sivo);font-size:17px;}
.blok-glava{max-width:760px;}

/* kartice značajki s okruglom kvačicom */
.znacajke{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0 0;}
.znacajka{padding:22px 22px 20px;border:1px solid var(--crta);border-radius:14px;background:var(--pozadina);}
.blok-bijeli .znacajka{background:var(--toplo);}
.znacajka h3{display:flex;gap:10px;align-items:flex-start;}
.znacajka h3::before,.kvacice-krug li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;}
.znacajka p{color:var(--sivo);font-size:16px;line-height:1.55;}
.kvacice-krug{display:grid;gap:14px;margin:0;}
.kvacice-krug li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:var(--sivo);}
.kvacice-krug li strong{color:var(--tinta);font-weight:600;}

/* kartica s isječkom pravog ekrana */
.isjecak{margin:32px 0 0;padding:14px;border:1px solid var(--crta);border-radius:16px;background:#fff;box-shadow:0 18px 40px -26px rgba(23,35,44,.45);}
.isjecak-glava{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 4px 10px;font-size:16px;color:var(--sivo);}
.isjecak-glava b{color:var(--tinta);font-weight:600;}
.isjecak img{display:block;width:100%;height:auto;border-radius:8px;}

/* bilješke (callout) */
.biljeska{margin:28px 0 0;padding:18px 22px;border-left:4px solid var(--teal);border-radius:0 var(--radius-velik) var(--radius-velik) 0;background:var(--teal-blijedi);font-size:16px;line-height:1.6;max-width:820px;}
.biljeska strong{color:var(--teal-tamni);}

/* usporedba s papirom */
.compare-wrap{margin:28px 0 0;overflow-x:auto;border:1px solid var(--crta);border-radius:14px;background:#fff;}
.compare-table{width:100%;border-collapse:collapse;font-size:16px;}
.compare-table th,.compare-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--crta);}
.compare-table thead th{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sivo);background:var(--toplo);}
.compare-table td:first-child{font-weight:600;}
.compare-table .us{color:var(--teal-tamni);font-weight:600;background:var(--teal-blijedi);}
.compare-table tr:last-child td{border-bottom:none;}

/* FAQ */
.faq-list{max-width:820px;margin-top:20px;border-top:1px solid var(--crta);}
.faq-item{border-bottom:1px solid var(--crta);}
.faq-item > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;font-weight:600;cursor:pointer;list-style:none;}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::after{content:'+';flex:none;font-size:24px;font-weight:400;line-height:1;color:var(--sivo);}
.faq-item[open] > summary::after{transform:rotate(45deg);}
.faq-a{padding:0 0 18px;color:var(--sivo);}

/* završni teal blok i povezano */
.kraj{padding:clamp(56px,5vw,80px) 0;background:linear-gradient(180deg,var(--teal) 0%,var(--hero-dolje) 100%);color:#fff;text-align:center;}
.kraj h2{max-width:22ch;margin:0 auto 10px;color:#fff;font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:1.12;letter-spacing:-.02em;}
.kraj h3{max-width:30ch;margin:0 auto 8px;color:#fff;font-size:20px;font-weight:500;opacity:.95;}
.kraj p{max-width:46ch;margin:0 auto 24px;opacity:.88;}
.povezano{padding:40px 0;}
.povezano h3{margin-bottom:14px;}
.povezano-pilule{display:flex;flex-wrap:wrap;gap:8px;}
.povezano-pilule a{display:inline-flex;align-items:center;min-height:var(--gumb);padding:0 18px;border:1px solid var(--crta);border-radius:999px;background:#fff;font-size:16px;font-weight:500;}
.povezano-pilule a:hover{border-color:var(--teal);color:var(--teal);}

/* ─── Podnožje (kao naslovnica) ─── */
.footer{background:var(--toplo);border-top:1px solid var(--crta);padding:40px 0 20px;font-size:16px;}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;margin-bottom:24px;}
.footer-logo{font-size:20px;font-weight:600;margin-bottom:8px;}
.footer-logo span{color:var(--tinta);font-weight:400;}
.footer-brand p{color:var(--sivo);max-width:300px;}
.footer-col h3{font-size:16px;font-weight:600;margin-bottom:8px;}
.footer-col a{display:flex;align-items:center;min-height:44px;color:var(--sivo);}
.footer-col a:hover,.footer-legal a:hover{color:var(--teal);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;border-top:1px solid var(--crta);color:var(--sivo);}
.footer-legal{display:flex;flex-wrap:wrap;gap:4px 20px;}
.footer-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--sivo);}
.sklop > summary{list-style:none;}
.sklop > summary::-webkit-details-marker{display:none;}
@media(min-width:641px){
  .sklop::details-content{display:contents;content-visibility:visible;}
  .sklop > summary{display:block;cursor:auto;}
}

/* kartica kolačića: dodir od najmanje 44 px */
#cookieConsent > div,#cookieConsentOk{font-size:16px!important;}
#cookieConsentOk{min-height:var(--gumb);}
#cookieConsent a{display:inline-flex;align-items:center;min-height:44px;}

/* ─── Računalo od 900 px: tekst i isječak u dva stupca, izmjenično lijevo i desno ─── */
@media(min-width:901px){
  .dva{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,80px);align-items:center;}
  .dva .isjecak{margin:0;}
  .dva-obrnuto{grid-template-columns:minmax(0,6fr) minmax(0,5fr);}
  .dva-obrnuto > .isjecak{order:-1;}
}

/* ─── Prilagodba širini ─── */
@media(max-width:1100px){.nav-links{gap:16px;}}
@media(max-width:1024px){
  .nav-links{display:none;position:fixed;inset:0;background:var(--pozadina);flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:200;}
  .nav-links.open{display:flex;}
  .nav-links a{font-size:18px;}
  .nav-menu-btn{display:block;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  .znacajke{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:768px){
  /* usporedba kao kartice; oznake stupaca postavlja /js/compare-table-mobile.js */
  .compare-wrap{overflow:visible;border:none;background:transparent;}
  .compare-table thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .compare-table,.compare-table tbody{display:block;width:100%;}
  .compare-table tbody tr{display:block;margin-bottom:12px;padding:4px 16px 12px;border:1px solid var(--crta);border-radius:14px;background:#fff;}
  .compare-table tbody td{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--crta);text-align:right;}
  .compare-table tbody td:last-child{border-bottom:none;}
  .compare-table tbody td:first-child{display:block;text-align:left;font-size:17px;padding:12px 0 10px;}
  .compare-table tbody td[data-label]:not(:first-child)::before{content:attr(data-label);flex:none;text-align:left;font-size:14px;font-weight:600;color:var(--sivo);}
  .compare-table tbody td.us{margin:4px -8px;padding:10px 8px;border-radius:var(--radius);border:none;}
}
@media(max-width:640px){
  :root{--rub:max(22px,env(safe-area-inset-left,0px));}
  body{font-size:16px;line-height:1.55;}
  .hero{padding-top:20px;}
  .mrvice{margin-bottom:20px;font-size:14px;}
  .hero h1{font-size:clamp(32px,10vw,38px);margin-bottom:14px;}
  .hero-kratko{font-size:16px;margin-bottom:22px;}
  .hero-isjecak{width:calc(100% - 16px);margin-top:28px;}
  .hero-isjecak .isjecak{padding:10px;}
  .blok{padding:44px 0;}
  .blok h2{font-size:28px;margin-bottom:12px;}
  .blok .uvod{font-size:16px;margin-bottom:18px;}
  .znacajke{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:20px;}
  .znacajka{padding:16px 18px;}
  .isjecak{margin-top:24px;padding:10px;}
  .isjecak-glava{padding-bottom:8px;font-size:15px;}
  .biljeska{padding:16px 18px;}
  .kraj{padding:44px 0;}
  .kraj .gumb{width:100%;}
  .gumb{white-space:normal;text-align:center;}
  .povezano-pilule{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--rub));padding:0 var(--rub) 4px;scrollbar-width:none;}
  .povezano-pilule a{flex:none;white-space:nowrap;}
  /* podnožje: stupci sklopljeni kao na naslovnici */
  .footer{padding:20px 0;}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:12px;}
  .footer-brand p{display:none;}
  .sklop > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;border-bottom:1px solid var(--crta);font-weight:600;cursor:pointer;}
  .sklop > summary::after{content:'+';flex:none;font-size:24px;font-weight:400;line-height:1;color:var(--sivo);}
  .sklop[open] > summary::after{transform:rotate(45deg);}
  .sklop > summary h3{font-size:17px;margin:0;}
  .sklop[open]{padding-bottom:12px;}
  .footer-bottom{border-top:0;padding-top:4px;}
}
/* Mobitel: značajke kao redci s kvačicom umjesto visokih kartica, da stranica bude kraća */
@media(max-width:640px){
  .znacajke{gap:0;border-top:1px solid var(--crta);}
  .znacajka,.blok-bijeli .znacajka{padding:14px 0;border:0;border-bottom:1px solid var(--crta);border-radius:0;background:transparent;}
  .znacajka h3{font-size:17px;margin-bottom:4px;}
  .znacajka p{padding-left:32px;font-size:15px;}
}
/* popis u dva stupca na računalu i isječak u okviru mobitela (portal) */
@media(min-width:901px){.kvacice-dva{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;}}
.isjecak-mobitel{margin:32px 0 0;text-align:center;}
.isjecak-mobitel figcaption{margin-top:12px;font-size:15px;color:var(--sivo);}
.mob-okvir{width:240px;margin:0 auto;padding:9px;border-radius:34px;background:#0b0d0e;box-shadow:0 24px 50px -20px rgba(23,35,44,.6);}
.mob-okvir img{display:block;width:100%;height:auto;aspect-ratio:480/880;object-fit:cover;object-position:top;border-radius:26px;}
@media(min-width:901px){.dva .isjecak-mobitel{margin:0;}}
.biljeska + p{margin-top:16px;max-width:820px;}
.hero:not(:has(.hero-isjecak)){padding-bottom:clamp(48px,5vw,72px);}
/* uži hero isječak kad je snimka uska (vitalni znakovi), da se ne razvuče */
.hero-isjecak-uzi{width:min(620px,calc(100% - 2 * var(--rub)));}