/* POPOVIĆ PETROVIĆ · DIZAJN 4 „Vizit karta"
   Rađen po vizit kartama iz identiteta: preliv tamnoplava→indigo kao na kartici 01/04, veliki
   monogram kao vodeni žig preko preliva, i plavo-siva (#9DB2BF) koja tu konačno dobija ulogu —
   u prve tri verzije je bila samo linija. Sadržaj stoji na belom, u blokovima nalik karticama. */

:root{
  --navy:#1b3c53;
  --indigo:#6177ba;
  --mastilo:#465174;       /* boja logotipa — vezuje preliv */
  --slate:#9db2bf;         /* dobija pravu ulogu: sporedne oznake i ivice */
  --slate-tih:#eef2f5;
  --paper:#ede9e6;
  --tekst:#28323d;
  --tekst-tiho:#63717c;
  --ivica:#e2e8ec;
  --preliv:linear-gradient(135deg,#1b3c53 0%,#465174 52%,#6177ba 100%);

  --display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --telo:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sirina:1180px;
  --radius:12px;
  --senka:0 12px 34px rgba(27,60,83,.11);
  --zig:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="130.90 1.20 110.20 133.50"><path d="M173.721 1.22852C178.503 1.22852 183.163 2.08029 187.691 3.77564C192.219 5.471 196.371 7.64957 200.146 10.2868C205.558 13.9396 209.898 18.2476 213.174 23.219C216.441 28.1904 218.742 33.4484 220.06 38.985C221.379 44.5215 221.764 50.1563 221.191 55.8812C220.626 61.6061 219.143 67.0853 216.752 72.3024C214.361 77.5277 211.119 82.3107 207.032 86.6515C202.938 90.9922 198 94.4894 192.211 97.1266C189.189 98.6336 185.824 99.8621 182.115 100.812C178.397 101.754 174.843 102.041 171.453 101.664V97.1348C180.894 96.5042 189.165 93.8669 196.273 89.2068C203.38 84.5548 209.014 77.8798 213.166 69.1983C214.926 65.6766 215.999 61.991 216.376 58.1498C216.752 54.3087 216.818 50.3774 216.564 46.3479C216.31 41.6959 214.959 36.9702 212.502 32.1872C210.046 27.4041 206.901 23.0634 203.061 19.1567C199.221 15.2582 194.913 12.1132 190.131 9.71348C185.349 7.32196 180.632 6.12621 175.973 6.12621H135.767V134.695H130.862V1.22852H173.713H173.721Z" fill="%23ffffff"/><path d="M198.271 134.711C193.488 134.711 188.829 133.859 184.301 132.164C179.773 130.469 175.621 128.29 171.846 125.653C166.433 122 162.093 117.692 158.818 112.721C155.551 107.749 153.25 102.491 151.931 96.9546C150.613 91.4181 150.236 85.7833 150.801 80.0584C151.366 74.3335 152.848 68.8543 155.24 63.6372C157.631 58.4119 160.873 53.6289 164.959 49.2881C169.054 44.9474 173.991 41.4502 179.781 38.813C182.802 37.306 186.168 36.0775 189.877 35.1274C193.587 34.1855 197.149 33.8989 200.539 34.2756V38.8048C191.097 39.4354 182.827 42.0726 175.719 46.7328C168.612 51.3848 162.978 58.0597 158.826 66.7495C157.066 70.2712 155.993 73.9568 155.616 77.7979C155.24 81.6391 155.174 85.5703 155.428 89.5999C155.682 94.2519 157.033 98.9776 159.489 103.761C161.946 108.544 165.09 112.884 168.931 116.791C172.771 120.69 177.079 123.835 181.861 126.234C186.643 128.626 191.359 129.822 196.019 129.822H236.225V1.22852H241.13V134.711H198.279H198.271Z" fill="%23cdd6f0"/></svg>');
}

/* Boje monograma. Znak je DVOBOJAN u originalu (#465174 okvir, #6177BA kriva);
   na tamnoj podlozi mora posvetleti, pa se obe boje daju odavde. */
.zn-a{fill:#465174}
.zn-b{fill:#6177ba}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--tekst);
  font:400 1rem/1.75 var(--telo);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:4px}
section{scroll-margin-top:86px}

h1,h2,h3{font-family:var(--display);color:var(--navy);line-height:1.2;
  letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.05rem,4.4vw,3.3rem);font-weight:600}
h2{font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:600}
h3{font-size:1.04rem;font-weight:600}
p{margin:0 0 1.1em}
.uvod{max-width:60ch;color:var(--tekst-tiho)}

.omot{width:min(100% - 40px,var(--sirina));margin-inline:auto}
.nadnaslov{font-family:var(--display);font-size:.73rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);margin:0 0 12px}
.crta{width:60px;height:3px;background:var(--preliv);border-radius:2px;margin:18px 0 26px}

