/* =================================================================
   secenje-drveca.rs — Production stylesheet
   Dizajn sistem: tamno šumsko zeleno + zlatna
   Cormorant Garamond (display) + Manrope (body)
   Fontovi su SAMOHOSTOVANI (vidi /fonts/) — bez Google CDN-a.
   ================================================================= */

/* ---------- WEBFONTS (lokalno hostovano) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/CormorantGaramond-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/CormorantGaramond-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/CormorantGaramond-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Manrope-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Manrope-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Manrope-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Manrope-Bold.woff2") format("woff2");
}

/* ---------- TOKENS ---------- */
:root {
  --bf-ink-900:#0d1a13; --bf-ink-800:#11221a; --bf-ink-700:#15291f; --bf-ink-600:#1c3527;
  --bf-cream-50:#f5efe0; --bf-cream-100:#ece5d2; --bf-cream-200:#c8c2b1; --bf-cream-300:#908c7c;
  --bf-gold-500:#c9a55a; --bf-gold-400:#d8b975; --bf-gold-600:#b08c44;
  --bf-line-soft:rgba(241,234,217,0.10); --bf-line-mid:rgba(241,234,217,0.18); --bf-line-hard:rgba(241,234,217,0.32);
  --bf-gold-mid:rgba(201,165,90,0.40);

  --bg-page:var(--bf-ink-900); --bg-section:var(--bf-ink-800); --bg-card:var(--bf-ink-700); --bg-card-hover:var(--bf-ink-600);
  --fg-strong:var(--bf-cream-50); --fg-default:var(--bf-cream-100); --fg-muted:var(--bf-cream-200); --fg-faint:var(--bf-cream-300);
  --accent:var(--bf-gold-500); --accent-hover:var(--bf-gold-400); --accent-press:var(--bf-gold-600); --on-accent:var(--bf-ink-900);
  --border-soft:var(--bf-line-soft); --border-mid:var(--bf-line-mid); --border-strong:var(--bf-line-hard); --border-accent:var(--bf-gold-mid);

  --font-display:"Cormorant Garamond","EB Garamond",Garamond,Georgia,serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --content-max:1200px; --content-pad:clamp(1.25rem,4vw,2.5rem); --header-h:76px;
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); --dur-fast:140ms; --dur-mid:220ms;
}

/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-padding-top:calc(var(--header-h) + 16px); scroll-behavior:smooth;}
body{
  background:var(--bg-page); color:var(--fg-default);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%;}
a{color:var(--accent); text-decoration:none;}
::selection{background:var(--bf-gold-500); color:var(--bf-ink-900);}

.container{max-width:var(--content-max); margin:0 auto; padding:0 var(--content-pad);}
.visually-hidden{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

/* ---------- HEADINGS ---------- */
h1,h2,h3{margin:0; color:var(--fg-strong);}
.h1{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(2.25rem,5.5vw,4rem); line-height:1.05; letter-spacing:-0.015em;
}
.h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.75rem,4vw,2.625rem); line-height:1.12; letter-spacing:-0.01em;
}
.h2 em{font-style:italic; color:var(--accent); font-weight:500;}
.eyebrow{
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted);
}
.eyebrow-accent{color:var(--accent);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px; padding:14px 22px;
  border-radius:999px; font-family:var(--font-body); font-size:14px; font-weight:600;
  letter-spacing:0.01em; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-primary{
  background:var(--accent); color:var(--on-accent);
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 18px -8px rgba(201,165,90,0.45);
}
.btn-primary:hover{background:var(--accent-press);}
.btn-primary:active{transform:translateY(1px);}
.btn-ghost{background:transparent; color:var(--accent); border-color:var(--border-accent); padding:13px 22px;}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-hover);}
.btn-block{width:100%; justify-content:center;}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:var(--bg-page); border-bottom:1px solid var(--border-soft);
}
.header-inner{height:100%; display:flex; align-items:center; gap:28px; justify-content:space-between;}
.lockup{display:inline-flex; align-items:center; gap:8px; color:var(--fg-strong); white-space:nowrap; min-width:0;}
.wordmark{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:22px; letter-spacing:-0.01em;}
.tld{font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--fg-muted); letter-spacing:0.02em; margin-left:-4px;}
.pill{
  display:inline-block; padding:5px 10px 5px 12px; border:1px solid var(--border-accent);
  color:var(--accent); border-radius:999px; font-family:var(--font-body); font-size:10px;
  font-weight:600; letter-spacing:0.14em; margin-left:4px;
}
.header-actions{display:flex; align-items:center; gap:14px;}
.script-toggle{display:flex; align-items:center; gap:2px; border:1px solid var(--border-mid); border-radius:999px; padding:3px;}
.script-btn{appearance:none; border:0; cursor:pointer; font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.04em; padding:6px 12px; border-radius:999px; background:transparent; color:var(--fg-muted); transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);}
.script-btn.is-active{background:var(--accent); color:var(--on-accent);}
.nav{display:flex; gap:28px; align-items:center;}
.nav-link{
  font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--fg-default);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.nav-link:hover{color:var(--fg-strong); border-bottom-color:var(--accent);}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--border-soft);}
