/* ─── FONTOVI ─────────────────────────────────────────────
   Self-hosted, variable, subsetovani na srpsku latinicu.
   Licenca: SIL Open Font License 1.1 (assets/fonts/LICENSE-*.txt)
   ──────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/cinzel-var.woff2') format('woff2');+
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/raleway-var.woff2') format('woff2');
}

/* ─── IKONICE (inline SVG sprite) ───────────────────────── */
.ico {
  width: 1em; height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ─── ROOT TOKENS ─────────────────────────────────────── */
:root {
  --bg:          #101010;
  --bg2:         #17171a;
  --bg3:         #1e1e21;
  --bg4:         #252529;
  --border:      rgba(180,145,60,0.12);
  --border2:     rgba(180,145,60,0.28);
  --text:        #f2eee6;
  --muted:       #ded8ca;
  --muted2:      #bbb2a1;
  --gold:        #b8922a;
  --gold2:       #d4ab3f;
  --gold3:       #f0c84a;
  --gold-glow:   rgba(184,146,42,0.15);
  --gold-subtle: rgba(184,146,42,0.06);
  --white:       #f7f3ec;
  --body:        #f1ede5;
  --font-h:      'Cinzel', serif;
  --font-sub:    'Cormorant Garamond', serif;
  --font-b:      'Raleway', sans-serif;
  --radius:      10px;
  --radius-lg:   20px;
}

/* ─── BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-h); font-style: italic; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
picture { display: contents; }
::selection { background: var(--gold); color: #080808; }

/* ─── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; opacity: 0.4; }

/* ─── ANIMATED OWL/FOREST BACKGROUND ─────────────────── */
#scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6,5,4,0.40);
}

/* ─── UTILITY ─────────────────────────────────────────── */
.accent { color: var(--gold2); }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-b);
  font-size: 10px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--gold);
  background: var(--gold-subtle);
  border: 1px solid var(--border2);
  padding: 5px 14px; border-radius: 30px;
  margin-bottom: 18px;
}
.section-heading {
  font-family: var(--font-h); font-style: italic;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 1px;
  color: var(--white);
}
.section-sub {
  font-family: var(--font-sub);
  font-size: 19px;
  font-style: normal;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.7;
  font-weight: 300;
}
.gold-line {
  width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 20px 0;
}

/* Fade-in on scroll */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ─── PROBLEM CHECKLIST ────────────────────────────────── */
.problem-list {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  max-width: 1000px; margin: 44px 0 0;
}
.problem-list::before {
  content: '';
  position: absolute; left: 47px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border2), transparent);
}
.problem-item {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 6px;
  transition: transform .35s ease, border-color .3s, background .3s, box-shadow .3s;
  position: relative;
}
.problem-item:hover {
  transform: translateX(10px);
  border-color: var(--border2);
  background: var(--gold-subtle);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.problem-item:nth-child(2) { margin-left: 30px; }
.problem-item:nth-child(4) { margin-left: 30px; }
.problem-icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-subtle); border: 1px solid var(--border2);
  transition: background .3s, border-color .3s, transform .3s;
}
.problem-item:hover .problem-icon { background: rgba(184,146,42,0.14); transform: scale(1.06); }
.problem-icon img { width: 24px; height: auto; aspect-ratio: 96 / 76; opacity: .95; }
.problem-text {
  font-family: var(--font-sub); font-size: 16.5px; font-style: normal;
  font-weight: 400; color: var(--body); line-height: 1.65; margin: 0;
}
.problem-text b, .problem-text strong { font-style: normal; color: var(--gold2); font-weight: 500; }
@media (max-width: 575px) {
  .problem-list::before { display: none; }
  .problem-item { padding: 18px 16px; gap: 12px; }
  .problem-item:nth-child(2), .problem-item:nth-child(4) { margin-left: 0; }
  .problem-icon { width: 38px; height: 38px; }
  .problem-icon img { width: 20px; }
}

/* ─── PULL-QUOTE PUNCHLINES ─────────────────────────────── */
.punchline {
  position: relative;
  max-width: 760px; margin: 52px auto; padding: 0 28px;
  text-align: center;
}
.punchline-mark {
  font-family: var(--font-h); font-style: italic; font-size: 64px; line-height: 0;
  color: var(--gold); opacity: .32; display: block; margin-bottom: 6px;
}
.punchline-text {
  font-family: var(--font-h); font-style: italic; font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4;
  color: var(--white); letter-spacing: .3px;
}
.punchline-text .accent { color: var(--gold2); }
.punchline-text .punchline-plain { font-style: normal; }
.punchline-rule {
  width: 70px; height: 1px; margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.punchline-final {
  max-width: 820px; margin: 44px auto 0; padding: 40px 36px;
  border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2);
}
.punchline-final .punchline-text { font-size: clamp(24px, 3vw, 38px); }

/* ─── SECTION WRAPPER ──────────────────────────────────── */
.section { padding: 110px 32px; position: relative; z-index: 1; }
.section-inner { max-width: 1200px; margin: 0 auto; }