/* ── zaglavlje ───────────────────────────────────────────────────────────── */
.zaglavlje{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ivica)}
.zaglavlje .omot{display:flex;align-items:center;gap:22px;min-height:78px}
.znak{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;
  color:var(--mastilo)}
.znak svg{width:34px;height:41px;flex:none}
.znak b{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--navy);
  line-height:1.15;display:block;letter-spacing:-.01em}
.znak span{font-family:var(--display);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);display:block;margin-top:3px}
.meni{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.meni a{font-size:.9rem;color:var(--tekst);text-decoration:none;padding:6px 0;position:relative}
.meni a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--preliv);transition:right .22s}
.meni a:hover::after,.meni a.tu::after{right:0}
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:500;font-size:.92rem;text-decoration:none;
  padding:12px 24px;border-radius:9px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s,filter .16s,background .16s}
.dugme:hover{transform:translateY(-1px)}
.dugme.puno{background:var(--preliv);color:#fff}
.dugme.puno:hover{filter:brightness(1.08)}
.dugme.obrub{border-color:var(--slate);color:var(--navy)}
.dugme.obrub:hover{background:var(--slate-tih)}
.dugme.tamno{background:var(--preliv);color:#fff}
.dugme.tamno:hover{filter:brightness(1.08)}
.hamburger{display:none;background:none;border:1px solid var(--ivica);border-radius:9px;
  color:var(--navy);font-size:1.3rem;line-height:1;padding:8px 12px;cursor:pointer}

/* ── hero: sam preliv sa vizit karte ───────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--preliv);color:#fff;
  padding:clamp(62px,9vw,110px) 0 clamp(68px,9.5vw,118px)}
.hero::after{content:"";position:absolute;right:-60px;top:50%;translate:0 -50%;
  width:min(500px,46vw);aspect-ratio:110.2/133.5;pointer-events:none;opacity:.13;
  background:var(--zig) center/contain no-repeat}
.hero h1{color:#fff;max-width:17ch;position:relative}
.hero h1 em{font-style:normal;color:#cdd6f0}
.hero .nadnaslov{color:#b9c9d6}
.hero p{color:#dbe4ec;max-width:52ch;font-size:1.06rem;position:relative}
.hero .dugme.puno{background:#fff;color:var(--navy)}
.hero .dugme.puno:hover{background:#f2f5fa;filter:none}
.hero .dugme.obrub{border-color:rgba(255,255,255,.55);color:#fff}
.hero .dugme.obrub:hover{background:rgba(255,255,255,.12)}
.hero-akcije{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;position:relative}
.hero-podaci{display:flex;flex-wrap:wrap;gap:34px;margin-top:52px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.24);position:relative}
.hero-podaci div{min-width:140px}
.hero-podaci b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;color:#fff}
.hero-podaci span{font-size:.85rem;color:#b9c9d6}

/* ── sekcije ─────────────────────────────────────────────────────────────── */
.sekcija{padding:clamp(56px,7vw,92px) 0}
.sekcija.tiha{background:var(--slate-tih)}
.sekcija.krem{background:var(--paper)}
.dvokolona{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);align-items:start}

/* kartice sa prelivom na gornjoj ivici — kao rub vizit karte */
.kartice{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:38px}
.kartica{position:relative;background:#fff;border:1px solid var(--ivica);border-radius:var(--radius);
  padding:28px 24px 28px;display:flex;flex-direction:column;gap:10px;overflow:hidden;
  transition:box-shadow .18s,transform .18s}
.kartica::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--preliv)}
.kartica:hover{box-shadow:var(--senka);transform:translateY(-3px)}
.kartica .broj{font-family:var(--display);font-size:.73rem;font-weight:600;letter-spacing:.2em;
  color:var(--slate)}