.section--alt{background:var(--bg-section); border-top:1px solid var(--border-mid);}
.section-head{margin-bottom:clamp(32px,5vw,56px); max-width:880px;}
.section-head .eyebrow{display:block; margin-bottom:14px;}
.section-lead{
  font-family:var(--font-body); font-size:clamp(1rem,1.3vw,1.125rem);
  color:var(--fg-muted); line-height:1.55; margin:16px 0 0; max-width:60ch;
}

/* ---------- HERO ---------- */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(64px,9vw,112px);}
.hero-eyebrows{display:flex; gap:32px; align-items:center; flex-wrap:wrap; margin-bottom:clamp(28px,5vw,48px);}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:flex-end;}
.hero-text{min-width:0;}
.hero .h1 .accent{color:var(--accent);}
.lead{font-family:var(--font-body); font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.5; color:var(--fg-default); margin:24px 0 8px; max-width:56ch;}
.hero-body{color:var(--fg-muted); margin-top:20px; max-width:52ch; line-height:1.62;}
.actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:clamp(20px,3vw,32px);}
.hero-aside{display:flex; flex-direction:column; gap:28px;}
.phone-block{display:flex; flex-direction:column; gap:4px;}
.phone-label{font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted);}
.phone-number{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:38px; color:var(--fg-strong);}
.phone-number:hover{color:var(--accent);}
.phone-sub{font-family:var(--font-body); font-size:14px; color:var(--fg-muted);}
.phone-sub:hover{color:var(--accent);}
.media{border:1px solid var(--border-mid); border-radius:14px; overflow:hidden;}
.media img{width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(0.92) brightness(0.95);}

/* ---------- USLUGE / ZAŠTO (4-grid) ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.service-card{
  display:flex; flex-direction:column; padding:clamp(20px,2.4vw,26px); min-height:240px;
  border:1px solid var(--border-mid); border-radius:14px; background:var(--bg-card);
  transition:border-color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out);
}
.service-card:hover{border-color:var(--border-accent); background:var(--bg-card-hover);}
.service-num{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.8rem; color:var(--accent); line-height:1; margin-bottom:18px;}
.service-card h3{font-family:var(--font-body); font-weight:600; font-size:clamp(1.0625rem,1.6vw,1.25rem); line-height:1.3; color:var(--fg-strong); margin:0 0 10px;}
.service-card p{color:var(--fg-muted); font-size:14.5px; line-height:1.55; margin:0;}

.fact-card{background:var(--bg-card); border:1px solid var(--border-mid); border-radius:14px; padding:clamp(20px,3vw,28px);}
.fact-label{font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted);}
.fact-big{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1; color:var(--fg-strong); margin:12px 0 10px;}
.fact-card p{font-family:var(--font-body); font-size:14px; color:var(--fg-muted); margin:0; line-height:1.55;}

/* ---------- KAKO RADIMO (koraci) ---------- */
.steps{list-style:none; padding:0; margin:0; display:flex; flex-direction:column;}
.step{display:grid; grid-template-columns:140px 1fr; gap:32px; padding:clamp(24px,4vw,36px) 0; border-bottom:1px solid var(--border-soft);}
.step:last-child{border-bottom:0;}
.step-num{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(2.2rem,4vw,3.4rem); line-height:0.9; color:var(--accent);}
.step h3{font-family:var(--font-body); font-weight:600; font-size:clamp(1.0625rem,1.6vw,1.375rem); line-height:1.3; color:var(--fg-strong); margin:0 0 8px;}
.step p{color:var(--fg-muted); line-height:1.62; margin:0;}