/* ─── NAVBAR ───────────────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background .4s, box-shadow .4s;
}
#navbar.scrolled {
  background: rgba(6,5,4,0.94);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 40px rgba(0,0,0,0.6);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px;
}
.nav-logo img {
  height: clamp(32px, 3.4vw, 44px);
  width: auto;
  aspect-ratio: 377 / 91;
  filter: drop-shadow(0 0 8px rgba(184,146,42,0.25));
  transition: filter .3s;
}
.nav-logo img:hover { filter: drop-shadow(0 0 16px rgba(212,171,63,0.5)); }
.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-b);
  font-size: 12px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 14px; border-radius: 6px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--gold2); background: var(--gold-subtle); }

.btn-cta {
  background: transparent;
  color: var(--gold);
  font-family: var(--font-b);
  font-weight: 600; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 24px; border-radius: 6px;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-cta:hover {
  background: var(--gold);
  color: #080808;
  box-shadow: 0 0 30px rgba(184,146,42,0.35);
}

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 1px; background: var(--gold); border-radius: 2px; transition: .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 999;
  background: rgba(6,5,4,0.97);
  backdrop-filter: blur(28px);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--font-h); font-style: italic; font-size: 22px; font-weight: 600; letter-spacing: 2px;
  color: var(--muted); transition: color .2s;
}
.mobile-nav a:hover { color: var(--gold2); }

/* ─── HERO ─────────────────────────────────────────────── */
#hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 130px 32px 90px;
  position: relative; z-index: 1;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-b);
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 32px;
}
.hero-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--gold); opacity: 0.7; }
.hero-title {
  font-family: var(--font-h); font-style: italic;
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 10px;
  text-shadow: 0 2px 40px rgba(0,0,0,0.8);
}
.hero-title-sub {
  font-family: var(--font-sub);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 300;
  font-style: normal;
  color: var(--gold2);
  margin-bottom: 32px;
  letter-spacing: 1px;
}
.hero-desc {
  font-family: var(--font-sub);
  font-size: 22px; font-style: normal; font-weight: 300;
  color: var(--muted);
  max-width: 560px; line-height: 1.62;
  margin-bottom: 48px;
}
.hero-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 72px;
}
.btn-hero-main {
  background: var(--gold);
  color: #080808;
  font-family: var(--font-b);
  font-weight: 700; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 16px 40px; border-radius: 4px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .2s, box-shadow .2s, background .2s;
  box-shadow: 0 0 40px rgba(184,146,42,0.3);
}
.btn-hero-main:hover {
  transform: translateY(-2px);
  background: var(--gold3);
  box-shadow: 0 0 60px rgba(184,146,42,0.55);
}
.btn-hero-sec {
  font-family: var(--font-b);
  font-size: 12px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s;
  border-bottom: 1px solid transparent;
}
.btn-hero-sec:hover { color: var(--gold2); border-bottom-color: var(--gold); }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-item {
  font-family: var(--font-b); font-weight: 600; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted2); white-space: nowrap;
}

/* ─── REZULTATI (STATS) ────────────────────────────────── */
#rezultati { background: transparent; }
.results-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 56px;
}
.result-card {
  background: rgba(15,13,10,0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.result-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .35s;
}
.result-card:hover {
  border-color: var(--border2);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(184,146,42,0.06);
}
.result-card:hover::before { opacity: 1; }

.result-label { font-family: var(--font-b); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted2); margin-bottom: 18px; }

.result-desc { font-family: var(--font-sub); font-size: 15px; font-style: normal; font-weight: 300; color: var(--muted); line-height: 1.7; }

/* ─── CASE STUDIES ─────────────────────────────────────── */
#case-studies { background: rgba(10,8,5,0.6); }