.kartica h3{min-height:2.5em}
.kartica p{color:var(--tekst-tiho);font-size:.93rem;margin:0}
.kartica ul{margin:6px 0 0;padding:0;list-style:none;font-size:.9rem;color:var(--tekst-tiho)}
.kartica li{padding-left:16px;position:relative;margin-bottom:5px}
.kartica li::before{content:"—";position:absolute;left:0;color:var(--slate)}

.koraci{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:40px}
.korak{background:#fff;border:1px solid var(--ivica);border-radius:var(--radius);padding:24px 22px;
  position:relative}
.korak b{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--preliv);color:#fff;font-family:var(--display);font-size:.9rem;font-weight:600;
  margin-bottom:12px}
.korak p{font-size:.92rem;color:var(--tekst-tiho);margin:6px 0 0}

/* ── kontakt ─────────────────────────────────────────────────────────────── */
.kontakt-mreza{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);margin-top:40px}
.podatak{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--ivica);align-items:flex-start}
.podatak:last-of-type{border-bottom:0}
.podatak .oznaka{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);min-width:94px;padding-top:4px}
.podatak a{color:var(--navy);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.podatak a:hover{color:var(--indigo);text-decoration:underline}

form{position:relative;background:#fff;border:1px solid var(--ivica);border-radius:var(--radius);
  padding:28px;box-shadow:var(--senka);overflow:hidden}
form::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--preliv)}
label{display:block;font-size:.83rem;font-weight:500;color:var(--tekst-tiho);margin:0 0 6px}
input,textarea{width:100%;font:400 .96rem/1.6 var(--telo);color:var(--tekst);
  padding:11px 13px;border:1px solid var(--ivica);border-radius:9px;background:#fafcfd;
  margin-bottom:16px;transition:border-color .16s,background .16s}
input:focus,textarea:focus{border-color:var(--indigo);background:#fff;outline:none}
textarea{min-height:118px;resize:vertical}
.med{position:absolute;left:-9999px}
.napomena{font-size:.8rem;color:var(--tekst-tiho);line-height:1.6;margin:14px 0 0}
.poruka-ok{background:var(--slate-tih);border:1px solid var(--slate);color:var(--navy);
  border-radius:9px;padding:14px 16px;font-size:.92rem;margin-bottom:16px}

.mapa{border:1px solid var(--ivica);border-radius:var(--radius);overflow:hidden;margin-top:28px}
.mapa iframe{display:block;width:100%;height:300px;border:0}

/* ── podnožje: preliv, kao poleđina kartice ────────────────────────────── */
.podnozje{background:var(--preliv);color:#d4dde8;padding:54px 0 28px;font-size:.9rem}
.podnozje .omot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.podnozje h3{color:#fff;font-size:.73rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.podnozje a{color:#d4dde8;text-decoration:none}
.podnozje a:hover{color:#fff;text-decoration:underline}
.podnozje ul{list-style:none;margin:0;padding:0}
.podnozje li{margin-bottom:8px}
.sitno{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.22);margin-top:14px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.82rem;color:#b9c9d6}

.chat{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:60}
.chat a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(27,60,83,.24);color:#fff;text-decoration:none}
.chat .viber{background:#7360f2}
.chat .wa{background:#25d366}
.na-vrh{position:fixed;left:18px;bottom:18px;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--ivica);background:#fff;color:var(--navy);cursor:pointer;
  display:grid;place-items:center;font-size:1.1rem;opacity:0;pointer-events:none;
  transition:opacity .2s;box-shadow:var(--senka);z-index:60}
.na-vrh.vidi{opacity:1;pointer-events:auto}

@media(max-width:900px){
  .dvokolona,.kontakt-mreza,.podnozje .omot{grid-template-columns:1fr}
  .hamburger{display:block}
  .meni{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--ivica);padding:8px 20px 16px}
  .meni li{border-top:1px solid var(--ivica)}
  .meni a{display:block;padding:13px 0}
  .zaglavlje .dugme{display:none}
  .hero::after{opacity:.1;right:-120px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}