/* =========================================================
   Romanica — glavni stilovi teme.
   Preneseno iz prototipa romanica-naslovnica-v2.html
   (tokeni, komponente, animacije, media upiti 980/560 px)
   + WP dodaci na dnu datoteke.
   ========================================================= */

:root{
  --paper:#FBFBF8;
  --ink:#15171C;
  --muted:#686C78;
  --faint:#9DA0A9;
  --blue:#2236C8;
  --blue-deep:#18269B;
  --line:#E6E5DE;
  --tint:#F2F2EC;
  --serif:'Literata', Georgia, serif;
  --sans:'Hanken Grotesk', -apple-system, sans-serif;
}
*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
::selection{background:var(--blue); color:#fff}
a{color:inherit; text-decoration:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}

/* ---------- header ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:66px}
.wordmark{font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:.01em; display:flex; align-items:baseline; gap:2px}
.wordmark i{font-style:normal; color:var(--blue)}
nav.main{display:flex; gap:30px; font-size:14.5px; font-weight:500; color:var(--muted)}
nav.main a{position:relative; padding:4px 0; transition:color .25s}
nav.main a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--blue); transition:width .3s cubic-bezier(.7,0,.3,1)}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{width:100%}
.utils{display:flex; align-items:center; gap:22px}
.lang{display:flex; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; color:var(--faint)}
.lang a.active{color:var(--ink); border-bottom:1.5px solid var(--blue); padding-bottom:2px}
.lang a:hover{color:var(--ink)}
.cta{font-size:14px; font-weight:600; color:var(--paper); background:var(--ink); padding:11px 20px; border-radius:100px; transition:background .25s, transform .25s}
.cta:hover{background:var(--blue); transform:translateY(-1px)}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:0}
.burger span{width:22px; height:2px; background:var(--ink)}
nav.main .lang-mobile{display:none}

/* ---------- dictionary eyebrow ---------- */
.entry{font-size:14px; color:var(--muted); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.entry b{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--ink); font-size:16px}
.entry .gram{font-family:var(--serif); font-style:italic; color:var(--faint)}
.entry .sep{color:var(--line)}
.entry .tr{color:var(--muted)}
.entry .num{font-feature-settings:"tnum"; color:var(--blue); font-weight:600; font-size:12px; letter-spacing:.1em; margin-right:6px}

/* ---------- hero ---------- */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:130px 0 80px; position:relative; overflow:hidden}
.kicker{font-size:12.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:38px}
.kicker em{font-style:normal; color:var(--blue)}
h1{font-family:var(--serif); font-weight:300; font-size:clamp(54px, 9.2vw, 124px); line-height:1.02; letter-spacing:-.015em}
.cycle-wrap{display:inline-flex; align-items:baseline; gap:.18em; white-space:nowrap}
.cycle{display:inline-block; font-style:italic; font-weight:400; color:var(--blue); border-bottom:3px solid var(--blue); padding-bottom:.04em; transition:width .55s cubic-bezier(.7,0,.25,1); overflow:hidden; vertical-align:baseline}
.cycle .w{display:inline-block; transition:opacity .4s, transform .45s, filter .4s}
.cycle .w.out{opacity:0; transform:translateY(-.45em); filter:blur(5px)}
.cycle .w.pre{opacity:0; transform:translateY(.45em); filter:blur(5px); transition:none}
.langtag{font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.8vw,24px); color:var(--faint); transform:translateY(-1.6em); display:inline-block; transition:opacity .4s}
.hero .sub{margin-top:46px; font-size:19px; line-height:1.6; color:var(--muted); max-width:34em}
.hero .sub b{color:var(--ink); font-weight:600}
.hero-cta{margin-top:42px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; padding:15px 26px; border-radius:100px; transition:all .25s}
.btn.solid{background:var(--blue); color:#fff}
.btn.solid:hover{background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(34,54,200,.22)}
.btn.ghost{color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn .ar{transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}
.hero-foot{position:absolute; bottom:34px; left:0; right:0}
.hero-foot .wrap{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--faint)}
.pair{display:flex; gap:26px; font-weight:600; letter-spacing:.1em}
.pair span{display:inline-flex; gap:8px; align-items:center}
.pair .x{color:var(--blue)}
.scroll-hint{display:flex; align-items:center; gap:9px}
.scroll-hint .dot{width:5px; height:5px; border-radius:50%; background:var(--blue); animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- sections ---------- */
section.s{padding:110px 0; border-top:1px solid var(--line)}
.s-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:54px; flex-wrap:wrap}
h2{font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.4vw,52px); line-height:1.1; letter-spacing:-.01em; max-width:14em}
h2 em{font-style:italic; color:var(--blue)}
.mt18{margin-top:18px}
.mt24{margin-top:24px}