/* ─── USLUGE ───────────────────────────────────────────── */
#usluge { background: transparent; }
.usluge-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 56px;
}
.usluga-card {
  background: rgba(14,12,9,0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 32px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  display: flex; gap: 26px; align-items: flex-start;
}
.usluga-card:hover {
  border-color: var(--border2);
  transform: translateY(-3px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.4);
}
.usluga-icon {
  width: 50px; height: 50px; flex-shrink: 0;
  background: var(--gold-subtle);
  border: 1px solid var(--border2);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--gold);
  transition: background .3s;
}
.usluga-card:hover .usluga-icon { background: rgba(184,146,42,0.15); }
.usluga-title { font-family: var(--font-h); font-style: normal; font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; color: var(--white); }
.usluga-desc { font-family: var(--font-sub); font-size: 15px; font-style: normal; font-weight: 300; color: var(--muted); line-height: 1.75; margin-bottom: 14px; }
.usluga-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.usluga-list li {
  font-family: var(--font-b); font-size: 12px; font-weight: 500; letter-spacing: 0.5px;
  color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
.usluga-list li::before { content: '—'; color: var(--gold); font-weight: 400; flex-shrink: 0; }
.usluga-toggle {
  width: 100%; background: none; border: none; text-align: left; padding: 0;
  color: var(--gold); cursor: pointer;
  font-family: var(--font-b); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  transition: color .25s;
}
.usluga-toggle:hover { color: var(--gold3); }
.usluga-toggle .faq-chevron {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--muted);
  transition: transform .35s, background .25s, color .25s;
}
.usluga-card.open .usluga-toggle .faq-chevron {
  transform: rotate(180deg);
  background: var(--gold-subtle);
  border-color: var(--border2);
  color: var(--gold);
}
.usluga-details {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows .4s ease, opacity .3s ease, margin-top .4s ease;
}
.usluga-details-inner { overflow: hidden; min-height: 0; }
.usluga-card.open .usluga-details { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
.usluga-note {
  font-family: var(--font-sub); font-size: 15px; font-style: italic;
  color: var(--muted2); margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
@media (prefers-reduced-motion: reduce) { .usluga-details { transition: none; } }

/* ─── PROCES ───────────────────────────────────────────── */
#proces { background: rgba(10,8,5,0.55); }
.proces-steps {
  display: flex; flex-direction: column; gap: 0; margin-top: 56px;
  max-width: 700px;
}
.proces-step {
  display: flex; gap: 30px; align-items: flex-start;
  padding: 30px 0; border-bottom: 1px solid var(--border);
}
.proces-step:last-child { border-bottom: none; }
.step-num {
  font-family: var(--font-h); font-style: italic; font-size: 36px; font-weight: 800;
  color: #1e1a14; line-height: 1; flex-shrink: 0; width: 50px;
  transition: color .35s;
  text-shadow: none;
}
.proces-step:hover .step-num { color: var(--gold); }
.step-title { font-family: var(--font-h); font-style: normal; font-size: 18px; font-weight: 600; margin-bottom: 8px; letter-spacing: 0.5px; color: var(--white); }
.step-desc { font-family: var(--font-sub); font-size: 15px; font-style: normal; font-weight: 300; color: var(--muted); line-height: 1.75; }

/* ─── INDUSTRIJE ───────────────────────────────────────── */
#industrije { background: transparent; }
.ind-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px;
}
.ind-card {
  background: rgba(14,12,9,0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 18px;
  text-align: center; cursor: default;
  transition: border-color .3s, transform .3s;
}
.ind-card:hover { border-color: var(--border2); transform: translateY(-3px); }
.ind-icon { font-size: 28px; margin-bottom: 12px; opacity: 0.85; }
.ind-name { font-family: var(--font-h); font-style: italic; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; color: var(--text); }

/* ─── TESTIMONIALS ─────────────────────────────────────── */
#testimonials { background: rgba(10,8,5,0.6); }

/* ─── FAQ ──────────────────────────────────────────────── */
#faq { background: transparent; }
.faq-wrap { max-width: 720px; margin: 56px auto 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  color: var(--text);
  font-family: var(--font-h); font-style: italic; font-size: 16px; font-weight: 600; letter-spacing: 0.5px;
  padding: 22px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  transition: color .25s;
}
.faq-q:hover { color: var(--gold2); }
.faq-chevron {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted);
  transition: transform .35s, background .25s, color .25s;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  background: var(--gold-subtle);
  border-color: var(--border2);
  color: var(--gold);
}
.faq-a {
  display: none;
  font-family: var(--font-sub); font-size: 16px; font-style: normal;
  font-weight: 300; color: var(--muted); line-height: 1.85;
  padding-bottom: 22px;
}
.faq-item.open .faq-a { display: block; }

/* ─── CTA BANNER ───────────────────────────────────────── */
#cta-banner { padding: 110px 32px; position: relative; z-index: 1; }
.cta-box {
  max-width: 1050px; margin: 0 auto;
  background: rgba(14,12,9,0.95);
  border: 1px solid var(--border2);
  border-radius: 28px; padding: 70px 80px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(184,146,42,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.cta-title {
  font-family: var(--font-h); font-style: italic;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700; letter-spacing: 2px; margin-bottom: 18px; line-height: 1.12;
  color: var(--white);
}
.cta-sub { font-family: var(--font-sub); font-size: 19px; font-style: normal; font-weight: 300; color: var(--muted); max-width: 500px; margin: 0 auto 38px; line-height: 1.75; }
.cta-guarantee {
  margin-top: 22px; font-family: var(--font-b); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted2);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.cta-guarantee i { color: var(--gold); }

/* ─── FOOTER ───────────────────────────────────────────── */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 64px 32px 32px;
  position: relative; z-index: 1;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand .footer-logo {
  height: clamp(36px, 4.4vw, 52px);
  width: auto;                 /* bez ovoga width="377" atribut razvuce logo */
  aspect-ratio: 377 / 91;
  margin-bottom: 16px; display: block; opacity: 0.85;
}
.footer-desc { font-family: var(--font-sub); font-size: 15px; font-style: normal; font-weight: 300; color: var(--muted); line-height: 1.7; max-width: 280px; }
.footer-col-title { font-family: var(--font-h); font-style: italic; font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; color: var(--gold); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-family: var(--font-b); font-size: 13px; letter-spacing: 0.5px; color: var(--muted); transition: color .2s; }
.footer-links a:hover { color: var(--gold2); }
.footer-bottom {
  max-width: 1200px; margin: 40px auto 0;
  padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-b); font-size: 11px; letter-spacing: 1px; color: var(--muted2);
}
.social-links { display: flex; gap: 8px; }
.social-link {
  width: 34px; height: 34px; border-radius: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14px;
  transition: border-color .25s, color .25s;
}
.social-link:hover { border-color: var(--gold); color: var(--gold); }

/* ─── DIVIDER ──────────────────────────────────────────── */
.gold-divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.2;
  margin: 0;
  position: relative; z-index: 1;
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 991px) {
  .nav-links, .nav-cta-desktop { display: none; }
  .hamburger { display: flex; }
  .results-grid { grid-template-columns: 1fr; }
  
  .usluge-grid { grid-template-columns: 1fr; }
  
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .cta-box { padding: 48px 30px; }
}
@media (max-width: 575px) {
  .section { padding: 72px 20px; }
  
  .ind-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ─── ČITLJIVOST TELA TEKSTA ───────────────────────────────
   Svi pasusi idu na svetlu, skoro belu boju (--body) i na
   težinu 400 — Cormorant na 300 je previše tanak na tamnoj
   pozadini. Sitni verzalni labeli namerno ostaju prigušeniji
   kako bi hijerarhija i dalje postojala. */
p,
.hero-desc, .section-sub, .problem-text,
.usluga-desc, .usluga-note, .usluga-list li,
.step-desc, .result-desc,
.faq-a, .cta-sub, .footer-desc {
  color: var(--body);
}
.hero-desc, .section-sub,
.usluga-desc, .step-desc, .result-desc,
.faq-a, .cta-sub, .footer-desc, .usluga-note {
  font-weight: 400;
}
.usluga-list li { font-weight: 500; }
.footer-links a { color: var(--body); }

/* Naslov jedan stepen manji (za duže rečenice ispod sadržaja) */
.section-heading-sm {
  font-size: clamp(23px, 2.6vw, 36px);
  line-height: 1.2;
  max-width: 1000px;
}

/* ─── KARTICE USLUGA: kuka + sakriven sadržaj ───────────── */
.usluga-hook {
  font-family: var(--font-sub); font-size: 17.5px; font-weight: 500;
  color: var(--white); line-height: 1.6; margin: 0 0 18px;
  padding-left: 16px; border-left: 2px solid var(--gold);
}
.usluga-card:hover .usluga-hook { border-left-color: var(--gold3); }
.usluga-list-title {
  font-family: var(--font-b); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gold2);
  margin: 18px 0 12px;
}
.usluga-toggle { padding: 10px 0 0; }
.usluga-card.open .usluga-toggle { color: var(--gold3); }

/* ─── ISTAKNUTI CTA UNUTAR SEKCIJE ─────────────────────── */
.inline-cta {
  max-width: 860px; margin: 64px auto 0; padding: 46px 40px;
  text-align: center; border-radius: 12px;
  background: rgba(14,12,9,0.72);
  border: 1px solid var(--border2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  position: relative;
}
.inline-cta::before {
  content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.inline-cta-q {
  font-family: var(--font-sub); font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 500;
  color: var(--white); line-height: 1.35; margin-bottom: 16px;
}
.inline-cta-sub {
  font-family: var(--font-sub); font-size: 16px; font-weight: 400;
  color: var(--muted); line-height: 1.75;
  max-width: 620px; margin: 0 auto 30px;
}
@media (max-width: 575px) { .inline-cta { padding: 34px 22px; margin-top: 48px; } }

/* ─── O DIGITOWL-U: uvodna izjava i istaknuti pasus ─────── */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.about-lead {
  font-family: var(--font-sub); font-style: italic;
  font-size: clamp(19px, 1.9vw, 25px); font-weight: 500;
  line-height: 1.5; color: var(--white);
  max-width: 900px; margin: 0 0 6px;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--gold);
}
.about-highlight {
  display: flex; align-items: flex-start; gap: 20px;
  max-width: 880px; margin: 34px 0; padding: 30px 32px;
  background: rgba(184,146,42,0.06);
  border: 1px solid var(--border2); border-radius: 10px;
}
.about-highlight p {
  margin: 0; font-family: var(--font-sub);
  font-size: 17.5px; font-weight: 400; line-height: 1.8; color: var(--body);
}
.about-highlight-mark {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-subtle); border: 1px solid var(--border2);
}
.about-highlight-mark img { width: 24px; height: auto; aspect-ratio: 96 / 76; opacity: .95; }
@media (max-width: 575px) {
  .about-lead { padding-left: 16px; }
  .about-highlight { padding: 22px 18px; gap: 14px; }
  .about-highlight-mark { width: 36px; height: 36px; }
  .about-highlight-mark img { width: 20px; }
}

/* ─── KO STOJI IZA DIGITOWL KONCEPTA ────────────────────── */
.about-person {
  display: grid; grid-template-columns: 320px 1fr; gap: 64px;
  align-items: start; margin-top: 72px;
}
.about-person-media { position: sticky; top: 110px; }
.about-photo {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border2); background: var(--bg3);
  box-shadow: 0 26px 60px rgba(0,0,0,0.5); margin-bottom: 22px;
  position: relative;
}
.about-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45));
}
.about-photo-img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Na užim ekranima okvir postaje 1:1 i 3:4 — kadar se pomera
     naviše da lice ostane u sredini, a ne da se odseče. */
  object-position: center 22%;
}
.about-photo-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-style: italic; font-size: 60px; color: #1a1508;
  background: linear-gradient(150deg, var(--gold3), var(--gold), #8d6f21);
}
.about-name {
  font-family: var(--font-h); font-style: italic; font-size: 20px;
  color: var(--white); line-height: 1.3; margin-bottom: 6px;
}
.about-role {
  font-family: var(--font-b); font-size: 12px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold2); line-height: 1.6;
}
.about-claim {
  font-family: var(--font-h); font-style: italic; font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: .5px;
  color: var(--white); margin: 14px 0 0;
}
.about-person-text > p {
  font-family: var(--font-sub); font-size: 17px; font-weight: 400;
  line-height: 1.9; color: var(--body); margin: 0 0 22px; max-width: 780px;
}
.about-punchline {
  font-style: italic; color: var(--gold2) !important;
  border-left: 2px solid var(--border2); padding-left: 20px; margin-top: 30px !important;
}
@media (max-width: 991px) {
  .about-person { grid-template-columns: 1fr; gap: 36px; margin-top: 52px; }
  .about-person-media { position: static; max-width: 300px; }
  .about-photo { aspect-ratio: 1 / 1; }
}

