/* ==========================================================================
   Tomislav Divić — zajednički dizajn sustav
   Ista kostura kao webito.hr: Inter + EB Garamond, isti razmaci, radijusi,
   sjene i komponente. Svaka stranica mijenja samo --accent i --surface,
   pa primjeri izgledaju kao rad istog studija, a ne kao isti predložak.

   Display font je EB Garamond, NE Cormorant Garamond: Cormorant crta haček
   na č/š/ž znatno iznad slova, pa naslov "Pokažite što" izgleda kao greška,
   a brojke su mu minuskulne (149 se čita kao I49).
   ========================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations');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}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-0107,U+010C-0113,U+0118-011B,U+011E-011F,U+012A-012B,U+0130,U+0141-0144,U+0147-0148,U+014C-014D,U+0150-0151,U+0158-015B,U+015E-0165,U+016A-016B,U+016E-0171,U+0179-017E,U+2190,U+2192}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/eb-garamond-latin-wght-normal.woff2) format('woff2-variations');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}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/eb-garamond-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-0107,U+010C-0113,U+0118-011B,U+011E-011F,U+012A-012B,U+0130,U+0141-0144,U+0147-0148,U+014C-014D,U+0150-0151,U+0158-015B,U+015E-0165,U+016A-016B,U+016E-0171,U+0179-017E,U+2190,U+2192}

/* --- tokeni ---------------------------------------------------------- */
:root{
  --forest:#1F3B2E;
  --green:#6B846F;
  --green-dark:#355244;
  --ink:#18221c;
  --muted:#5f6d65;
  --paper:#fbfcfb;
  --soft:#f1f5f2;
  --mint:#e5ece7;
  --line:#d6ddd8;
  --shadow:0 20px 48px rgba(31,59,46,.10);
  --shadow-sm:0 12px 28px rgba(13,56,33,.05);
  --radius:22px;
  --radius-sm:14px;
  --gutter:20px;
  --max:1160px;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --display:"EB Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  /* stranica prepisuje ovo dvoje */
  --accent:#d96f42;
  --accent-ink:#9d4a28;
  --surface:var(--soft);
  color-scheme:light;
}