/* usluge — list rows */
.rows{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:90px 1fr 1.1fr 60px; gap:26px; align-items:center; padding:34px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:background .3s; position:relative}
.row:hover{background:var(--tint)}
.row .idx{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--faint)}
.row h3{font-family:var(--serif); font-weight:500; font-size:clamp(21px,2.4vw,28px); letter-spacing:-.01em; transition:color .25s}
.row:hover h3{color:var(--blue)}
.row p{font-size:15.5px; color:var(--muted); line-height:1.55}
.row .go{justify-self:end; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:17px; color:var(--muted); transition:all .3s}
.row:hover .go{background:var(--blue); border-color:var(--blue); color:#fff; transform:rotate(-45deg)}

/* pečat / ovjera */
.seal-sec{background:var(--tint)}
.seal-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center}
.seal-stage{display:grid; place-items:center; min-height:380px; position:relative; overflow:hidden} /* uvećani pečat prije utiskivanja ne smije stvarati horizontalni scroll */
.seal{width:min(330px,80%); aspect-ratio:1; position:relative; opacity:0; transform:scale(1.5) rotate(-10deg)}
.seal.stamped{animation:stamp .65s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stamp{
  0%{opacity:0; transform:scale(1.5) rotate(-10deg)}
  60%{opacity:1; transform:scale(.96) rotate(2deg)}
  100%{opacity:1; transform:scale(1) rotate(0)}
}
.seal svg{width:100%; height:100%; display:block}
.ring-rot{transform-origin:50% 50%; animation:spin 50s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seal-copy h2{margin-bottom:24px}
.seal-copy p{color:var(--muted); max-width:30em; margin-bottom:18px}
.seal-copy p b{color:var(--ink); font-weight:600}
.seal-note{margin-top:28px; padding-left:18px; border-left:2px solid var(--blue); font-size:14.5px; color:var(--muted); max-width:28em}

/* index — stručna područja */
.index{display:grid; grid-template-columns:1fr 1fr; gap:0 80px; margin-top:10px}
.ix{display:flex; align-items:baseline; gap:14px; padding:19px 0; border-bottom:1px solid var(--line); font-size:17px}
.ix .nm{font-family:var(--serif); font-style:italic; font-size:19px; white-space:nowrap; transition:color .25s}
.ix:hover .nm{color:var(--blue)}
.ix .lead-dots{flex:1; border-bottom:1.5px dotted var(--faint); transform:translateY(-5px); opacity:.55}
.ix .ct{font-size:13px; color:var(--muted); white-space:nowrap; font-feature-settings:"tnum"}
.ix-note{margin-top:36px; font-size:14.5px; color:var(--muted); max-width:42em; padding-left:18px; border-left:2px solid var(--blue)}

/* blog */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-left:1px solid var(--line)}
.post{padding:36px 32px 42px; border-right:1px solid var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .3s; display:flex; flex-direction:column; gap:16px}
.post:hover{background:var(--tint)}
.post .ptag{font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue)}
.post h3, .post .post-card-title{font-family:var(--serif); font-style:italic; font-weight:500; font-size:23px; line-height:1.2; letter-spacing:-.01em; flex:1; max-width:none; transition:color .25s}
.post:hover h3, .post:hover .post-card-title{color:var(--blue)}
.post .pmeta{font-size:13px; color:var(--faint)}
.more-link{display:inline-flex; gap:9px; align-items:center; margin-top:38px; font-size:15px; font-weight:600; color:var(--ink); border-bottom:1.5px solid var(--blue); padding-bottom:3px; transition:color .25s}
.more-link:hover{color:var(--blue)}