/* Kartice usluga zadržavaju svoju visinu — otvaranje jedne
   ne rasteže susednu (u sekciji Pristup ostaje ujednačena visina). */
#usluge .usluge-grid { align-items: start; }

/* Bold naglasak unutar FAQ odgovora */
.faq-a strong { color: var(--gold3); font-weight: 600; font-style: normal; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE OPTIMIZACIJA
   Redosled: osnove → telefon → tablet → laptop → veliki
   monitori → 27". Ovaj blok je poslednji u fajlu, pa ima
   prednost nad ranijim pravilima.
   ═══════════════════════════════════════════════════════════ */

/* ── Osnove za sve uređaje ─────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, canvas, svg { max-width: 100%; }
.section-inner, .hero-inner, .footer-inner, .footer-bottom { width: 100%; }

/* Na dodir nema hover-a: bez "zaglavljenih" efekata posle tapa */
@media (hover: none) {
  .problem-item:hover, .usluga-card:hover, .ind-card:hover,
  .result-card:hover { transform: none; }
}

/* ── TELEFONI (do 575px) ───────────────────────────────── */
@media (max-width: 575px) {
  .section, #cta-banner { padding: 64px 18px; }
  .section-heading { font-size: clamp(24px, 7vw, 32px); letter-spacing: .5px; }
  .section-heading-sm { font-size: clamp(20px, 6vw, 26px); }
  .section-sub { font-size: 16px; line-height: 1.8; }
  .hero-desc { font-size: 17.5px; line-height: 1.6; }

  .hero-title { font-size: clamp(32px, 10vw, 46px); letter-spacing: 1px; }
  .hero-title-sub { font-size: clamp(18px, 5.5vw, 24px); }
  .hero-eyebrow { font-size: 10px; letter-spacing: 2px; margin-bottom: 22px; }
  .btn-hero-main, .btn-cta { width: 100%; justify-content: center; text-align: center; }
  

  .problem-list { margin-top: 34px; gap: 12px; }
  .problem-text { font-size: 15.5px; }

  .usluge-grid { gap: 14px; margin-top: 36px; }
  .usluga-card { flex-direction: column; gap: 16px; padding: 26px 20px; }
  .usluga-icon { width: 44px; height: 44px; font-size: 18px; }
  .usluga-hook { font-size: 16px; padding-left: 14px; }
  .usluga-title { font-size: 17px; }

  .proces-steps { margin-top: 36px; }
  .proces-step { gap: 16px; padding: 24px 0; }
  .step-num { font-size: 28px; width: 38px; }
  .step-title { font-size: 16.5px; }

  .about-person { margin-top: 40px; gap: 28px; }
  .about-person-media { margin: 0 auto; max-width: 260px; text-align: center; }
  .about-lead { font-size: 17.5px; }
  .about-claim { font-size: clamp(21px, 6vw, 26px); }
  .about-person-text > p { font-size: 16px; line-height: 1.85; }
  .about-highlight { flex-direction: column; gap: 14px; }

  .faq-wrap { margin-top: 34px; }
  .faq-q { font-size: 14.5px; padding: 18px 0; gap: 10px; }
  .faq-a { font-size: 15.5px; }

  .cta-box { padding: 40px 22px; border-radius: 18px; }
  .cta-title { font-size: clamp(24px, 7.5vw, 34px); letter-spacing: 1px; }
  .cta-sub { font-size: 16px; margin-bottom: 28px; }

  .punchline { margin: 36px auto; padding: 0 6px; }
  .punchline-text { font-size: clamp(19px, 5.5vw, 24px); }

  .mobile-nav { gap: 14px; padding: 24px; }
  .mobile-nav a { font-size: 19px; }

  footer { padding: 48px 18px 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Vrlo uski ekrani (iPhone SE i slični) */
@media (max-width: 380px) {
  .section, #cta-banner { padding: 56px 14px; }
  .hero-title { font-size: 30px; }
  .problem-q, .problem-item { padding: 16px 14px; }
  .usluga-card { padding: 22px 16px; }
}

/* ── TABLETI (576–991px) ───────────────────────────────── */
@media (min-width: 576px) and (max-width: 991px) {
  .section, #cta-banner { padding: 88px 28px; }
  .section-heading { font-size: clamp(28px, 4.6vw, 40px); }
  .usluge-grid { gap: 16px; }
  .usluga-card { padding: 30px 26px; }
  .proces-steps { max-width: none; }
  .about-person-media { margin: 0 auto; text-align: center; max-width: 320px; }
  .about-person-text > p { font-size: 16.5px; }
  .inline-cta { padding: 40px 32px; }
  .cta-box { padding: 56px 40px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-desc { max-width: 520px; }
}

/* ── LAPTOP (992–1439px) ───────────────────────────────── */
@media (min-width: 992px) and (max-width: 1439px) {
  .section, #cta-banner { padding: 100px 40px; }
  .section-inner, .hero-inner, .footer-inner, .footer-bottom { max-width: 1180px; }
  .about-person { grid-template-columns: 280px 1fr; gap: 48px; }
}

/* ── VELIKI MONITORI (1440–1919px) ─────────────────────── */
@media (min-width: 1440px) {
  .section, #cta-banner { padding: 130px 48px; }
  .section-inner, .hero-inner, .footer-inner, .footer-bottom { max-width: 1320px; }
  .about-person { grid-template-columns: 340px 1fr; gap: 72px; }
  .faq-wrap { max-width: 860px; }
  .cta-box { max-width: 1150px; }
}

/* ── 27" I VEĆI (od 1920px, optimizovano za 2560px) ────── */
@media (min-width: 1920px) {
  .section, #cta-banner { padding: 160px 64px; }
  .section-inner, .hero-inner, .footer-inner, .footer-bottom { max-width: 1560px; }

  .hero-title { font-size: clamp(62px, 3.6vw, 74px); }
  .hero-title-sub { font-size: clamp(38px, 2.2vw, 44px); }
  .hero-desc { font-size: 24px; max-width: 740px; }
  .section-heading { font-size: clamp(48px, 3.2vw, 62px); }
  .section-heading-sm { font-size: clamp(36px, 2.2vw, 42px); }
  .section-sub { font-size: 19px; max-width: 860px; }

  .problem-list { max-width: 1160px; }
  .problem-text { font-size: 18.5px; }
  .usluge-grid { gap: 24px; }
  .usluga-card { padding: 44px 40px; }
  .usluga-hook { font-size: 19.5px; }
  .usluga-title { font-size: 21px; }
  .usluga-desc, .usluga-note { font-size: 17px; }

  .proces-steps { max-width: 900px; }
  .step-title { font-size: 21px; }
  .step-desc { font-size: 17px; }

  .about-person { grid-template-columns: 400px 1fr; gap: 88px; }
  .about-lead { font-size: 28px; }
  .about-claim { font-size: 40px; }
  .about-person-text > p { font-size: 19px; max-width: 900px; }
  .about-highlight { max-width: 1000px; }
  .about-highlight p { font-size: 19px; }

  .faq-wrap { max-width: 960px; }
  .faq-q { font-size: 19px; padding: 26px 0; }
  .faq-a { font-size: 17.5px; }

  .inline-cta { max-width: 980px; padding: 56px 48px; }
  .inline-cta-q { font-size: 34px; }
  .inline-cta-sub { font-size: 18px; max-width: 700px; }
  .cta-box { max-width: 1280px; padding: 90px 100px; }
  .cta-title { font-size: clamp(52px, 3vw, 60px); }
  .cta-sub { font-size: 21px; max-width: 600px; }

  .footer-desc { font-size: 16px; max-width: 340px; }
  .footer-links a { font-size: 14.5px; }
}

/* Iznad 2560px tekst prestaje da raste, samo se centrira */
@media (min-width: 2560px) {
  .section-inner, .hero-inner, .footer-inner, .footer-bottom { max-width: 1720px; }
  .section, #cta-banner { padding: 180px 80px; }
}

/* Nizak ekran u pejzažnom režimu (telefon okrenut bočno) */
@media (max-height: 520px) and (orientation: landscape) {
  #hero { min-height: auto; padding-top: 110px; padding-bottom: 70px; }
  .mobile-nav { justify-content: flex-start; overflow-y: auto; padding-top: 90px; }
}

/* ═══════════════════════════════════════════════════════════
   ZAKAZIVANJE: kalendar + forma
   ═══════════════════════════════════════════════════════════ */
.booking-card {
  display: grid; grid-template-columns: 400px 1fr; gap: 0;
  max-width: 1080px; margin: 56px auto 0;
  background: rgba(14,12,9,0.96);
  border: 1px solid var(--border2); border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.booking-side {
  padding: 38px 34px; background: rgba(0,0,0,0.28);
  border-right: 1px solid var(--border);
}
.booking-form { padding: 38px 34px; }
.booking-step-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-b); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gold2);
  margin-bottom: 18px;
}
.booking-step-title span {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-subtle); border: 1px solid var(--border2);
  font-size: 11px; color: var(--gold);
}
.booking-step-title.mt-4 { margin-top: 30px; }

/* Kalendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-month {
  font-family: var(--font-h); font-style: italic; font-size: 17px;
  color: var(--white); letter-spacing: .5px;
}
.cal-nav {
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, color .25s;
}
.cal-nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.cal-dow, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow span {
  text-align: center; font-family: var(--font-b); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted2); padding-bottom: 8px;
}
.cal-day {
  aspect-ratio: 1 / 1; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--body);
  font-family: var(--font-b); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
}
.cal-day:hover:not(:disabled) { border-color: var(--border2); background: var(--gold-subtle); }
.cal-day:disabled { color: #4a4740; cursor: not-allowed; }
.cal-day.today { border-color: var(--border2); }
.cal-day.selected {
  background: var(--gold); border-color: var(--gold);
  color: #14110a; font-weight: 700;
}
.cal-day.blank { visibility: hidden; }

/* Termini */
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot {
  padding: 10px 4px; border-radius: 8px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border); color: var(--body);
  font-family: var(--font-b); font-size: 13px; letter-spacing: .5px;
  transition: border-color .2s, background .2s, color .2s;
}
.slot:hover { border-color: var(--gold); color: var(--gold2); }
.slot.selected { background: var(--gold); border-color: var(--gold); color: #14110a; font-weight: 700; }
.slot-empty {
  grid-column: 1 / -1; font-family: var(--font-sub); font-size: 15px;
  color: var(--muted2); font-style: italic; padding: 6px 0;
}
.cal-note {
  display: flex; gap: 8px; margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-sub); font-size: 14px; line-height: 1.65; color: var(--muted);
}
.cal-note i { color: var(--gold); margin-top: 3px; }