/* --- osnove ----------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.03em}
h1{font-size:clamp(3.1rem,5.4vw,5rem);line-height:.98;margin-bottom:22px}
h2{font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1.04;margin-bottom:14px}
h3{font-size:1.32rem;line-height:1.2;margin-bottom:9px}
h1,h2,h3,.num{font-variant-numeric:lining-nums}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px;border-radius:6px}
::selection{background:var(--mint);color:var(--ink)}

.container{width:min(var(--max),calc(100% - var(--gutter) * 2));margin-inline:auto}
.section{padding:78px 0}
.section-tight{padding:46px 0}
.section-head{max-width:700px;margin-bottom:32px}
.section-head.center{margin-inline:auto;text-align:center}

.eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.17em;color:var(--accent-ink);font-weight:850;margin:0 0 12px}
.lead{font-family:var(--display);font-size:clamp(1.24rem,2vw,1.5rem);line-height:1.5;font-weight:500;color:#3b4a41;max-width:620px;margin-bottom:26px}
.small{font-size:.86rem;line-height:1.6;color:var(--muted)}
.mini{font-size:.74rem;line-height:1.5;color:var(--muted)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--forest);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;font-size:.9rem}
.skip-link:focus{left:0}

/* --- gumbi ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:51px;padding:0 22px;border:1.5px solid var(--forest);border-radius:11px;font-weight:700;font-size:.95rem;transition:.16s ease;cursor:pointer}
.btn-primary{background:var(--forest);color:#fff}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#1d2c22}
.btn-accent:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--forest)}
.btn-secondary:hover{background:var(--soft)}
.actions{display:flex;flex-wrap:wrap;gap:11px}
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-lib{position:absolute;width:0;height:0;overflow:hidden}

/* --- zaglavlje -------------------------------------------------------- */
.header{position:sticky;top:0;z-index:40;background:rgba(251,252,251,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:42px;height:42px}
.brand b{display:block;font-size:1rem;font-weight:750;letter-spacing:-.01em}
.brand span{display:block;margin-top:3px;font-size:.64rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700}
.nav a{padding:9px 12px;border-radius:10px}
.nav a:hover{background:var(--soft);color:var(--green-dark)}
.nav a[aria-current]{background:var(--soft)}
.nav .nav-cta{background:var(--forest);color:#fff;padding:10px 16px}
.nav .nav-cta:hover{background:var(--green-dark)}

/* --- kartice ---------------------------------------------------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)}
.card-soft{background:var(--surface);box-shadow:none}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.78rem;font-weight:700}
.pills{display:flex;flex-wrap:wrap;gap:8px}

/* --- traka činjenica --------------------------------------------------- */
.factbar{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.factbar>div{padding-left:22px;border-left:1px solid var(--line)}
.factbar>div:first-child{padding-left:0;border-left:0}
.factbar .lbl{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;font-weight:850;color:var(--muted);margin-bottom:7px}
.factbar b{display:block;font-family:var(--display);font-size:1.3rem;line-height:1.2;font-weight:600}
.factbar small{display:block;margin-top:4px;font-size:.8rem;color:var(--muted)}

/* --- numerirane stavke -------------------------------------------------- */
.numbered{display:grid;gap:0;border-top:1px solid var(--line)}
.numbered>article{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.numbered .n{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--accent-ink);font-variant-numeric:lining-nums}
.numbered p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.6}

/* --- tamna CTA traka ---------------------------------------------------- */
.cta{background:linear-gradient(160deg,var(--forest),#16291f);color:#fff;border-radius:var(--radius);padding:52px 56px;display:grid;grid-template-columns:1.25fr .75fr;gap:38px;align-items:center;box-shadow:var(--shadow)}
.cta .eyebrow{color:#bcd0c2}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{color:#cfdcd3;margin:0;max-width:460px}
.cta-side{display:grid;gap:12px;justify-items:stretch}
.cta-side .btn{width:100%}
.mailrow{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.95rem;color:#dfe9e1}
.mailrow a{text-decoration:underline;text-underline-offset:4px}
.copy-btn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:9px;background:rgba(255,255,255,.1);color:#dfe9e1;cursor:pointer}
.copy-btn:hover{background:rgba(255,255,255,.2)}
.copy-status{display:block;min-height:20px;font-size:.78rem;color:#cfe3d5;text-align:center}

/* --- podnožje ----------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding:30px 0 38px;margin-top:8px}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 26px;font-size:.82rem;color:var(--muted)}
.footer-inner p{margin:0}
.footer-links{display:flex;flex-wrap:wrap;gap:16px}
.footer-links a{text-decoration:underline;text-underline-offset:3px}
.footer-links a:hover{color:var(--green-dark)}
.footer strong a{color:var(--ink);font-weight:750}

/* --- prilagodba ---------------------------------------------------------- */
@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:1fr}
  .factbar{grid-template-columns:repeat(2,1fr);gap:20px}
  .factbar>div:nth-child(odd){padding-left:0;border-left:0}
  .cta{grid-template-columns:1fr;padding:40px 34px}
  .section{padding:58px 0}
}
@media(max-width:620px){
  :root{--gutter:16px;--radius:18px}
  .nav .nav-label{display:none}
  .grid-4{grid-template-columns:1fr}
  .factbar{grid-template-columns:1fr;gap:16px}
  .factbar>div{padding-left:0;border-left:0}
  .numbered>article{grid-template-columns:44px 1fr;gap:12px}
  .cta{padding:32px 22px}
  .actions .btn{width:100%}
  .brand span{display:none}
  .header-inner{min-height:66px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}