/* faq */
.faq-list{max-width:760px; border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none; cursor:pointer; padding:24px 50px 24px 0; position:relative; font-family:var(--serif); font-size:21px; font-weight:500; line-height:1.3; transition:color .25s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; position:absolute; right:4px; top:18px; font-size:27px; font-weight:300; color:var(--blue); transition:transform .3s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--blue)}
.faq-list .ans{padding:0 50px 28px 0; color:var(--muted); font-size:16px; line-height:1.65; max-width:46em}
.faq-list .ans p{margin-bottom:1em}
.faq-list .ans p:last-child{margin-bottom:0}
/* animacija harmonike (JS mijenja visinu; odgovor blago uplivava) */
.faq-list details.animating{overflow:hidden}
@keyframes ansIn{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
.faq-list details[open] .ans{animation:ansIn .4s .06s both ease}

/* kontakt */
.contact{padding:130px 0}
.contact h2{font-size:clamp(40px,6.4vw,84px); max-width:11em}
.c-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:70px; margin-top:60px; align-items:start}
.c-list{display:flex; flex-direction:column}
.c-item{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); font-size:17px}
.c-item .lab{font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.c-item a, .c-item .c-text{font-family:var(--serif); font-size:20px; transition:color .25s}
.c-item a:hover{color:var(--blue)}
.c-cta{background:var(--ink); color:var(--paper); border-radius:20px; padding:44px 40px; display:flex; flex-direction:column; gap:18px}
.c-cta h3{font-family:var(--serif); font-weight:400; font-size:27px; line-height:1.2}
.c-cta h3 em{color:#8C9BFF}
.c-cta p{font-size:15px; color:#B9BCC6; line-height:1.6}
.c-cta .btn{background:var(--blue); color:#fff; justify-content:center}
.c-cta .btn:hover{background:#3D52E8}

/* footer */
footer{border-top:1px solid var(--line); padding:36px 0 44px; font-size:13.5px; color:var(--muted)}
footer .frow{display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap}
footer a:hover{color:var(--blue)}
footer .links{display:flex; gap:24px; flex-wrap:wrap}
footer .credit{color:var(--faint)}
footer .credit a{border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .25s, border-color .25s}
footer .credit a:hover{color:var(--blue); border-color:var(--blue)}

/* reveal */
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1; transform:none}

/* Bez JS-a sadržaj mora biti vidljiv */
.no-js .rv{opacity:1; transform:none}
.no-js .seal{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  .rv{opacity:1; transform:none}
  .seal{opacity:1; transform:none}
}
@media(max-width:980px){
  nav.main{display:none}
  .burger{display:flex}
  .utils{gap:12px}
  .cta{padding:9px 16px; font-size:13px; white-space:nowrap}
  .seal-grid{grid-template-columns:1fr; gap:40px}
  .seal-stage{min-height:300px}
  .index{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr; border-left:none}
  .post{border-right:none; border-left:1px solid var(--line)}
  .c-grid{grid-template-columns:1fr; gap:44px}
  .row{grid-template-columns:1fr 60px; gap:14px}
  .row .idx{display:none}
  .row p{grid-column:1/-1}
  section.s{padding:76px 0}
  .hero{padding-top:110px}
  /* otvoreni mobilni izbornik (JS dodaje .open + aria-expanded) */
  nav.main.open{display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; background:var(--paper); padding:22px 28px; border-bottom:1px solid var(--line); gap:18px}
}
@media(max-width:560px){
  .utils > .lang{display:none}
  nav.main.open .lang-mobile{display:flex; border-top:1px solid var(--line); margin-top:4px; padding-top:16px}
  /* kazalo: primjeri ispod naziva umjesto u istom retku (sprječava horizontalno prelijevanje) */
  .index .ix{display:block}
  .index .ix .lead-dots{display:none}
  .index .ix .nm{white-space:normal}
  .index .ix .ct{display:block; white-space:normal; margin-top:5px}
}

/* =========================================================
   WP dodaci: pristupačnost, admin bar, predlošci bloga/stranica
   ========================================================= */

/* Pristupačnost */
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.screen-reader-text{border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute!important; width:1px; word-wrap:normal!important}
.skip-link:focus{clip-path:none; height:auto; width:auto; left:12px; top:12px; z-index:100; background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:100px; font-weight:600; font-size:14px}

/* Admin bar ne prekriva fiksni header */
body.admin-bar header{top:32px}
@media screen and (max-width:782px){body.admin-bar header{top:46px}}

/* Predlošci stranica i bloga */
.page-hero{padding:170px 0 64px}
.page-hero .kicker{margin-bottom:24px}
.page-hero .kicker a:hover{color:var(--blue)}
.page-title{font-family:var(--serif); font-weight:300; font-size:clamp(38px,5.6vw,72px); line-height:1.06; letter-spacing:-.015em; max-width:16em}
.page-title em{font-style:italic; color:var(--blue)}
.page-hero .sub{margin-top:26px; font-size:19px; color:var(--muted); max-width:34em}
.page-hero .hero-cta{margin-top:36px}
.article-meta{margin-top:22px; font-size:13.5px; color:var(--faint)}
.archive-desc{margin-top:22px; color:var(--muted); max-width:40em}
.article-figure{margin-top:44px}
.article-figure img{max-width:100%; height:auto; display:block}
.page-body{padding:20px 0 110px}
.faq-intro{margin-top:26px}

/* Tekući sadržaj članaka */
.prose{max-width:46em; color:var(--muted); font-size:17px; line-height:1.7}
.prose p, .prose ul, .prose ol{margin-bottom:1.25em}
.prose b, .prose strong{color:var(--ink); font-weight:600}
.prose h2, .prose h3, .prose h4{font-family:var(--serif); font-weight:500; color:var(--ink); line-height:1.2; margin:1.6em 0 .6em; max-width:none}
.prose h2{font-size:clamp(26px,3vw,34px)}
.prose h3{font-size:clamp(21px,2.4vw,26px)}
.prose a{color:var(--blue); border-bottom:1.5px solid var(--blue); transition:color .25s}
.prose a:hover{color:var(--blue-deep)}
.prose ul, .prose ol{padding-left:1.2em}
.prose blockquote{padding-left:18px; border-left:2px solid var(--blue); font-size:15.5px; margin-bottom:1.25em}
.prose img{max-width:100%; height:auto}
.prose em{font-style:italic}

/* Paginacija */
.pagination, .navigation.pagination{margin-top:48px}
.nav-links{display:flex; gap:10px; flex-wrap:wrap; font-size:14px; font-weight:600}
.nav-links .page-numbers{display:inline-flex; align-items:center; padding:9px 16px; border:1px solid var(--line); border-radius:100px; color:var(--muted); transition:all .25s}
.nav-links a.page-numbers:hover{border-color:var(--ink); color:var(--ink)}
.nav-links .page-numbers.current{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.nav-links .page-numbers.dots{border:0}

/* Mreža objava na blog stranicama: gornji rub samo jednom */
.page-body .posts{border-top:1px solid var(--line)}
.page-body .posts .post{border-top:none}

/* Cross-browsing: povezane (pod)stranice na hijerarhijskim stranicama */
.related{border-top:1px solid var(--line); padding:70px 0 96px}
.related .kicker{margin-bottom:34px}
.related .more-link{margin-top:34px}

/* Posljednji članci na dnu pojedinačnog članka */
.latest{border-top:1px solid var(--line); padding:70px 0 96px}
.latest .kicker{margin-bottom:34px}

/* Kontakt stranica: obrazac (CF7) + kanali */
.contact-grid{margin-top:0; grid-template-columns:1.3fr 1fr}
.contact-form .kicker{margin-bottom:30px}
.contact-grid .c-list .seal-note{margin-top:32px}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 34px}
.f-field{margin-bottom:22px}
.f-full{grid-column:1/-1}
.f-lab{display:block; font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 0; font-family:var(--sans); font-size:17px; color:var(--ink); transition:border-color .25s}
.contact-form textarea{min-height:132px; resize:vertical; line-height:1.6}
.contact-form input:focus,
.contact-form textarea:focus{outline:none; border-bottom:2px solid var(--blue); margin-bottom:-1px}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--faint)}
.contact-form input[type="file"]{display:block; width:100%; padding:10px 0; font-size:14px; color:var(--muted)}
.contact-form input[type="file"]::file-selector-button{font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:100px; padding:8px 16px; margin-right:12px; cursor:pointer; transition:border-color .25s}
.contact-form input[type="file"]::file-selector-button:hover{border-color:var(--ink)}
.f-note{font-size:13.5px; color:var(--faint); margin:4px 0 26px}
.contact-form .wpcf7-submit{display:inline-flex; align-items:center; font-family:var(--sans); font-size:15px; font-weight:600; color:#fff; background:var(--blue); border:0; padding:15px 28px; border-radius:100px; cursor:pointer; transition:background .25s, transform .25s}
.contact-form .wpcf7-submit:hover{background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(34,54,200,.22)}
.contact-form .wpcf7-spinner{margin:0 0 0 14px}
.contact-form .wpcf7-not-valid-tip{font-size:13px; color:var(--blue); margin-top:6px}
.contact-form .wpcf7 form .wpcf7-response-output{margin:26px 0 0; padding:2px 0 2px 18px; border:0; border-left:2px solid var(--blue); font-size:14.5px; color:var(--muted)}
@media(max-width:980px){
  .contact-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr; gap:0}
}

/* Cjenik: stavke kao kazalo-redovi s točkastim vodilicama */
.cjenik-body{max-width:none}
.cjenik{display:block; max-width:820px; border-top:1px solid var(--line); margin:14px 0 8px}
.cjenik .ix{display:flex; align-items:baseline; gap:14px; padding:23px 0; border-bottom:1px solid var(--line)}
.cjenik .ix .nm{font-family:var(--serif); font-size:20px; white-space:normal}
.cjenik .ix .jed{display:block; font-size:13.5px; color:var(--faint); margin-top:3px; font-family:var(--sans)}
.cjenik .ix .lead-dots{flex:1; border-bottom:1.5px dotted var(--faint); transform:translateY(-5px); opacity:.55; min-width:40px}
.cjenik .ix .cijena{font-family:var(--serif); font-size:20px; color:var(--ink); white-space:nowrap; font-feature-settings:"tnum"}
.cjenik-note{font-size:14.5px; color:var(--muted); padding-left:18px; border-left:2px solid var(--blue); max-width:42em; margin-top:28px}
@media(max-width:560px){
  .cjenik .ix{flex-wrap:wrap; gap:6px 14px}
  .cjenik .ix .lead-dots{display:none}
  .cjenik .ix .cijena{white-space:normal}
}

/* Usluge — izlog podstranica (page-usluge.php) */
.page-intro{margin-top:30px}
.svc-index{padding:14px 0 30px}
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid; grid-template-columns:110px 1fr 66px; gap:34px; align-items:center; padding:54px 0; border-bottom:1px solid var(--line); transition:background .3s}
.svc:hover{background:var(--tint)}
.svc-idx{font-family:var(--serif); font-style:italic; font-size:clamp(26px,3vw,38px); color:var(--faint); line-height:1}
.svc-body{display:block; min-width:0}
.svc-title{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(27px,3.6vw,44px); line-height:1.08; letter-spacing:-.012em; max-width:none; transition:color .25s}
.svc:hover .svc-title{color:var(--blue)}
.svc-desc{display:block; margin-top:14px; font-size:15.5px; color:var(--muted); line-height:1.6; max-width:44em}
.svc .go{justify-self:end; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:18px; color:var(--muted); transition:all .3s}
.svc:hover .go{background:var(--blue); border-color:var(--blue); color:#fff; transform:rotate(-45deg)}
.svc-cta{padding:30px 0 110px}
.cta-wide{flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:32px; padding:48px 52px}
.cta-wide .cta-copy{display:flex; flex-direction:column; gap:14px; max-width:34em}
.cta-wide h3{font-size:clamp(24px,3vw,34px)}
.cta-wide .btn{flex:none}
@media(max-width:980px){
  .svc{grid-template-columns:1fr 56px; gap:18px; padding:40px 0}
  .svc-idx{display:none}
  .svc .go{width:42px; height:42px}
  .svc-cta{padding-bottom:80px}
  .cta-wide{flex-direction:column; align-items:flex-start; padding:38px 32px}
  /* unutarnje stranice: manja gornja praznina ispod fiksnog zaglavlja */
  .page-hero{padding:118px 0 44px}
  .page-body{padding-bottom:76px}
  .related{padding:56px 0 72px}
}