/* Polja forme */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 16px; }
.field label, .consent span {
  display: block; font-family: var(--font-b); font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
}
.field label i, .consent span i { color: var(--gold); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 8px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border);
  color: var(--white); font-family: var(--font-sub); font-size: 16px;
  transition: border-color .25s, background .25s;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(0,0,0,0.5);
}
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: #b5533f; }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 6px 0 20px; }
.consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }
.consent span {
  margin: 0; text-transform: none; letter-spacing: .2px;
  font-family: var(--font-sub); font-size: 14px; font-weight: 400;
  color: var(--muted); line-height: 1.6;
}
.consent.invalid span { color: #d08b7c; }
.booking-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; margin-bottom: 18px; border-radius: 8px;
  background: var(--gold-subtle); border: 1px solid var(--border2);
  font-family: var(--font-sub); font-size: 15px; color: var(--body);
}
.booking-summary i { color: var(--gold); }
.booking-summary.ready { border-color: var(--gold); }
.booking-submit { width: 100%; justify-content: center; }
.booking-submit[disabled] { opacity: .55; cursor: not-allowed; }
.form-status {
  margin-top: 16px; font-family: var(--font-sub); font-size: 15px;
  line-height: 1.65; display: none;
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid transparent; border-left-width: 3px;
}
.form-status.show { display: block; }
.form-status strong { font-weight: 600; display: block; margin-bottom: 4px; }
.form-status.ok {
  color: var(--gold2);
  background: rgba(184,146,42,.09);
  border-color: rgba(184,146,42,.28);
  border-left-color: var(--gold);
}
.form-status.err {
  color: #d9a294;
  background: rgba(190,110,90,.09);
  border-color: rgba(190,110,90,.28);
  border-left-color: #c2745f;
}
.form-status a { color: var(--gold); text-decoration: underline; }