/* ---------- GALERIJA ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.gallery-item img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--border-mid); border-radius:14px; filter:saturate(0.92) brightness(0.95);}
.gallery-cap{font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-faint); margin-top:10px;}
.gallery-cap--accent{color:var(--accent);}

/* ---------- KONTAKT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start;}
.contact-left h2{margin:14px 0 18px;}
.contact-left p{color:var(--fg-muted); line-height:1.62; max-width:48ch;}
.contact-direct{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; padding-top:24px; border-top:1px solid var(--border-soft);}
.contact-direct .eyebrow{display:block; margin-bottom:10px;}
.contact-big{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:32px; color:var(--fg-strong);}
.contact-big:hover{color:var(--accent);}
.areas{margin-top:24px;}
.areas .eyebrow{display:block; margin-bottom:12px;}
.area-tags{display:flex; flex-wrap:wrap; gap:8px;}
.area-tag{font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--fg-default); padding:6px 12px; border:1px solid var(--border-mid); border-radius:999px;}
.area-tag--accent{color:var(--accent); border-color:var(--border-accent);}

.form{background:var(--bg-card); border:1px solid var(--border-mid); border-radius:14px; padding:clamp(20px,3vw,32px); display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted);}
.field input, .field select, .field textarea{
  background:var(--bg-section); border:1px solid var(--border-mid); border-radius:8px;
  padding:12px 14px; color:var(--fg-default); font-family:var(--font-body); font-size:15px;
  outline:none; resize:vertical; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field select{appearance:none;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,165,90,0.25);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-foot{font-family:var(--font-body); font-size:12px; color:var(--fg-faint); text-align:center;}
.form-error{background:rgba(217,122,58,0.12); border:1px solid rgba(217,122,58,0.4); color:var(--fg-default); border-radius:8px; padding:10px 14px; font-size:14px;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--bf-ink-900); border-top:1px solid var(--border-mid);}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; padding:56px var(--content-pad) 40px; max-width:var(--content-max); margin:0 auto;}
.footer-brand{display:flex; flex-direction:column; gap:14px;}
.footer-wordmark{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:26px; color:var(--fg-strong); letter-spacing:-0.01em; line-height:1;}
.footer-wordmark .tld{font-style:normal;}
.footer-tagline{font-family:var(--font-body); font-size:14px; color:var(--fg-muted); line-height:1.5; max-width:300px;}
.footer-col{display:flex; flex-direction:column; gap:8px;}
.footer-col .eyebrow{margin-bottom:6px;}
.footer-col a, .footer-col span{font-family:var(--font-body); font-size:14px; color:var(--fg-default);}
.footer-col a:hover{color:var(--accent);}
.footer-baseline{border-top:1px solid var(--border-soft); padding:18px 0; font-family:var(--font-body); font-size:12px; color:var(--fg-faint);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:1024px){ .nav{display:none;} }
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .phone-number{font-size:32px;}
  .step{grid-template-columns:80px 1fr; gap:16px;}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .contact-direct{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .pill{display:none;}
}