@media (max-width: 991px) {
  .booking-card { grid-template-columns: 1fr; }
  .booking-side { border-right: none; border-bottom: 1px solid var(--border); }
}
@media (max-width: 575px) {
  .booking-card { margin-top: 36px; border-radius: 14px; }
  .booking-side, .booking-form { padding: 26px 18px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .field input, .field select, .field textarea { font-size: 16px; }
}
@media (min-width: 1920px) {
  .booking-card { max-width: 1320px; grid-template-columns: 480px 1fr; }
  .booking-side, .booking-form { padding: 52px 46px; }
  .field input, .field select, .field textarea { font-size: 17px; padding: 15px 17px; }
}

/* "Šta se menja": 4 → 2 → 1 kolona */
.results-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .results-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .results-grid-4 { grid-template-columns: 1fr; } }

/* Kontakt u footeru: telefon i email kao klikabilni linkovi */
.footer-contact li a, .footer-loc {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; line-height: 1.5;
}
.footer-contact i { color: var(--gold); font-size: 14px; flex-shrink: 0; }
.footer-loc { font-family: var(--font-b); letter-spacing: .5px; color: var(--muted); }
.footer-contact li a:hover i { color: var(--gold3); }
@media (max-width: 575px) {
  .footer-contact li a, .footer-loc { font-size: 15.5px; }
  .footer-contact li { padding: 3px 0; }   /* veća zona za prst */
}

/* Footer: logo preko cele širine, ispod tri ravnomerne kolone */
.footer-inner { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
.footer-brand {
  grid-column: 1 / -1;
  padding-bottom: 28px; border-bottom: 1px solid var(--border);
}
.footer-brand .footer-logo { margin-bottom: 0; }
@media (max-width: 767px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; row-gap: 28px; }
  .footer-brand { padding-bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   MODAL ZA ZAKAZIVANJE
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 20px;
  background: rgba(4,4,3,0.82); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .28s ease;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.show { opacity: 1; }
.modal-panel {
  position: relative; width: 100%; max-width: 1000px;
  max-height: calc(100vh - 56px); overflow-y: auto;
  background: linear-gradient(180deg, #14110c, #0d0b08);
  border: 1px solid var(--border2); border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.75);
  padding: 40px 40px 36px;
  transform: translateY(18px) scale(.985);
  transition: transform .3s ease;
}
.modal-overlay.show .modal-panel { transform: none; }
.modal-panel::-webkit-scrollbar { width: 8px; }
.modal-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
.modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  transition: border-color .25s, color .25s, transform .25s;
}
.modal-close:hover { border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }
.modal-head { text-align: center; margin-bottom: 30px; }
.modal-head .tag { justify-content: center; }
.modal-title {
  font-family: var(--font-h); font-style: italic; font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: 1px;
  color: var(--white); margin: 14px 0 12px;
}
.modal-sub {
  font-family: var(--font-sub); font-size: 16px; font-weight: 400;
  color: var(--muted); line-height: 1.75; max-width: 620px; margin: 0 auto;
}
/* kartica unutar modala nema svoj okvir ni senku */
.modal-panel .booking-card {
  margin: 0; max-width: none; border: 1px solid var(--border);
  box-shadow: none; background: transparent; backdrop-filter: none;
}
.modal-panel .booking-side { padding: 30px 28px; }
.modal-panel .booking-form { padding: 30px 28px; }

@media (max-width: 767px) {
  .modal-overlay { padding: 0; }
  .modal-panel {
    max-width: none; max-height: 100vh; height: 100%;
    border-radius: 0; border: none; padding: 64px 16px 28px;
  }
  .modal-head { margin-bottom: 22px; }
  .modal-panel .booking-side, .modal-panel .booking-form { padding: 24px 18px; }
}

/* ═══════════════════════════════════════════════════════════
   PRILAGOĐENI DROPDOWN (native <select> lista se ne stilizuje)
   ═══════════════════════════════════════════════════════════ */
.csel { position: relative; }
.csel-btn {
  width: 100%; padding: 13px 44px 13px 15px; border-radius: 8px; cursor: pointer;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border); color: var(--white);
  font-family: var(--font-sub); font-size: 16px; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: border-color .25s, background .25s;
}
.csel-btn:hover { border-color: var(--border2); }
.csel-btn i { color: var(--gold); font-size: 12px; transition: transform .25s; }
.csel.open .csel-btn { border-color: var(--gold); background: rgba(0,0,0,0.5); }
.csel.open .csel-btn i { transform: rotate(180deg); }
.csel-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  list-style: none; margin: 0; padding: 6px;
  background: #14110c; border: 1px solid var(--gold);
  border-radius: 10px; box-shadow: 0 22px 50px rgba(0,0,0,0.65);
  max-height: 280px; overflow-y: auto;
  display: none;
}
.csel.open .csel-list { display: block; }
.csel-list li {
  padding: 11px 14px; border-radius: 6px; cursor: pointer;
  font-family: var(--font-sub); font-size: 15.5px; color: var(--body);
  line-height: 1.4; transition: background .18s, color .18s;
}
.csel-list li:hover, .csel-list li.active { background: var(--gold-subtle); color: var(--gold3); }
.csel-list li[aria-selected="true"] {
  background: var(--gold); color: #14110a; font-weight: 600;
}

/* Broj telefona: sistemski sans font sa tabelarnim ciframa —
   Raleway i Cormorant imaju dekorativne brojeve koji se teško čitaju */
.phone-link {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 15px !important; font-weight: 500; letter-spacing: .6px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 575px) { .phone-link { font-size: 16px !important; } }

/* ─── "Ko stoji iza Digitowl koncepta" ────────────────────
   Desktop: zaglavlje preko cele širine, pa fotografija levo
   i tekst desno. Mobilni: zaglavlje, pa tekst koji obavija
   fotografiju postavljenu uz desnu ivicu. */
.about-person-head { grid-column: 1 / -1; margin-bottom: 8px; }
.about-person-head .about-claim { margin-top: 14px; }

@media (max-width: 991px) {
  .about-person { display: block; }
  .about-person-head { margin-bottom: 22px; }

  .about-person-media {
    float: right; width: 45%; max-width: 220px;
    margin: 4px 0 16px 20px; text-align: center;
  }
  .about-photo { aspect-ratio: 3 / 4; margin-bottom: 12px; }
  .about-name { font-size: 16px; }
  .about-role { font-size: 10.5px; letter-spacing: 1px; }

  .about-person-text { display: block; }
  .about-person-text > p { max-width: none; }
  .about-punchline { clear: both; }          /* zaključak ide preko cele širine */
  .about-person::after { content: ''; display: block; clear: both; }
}

@media (max-width: 380px) {
  .about-person-media { width: 50%; max-width: 150px; margin-left: 14px; }
}

/* ─── PRAVNE STRANICE (politika privatnosti, uslovi) ───── */
.doc-page { padding-top: 120px; }
.doc { position: relative; z-index: 1; padding: 40px 0 100px; }
.doc-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.doc-inner h2 {
  font-family: var(--font-h); font-style: italic; font-weight: 600;
  font-size: 22px; color: var(--gold2);
  margin: 48px 0 14px; letter-spacing: .3px;
}
.doc-inner p, .doc-list li, .doc-table td {
  font-family: var(--font-sub); font-style: normal; font-weight: 400;
  font-size: 17.5px; line-height: 1.7; color: var(--body);
}
.doc-inner p { margin-bottom: 14px; }
.doc-inner a { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; }
.doc-inner a:hover { color: var(--gold3); }
.doc-meta {
  font-family: var(--font-b) !important; font-size: 13px !important;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted2) !important;
  margin: 20px 0 32px !important;
}
.doc-list { list-style: none; margin: 0 0 18px; padding: 0; }
.doc-list li { position: relative; padding: 5px 0 5px 22px; }
.doc-list li::before {
  content: ''; position: absolute; left: 2px; top: 16px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.doc-note {
  border-left: 2px solid var(--border2); padding: 12px 0 12px 18px;
  color: var(--muted2) !important; font-size: 16px !important;
}
.doc-table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; }
.doc-table th {
  font-family: var(--font-h); font-style: italic; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border2);
}
.doc-table td { padding: 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.doc-table tr:last-child td { border-bottom: none; }
@media (max-width: 575px) {
  .doc-page { padding-top: 96px; }
  .doc-inner h2 { font-size: 19px; margin-top: 38px; }
  .doc-inner p, .doc-list li, .doc-table td { font-size: 16px; }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td { display: block; width: 100%; }
  .doc-table thead { display: none; }
  .doc-table tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .doc-table td { border: none; padding: 4px 0; }
  .doc-table td:first-child { font-weight: 600; color: var(--text); }
}

/* ─── PRAVNI PODACI U FOOTERU ──────────────────────────── */
.footer-bottom { display: flex; flex-direction: column; gap: 8px; }
.footer-legal {
  font-size: 12px; line-height: 1.6; color: var(--muted2);
  opacity: .75; max-width: 760px;
}
@media (max-width: 575px) { .footer-legal { font-size: 11px; } }

/* Vidljiva oznaka za podatke koje tek treba popuniti */
.popuni {
  background: rgba(184,146,42,.16); border: 1px dashed var(--gold);
  border-radius: 4px; padding: 1px 7px; color: var(--gold2);
  font-size: .92em; white-space: nowrap;
}

/* ─── PRESKOČI NA SADRŽAJ ───────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--gold); color: #0a0a0a;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  font-family: var(--font-b); font-size: 14px; font-weight: 600;
  letter-spacing: .5px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* hamburger je sada <button> — poništi podrazumevani izgled dugmeta */
.hamburger { background: none; border: 0; padding: 0; -webkit-appearance: none; appearance: none; }

/* ═══════════════════════════════════════════════════════════
   RASPORED — dvokolonska zaglavlja i mreža
   Ranije je sve stajalo u jednoj levoj koloni širine 560px
   unutar kontejnera od 1200px, pa je desna polovina zjapila.
   ═══════════════════════════════════════════════════════════ */

/* ── Utility klase koje su bile u HTML-u, a nikad definisane ──
   (HTML je računao na Bootstrap grid koji se nije učitavao) */
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 64px;
}
.col-lg-5 { grid-column: span 5; }
.col-lg-7 { grid-column: span 7; }
.align-items-start { align-items: start; }
.text-center { text-align: center; }
.mt-4 { margin-top: 24px; }
.mt-5 { margin-top: 48px; }

/* ── Zaglavlje sekcije u dve kolone ──
   Naslov drži levu ivicu, opis prelazi u desnu polovinu.
   Oko pređe vodoravno pre nego što krene niz kartice. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 72px;
  align-items: start;
}
.section-head > .tag             { grid-column: 1; grid-row: 1; }
.section-head > .section-heading { grid-column: 1; grid-row: 2; margin: 0; }
.section-head > .gold-line       { grid-column: 1; grid-row: 3; }
.section-head > .section-sub {
  grid-column: 2;
  grid-row: 2 / span 2;
  max-width: 46ch;
  margin: 6px 0 0;            /* poravnanje sa gornjom ivicom naslova */
}

/* ── Proces: naslov ostaje uz korake dok se skroluje ── */
@media (min-width: 992px) {
  #proces .col-lg-5 { position: sticky; top: 128px; }
}

/* ── Problemi u dve kolone umesto jedne dugačke liste ── */
.problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: none;
}

/* ── FAQ: centrirano zaglavlje kao namerni prekid ritma ── */
#faq .section-heading { text-align: center; }
#faq .faq-wrap { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ── Razmak između sekcija: malo disanja bez razvlačenja ── */
@media (min-width: 1200px) {
  .section { padding: 128px 32px; }
}

/* ── Slaganje na užim ekranima ── */
@media (max-width: 991px) {
  .row { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .col-lg-5, .col-lg-7 { grid-column: 1; }
  .section-head { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .section-head > .section-heading,
  .section-head > .gold-line,
  .section-head > .section-sub { grid-column: 1; }
  .section-head > .section-sub { grid-row: auto; max-width: 60ch; margin-top: 4px; }
  .problem-list { grid-template-columns: minmax(0, 1fr); }
}